pagina wil niet in de midden

Status
Niet open voor verdere reacties.
G

gast0187

Gebruiker
Lid geworden
4 nov 2012
Berichten
266
waarom lukt dit niet, dit is toch het juiste commando: margin: 0px auto; ?

css:

Code: 
#container{
                margin: 0px auto;
            }
            #fotos{
                float: left;
            }

HTML: 
<div id="container">
            <div>
                <h1>hggjgjg</h1>
            </div>
            <div id="fotos">
                <img src="hhh.gif" /><br><img src="hhhh.jpg" />
            </div>
            <div>
                <select id="hh" size="2">
                    <option selected>ggggg</option>
                    <option>ggggg</option>          
                </select>
                <br>
                <select id="gg" size="5">
                    <option selected>ggg</option>
                    <option>pppp</option>
                    <option>mmppp</option>
                    <option>ttttt</option>
                    <option>bbbbbb</option>
                </select>
                <span id="dd"></span>
                <span id="gg"></span>
                <input type="button" onclick="jaka()" value="ziel" id="fgf"/>
            </div>
        </div>

Alvast op voorhand bedankt.
 
Dat is een commando dat ik niet mag gebruiken.

Het is voor een schoolopdracht en het commando center mag niet worden gebruikt. (HTML 5)

Dat is een uitgestorven commando dat al lang niet meer wordt gebruikt.

Andere oplossingen?
 
Laatst bewerkt:
Het was voor doel een klein stukje html voor javascript maar bij pure html sites heb ik dit nog nooit voor gehad omdat ik daar altijd een container met width gebruik enzo.

Ik heb ondertussen zelf de oplossing:

CSS:

Code: 
body {
                text-align: center;
            }
            #container{
                width: 450px;
                height: 350px;
                margin: 0 auto;
                text-align: left;
                border: 2px solid red;
            }
            #fotos{
                float: left;
            }

Met dit lukt het.

text-align: left; zorgt ervoor dat alles op zijn plaats blijft. (wat links moet staan dat dit niet mee gecentreerd wordt)
Blijkbaar is een width ook vereist (eerder kwam ik dit niet tegen maar toen gebruikte ik standaard altijd een width)
height is neit persé nodig
margin blijft uiteraard
en border is als doel om te kijken hoe breed het moet (achteraf doe ik die weg)
en alles staat mooi links naast de foto's en dat in het midden.

de site waar ik dit las: http://www.webmasterstart.nl/css/website-centreren-met-css.html

Hopelijk hebben anderen hier ook nog iets aan. (daarom dat ik de oplossing nog even post)
 
Laatst bewerkt:
Dat hele text-align verhaal is niet nodig (was vroeger geloof ik nodig voor IE5). Het enige wat ontbrak aan je oorspronkelijke code was de breedte van de container. Even voor de volledigheid, de margin:0 auto; truc werkt alleen op elementen die:
a) een breedte hebben opgegeven gekregen (mag in px, em of %).
b) Niet gefloat zijn.
c) position relative of static hebben.
d) blok elementen zijn (werkt dus niet met <a></a> bijvoorbeeld).
gast0171 zei:
Dit is inderdaad een kuur die veel voor komt. Zoals ik het wel eens oplos is om de container div. tussen <center> </center> te zetten

http://www.handleidinghtml.nl/html/structureren-tekst/structureren-tekst05.html

succes
Klik om te vergroten...
Waarom blijven mensen dat element toch steeds aanraden? Het is al jaren geleden officieel verouderd verklaard. Niet gebruiken dus. Ze moeten die handleiding site echt een keer bijwerken.
 
Helemaal mee eens!

De zin "Alles wat in de <body>-tag komt gaan we centreren (...) omdat het anders simpelweg niet werkt in Internet Explorer." van de webmasterstart-tutorial is dus eveneens verouderd: met ingang van IE6 is dat niet meer nodig.
En IE6 is al lang en breed afgedankt. Ook die tut mag dus wel eens herzien worden. ;)

Hoewel nog hele volksstammen er bij zweren (waarom weet ik ook niet, maar je komt het nog erg veel tegen): zo'n container binnen de <body> is in 9,9 van de 10 gevallen dan ook helemaal niet nodig om de pagina als geheel te centreren.
Het gaat net zo goed door meteen de centreer-eigenschappen in de body te zetten:
Code: 
body {
    width: 990px; /* past dan nog mooi binnen 1024*768px schermen zonder L/R-scrollbar onderaan*/
    margin: 0 auto;
    border: 2px solid red; /* tijdelijk */
    height: 350px; /* tijdelijk */
    }
#fotos {
    float: left;
    }
O ja, bij elementen met een float wordt aanbevolen om die zo mogelijk ook een width te geven. Waarschijnlijk omdat dan de browsers niet hoeven te gaan zoeken naar het breedste element in de float: snellere rendering.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan