1. #1

    Registered
    17/07/02
    Location
    België
    Posts
    519
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/3

    Juiste CSS instellingen voor footer div te laten meevolgen

    Hallo, ik heb hier een layout gemaakt in photoshop, gesliced en geexporteerd met divs. Mijn probleem is niet dat mijn onderste footer div niet mee naar onder volgt als ik in mijn content veel tekst heb. De Tekst verdwijnt er gewoon onder.
    Waarschijnlijk is dit op te lossen met CSS, met de juiste instellingen. Heb zit hier al een tijdje te prutsen maar hij volgt dus niet mee naar onder.

    Iemand een idee wat ik fout doe? Iets instellen bij de footer?



    Dit is de code gegenereerd door photoshop: index
    no votes  

  2. #2
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Dat is echt een moeilijke opgave omdat ge dan uw fixed heights gaat moeten wegnemen, en dan gaat daar weer andere code door beïnvloed worden.
    Wat ge kunt proberen is alle heights veranderen door min-height en hopen dat het daarmee werkt.

    Photoshop exporting pretty much sucks.. Dus die problemen ga je altijd hebben als je dat gebruikt.
    no votes  

  3. #3

    Registered
    03/06/08
    Location
    Kinrooi
    Posts
    489
    iTrader
    20 (100%)
    Mentioned
    0 Post(s)
    Denk dat ik het werkende heb:

    test.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>...MPOLO || THE BEST..</title>
    <link href="test.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="container">
    	<div id="content">
    		<div id="img1">groen: Img1 --> header</div>
            <div id="middle">
                <div id="img2">blauw: Img2 --> menu</div>
                <div id="img3">rood: Img3 --> main</div>
            </div>
            <div id="img8">geel: Img8 --> footer</div>
        </div>
    </div>
    </body>
    
    </html>
    test.css
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    #container{
    width:100%;
    height:100%;
    }
    
    #container #content{
    margin:0 auto;
    width:960px;
    }
    
    #container #content #img1{
    background-color:#00FF00;
    width:960px;
    height:100px;
    }
    
    #container #content #img2{
    background-color:#0000FF;
    width:200px;
    height:200px;
    float:left;
    }
    
    #container #content #img3{
    background-color:#FF0000;
    width:660px;
    min-height:800px;
    float:left;
    }
    
    #container #content #img8{
    background-color:#FFFF00;
    width:960px;
    height:150px;
    }
    
    #container #content #middle{
    background-color:#666666;
    width:960px;
    /*maak voor hier een background image van 1px hoog en repeat deze de ander afbeeldingen komen over deze heen dus zullen onzichtbaar zijn*/
    }

    Het speciale wat ik hier dus gebruik is dat ik wat jij wil dat de border word eigenlijk als achtergrond zet in een achtergelegen div.
    Waarover ik dan je menubalk en maincontent achtergrond heen plaats.
    Zolang je een vaste breedte hebt zou het zeker moeten werken.

    Let wel op: dat je width's van de inhoud niet over de width van de container gaat!


    Hoop dat dit is wat je zocht, laat iets weten als het werkt
    no votes  

  4. #4

    Registered
    03/06/08
    Location
    Kinrooi
    Posts
    489
    iTrader
    20 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by Zero Grav View Post
    This quote is hidden because you are ignoring this member. Show
    Dat is echt een moeilijke opgave omdat ge dan uw fixed heights gaat moeten wegnemen, en dan gaat daar weer andere code door beïnvloed worden.
    Wat ge kunt proberen is alle heights veranderen door min-height en hopen dat het daarmee werkt.

    Photoshop exporting pretty much sucks.. Dus die problemen ga je altijd hebben als je dat gebruikt.
    Precies een echte CSS kenner
    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
    Nu weet ik niet of ge ermee aan't lachen zijt of het serieus bedoeld is.
    no votes  

  6. #6

    Registered
    03/06/08
    Location
    Kinrooi
    Posts
    489
    iTrader
    20 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by Zero Grav View Post
    This quote is hidden because you are ignoring this member. Show
    Wat ge kunt proberen is alle heights veranderen door min-height en hopen dat het daarmee werkt.
    Altijd maar blijven hopen
    no votes  

  7. #7
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Dat is niet echt een attitude waarmee ik normaal tegen mijn css aankijk.
    Alleen is dat wel iets dat ge altijd in het achterhoofd moet houden als ge met wysiwyg-editors aan het werk zijt en dan de code gaat aanpassen.
    no votes  

  8. #8
    RpR's Avatar
    Registered
    26/03/03
    Location
    Dendermonde
    Posts
    5,472
    iTrader
    28 (100%)
    Mentioned
    0 Post(s)
    Reputation
    1/8
    Denk dat dit een oplossin voor u probleem kan zijn:
    Floatutorial: Tutorial 8 - all steps combined
    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