Avatar billede amazon Nybegynder
15. maj 2007 - 21:47 Der er 10 kommentarer og
1 løsning

container-div der ikke container

Hej Eksperter!

Jeg tumler med mit første rene css-layout, men tilsyneladende vil min border-container ikke ramme det ind, som jeg tror den gør.
Jeg synes jo den skal ramme min content og min rightcol ind, men det gør den ikke... Nogen, der kan give et hint om, hvad jeg gør galt?


<html>
<head>
<style type="text/css">
#container {position: absolute; left: 20; top: 20; width: 780px; margin: 0 0 0 0; background: yellow;}
#header {position: relative; width: inherit; height: 70px;}
    #logo {position: absolute; top: 0; right: 0;}
    #servicenav {position: absolute; left: 200px; top: 0;}

#leftcol {position: absolute; top: 70; width: 180px; background: #C4C4C4;}

#main {float: right; width: 580px;}
#main_border {width: inherit; padding: 0 10px 10px; border: 4px solid #8F0000; background: #fff;}
  #content {float: left; width: 410px; padding: 0 10px;}
  #rightcol {float: right; width: 180px; padding: 0 0 0 10px; border-left: 1px solid #555;}

#footer {position: relative; width: inherit; clear: both;}

</style>
</head>

<body>
<div id="container">

    <div id="header">


        <div id="servicenav">SERVICENAV</div>
   
        <div id="logo">LOGO</div>
           
    </div>
   
    <div id="leftcol">
   
        <ul><li>LEFTMENU</li></ul>
   
        <div id="leftcol_content">LEFTCOL_CONTENT</div>
       
        <div id="leftcol_global">LEFTCOL_GLOBAL</div>
       
    </div>
   
    <div id="main">
   
        <div id="main_border">
       
            <div id="content">CONTENT</div>
           
            <div id="rightcol">
       
                <div id="rightcol_content">RIGHTCOL</div>
           
                <div id="rightcol_global">RIGHTCOL_GLOBAL</div>
            </div>
       
        </div>

        <div id="footer">FOOTER</div>

    </div>
       
       
</div>

</body>

</html>
Avatar billede amazon Nybegynder
15. maj 2007 - 22:02 #1
OK, jeg kan godt se min content er lidt for bred, men selv hvis jeg retter den ned til 310 så omkranser div'en "main_border" stadig ikke "content" og "rightcol", den ligger ligesom bare lidt bagved, som en tom ramme?
Avatar billede amazon Nybegynder
15. maj 2007 - 23:00 #2
Er nu kommet frem til, at det er et spørgsmål om positionering...
Hvis jeg laver "position: absolute;" på min "main_border"-div så omkranses indholdet. Desværre vil den så ikke skubbe min footer ned, og min container vil heller ikke indeholde den, så det er ikke helt nok...
Er der måske én eller to derude, der vil belære mig lidt om positioneringens gåder og principper og specifikke indvirkning på mit layout?
Avatar billede roenving Novice
16. maj 2007 - 12:04 #3
Prøv f.eks. sådan:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#container {position: relative; width: 780px; margin: 0 auto; background: yellow;}
#header {position: relative; width: inherit; height: 70px;}
    #logo {position: absolute; top: 0; right: 0;}
    #servicenav {position: absolute; left: 200px; top: 0;}

#leftcol {width: 180px; background: #C4C4C4; float:left;}

#main {float: left; width: 572px; padding: 0 10px 10px; border: 4px solid #8F0000; background: #fff;}
#main_border {}
  #content {float: left; width: 362px; padding: 0 10px;}
  #rightcol {float: left; width: 170px; padding: 0 0 0 10px; border-left: 1px solid #555;}

#footer {position: relative; width: inherit; clear: both;}

.clearDiv{clear:both;font-size:0;line-height:0;}

</style>
</head>

<body>
<div id="container">
    <div id="header">
        <div id="servicenav">SERVICENAV</div>
        <div id="logo">LOGO</div>
    </div>
    <div id="leftcol">
        <ul><li>LEFTMENU</li></ul>
        <div id="leftcol_content">LEFTCOL_CONTENT</div>
        <div id="leftcol_global">LEFTCOL_GLOBAL</div>
    </div>
    <div id="main">
        <!--div id="main_border"-->
            <div id="content">CONTENT</div>
            <div id="rightcol">
                <div id="rightcol_content">RIGHTCOL</div>
                <div id="rightcol_global">RIGHTCOL_GLOBAL</div>
            </div>
        <!--/div-->
        <div class="clearDiv">&nbsp;</dv>
        <div id="footer">FOOTER</div>
    </div>
</div>
</body>
</html>
Avatar billede roenving Novice
16. maj 2007 - 12:05 #4
-- men jeg forstår ikke, at du har footeren inde i main-containeren, og jeg forstår heller ikke, hvorfor der kun skal udelades padding i toppen for den !-)
Avatar billede amazon Nybegynder
21. maj 2007 - 10:55 #5
tanken var at jeg har så få elementer at flytte rundt på som muligt.
hele dynen skulle være i en container, så jeg kan bestemme om den skal centeres eller placeres på anden vis på én gang.

Desuden vil jeg have 3 overordnede "blokke": header, main og leftcol så skal jeg kun angive bredde på main som så skulle nedarves til både main_border og footer

Men da jeg ikke vil have min footer inde i hovedindholdsrammen tænkte jeg, at så laver jeg da bare en main_border og placerer mit indhold i.

jeg har brugt clearDiv fra dit forslag, og ja, der var lidt uorden i min padding. Nu ser det ud til at basis er ved at være på plads! Så skal jeg til alt det sjove med at få det til at passe i de gængse browsere også...

Mange tak for hjælpen, smid et svar, og i det må du da også gerne komme ind på hvorfor det her med clearDiv egentlig er nødvendigt, for rent logisk skulle det oprindelige vel også have virket eller...?




------Sådan cirka ser det ud pt.: -------------
<style type="text/css">
#container {position: absolute; left: 20px; top: 20px; width: 780px; margin: 0 0 0 0; background: yellow;}
#header {position: relative; width: inherit; height: 70px;}
    #logo {position: absolute; top: 0; right: 0;}
    #servicenav {position: absolute; left: 200px; top: 0;}

#leftcol {position: absolute; top: 70; width: 180px; background: #C4C4C4;}

#main {float: right; width: 580px;}
#main_border {width: inherit; padding: 10px; border: 4px solid #8F0000; background: #fff;}
  #content {float: left; width: 360px; padding: 0 10px 10px; background: #C4C4C4;}}
  #rightcol {float: right; width: 180px; padding: 0 0 10px 10px; border-left: 1px solid #555;}

#footer {position: relative; width: inherit; clear: both;}

.clearDiv{clear:both;font-size:0;line-height:0;}


</style>
</head>

<body>
<div id="container">

    <div id="header">


        <div id="servicenav">SERVICENAV</div>
   
        <div id="logo">LOGO</div>
           
    </div>
   
    <div id="leftcol">
   
        <ul><li>LEFTMENU</li></ul>
   
        <div id="leftcol_content">LEFTCOL_CONTENT</div>
       
        <div id="leftcol_global">LEFTCOL_GLOBAL</div>
       
    </div>
   
    <div id="main">
   
        <div id="main_border">
        <div class="clearDiv">&nbsp;</div>
       
            <div id="content">CONTENT</div>
           
            <div id="rightcol">
       
                <div id="rightcol_content">RIGHTCOL</div>
           
                <div id="rightcol_global">RIGHTCOL_GLOBAL</div>
            </div>

        <div class="clearDiv">&nbsp;</div>
        </div>

        <div id="footer">FOOTER</div>

    </div>
       
       
</div>

</body>

</html>
Avatar billede roenving Novice
21. maj 2007 - 13:31 #6
Det er fordi absolut positionerede elementer så at sige 'løftes' ud af det normale dokument-flow, og derfor ikke bør have indflydelse på andre elementers position, de overses simpelthen, hvis browseren gør, som w3c har fastlagt ...

-- floats behandles på samme måde, og clear-tingens formål er at bringe dokument-flowet tilbage til normal måde at se det, altså at et element, der kommer efter renderes under andre elementer !-)

Velbekomme '-)
Avatar billede roenving Novice
21. maj 2007 - 14:31 #7
-- og tak for point ;~}
Avatar billede amazon Nybegynder
21. maj 2007 - 14:41 #8
ja tak for hjælpen, har rettet til, så leftcol heller ikke er absolut nu.

Men du ved, mere vil have mere, så jeg spørger lige: Kunne jeg ikke have ordnet det med clear: both; et eller andet sted i min css i stedet for i html'en?
Avatar billede amazon Nybegynder
21. maj 2007 - 14:42 #9
:-)
Avatar billede roenving Novice
21. maj 2007 - 14:57 #10
Njah, hvis du havde et element, der alligevel ikke skulle være floatet e.l. kunne det måske have clear-egenskaben, men det ser ikke lige sådan ud !-)
Avatar billede amazon Nybegynder
21. maj 2007 - 15:00 #11
OK, jeg siger mange tak fordi du har løst mit problem. 2 sek. så kommer der et nyt spørgsmål fra mig med FF-problem du sikkert også kan løse ;-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester