Hulp vereist voor css-indeling

Status
Niet open voor verdere reacties.
hfoppen

hfoppen

Terugkerende gebruiker
Lid geworden
15 nov 2000
Berichten
1.058
Beste mensen,

ik ben bezig om de basis te maken voor een website. Krijg dit echter niet goed voor elkaar. Onderstaand de huidige code.
De left & right, moeten naast topheader/menu/promobox/content komen. Footer1 & Footer2 is incl. deze beide 'balken'.

Schets:
site-indeling.png

Ik krijg die links & rechts er niet goed bij!! (online pagina: http://www.foppen.nu/helpmij/index-helpmij.html)

HTML: 
<!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>
	<title>..:: Webpagina ::..</title>
 
 
<style type="text/css"> 
#html,body{
	width:100%;
	margin:0px;
	padding:0px;
	background: #f3f2f0;
	font-family: Arial;
	font-size: 11px;
	}

#container{
	width:1020px;
	height:auto;
	margin:0px auto;
	}

#left {
    float: left;
    width: 30px;
    height: auto;
    background: #c00000;
} 

#right {
    float: left;
    width: 30px;
    height: auto;
    background: #c00000;
}  
 
/* Headers
    Topheader voor logo
    Menu voor menu
    Promobox voor slider
*/
#topheader{
	float:left;
	width:960px;
	height:87px;
	}

#menu{
	float:left;
	text-align: right;
	width:960px;
	height:15px;
	word-spacing: 20px;
    }

#promobox{
	float:left;
	width:960px;
	height:249px;
	}

/* Content-gedeelte */
#contentcontainer{
	float:left;
	height:400px;
	width:960px;
	}

#content{
	background: #ffffff;
	float:left;
	width:960px;
	height:400px;
	}

#contentleft{
	background: #ffffff;
	float:left;
	width:570px;
	height:400px;
	}

#contentright{
	background: #ffffff;
	float:left;
	width:190px;
	height:400px;
	}

/* Footers; 2 stuks. Footer1 is voor (uitgebreid menu), footer2 is voor copyright */
#footer1{
	float:left;
	width:988px;
	height:150px;
	background-color:#496685;
	color: #FFF;
	font-size:11px; 
	font-weight: bold;
	font-family: Arial;
	}

#footer2{
	float:left;
	width:988px;
	height:22px;
	background-color:#203c5c;
	color: #FFF;
    	font-size:10px; 
    	font-weight: bold;
	font-family: Arial;	
	text-align: center;
	}	
	
H1 {
	font-family: Arial;	
    	font-size:14px; 
    	font-weight: bold;
	color: #1d3c5b;
}

H2 {
	font-family: Arial;	
    	font-size:12px; 
    	font-weight: bold;
	color: #1d3c5b;
}

H3 {
	font-family: Arial;	
    	font-size:11px; 
    	font-weight: bold;
	color: #1d3c5b;
}
</style>
</head>

<body>
<div id="container">
    <div id="left">Left</div>
    <div id="topheader">
		Topheader/logo		
	</div>
	<div id="menu">
		Home menu2 menu3 menu4 menu5
	</div>

	<div id="promobox">
		Promobox
	</div>

	<div id="contentcontainer">
		
		<div id="content">
			<div id="contentleft"><h1>Links</h1><h2>Links H2</h2><h3>Links H3</h3></div>
			<div id="contentright">Rechts</div>
		</div>

    <div id="right">Right</div>

		<div id="footer1">
			Footer1
		</div>
		
		<div id="footer2">
			&copy; Website
		</div>
	</div>
</div>
 
</body>
</html>
 
Laatst bewerkt:
Hoi hfoppen,
Er kan een <div id="centerwrapper">...</div> om het middelste deel heen; dan kan dat als één geheel links floaten:

opmaak-schema.png

De volgorde wordt dan: van Links naar Rechts en (ook per kolom) van Boven naar Beneden:
HTML: 
<div id="left">...</div>

<div id="centerwrapper">
    <div id="topheader">...</div>
    <div id="menu">........</div>
    <div id="promobox">....</div>
    <div id="content">.....</div>
</div>

<div id="right">...</div>

<div id="footer-1">...</div>

<div id="footer-2">...</div>
  • De #left, #centerwrapper en de #right krijgen een {float:left;}.
  • De #footer-1 krijgt een {clear: left;} om altijd onder de hoogste van de 3 kolommen erboven te komen (en dus onder alle 3 tegelijk).
  • De div's in de #centerwrapper hoeven niet gefloat te worden, die beginnen vanzelf al aan de linkerkant.
  • Moet er binnen zo'n div in het middenblok iets rechts uitgelijnd worden, dan kan dat door voor het betreffende element {text-align: right;} te gebruiken. Floats kan ook, maar dan moet je weer een "clear" in het volgende element zetten om niet ernaast door te gaan maar eronder.
Zo zou'ie moeten werken.

Met vriendelijke groet,
CSShunter

PS:
De totale pagina-breedte van 1020px zou ik op 990px zetten: de ruimte (breedte) voor een rechter scrollbar voor hoge pagina's moet ook ingecalculeerd worden. Op deze manier zit je safe voor beeldschermen van 1024x768px.
De #container om alles heen kan trouwens gemist worden. Je geeft gewoon de <body> een {width: 990px; margin: 0 auto;}, en dan komt de pagina gecentreerd.
 
Laatst bewerkt:
Bedankt csshunter! Hier kan ik iets mee....
Had ondertussen ook al gekeken om de footers uit de container te halen en dan een width van 100% te geven. Werkt op zich ook, alleen dan moet ik een div 'footertekst' hebben die dan wel 960px breed is en wordt gecentreerd binnen de footer1.
Hoe zou ik dat kunnen doen!? Dan heb ik 't denk ik helemaal goed.
 
Met de css:
Code: 
#footer-1 {
   clear: left;
   /* geen breedte opgeven: wordt automatisch 100% van element waar de #footer in zit */
   padding: 0 30px; /* links en rechts ter waarde van de breedte van de #left resp. #right kolom */
   }
komt de inhoud van de #footer nooit onder de #left en #right, maar blijft deze binnen de breedte van de #contentwrapper.
En met de css:
Code: 
#footer-1 h2,
#footer-1 p {
   text-align: center;
   }
wordt wat in de <h1>'s en de <p>'s binnen de #footer zit als tekst gecentreerd.

Is dat 'm?
Met vriendelijke groet,
CSShunter

PS:
Hulpmiddeltje om te zien hoe groot iets is: even een tijdelijke achtergrondkleur aan dat element geven, bv.:
Code: 
#footer-1 p {
   ...
   background: yellow;
   }
Voor verdere ontwerp-tips bv.: Golden Rules Of CSS. :)
 
Ik heb nu onderstaande pagina. Dus de footers uit de container gehaald en 100% width gegeven. Alleen die tekst in footer 1 zou eigenlijk niet gecentreerd moeten staan, maar zeg maar 't zelfde als bij de header/content....dus ik dacht, ik maak een div (footertekst) binnen de footer1.

HTML: 
<style type="text/css"> 
#html,body{
	width:100%;
	margin:0px;
	padding:0px;
	background: #f3f2f0;
	font-family: Arial;
	font-size: 11px;
	}
#container{
	width:960px;
	height:auto;
	margin:0px auto;
	}
 
#topheader{
	float:left;
	width:960px;
	height:87px;
	}
 
#menu{
	float:left;
	text-align: right;
	width:960px;
	height:15px;
	}
 
#menu a:link, a:visited, a:hover, a:active {
	color: #000;
   	font-size:11px; 
    	font-weight: bold;
	font-family: Arial;
	text-decoration: none;
}
 
#promobox{
	float:left;
	width:960px;
	height:249px;
	}
 
#contentcontainer{
	float:left;
	height:400px;
	width:960px;
	}
 
#contentleft{
	background: #ffffff;
	float:left;
	width:570px;
	height:400px;
	}
 
#contentright{
	background: #ffffff;
	float:left;
	width:90px;
	height:400px;
	}
 
#content{
	background: #ffffff;
	float:left;
	width:960px;
	height:400px;
	}
 
#footer1{
	float:left;
	width: 100%;
	height:150px;
	background-color:#496685;
	color: #FFF;
    	font-size:11px; 
    	font-weight: bold;
	font-family: Arial;
	}
 
#footer2{
	float:left;
	width: 100%;
	height:22px;
	background-color:#203c5c;
	color: #FFF;
    	font-size:10px; 
    	font-weight: bold;
	font-family: Arial;	
	text-align: center;
	}	
	
#footertekst {
	text-align: center;
}
 
H1 {
	font-family: Arial;	
    	font-size:14px; 
    	font-weight: bold;
	color: #1d3c5b;
}
 
H2 {
	font-family: Arial;	
    	font-size:12px; 
    	font-weight: bold;
	color: #1d3c5b;
}
 
H3 {
	font-family: Arial;	
    	font-size:11px; 
    	font-weight: bold;
	color: #1d3c5b;
}
</style>
</head>
<body>
<div id="container">
	<div id="topheader">
		Topheader/logo		
	</div>
	<div id="menu">
		Menu	</div>
 
	<div id="promobox">
		Promobox
	</div>
 
	<div id="contentcontainer">
		
		<div id="content">
			<div id="contentleft"><h1>Links</h1><h2>Links H2</h2><h3>Links H3</h3></div>
			<div id="contentright">Rechts</div>
		</div>
	</div>
</div>
		<div id="footer1">
			<div id="footertekst">
				Footer1
			</div>
		</div>
		
		<div id="footer2">
			Footer2		</div>
 
 
</body>
</html>
 
In nr. #3:
... alleen dan moet ik een div 'footertekst' hebben die dan wel 960px breed is en wordt gecentreerd binnen de footer1. Hoe zou ik dat kunnen doen!?
Klik om te vergroten...
Dat was dus opgelost.
Maar nu:
Alleen die tekst in footer 1 zou eigenlijk niet gecentreerd moeten staan.
Klik om te vergroten...
Dan moet je 'm denkelijk niet centreren :p:
Code: 
#footertekst {
    text-align: center;
    }
De hele #footertekst kan er uit, dan komt de tekst vanzelf aan de linkerkant van de #footer1 te staan.

Maar ik snap 'm even niet meer.
Het is nu deze pagina geworden: indeling-wdev-nw.htm.
Dat wil zeggen:

opmaak-schema2.png

En dat is toch een heel ander model dan oorspronkelijk?
 
Laatst bewerkt:
Klopt dat het model iets anders is.....maar op zich is het alleen dat de links & rechts wat breder worden (dus afh. van de pagina).
Anders gezegd: eigenlijk zijn links & rechts verdwenen en is de footer1 & footer2 100% breed geworden. Ik zit even te kijken wat mooier is!

Wat ik nu nog niet goed krijg is dat die tekst "#footer1" niet gecentreerd moet worden, maar links moet beginnen. Maar dan niet helemaal links van footer1, maar
op dezelfde plek als de breedte van de container zeg maar.
 
Ah, dan zal er voor #footer1 een "binnencontainer" gemaakt moeten worden, dus toch een #footertekst, met dezelfde eigenschappen als de #container van het bovenste stuk, een soortement duplicaat dus:
Code: 
#footertekst {
   width: 960px;
   margin: 0 auto;
   background: yellow; /* het verklappend kleurtje */
   }
HTML: 
<div id="footer1">
	<div id="footertekst">
		Footer1
	</div>
</div>
Dus de #footertekst als blok is op deze manier gecentreerd, maar de inhoud ervan niet.
Dan blijft de achtergrond van de #footer1 doorlopen over de volle breedte, en kan de inhoud niet verder komen dan deze binnencontainer.

Overigens: de {height: auto;} kan overal uit, dat is voor de hoogte van alle elementen al de default-waarde. Zie de css-specificatie van de hoogte-eigenschappen, daar noemen ze het de "initial value".
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan