drie achtergrondkleuren drie layers met 100%width - opgelost

ciboss · 18 mar 2010, 14:07

Ik zou een website willen maken met een gecentreerd middendeel (800 px breed) bestaande uit drie stroken (header grijs= 94px hoog, midden groen= 430px hoog en footer grijs=60px hoog) waarvan de achtergrondkleur uitgebreid wordt tot de volledige breedte van het scherm (100% width), dus drie stroken over de volledige breedte van elk scherm.

Op bijgaande figuur iet u het 800 px breede middendeel
Afbeelding

Links en rechts van die drie stroken zou de achtergrondkleur dus moeten uitlopen tot de rand van het breedste scherm, maar de inhoud blijft 800 px gecentreerd op et scherm.
Kan iemand mij helpen om dit te realiseren?

Ik gebruikte volgende html code :

Code: Selecteer alles

<!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>testpagina</title>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	margin-top: 50px;
	margin-left: 0px;
	background-color: #FFFFFF;
}

#container {
	height: 600px;
	width: 800px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border: 0px solid #999999;
	background-color: #77867F;	
}
#hoofding {
	position:relative;
	width:800px;
	height:94px;
	z-index:1;
	visibility: visible;
	background-color: #CCCCCC;	
}
#midden {
	position:absolute;
	width:800px;
	height:430px;
	z-index:1000;
	visibility: visible;
	top: 150px;
		
}
#footer {
	position:absolute;
	top:600px;
	width:800px;
	height:60px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	visibility: visible;
	background-color: #999999;
	z-index: 1001;
}
#foto {
	position:absolute;
	width:491px;
	height:430px;
	visibility: visible;
	left: 285px;
	z-index: 1;
	
}
#menu {
	position: absolute;
	width: 270px;
	height: 365px;
	z-index:2;
	visibility:visible;
	top: 70px;
	left: 10px;
	
	
}
#taal {
	position:absolute;
	width:200px;
	height:25px;
	z-index:3;
	top: 400px;
	padding-left: 25px;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
}
.stijl4 {font-size: 24px; 	
}
.stijl5 {
	font-size: 14px;
	color: #717D76;
	font-weight: bold;
}
#tekst {
	position:absolute;
	width:367px;
	height:295px;
	z-index:1;
	left: 72px;
	top: 71px;
}
#container #midden #foto #tekst {
	font-size: 12px;
	color: #FFFFFF;
}



-->
</style>
</head>

<body>

<div id="container">
<div id="footer">
  
  <div id="logoEA">
    <p>logo 2</p>
    </div>
  <div id="archopmaat">
  <div align="right">
    <div align="left">
      <div align="center" class="stijl7  stijl9"> Hier komt een footer-tekst</div>
    </div>
  </div>
  </div>
</div>



<div id="hoofding">
  <div align="center">hier komt een logo van 800x94px</div>
  </div>
  <div id="midden">
    <div id="taal">NL - FR - EN - DE</div>
    <div id="foto">
      <div id="tekst">
        <p>tekst</p>
        <p>&nbsp;</p>
        <p>tekst</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>tekst</p>
      </div>
    </div>
    <div id="menu">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">home</a></li>
      <li><a href="#">pagina 1</a> </li>
      <li><a href="#">pagina 2</a></li>
      <li><a href="#">pagina 3</a> </li>
      <li><a href="#">pagina 4</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">pagina 5</a>
          <ul name="submenu">
            <li><a href="#">sub-pagina 1</a></li>
            <li><a href="#">sub-pagina 2</a></li>
            <li><a href="#">sub-pagina 3</a></li>
            <li><a href="#">subpagina 4</a></li>
            <li><a href="#">sub-pagina 5</a></li>
            <li><a href="#">sub-pagina 6</a></li>
          </ul>
      </li>
      <li><a href="#">contact</a></li>
    </ul>
    </div>
  </div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

ultddave · 18 mar 2010, 15:25

Het probleem komt in de eerste plaats omdat je overal de width instelt op een vaste waarde.

Waardoor de background-color maar beperkt is tot die width. Om dat te vermijden moet je daar nog div tags gaan rond plaatsen.

Nu opzich waren er meerdere problemen waardoor het niet zo simpel was. Ik heb daarom even de CSS en HTML code herschreven:

Code: Selecteer alles

<!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>testpagina</title> 

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> 
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
<!-- 
body { 
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
} 

#middencontainer { 
   	height: auto !important; 
	position: relative;
	text-align: center; 		
	background-color: #77867F;
}

#middencontainer2 {

	width: 800px;
	height: 600px; 
	text-align: center; 
	margin: 0 auto; 
	z-index: 1001;	
}

#midden { 
	width: 390px; 
	text-align: center; 
	float: right; 
} 

#middentext {
	text-align: left;
}

#menu { 
	width: 390px; 
	text-align: center;
	float: left;
} 

#menutext {
	text-align: left;
}


#clear {
	clear: both;
}

#headercontainer {
   	height: auto !important; 
   	position: relative; 
   	text-align: center;
	background-color: #CCCCCC; 
} 

#header {
	width: 800px; 
	height: 100px; 
	text-align:center;
	margin: 0 auto;
} 

#headertext {
	text-align: left;
}

#footercontainer {
   	height: auto !important; 
   	position: relative; 
   	text-align: center;
	background-color: #999999; 
} 


#footer { 
	width: 800px;   
	height: 100px; 
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	color: #FFFFFF; 
	margin: 0 auto;
} 

#footertext {
	text-align: left;
}



#foto { 
	position:absolute; 
	width:491px; 
	height:430px; 
	visibility: visible; 
	left: 285px; 
	z-index: 1; 

} 


#taal { 
	position:absolute; 
	width:200px; 
	height:25px; 
	z-index:3; 
	top: 400px; 
	padding-left: 25px; 
	font-size: 12px; 
	color: #FFFFFF; 
	text-decoration: none; 
} 

.stijl4 {
	font-size: 24px; 
} 

.stijl5 { 
	font-size: 14px; 
	color: #717D76; 
	font-weight: bold; 
} 

#tekst { 
	position:absolute; 
	width:367px; 
	height:295px; 
	z-index:1; 
	left: 72px; 
	top: 71px; 
} 

#container #midden #foto #tekst { 
	font-size: 12px; 
	color: #FFFFFF; 
} 

--> 
</style> 

</head> 
<body>
	<div id="headercontainer">
		<div id="header">
			<div id="headertext">test</div>
		</div>
	</div>

	<div id="middencontainer" >
		<div id="middencontainer2">
			<div id="menu">
				<div id="menutext">
					Menu
					<ul> 
						<li><a href="#">home</a></li> 
						<li><a href="#">pagina 1</a></li> 
						<li><a href="#">pagina 2</a></li> 
						<li><a href="#">pagina 3</a></li> 
						<li><a href="#">pagina 4</a></li> 
						<li><a href="#">pagina 5</a> 
						<ul> 
							<li><a href="#">sub-pagina 1</a></li> 
							<li><a href="#">sub-pagina 2</a></li> 
							<li><a href="#">sub-pagina 3</a></li> 
							<li><a href="#">sub-pagina 4</a></li> 
							<li><a href="#">sub-pagina 5</a></li> 
							<li><a href="#">sub-pagina 6</a></li> 
						</ul> 
						</li> 
						<li><a href="#">contact</a></li> 
					</ul> 
				</div>
			</div>
			<div id="midden">
				<div id="middentext">
					text<br/>
				</div>
			</div>
		</div>
	</div>

	<div id="clear"></div>

	<div id="footercontainer">
		<div id="footer">
			<div id="footertext">test</div>
		</div>
	</div>
</body> 
</html>

Hier zie je een voorbeeld: http://www.latemar.be/admin/temp/test1.html

Je bent al vrij gevorderd zie ik aan de code, dus ik vermoed dat je wel weet hoe je de hoogte van de blokken moet aanpassen. Want ik heb maar snel even iets genomen zodat het duidelijk was.

Het middenstuk heb ik gemaakt via een float: left; en float: right;.

Om te zorgen dat het menu, links in het midden staat. En de inhoud rechts in het midden.

Het menu heeft 390px width en de inhoud ook 390px width.

En ze zitten samen in een container van 800px width.

Die 10px width die zit tussen de 2 blokken in. Ik heb al ervaren dat als je de volledige width van de container opgebruikt, dan komt meestal 1 float hoger dan de andere te staan.

Dus het is best om daar een aantal pixels tussen te houden. 20px is natuurlijk wel vrij veel. Maar je moet dat zoiezo aanpassen want ik denk niet dat je menu even breed gaat zijn als je inhoud.

PS: Ik heb een aantal attributen weggehaald die me overbodug leken. Zoals die visibility. Die kan je desnoods zelf terug zetten indien nodig.

Als er nog iets niet goed is, dan zeg je het maar.

PS: Die witte blok onder de footer heb je dus bij grote schermen. Je kan die kleur wijzigen door de background-color van de <body> in te stellen in de CSS. Standaard staat die op wit, dus die kan je bijvoorbeeld grijs of groen maken, indien nodig.
Je kan die witruimte ook wegwerken door met min-height: 100% te werken.

Mvg,
Dave

ciboss · 18 mar 2010, 16:16

Hartelijk dank Ultdave voor dit zeer snel en gedetailleerd antwoord.

Ik heb je code gecopieerd in een nieuwe pagina van Dreamweaver CS3 en enkele details aangepast, met het beoogde resultaat ... op één element na:
onderaan de footer komt er terug een strook groen (= body backgroundcolor) en dat zou ik willen vermijden. Liever het footer-achtergrondkleur, zodat de pagina "uitloopt" naar onder toe zonder een nieuwe kleurband.
Ik heb de body-background color weggelaten en de footer op #FFFFFF gezet, zodat nu alles onder de groene middenstrook wit blijft, of was er een andere oplossing?

Nog een vraagje: hoe kan ik het middenblok naadloos laten aansluiten aan de headerstrook? Nu is er een witruimte van ongeveer 50px.

ultddave · 18 mar 2010, 16:22

Gewoon de code nog eens kopieren en plakken uit mijn vorig bericht.

Ik heb terjuist de code aangepast in dat bericht. Nu is die witruimte weg tussen header en inhoud. En kan je de body background-color aanpassen zonder dat het middenstuk ook verandert van kleur.

Ik heb ook wat tekst toegevoegd in mijn vorig bericht. Je kan dus - indien nodig - werken met min-height: 100%; om je site (of een deel ervan) dus minimum de hoogte van het browservenster in te laten nemen. Op die manier heb je nooit een witte ruimte onder de footer.

Hier kan je zien hoe het er nu uit ziet:
http://www.latemar.be/admin/temp/test1.html

De code is gevalideerd bij W3C (XHTML en CSS) - geen fouten. En de site wordt goed getoond in:
Internet Explorer 8
Safari
FireFox
Opera
Google Chrome

EDIT: Hier kan je zien hoe breed de menu en de inhoud zijn:
http://www.latemar.be/admin/temp/test2.html

(Ik heb gewoon het menu en midden een background-color gegeven die opvalt.)

Je ziet nu ook duidelijk die spatie ertussen. Maar die kan je verkleinen door de width van het menu en midden aan te passen.

Afhankelijk van het doel van de site, kan je ook nog eens in het midden een blok plaatsen:
http://img30.imageshack.us/img30/2778/latemaralbum.png
Zoals je ziet op de foto heb ik ook een relatief grote ruimte gelaten tussen het menu en de inhoud.

Mvg,
Dave

ciboss · 18 mar 2010, 16:41

Prima Dave !

Werkelijk bewonderenswaardig hoe snel en accuraat jij amateur-webdesigners als ik kunt helpen en grondig uitleggen hoe en waarom.

Ik merk op ditzelfde forum dat je deze namiddag ondertussen ook nog oa filius hebt geholpen. Ik moet besluiten dat je een krak bent, waarvoor mijn allergrootste waardering en proficiat aan Seniorennet dat, dank zij mensen zoals jij, ongeevenaarde diensten bewijst. Vele internationale fora kunnen daar een lesje van leren.

ultddave · 18 mar 2010, 17:11

Graag gedaan hoor.

Dit valt trouwens nog goed mee hoor. Dit moet parate kennis zijn voor mij als ICT student. De grootste uitdaging voor mij is het schrijven van JavaScript, PHP, ... code om dynamische websites te maken. Uiteindelijk zijn er niet veel mensen hier die dat gebruiken. Vooral omdat de gratis webruimte van telenet, scarlet, ... geen PHP ondersteunen.

En de JavaScript scriptjes die men gebruikt, zijn meestal gedownload en dienen voor paginatellers en dergelijke. Nu. Elke programmeur gaat zoiezo code downloaden, ik ook, omdat je daardoor veel tijd uitspaart.

Maar zelf dingen schrijven, is natuurlijk ook een uitdaging. Bijvoorbeeld:
http://img30.imageshack.us/img30/2778/latemaralbum.png
Bij die tekstveldjes kan je bijvoorbeeld zorgen dat de tekening van het kruisje een groen vinkje wordt als de tekst langer is dan 4 karakters.

(De code voor zo 1 tekstveldje is 25 regels lang. Valt nog goed mee eigenlijk.

)

Dus als je een script nodig hebt voor iets of iets wilt weten in verband met de site layout, laat je maar iets weten. De komende tijd ga ik wel druk bezig zijn met mijn examens (ik ben nog een student), dus vanaf de paasvakantie zal ik pas effectief kunnen helpen.

PS: Dit is bijvoorbeeld een leuk script dat je kan downloaden en installeren:
http://www.latemar.be/index.php?page=fo ... Lente_2010
(Als je op de foto's klikt, openen die in het groot met "Lightbox")

De officiële site: http://www.huddletogether.com/projects/lightbox/

Hangt er uiteraard vanaf, waarvoor je de website gaat gebruiken.

Mvg,
Dave

ciboss · 18 mar 2010, 17:34

leuk om dit allemaal te lezen ... en zo zijn wij (met twee generaties verschil, want ik ben al bijna 68 jaar

) samen geinteresseerd in ICT en webdesign. Ik heb avondlessen Dreamweaver gevolgd + extra-jaar in dynamische websites (waar ik ook php heb leren kennen) + CMS (Joomla & Drupal).
In een eigen website (in functie van huisruil-vakanties) heb ik ook Lightbox gebruikt.
zie www.ciboss.be/homelink
(zie pagina's "about us" en "Bruges".

En nu maak ik voor familie en vrienden af en toe een nieuwe website, kwestie van mijn grijze cellen wat actief te houden.

Veel succes in de examens, en tot ... nog eens!
Pol

ultddave · 18 mar 2010, 19:47

Bedankt ! Mooie, overzichtelijke site trouwens.

Tot de volgende.

Mvg,
Dave