HTML CSS layout van DIVs die alle pagina´s overspannen - Softwareontwikkeling

donderdag 4 juni 2009 17:30

Acties:

0 Henk 'm!

Topicstarter

In een SharePoint website wil ik een lay-out realiseren die op DIV's gebaseerd is voor het positioneren van website onderdelen. De achtergrond van de website moet altijd de volledige browser overspannen over de Y-as. Over de X-as wil ik de content centreren.

Om het geheel basic te maken heb ik een HTML pagina opgezet met een kleine achterliggende CSS opmaak, de standaard content heb ik verwijderd en de achtergrond basic gemaakt met wat kleuren.
De website wordt prima gecentreerd over de X-as. Ook wil de achtergrond op pagina's die binnen de schermresolutie passen prima over de Y-as vergroot worden. Betreft het echter een pagina die langer is dan de schermresolutie, dan loopt de achtergrond niet door. Zie onderstaande afbeelding als voorbeeld:

Afbeeldingslocatie: http://i40.tinypic.com/2h2kva0.jpg

De website code als volgt:

HTML:

<!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" lang="en" xml:lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style2.css";</style>
</head>
<body>
<div id="wrap">
<div id="left_col">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Morbi commodo vehicula purus eget adipiscing.<br>
Aliquam lectus enim, adipiscing in mollis at, porta placerat leo.<br>
Aliquam eros lacus, sodales non sollicitudin at, venenatis at mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam faucibus, nunc quis dapibus condimentum, dolor tellus vehicula odio, eu hendrerit dolor justo eu nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br>
Pellentesque neque arcu, pellentesque et auctor vitae, rhoncus vel lectus. Pellentesque augue turpis, pulvinar fermentum molestie sit amet, convallis eget libero.<br> Ut adipiscing ipsum id turpis fringilla non commodo metus porttitor.<br> In hac habitasse platea dictumst.<br>
Etiam non leo dui.<br>
Mauris pellentesque, nisl ac viverra iaculis, nisl mi feugiat magna, vitae faucibus leo neque sed odio. Mauris ultricies fermentum est, eu iaculis neque scelerisque sed. Cras velit dolor, imperdiet quis tempor in, facilisis sodales diam.<br>
Praesent at placerat mauris. Integer at ante ac lectus sodales accumsan sed non augue.<br>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula odio nec ipsum vehicula sed dignissim dolor dictum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Morbi commodo vehicula purus eget adipiscing.<br>
Aliquam lectus enim, adipiscing in mollis at, porta placerat leo.<br>
Aliquam eros lacus, sodales non sollicitudin at, venenatis at mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam faucibus, nunc quis dapibus condimentum, dolor tellus vehicula odio, eu hendrerit dolor justo eu nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br>
Pellentesque neque arcu, pellentesque et auctor vitae, rhoncus vel lectus. Pellentesque augue turpis, pulvinar fermentum molestie sit amet, convallis eget libero.<br> Ut adipiscing ipsum id turpis fringilla non commodo metus porttitor.<br> In hac habitasse platea dictumst.<br>
Etiam non leo dui.<br>
Mauris pellentesque, nisl ac viverra iaculis, nisl mi feugiat magna, vitae faucibus leo neque sed odio. Mauris ultricies fermentum est, eu iaculis neque scelerisque sed. Cras velit dolor, imperdiet quis tempor in, facilisis sodales diam.<br>
Praesent at placerat mauris. Integer at ante ac lectus sodales accumsan sed non augue.<br>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula odio nec ipsum vehicula sed dignissim dolor dictum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Morbi commodo vehicula purus eget adipiscing.<br>
Aliquam lectus enim, adipiscing in mollis at, porta placerat leo.<br>
Aliquam eros lacus, sodales non sollicitudin at, venenatis at mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam faucibus, nunc quis dapibus condimentum, dolor tellus vehicula odio, eu hendrerit dolor justo eu nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br>
Pellentesque neque arcu, pellentesque et auctor vitae, rhoncus vel lectus. Pellentesque augue turpis, pulvinar fermentum molestie sit amet, convallis eget libero.<br> Ut adipiscing ipsum id turpis fringilla non commodo metus porttitor.<br> In hac habitasse platea dictumst.<br>
Etiam non leo dui.<br>
Mauris pellentesque, nisl ac viverra iaculis, nisl mi feugiat magna, vitae faucibus leo neque sed odio. Mauris ultricies fermentum est, eu iaculis neque scelerisque sed. Cras velit dolor, imperdiet quis tempor in, facilisis sodales diam.<br>
Praesent at placerat mauris. Integer at ante ac lectus sodales accumsan sed non augue.<br>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula odio nec ipsum vehicula sed dignissim dolor dictum.</p>
</div>
</div>

De CSS code is als volgt:

Cascading Stylesheet:

body, html { 
margin:0; 
padding:0; 
color:#000; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
height:100%; 
background:yellow; 
} 

#wrap { 
background:green; 
margin:0 auto; 
width:800px; 
position: relative;   
min-height: 100%;   
height:auto !important;
height:100%;
} 

#left_col { 
background:blue; 
float:left; 
width:275px; 
min-height: 100%;   
height:auto !important;
height:100%;
}

Ik heb uit informatie op forums/googlen reeds begrepen dat een DIV enkel de volledige hoogte kan overspannen indien het bovenliggende element ook de volledige hoogte overspant. Vandaar dat ik veel constructies met een wrap DIV tegenkom en ook de CSS body, html voorzien moet zijn van een 100% hoogte. Ik ben er bijna, maar zie dat hij enkel de hoogte van de browser wil pakken, het overspannen van meerdere pagina's pakken Internet Explorer 8 en Firefox 3 allebei niet. Ik loop hier al tijden tegenaan, maar weet geen oplossing en heb er geen gevonden. Weten jullie hoe dit op te lossen is?

Systeemspecs

donderdag 4 juni 2009 17:31

Acties:

0 Henk 'm!

Bosmonster

*zucht*

zoek eens op "faux columns"

vrijdag 5 juni 2009 18:06

Acties:

0 Henk 'm!

Verwijderd

Met de hoogte van "wrap" op 100% neemt deze sectie de hoogte in die zichtbaar is op je scherm (met je browser gemaximaliseerd). Als je de hoogte van de sectie "wrap" even hoog wil als de hoogte van de body of van de sectie "left_col", moet je de hoogte laten overerven door "height: inherit" te plaatsen. Met "height: inherit" voor de sectie "wrap" neemt deze sectie de hoogte van de body over.

Ik heb enkele overbodige properties weggelaten, je werkende css ziet er nu als volgt uit:

Cascading Stylesheet:

body, html { 
    margin: 0; 
    padding: 0; 
    color: #000; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    background: yellow; 
} 

#wrap { 
    background: green; 
    margin: 0 auto; 
    width: 800px; 
    height: inherit;
}

#left_col { 
    background: blue; 
    width: 275px; 
}

[ Voor 7% gewijzigd door Verwijderd op 05-06-2009 18:09 ]

zaterdag 6 juni 2009 19:27

Acties:

0 Henk 'm!

Speed_Sheep

Topicstarter

MJ4, met het gebruik van "height: inherit" werkt inderdaad om DIV's met elkaar dezelfde hoogte te laten krijgen.

Als ik jouw voorbeeld gebruik, dan lost dit een probleem op, maar introduceert een nieuw probleem. Indien de inhoud van de left_col DIV meerdere pagina's overspant in mijn linkerkolom, dan wordt de wrap DIV ook vergroot. Heeft de left_col DIV weinig inhoud, dan stopt de kolom direct na de content. Ook bij weinig content op de pagina moeten de kolommen met achtergrond doorlopen.

Voorbeeld:

Afbeeldingslocatie: http://i41.tinypic.com/1zogbqb.jpg

Net zoals ik ze in de FAUX columns gebruik zie maken van een afbeelding die doorloopt, heb ik dat nu ook gedaan om het op te lossen. Het betreft een afbeelding van 1 px hoogte die het blauwe en groene vlak vertegenwoordigen. De afbeelding plaats ik gecentreerd op de pagina en laat hem over de Y-as doorlopen.

Mocht iemand dit toch nog kunnen oplossen met enkel kleurcodes, dan is het helemaal super. Opzich kan ik met de huidige oplossing al verder, het werkt in Internet Explorer 8, Firefox 3, Opera 9, Safari 4 en Google Chrome 2.

Voor de geinteresseerde de CSS op basis van MJ4, met de background eigenschappen als extra:

Cascading Stylesheet:

body, html {  
    margin: 0;  
    padding: 0;  
    color: #000;  
    font-family: Arial, Helvetica, sans-serif;  
    font-size: 12px;  
    background-image:url('Background.jpg');
    background-attachment:scroll;
    background-repeat:repeat-y;
    background-position: center;
    background-color: yellow;  
}  

#wrap {  
    background: green;  
    margin: 0 auto;  
    width: 800px;  
    height: inherit; 
} 

#left_col {  
    background: blue;  
    width: 275px;  
}

[ Voor 1% gewijzigd door Speed_Sheep op 06-06-2009 19:31 . Reden: Testresultaten andere browsers toegevoegd ]

Systeemspecs