Avatar billede cresten Nybegynder
29. september 2006 - 23:40 Der er 7 kommentarer og
2 løsninger

Hjælp til CSS Layout

Jeg kunne godt tænke mig at venstre og højre spalte i mit CSS layout fik en baggrundsfarve der gik helt ned til min bund. Jeg har prøvet med en venstre og højre border på min divCenter istedet for margin, men kan ikk få det til at virke optimalt. Min nuværende kode kommer her:

<style type="text/css">
<!--
body {
    margin: 0px;
    padding: 0px;
}
#divHeader {
    background-color: #009900;
    height: 100px;
    width: 900px;
}
#divLeft {
    float: left;
    width: 200px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    color: #000000;
    background-color: #FF0000;
}
#divRight {
    float: right;
    width: 200px;
    background-color: #FF0000;
}
#divContainer {
    width: 900px;
    clear: both;
}
#divCenter {
    width: 500px;
    margin-right: 200px;
    margin-left: 200px;
}
.clearer {
    font-size: 0px;
    line-height: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
    clear: both;
}
#divFooter {
    background-color: #996600;
    height: 20px;
    width: 900px;
}
#wrapper {
    border: 1px solid #000000;
    margin: 0px auto;
    padding: 0px;
    width: 900px;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="divHeader">Content for id "divHeader" Goes Here</div>
<div id="divContainer">
  <div id="divLeft">
    Content for id "divLeft" Goes Here
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <div id="divRight">Content for id "divRight" Goes Here</div>
  <div id="divCenter">
    Content for id "divCenter" Goes Here
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <div class="clearer"></div>
</div>
<div id="divFooter"></div>
</div>
</body>
</html>
Avatar billede mortenbock Nybegynder
30. september 2006 - 00:24 #1
Prøv at læse denne artikel.

Jeg tror det er præcis det du gern vil opnå:
http://www.alistapart.com/articles/holygrail/

Se det endelige eksempel her:
http://www.alistapart.com/d/holygrail/example_3.html
Avatar billede cresten Nybegynder
30. september 2006 - 11:59 #2
Det var lidt mere som det her http://blog.kometdigital.web.id/design/equal-heights.html jeg tænkte.

Hvor siden er centreret og har en fast bredde på fx. 800px. De 2 sidebars kunne fx. være 150px og content området 500px.

Men jeg kan ikk få det til at køre helt som jeg gerne vil...
Avatar billede mortenbock Nybegynder
30. september 2006 - 12:53 #3
Skal din side have en fast højde?
Avatar billede mortenbock Nybegynder
30. september 2006 - 13:08 #4
Prøv det her:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>The Holy Grail of Layouts: Example #3: A List Apart</title>
    <style type="text/css">

        /*** The Essential Code ***/

        body {
            min-width: 630px;        /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
        }
       
        #wrapper {
            width: 800px;
            margin: 0 auto;
        }
           
        #container {
            padding-left: 170px;      /* LC fullwidth */
            padding-right: 210px;    /* RC fullwidth + CC padding */
        }
       
        #container .column {
            position: relative;
            float: left;
        }
       
        #center {
            padding: 10px 20px;      /* CC padding */
            width: 100%;
        }
       
        #left {
            width: 150px;            /* LC width */
            padding: 0 10px;          /* LC padding */
            right: 210px;            /* LC fullwidth + CC padding */
            margin-left: -100%;
        }
       
        #right {
            width: 150px;            /* RC width */
            padding: 0 10px;          /* RC padding */
            margin-right: -100%;
        }
       
        #footer {
            clear: both;
        }
       
        /*** IE Fix ***/
        * html #left {
            left: 150px;              /* RC fullwidth */
        }

        /*** Equal-height Columns ***/

        #container {
            overflow: hidden;
        }

        #container .column {
            padding-bottom: 1001em;    /* X + padding-bottom */
            margin-bottom: -1000em;    /* X */
        }

        /*** Footer Fix ***/

        * html body {
            overflow: hidden;
        }
       
        * html #footer-wrapper {
            float: left;
            position: relative;
            width: 100%;
            padding-bottom: 10010px;
            margin-bottom: -10000px;
            background: #FFF;        /*** Same as body background ***/
        }

        /*** Just for Looks ***/

        body {
            margin: 0;
            padding: 0;
            background: #FFF;
        }

        #header, #footer {
            font-size: large;
            text-align: center;
            padding: 0.3em 0;
            background: #999;
        }

        #left {
            background: #66F;
        }

        #center {
            background: #DDD;
        }

        #right {
            background: #F66;
        }

        #container .column {
            padding-top: 1em;
            text-align: justify;
        }

    </style>
</head>

<body>

<div id="wrapper">
    <div id="header">This is the header.</div>

    <div id="container">

        <div id="center" class="column">
            <h1>This is the main content.</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
        </div>

        <div id="left" class="column">
            <h2>This is the left sidebar.</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
        </div>

        <div id="right" class="column">
            <h2>This is the right sidebar.</h2>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
        </div>

    </div>

    <div id="footer-wrapper">
        <div id="footer">This is the footer.</div>
    </div>
</div>
</body>

</html>
Avatar billede cresten Nybegynder
30. september 2006 - 13:10 #5
nej det var nemlig meningen at indholdet i content området skulle bestemme højden...
Avatar billede cresten Nybegynder
30. september 2006 - 13:13 #6
Synes den venstre sidebar springer lidt rundt i IE ihvert fald.
Avatar billede mortenbock Nybegynder
30. september 2006 - 13:22 #7
ja, det har du ret i... fik det kun checket i FF.

Men det er sgu en tricky en at få til at fungere cross browser :-) Kan være jeg kigger på det senere i aften...
Avatar billede mortenbock Nybegynder
30. september 2006 - 13:35 #8
Nu tror jeg den er der:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
<!--
body {
    margin: 0px;
    padding: 0px;
}
#divHeader {
    background-color: #009900;
    height: 100px;
    width: 900px;
}
#divContainer {
    width: 900px;
    overflow: hidden;
    background-color: #ccc;
}

#divContainer div {
    padding-bottom: 1001em;    /* X + padding-bottom */
    margin-bottom: -1000em;    /* X */
}

#divLeft {
    float: left;
    width: 200px;
    color: #000000;
    background-color: #FF0000;
}
#divRight {
    float: right;
    width: 200px;
    background-color: #FF0000;
}
#divCenter {
    margin: 0 200px 0 200px;
    background-color: #FFFFFF;
}


#divFooter {
    background-color: #996600;
    height: 20px;
    width: 900px;
}
#wrapper {
    border: 1px solid #000000;
    margin: 0 auto;
    width: 900px;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="divHeader">Content for id "divHeader" Goes Here</div>
<div id="divContainer">
  <div id="divLeft">
    Content for id "divLeft" Goes Here
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <div id="divRight">Content for id "divRight" Goes Here</div>
  <div id="divCenter">
    Content for id "divCenter" Goes Here
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
</div>
<div id="divFooter"></div>
</div>
</body>
</html>
Avatar billede cresten Nybegynder
30. september 2006 - 13:55 #9
Der var den sgu... Jeg arbejder videre med den sidste - takker. Du får point
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