Thread: Div centreren

  1. #1
    woony's Avatar
    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  

  2. #2
    Curahee Q's Avatar
    Registered
    07/12/07
    Location
    Hoogstraten
    Posts
    854
    iTrader
    0
    Mentioned
    0 Post(s)
    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  

  3. #3
    woony's Avatar
    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  

  4. #4
    Drone's Avatar
    Registered
    28/05/03
    Location
    bmb
    Posts
    744
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    15/15
    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?
    no votes  

  5. #5
    Zero Grav's Avatar
    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  

  6. #6
    woony's Avatar
    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  

  7. #7
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    Quote Originally Posted by Curahee Q View Post
    This quote is hidden because you are ignoring this member. Show
    het is gewoon margin: auto; denkik..
    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  

  8. #8
    Drone's Avatar
    Registered
    28/05/03
    Location
    bmb
    Posts
    744
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    15/15
    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:

    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.
    Last edited by Drone; 03-02-2010 at 21:33.
    no votes  

  9. #9
    Strangler's Avatar
    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-industry
    no votes  

  10. #10
    woony's Avatar
    Registered
    03/12/03
    Location
    Oostende
    Posts
    2,599
    iTrader
    78 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/10
    Quote Originally Posted by [drone]-[1.05] View Post
    This quote is hidden because you are ignoring this member. Show
    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:

    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.
    ja akkoord maar hoe ga je dan voor bv uw banner een andere repeat achtergrond geven dan uw content bv?

    Quote Originally Posted by Strangler View Post
    This quote is hidden because you are ignoring this member. Show
    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!
    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  

  11. #11
    Zero Grav's Avatar
    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  

  12. #12
    woony's Avatar
    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  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in