div over volledige hoogte van scherm - Softwareontwikkeling

donderdag 7 juni 2007 09:13

Acties:

Topicstarter

Een goedmorgen mensen

Ik heb een probleem over het uitrekken van een div over een hele pagina. Het "main" gedeelte van de pagina moet altijd tot aan de footer komen. Hier is een voorbeeld van hoe het nu is: http://members.home.nl/neon.design/Nieuwe%20map/

nu is er naast bovenstaand probleem nog het probleem dat de footer niet tegen de bottom van mijn pagina komt.

mijn pagina is verder helemaal valid [zowel code als css]

Weet iemand hier een oplossing voor?

HIer is mijn code:

HTML: testjes.html

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Where is your business</title>
     <style type="text/css">
@charset "utf-8";

          html, body
          {         
               height: 100%;
               margin: 0px;
               background-color: #4b3d2c;
               font-family: verdana;
          }

          img
          {
               border: 0px;
          }
          
          #img_up_l
          {
               position: absolute;
               margin-left: -95px;
               margin-top: -1px;
          }
          
          #img_down_l
          {
               position: absolute;
               margin-left: -97px;
               margin-top: -119px;
          }

          #container
          {
               height: 100%;
               width: 995px;
               margin-left: auto;
               margin-right: auto;
          }

          #header
          {
               position: relative;
               height: 72px;
               width: 800px;
               margin-left: auto;
               margin-right: auto;
               background-color: #f58a0c;
          }
          
          #header_stroke
          {
               height: 72px;
               width: 350px;
               margin-left: 122px;
               background-color: #ffffff;
          }

          #main_container
          {
               position: relative;
               height: 100%;
               width: 800px;
               margin-top: 8px;
               margin-left: auto;
               margin-right: auto;
               background-color: #4b3d2c;
          }
          #main
          {
               position: relative;
               height: 560px;
               float: left;
               width: 525px;
               margin-left: 0px;
               background-color: #f58a0c;
          }
          
          #main_stroke
          {
               height: 560px;
               width: 350px;
               margin-left: 122px;
               margin-top: 0px;
               background-color: #ffffff;
          }

          #right_colum
          {
               position: relative;
               height: 560px;
               float: right;
               min-height: 560px;
               width: 264px;
               background-color: #f58a0c;
          }
     
          #footer
          {
               position: relative;
               height: 72px;
               width: 800px;
               margin-top: 8px;
               margin-bottom: 0px;
               margin-left: auto;
               margin-right: auto;
               background-color: #f58a0c;
          }
          
          #footer_stroke
          {
               height: 72px;
               width: 350px;
               margin-left: 122px;
               background-color: #ffffff;
          }
          
          #up_corner_r
          {
               position: absolute;
               height: 11px;
               width: 11px;
               margin-left: 514px;
               margin-top: 0px;
          }    
          
          #down_corner_r
          {
               position: absolute;
               height: 11px;
               width: 11px;
               margin-left: 514px;
               margin-top: -11px;
          }
          
          #up_corner_l_colum
          {
               position: absolute;
               height: 11px;
               width: 11px;
               margin-left: 0px;
               margin-top: 0px;
          }
          
          #up_corner_r_colum
          {
               position: absolute;
               height: 11px;
               width: 11px;
               margin-left: 253px;
               margin-top: 0px;
          }
          
          #down_corner_l_colum
          {
               position: absolute;
               height: 11px;
               width: 11px;
               bottom: 0px;
               left: 0px;
          }
          
          #down_corner_r_colum
          {
               position: absolute;
               height: 11px;
               width: 11px;
               bottom: 0px;
               left: 253px;
          }
          
          #down_corner_r_header
          {
               position: absolute;
               height: 11px;
               width: 11px;
               bottom: 0px;
               left: 789px;
          }
          
          #up_corner_r_footer
          {
               position: absolute;
               height: 11px;
               width: 11px;
               margin-left: 789px;
               margin-top: 0px;
          }
          
     </style>
</head>
<body>

<div id="container">
     <div id="header">
          <div id="header_stroke">
          </div>
          <img src="down_corner_l.jpg" alt="" id="down_corner_l_colum" />
          <img src="down_corner_r.jpg" alt="" id="down_corner_r_header" />
     </div>
     
     <div id="main_container">
          <div id="main">
               <img src="up_left.jpg" alt="" id="img_up_l" />
               <img src="up_corner_r.jpg" alt="" id="up_corner_r" />
                    <div id="main_stroke">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vitae neque. Cras ipsum. Aliquam erat volutpat. Pellentesque nulla dui, vestibulum eu, consectetuer non, luctus ut, diam. Praesent pede diam, aliquam ut, scelerisque nec, scelerisque at, eros. Nulla feugiat nibh quis lorem. Maecenas faucibus fringilla mi. Nulla pharetra pede sit amet libero. Nulla nonummy sem vel lectus. Sed arcu. Aliquam porta, risus eu commodo semper, est pede porttitor ante, sit amet semper nisi velit nec justo. Sed sit amet augue nec mauris pellentesque tempor. Fusce non metus id purus commodo tempor. Sed malesuada. Aliquam non magna. Morbi nec nibh a lectus suscipit cursus.

<p>In id tortor. Nullam auctor, lorem et ornare congue, felis lacus rutrum nisi, sit amet iaculis nibh urna a metus. Morbi a elit sed massa iaculis vulputate. Praesent nec nibh. Nunc sit amet nibh a mauris posuere tempus. Vivamus elementum nonummy velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                    </div>
               <img src="down_corner_r.jpg" alt="" id="down_corner_r" />
          </div>
          
          <div id="right_colum">
               <img src="up_corner_l.jpg" alt="" id="up_corner_l_colum" />
               <img src="up_corner_r.jpg" alt="" id="up_corner_r_colum" />
               
               <img src="down_corner_l.jpg" alt="" id="down_corner_l_colum" />
               <img src="down_corner_r.jpg" alt="" id="down_corner_r_colum" />
          </div>
     </div>
     
     <div id="footer">
          <img src="down_left.jpg" alt="" id="img_down_l" />
          <img src="up_corner_r.jpg" alt="" id="up_corner_r_footer" />
          <div id="footer_stroke">
          </div>
     </div>
</div>

</body>
</html>

</body>
</html>

alvast bedankt iedereen

[ Voor 36% gewijzigd door Alm4riC op 07-06-2007 13:42 ]

donderdag 7 juni 2007 09:48

Acties:

Rowanov

Kop eens wat anders...

Je code is echt niet valid; er mag maar 1 keer de html, head en body voorkomen. Hetzelfde geldt voor je doctype. Regel dat eerst eens en vraag dan verder.

De validator geeft verder nog aan dat je een id hebt wat 2 keer voorkomt en dat is niet toegestaan.

[ Voor 41% gewijzigd door Rowanov op 07-06-2007 09:50 ]

donderdag 7 juni 2007 10:33

Acties:

Rekcor

Zoiets als

http://www.456bereastreet...ayout/2-col/finished.html

(zie http://www.456bereastreet...tandards/csslayout/2-col/ voor de uitleg)

donderdag 7 juni 2007 10:38

Acties:

Rowanov

Kop eens wat anders...

Dat is een slecht voorbeeld want die is geen 100% hoog; haal met bv. FireBug maar eens wat tekst uit het menu en uit de content en de pagina dondert in elkaar.

Als de TS bedoelt dat het menu en de content alleen maar even lang hoeft te zijn gaat je voorbeeld wel op, mits je hem combineert met een faux-collumns oplossing.

donderdag 7 juni 2007 12:46

Acties:

Boelie-Boelie

FooterstickAlt? (noot 1, noot 2)

Cogito ergo dubito

donderdag 7 juni 2007 13:46

Acties:

Alm4riC

Topicstarter

sorry, die bovenste html hoorde er niet bij. Dit kwam omdat het rechstreeks uit de browser gekopieerd was, omdat ik hier op t werk even geen toegang had tot de bronfile.

Maar ik bedoel dus, dat de content altijd tot onderaan de footer moet doorlopen. Nu is dit niet het geval. En de bedoeling is dat de footer tegen de onderkant aan blijft "plakken". Dit is nu wel gelukt alleen nu loopt de rest van de content niet door.

En Rowanov van de dubbele id heb je gelijk, maar dit kwam omdat ik geen 2de id had aangemaakt voor het plaatje, en hem had gevalideerd voordat ik dat 2de id erin plakte.