Archief - HTML: waarom een container

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
e

exserco

Legacy Member
Dag waarde computerliefhebbers,

Een vraagje van een beginnend webdesigner:
Waarom wordt in de code hieronder een "container" gemaakt? Ik zie het nut hiervan niet.

Code: 
<!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>
<style type=”text/css”>
#container {
width: 780px;
border: 1px solid gray;
margin: 5px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#header {
padding: 10px;
margin-bottom: 5px;
background-color: rgb(213, 219, 225);
}
#inhoud {
padding: 10px;
background-color: gray;
}
#footer {
clear: both;
padding: 10px;
margin-top: 5px;
background-color: rgb(213, 219, 225);
}
</style>
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="inhoud"> </div>
<div id="footer"> </div>
</div>
</body>
</html>

Ik heb zelf al een ontwerpje gedaan van een layout, maar dat lijkt me te lukken zonder "container".

Ik zal je de code ook geven:
code voor de opmaak.css
Code: 
/* commentaar staat hiertussen */

/* wat moet er nog gebeuren?
   - container (om een gelijke achtergrond te hebben???)
*/   

#hoofd {
	background:#339933;
	float: none;
	clear: both;
	width: 800px;
	position: relative;
	left: 112px; /* plaats in de rij waar de bovenste linkse pixel moet starten*/
	margin-bottom: 3px; /* marge tussen dit en het volgende object, in dit geval naar onder*/
}	

#links {
	background:#33FF99;
	float: left;
	width: 100px;
	position: relative;
	left: 112px;
	margin-right: 3px;
}

#midden {
	background:#CCFF33;
	float: left;
	width: 594px; /* Breedte zou eigenlijk 600 moeten zijn, maar margin links en rechts zijn telkens 3, dus 600-6 */
	position: relative;
	left: 112px;
}

#rechts {
	background:#FF33CC;
	float: left;
	width: 100px;
	position: relative;
	left: 112px;
	margin-left: 3px;
}

#onder {
	background:#9966CC;
	text-align: center;
	float: left;
	clear: both;
	width: 800px;
	position: relative;
	left: 112px;
	margin-top: 3px;
}

code voor de html
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>test</title>
  <link href="css/opmaak.css" rel="stylesheet" type="text/css">
  <link href="css/opmaaklayout.css" rel="stylesheet" type="text/css">

</head>

<body>
  <div id="hoofd">
    tekst hoofden we schrijven een ganse lijn van die zever neer, terwijl dit niet echt nodig zou blijken te zijn want het kan ook anders
  </div>

  <div id="links">
    tekst links <br>
    lijn 2
  </div>

  <div id="midden">
    tekst midden
  </div>

  <div id="rechts">
    tekst rechts<br><br>
    nog tekst om dieper te gaan
  </div>

  <div id="onder">
    tekst onder<br>
    de footer moet hier komen
  </div>
</body>
</html>
R

Rvl

Legacy Member
container kan veel toepassingen hebben maar soms is het inderdaad niet nodig. Het kan bijvoorbeeld nuttig zijn als je een border rond heel je layout wilt maken of achtergrond wilt instellen voor heel je layout dan kan dit simpel weg gewoon in u container gedefinieerd worden. Waar hij hier echter wel belangrijk is (voor jou site dus), is dat als je je browser in breedte zou doen verkleinen dat alle elementen van je site op zijn plaats blijven te staan en niet opeens beginnen te verspringen omdat je viewport te klein is.
gewoon wat spelen met die dingen en je komt er na een tijd wel snel genoeg achter wanneer zo een div nuttig kan zijn of wanneer hij overbodig is
d

dJeez

Legacy Member
In je voorbeeld wordt de container enkel gebruikt om alles te centreren op de pagina (via de margin: auto). Alle andere DIVs worden gepositioneerd tov die gecentreerde container.
o

orez

Legacy Member
1. Volledige pagina centreren
2. Faux Columns toepassing
3. Minder css code bij andere divs

trouwens, bij uw code, in #hoofd

float: none & clear: both is ook nutteloos hé .
float: left & position: relative samen --> ook nutteloos.

float: none == standaard, hoeft niet ingesteld te worden
clear: both op een eerste div heeft geen enkel nut. Enkel nuttig bij elementen die onder floated elements komen.

+ uw layout zal nooit gecentreerd staan left: 112px zal altijd 112px staan van de linkse border, zelfs al zit je op 1600*1200.
Left is trouwens ook niet correct. Daarvoor bestaat er margin-left: 112px, wat al correcter is ook trouwens. Lefts en rights gebruik je vooral bij absolute positioning.
e

exserco

Legacy Member
Bedankt allemaal,

ik heb het ondertussen begrepen. Ik zie nu het nut van die container.


Topic closed
l

little

Legacy Member
orez zei:
float: left & position: relative samen --> ook nutteloos.
Klik om te vergroten...

Hier ben ik toch niet meer zo zeker van. Onlangs in een project nodig gehad dat ik ze allebei voor hetzelfde element schreef. Anders werd het element niet goed in IE weergegeven.

**CY**
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan