scripter(kleine aanpasing)

**marco1981** · 1101 × bekeken sinds 05-08-2008, 12:58

Ik zoek iemand die mij even kan helpen met mijn website mijn layout zit niet in het middden en de grote van de layout wil ik groter hebben als er iemand is die dan heel even voor mij wilt doen zou ik dat zeer op prijs stellen het is muschien 3 min werk voor een scripter aleen ik kom er niet uit zou de gene die dit even voor mij wilt doen zich aan willen melden op msn mvg

**Bart A.** · 06-08-2008, 23:44

Ik probeerde je toe te voegen op msn maar je lijkt offline te zijn (2x vandaag). Maakt niet uit. Als het alleen om horizontaal centreren gaat, dan is het vrij makkelijk. Voeg dit aan je CSS toe:

#<pagina> {
margin: auto;
}

Hierbij is <pagina> de id van je div waarin de hele pagina staat. Als dat niet werkt, kun je ook dit proberen:

#<pagina> {
position: absolute;
left: 50%;
width: <breedte>px;
margin-left: -<breedte/2>px;
}

Hierbij is <breedte> de breedte die je hiervoor gebruikt (en <breedte/2> natuurlijk de helft hiervan). Werkt in ieder geval in FF2/3 en IE6/7, maar ook in een hoop andere browsers. Enig nadeel is wel dat er zo altijd gecentreerd wordt, m.a.w. als de pagina breder is dan je browservenster, valt nu zowel links als rechts een stuk buiten beeld (i.p.v. alleen rechts).

Ik weet niet waarom je moeite hebt de grootte van je site te veranderen (was handig als je de url er even bij had vermeld). Mits je niet aan plaatjes gebonden bent is dat ook een kwestie van de CSS aanpassen lijkt me. En als je geen CSS gebruikt wordt het hoog tijd dat wél te gaan doen.

Succes!

**R v d Heijden** · 07-08-2008, 13:43

dit werkt beter:

#<pagina> {
position: relative;
width: <breedte>px;
margin: 0 auto;
}

**Tim B.** · 09-08-2008, 14:52

Origineel gepost door Bart A.

#<pagina> {
position: absolute;
left: 50%;
width: <breedte>px;
margin-left: -<breedte/2>px;

Niet helemaal de correcte manier... resize je browser, wat zie je? ja hetgeen wat niet op je scherm past verdwijnt in het niets .... niet de bedoeling

Doe het dus op de goede manier:

zorg ervoor dat je een Doctype hebt!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(voorbeeld het kan ook iets anders zijn zoals strict etc)

Je zorgt dat je 1 div rondom je pagina plaatst (waarschijnlijk heb je dit al, en daaraan geef je dan je width etc mee)

Code:

#<container> {
width: <breedte>px;
margin-left: auto;
margin-right: auto;
}

voila die staat in het midden zonder dat er zich andere problemen voor doen
PS: je kan altijd met mij contact openen op msn(reeds toegevoegd) of PM

**Tim B.** · 09-08-2008, 17:13

opgelost....

**Emile Nijssen** · 10-08-2008, 11:28

Origineel gepost door Tim B.

Je zorgt dat je 1 div rondom je pagina plaatst (waarschijnlijk heb je dit al, en daaraan geef je dan je width etc mee)

Code:

#<container> {
width: <breedte>px;
margin-left: auto;
margin-right: auto;
}

De meest correcte manier die crossbrowser werkt is volgens mij de volgende.

Code:

#container{
position: relative;
width: 800px;
margin: 0 auto; /* Shorthand tags */
}

Leuke discussie overigens :-)

**Tim B.** · 10-08-2008, 11:33

Origineel gepost door Emile Nijssen

De meest correcte manier die crossbrowser werkt is volgens mij de volgende.

Code:

#container{
position: relative;
width: 800px;
margin: 0 auto; /* Shorthand tags */
}

Leuke discussie overigens :-)

Kan wel zijn, maar bij mijn opleiding voor web development zeiden ze toch anders. Tevens als je ook de compatibiliteit bekijkt bij oudere browsers van 'position:relative' kom je echter niet zo ver. Vandaar dat de andere manier in mijn opzicht betere browser support heeft...

Maar ik ga hier verder geen woorden aan vuil maken(iedereen doet hij hij / zij wilt), ik probeer gewoon zoveel mogelijk browsers te supporten en daarvoor is 'position' in css niet zo de geknipte stuff voor ;)

**vince verberckt** · 11-08-2008, 08:33

Origineel gepost door Tim B.

Kan wel zijn, maar bij mijn opleiding voor web development zeiden ze toch anders. Tevens als je ook de compatibiliteit bekijkt bij oudere browsers van 'position:relative' kom je echter niet zo ver. Vandaar dat de andere manier in mijn opzicht betere browser support heeft...

Maar ik ga hier verder geen woorden aan vuil maken(iedereen doet hij hij / zij wilt), ik probeer gewoon zoveel mogelijk browsers te supporten en daarvoor is 'position' in css niet zo de geknipte stuff voor ;)

Wel in internet explorer 6 en 5 werkt margin: 0px auto; toch niet ? Daar op de div erboven text-align: center; zetten dan.

**Emile Nijssen** · 11-08-2008, 15:33

Ik heb de proef eens op de som genomen. Dit is het resultaat:

http://i36.tinypic.com/9acm6b.gif

(Klik om te vergroten)

URL is hier te vinden: http://browsershots.org/http://srv.w...et/center.html

Overigens is de batch met de blauwe achtergrond niet volledig afgerond, omdat het wel duidelijk was dat er geen verschil in zit :)

Ik ben nu bezig met margin:auto; alleen. De resultaten kun je zien op bovenstaande pagina als hij klaar is.

**Bart A.** · 13-08-2008, 13:06

Origineel gepost door Tim B.

Niet helemaal de correcte manier... resize je browser, wat zie je? ja hetgeen wat niet op je scherm past verdwijnt in het niets .... niet de bedoeling

Even voor de goede orde, wat bedoel je met "verdwijnt in het niets"? Bij mij hier valt er een stukje buiten beeld, maar dat heb je sowieso als het in de breedte niet in het beeld past. Enige verschil wat ik zie is dat er nu zowel links als rechts iets afvalt, i.p.v. alleen rechts.

Ik ben het overigens met je eens dat het niet dé beste manier is, daarom geef ik zelf ook de voorkeur aan margin:auto; (ondanks IE5/6, maar er zijn andere manieren om dat op te lossen).

**Tim B.** · 13-08-2008, 13:22

Origineel gepost door Bart A.

Even voor de goede orde, wat bedoel je met "verdwijnt in het niets"? Bij mij hier valt er een stukje buiten beeld, maar dat heb je sowieso als het in de breedte niet in het beeld past. Enige verschil wat ik zie is dat er nu zowel links als rechts iets afvalt, i.p.v. alleen rechts.

Ik ben het overigens met je eens dat het niet dé beste manier is, daarom geef ik zelf ook de voorkeur aan margin:auto; (ondanks IE5/6, maar er zijn andere manieren om dat op te lossen).

Wel, als je absolute waarden gebruikt (probeer dit maar eens) dan krijg je het verschijnsel dat je pagina ALTIJD in het midden staat ook al is je scherm te klein. Op zich niet erg maar het probleem is dan dat er links en rechts een deel achter het scherm verdwijnt, dit is redelijk lastig want zo verdwijnt design / tekst. (Naar links kan je niet scrollen ! ) Met margin-left / right: auto; zal het scherm als het te klein is mooi links aansluiten en rechts verdwijnen met scroll bars. Dus dat kan je dan nog lezen mits scrollen.

**Bart A.** · 13-08-2008, 14:26

Origineel gepost door Tim B.

Wel, als je absolute waarden gebruikt (probeer dit maar eens) dan krijg je het verschijnsel dat je pagina ALTIJD in het midden staat ook al is je scherm te klein. Op zich niet erg maar het probleem is dan dat er links en rechts een deel achter het scherm verdwijnt, dit is redelijk lastig want zo verdwijnt design / tekst. (Naar links kan je niet scrollen ! ) Met margin-left / right: auto; zal het scherm als het te klein is mooi links aansluiten en rechts verdwijnen met scroll bars. Dus dat kan je dan nog lezen mits scrollen.

Ah ja bedoel je dat. Was ik me inderdaad van bewust. Automatische margins zijn sowieso natuurlijk een stuk eleganter. Gelukkig slinkt het aandeel IE5/6 gestaag (vooral 5 natuurlijk), zodat hacks steeds minder hard nodig zijn.

**marco1981** · 13-08-2008, 14:51

Hallo iedereen iemand van www.futureweb.be heeft mij geholpen met het centreren ik moet zeggen dat deze jongen mijn perfeckt heeft geholpen (aanrader dus ) ik zoek aleen nog wel iemand die mij met wat kleine dingen wilt helpen zoals even alles nakijken hoe en wat er op mijn site staat gewoon even iemand die veel weet die mij even opweg kan helpen dus is er iemand die mijn site even wilt nakijken op code's enz enz meld je dan even aan [email address]

het gaat om een crime game dus iemand met rpg mafia crime game evaring zou zeeeeer welkom zijn tenzij er mensen zijn die er ook alles van af weten ik hoop dat er mensen zijn die mij even willen helpen hier mee ik geef altijd goede reacties op deze site als iemand mij geholpen heeft zoals www.futureweb.be hij heeft mij goed geholpen darom deze zeer goede reclame

scripter(kleine aanpasing)