Thread: Div centreren
-
02-02-2010, 13:55 #1Approved 9-lifer
- Registered
- 03/12/03
- Location
- Oostende
- Posts
- 2,599
- iTrader
- 78 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/10
Div centreren
ok,
ik kom volledig zot :-)
was al zeer ver weg met een designtje, en ik had het natuurlijk niet gechecked in IE... nu is het volledig fucked.. meeste probleempjes liggen wel aan borders/paddings dat is het probleem niet.
Alles moet gecentreerd staan. Ik doe dat altijd op dezelfde manier.
ik heb alle code verwijderd en enkel dus het header divke laten staan. en de css code inpage gebracht. Nu in FF staat dit goed, is +- copy van vorige dinges die ik al gemaakt heb die het wel doen in IE, maar nu doet hij het gewoon niet.
iemand ook maar enige clue? zit ik er volledig over te staren???
Code:<html> <head> <style type="text/css"> body { margin: 0; padding: 0; font: 10px normal Verdana, Arial, Helvetica, sans-serif; background: #333; color: #fff; min-width:970px; } * { margin: 0; padding: 0; } .container { width: 970px; margin: 0 auto; } .fluid { width: 100%; float: left; } #header { background: #333; padding: 20px 0; } </style> </head> <body> <div id="header" class="fluid"> <div class="container"> mooh </div> </div> </body> </html>no votes
-
-
02-02-2010, 14:03 #2
het is gewoon margin: auto; denkik.
En min-width werkt niet in IE als ik mij niet vergis, bestaat dit uberhaupt wel? min-height bestaat maar werkt niet in IE...no votes
-
02-02-2010, 14:15 #3Approved 9-lifer
- Registered
- 03/12/03
- Location
- Oostende
- Posts
- 2,599
- iTrader
- 78 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/10
die 0 weg bij margin, maakt geen verschil...
min width maakt ook niet echt iets uit op het al dan niet centreren door die margin: auto...no votes
-
02-02-2010, 14:25 #4Wat is de bedoeling van dat? Ik snap niet goed wat je aan het doen bent. Moet de div enkel horizontaal in het midden staan of ook verticaal?Code:
.fluid { width: 100%; float: left; }no votes
-
02-02-2010, 15:20 #5Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Code schrijven zonder doctype is sowieso al de verkeerde aanpak. Ge kunt nog de schoonste code schrijven die ge wilt, de browsers gaan het allemaal in quirksmode interpreteren. Hier kunt ge wel vinden wat ge zoekt: A List Apart: Articles: Fix Your Site With the Right DOCTYPE! Het zou uw probleem kunnen oplossen.
Dan vraag ik me nu af wat ge precies wilt bereiken, want uw structuur is vreemd. Als ge gewoon een achtergrondafbeelding wilt die 'fluid' is dan kunt ge die ook op de body steken? Semantisch gezien is de container (die doorgaans uniek is en dus een id in plaats van een class) de buitenste div, niet zoals gij het hebt opgebouwd dus..
Ge kunt dan ook een width geven aan die container, en dan moet ge geen min-width geven aan uw body. Min-width is sowieso een property die maar half ondersteund wordt en dus ook problemen kan geven.no votes
-
02-02-2010, 15:48 #6Approved 9-lifer
- Registered
- 03/12/03
- Location
- Oostende
- Posts
- 2,599
- iTrader
- 78 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/10
Het was dus inderdaad door die doctype, wist niet dat dat zo'n invloed had.
Waarom zo'n structuur?
buitenste div > fluid
binnenste div > gecentreerde content
dus een gecentreerde content met een fluid achtergrond
id op buitenste? om specifiek voor die "row" bv een aparte fluid kleur aan te geven.
ksnap niet wat daar zo "raar" aan is.
voorbeldje van een site die ik op gelijkaardige manier gemaakt heb: WATT ligt op ons dak !? - home
daar heb ik dus wel m'n doctype
bedankt voor de opfrissing ( doctype) , maar ik weet wat ik met mijn code wil bereiken.no votes
-
02-02-2010, 16:11 #7
margin: auto heeft effect op alle 4 de zijden van uw element:
margin-right:auto;
margin-left:auto;
margin-top:auto;
margin-bottom:auto;
margin: 0 auto heeft effect op de 2 zijden per parameter :
margin-right:auto;
margin-left:auto;
margin-top:0;
margin-bottom:0;
margin(top,right,bottom,left)
margin(top/bottom,left/right)
margin(alle kanten
)
no votes
-
02-02-2010, 16:27 #8
Je hebt wel een beetje een "rare" manier van werken
.
Ik het snel even de WATT site bekeken en de manier waarop jij je html structuur geeft is als volgt:
En dan herhaal jij op elk element css om dat onderdeel te centreren.Code:<body> <banner></banner> <content></content> <footer></footer> </body>
Ik zou dat anders aanpakken en een pagina container maken gecentreerd staat met alle sub-containers.
Voordeel is dat al de code om iets in het midden te zetten op 1 element staat.Code:<body> <pagina> <banner></banner> <content></content> <footer></footer> </pagina> </body>
Maar iedereen heeft zijn eigen manier van werken. Als jij je meer comfortabel voel bij jouw manier dan moet je dat niet gaan veranderen.
Last edited by Drone; 03-02-2010 at 21:33.
no votes
-
03-02-2010, 21:00 #9Approved 9-lifer
- Registered
- 02/10/04
- Location
- Waregem
- Posts
- 319
- iTrader
- 2 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/1
ik heb ook ooit eens zoiets voorgehad, en uiteindelijk bleek dat mijn document in UTF-8 with BOM stond. Daar kunt ge toch lang op zoeken, hoor!
Vinyl kills the MP3-industryno votes
-
04-02-2010, 12:57 #10Approved 9-lifer
- Registered
- 03/12/03
- Location
- Oostende
- Posts
- 2,599
- iTrader
- 78 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/10
ja akkoord maar hoe ga je dan voor bv uw banner een andere repeat achtergrond geven dan uw content bv?
ja had ik laatst ook
was ervoor bezig geweest met een japanse versie van een site :-) en dus die stond nog op een andere codering... :-)
no votes
-
04-02-2010, 14:18 #11Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Een banner is geen header hé mensen. Banner is reclame, een header is de hoofding van uw pagina.
Voor het geval van Watt maakt ge het uzelf toch moeilijker dan moet hoor, woony. Als ge één afbeelding had gebruikt voor zowel die balk bovenaan (blauw groen, of gewoon groen met een border-top van zoveel pixels in't blauw om die pixels uit te sparen) als de afbeelding voor de header dan kwam het op hetzelfde neer. Die hoogte is toch fixed, en dat had u toch een hoeveelheid werk kunnen uitsparen.
Een andere methode is om de header met een absolute positionering toch weer de mogelijkheid te geven om een width van 100% te krijgen. Maar dan zit ge wellicht weer te kijken naar problemen met Internet Exporer 6.
Soit, 't is niet om u te bekritiseren, 't is gewoon interessant dat we het nu eens van verschillende kanten kunnen bekijken.no votes
-
04-02-2010, 15:02 #12Approved 9-lifer
- Registered
- 03/12/03
- Location
- Oostende
- Posts
- 2,599
- iTrader
- 78 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/10
ja inderdaad, zoals in mijn andere post
ik doe als maar meer 'frontend' en zo heb ik het geleerd... via een post op een of andere cssblog. kan link wel zoeken als je wilt 
ben dus altijd willing om andere dinges te proberen :-).no votes

