Archief - Div centreren

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
w

woony

Legacy Member
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>
C

Curahee Q

Legacy Member
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...
w

woony

Legacy Member
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...
D

Drone

Legacy Member
Code: 
.fluid {
	width: 100%;
	float: left;
}

Wat 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?
Z

Zero Grav

Legacy Member
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.
w

woony

Legacy Member
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 :p

bedankt voor de opfrissing ( doctype) , maar ik weet wat ik met mijn code wil bereiken.
a

adrianhates

Legacy Member
Curahee Q zei:
het is gewoon margin: auto; denkik..
Klik om te vergroten...

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 :p )
D

Drone

Legacy Member
Je hebt wel een beetje een "rare" manier van werken :p.

Ik het snel even de WATT site bekeken en de manier waarop jij je html structuur geeft is als volgt:

Code: 
<body>
    <banner></banner>
    <content></content>
    <footer></footer>
</body>

En dan herhaal jij op elk element css om dat onderdeel te centreren.

Ik zou dat anders aanpakken en een pagina container maken gecentreerd staat met alle sub-containers.

Code: 
<body>
    <pagina>
        <banner></banner>
        <content></content>
        <footer></footer>
    </pagina>
</body>

Voordeel is dat al de code om iets in het midden te zetten op 1 element staat.

Maar iedereen heeft zijn eigen manier van werken. Als jij je meer comfortabel voel bij jouw manier dan moet je dat niet gaan veranderen. :)
S

Strangler

Legacy Member
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!
w

woony

Legacy Member
[drone]-[1.05];12843963 zei:
Je hebt wel een beetje een "rare" manier van werken :p.

Ik het snel even de WATT site bekeken en de manier waarop jij je html structuur geeft is als volgt:

Code: 
<body>
    <banner></banner>
    <content></content>
    <footer></footer>
</body>

En dan herhaal jij op elk element css om dat onderdeel te centreren.

Ik zou dat anders aanpakken en een pagina container maken gecentreerd staat met alle sub-containers.

Code: 
<body>
    <pagina>
        <banner></banner>
        <content></content>
        <footer></footer>
    </pagina>
</body>

Voordeel is dat al de code om iets in het midden te zetten op 1 element staat.

Maar iedereen heeft zijn eigen manier van werken. Als jij je meer comfortabel voel bij jouw manier dan moet je dat niet gaan veranderen. :)
Klik om te vergroten...

ja akkoord maar hoe ga je dan voor bv uw banner een andere repeat achtergrond geven dan uw content bv?

Strangler zei:
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!
Klik om te vergroten...

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... :-)
Z

Zero Grav

Legacy Member
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.
w

woony

Legacy Member
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 :p

ben dus altijd willing om andere dinges te proberen :-).
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan