Archief - xHTML: Achtergrond (container) komt nie mee met inhoud

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.
G

GenesisX

Legacy Member
http://users.pandora.be/hydrofive/xHTML/

'k Probeer me nu eens te verdiepen in de xHTML 'wereld' door het maken van een simpele site. Fouten komen dus al naar boven...:

De lichte achtergrond van m'n container (700px width) moet meeverlengen met de inhoud ervan. Maar als ik nu die 2 boxen naast elkaar probeer te zetten komt dat erbuiten te staan o_O

Alvast merci

Btw - Ook es vragen of m'n code overzichtelijk is? Wil het goed doen zodat ik niet in de problemen kom. Zelf geraak ik er nog maar half uit :x

Edit - Heb vergeten in IE te kijken, daar komt het dus wel allemaal goe. :s



index.html
Code: 
<body>
		<div id="maincontainer">
			<div id="header">
				<h3>Header</h3>
			</div>
			<div id="left">
				<div id="mainheader">Last five forum topics</div>
				<div id="maincontent">blah blah blah</div>
			</div>
			<div id="right">
				<div id="mainheader">Intro</div>
				<div id="maincontent">When you think it's all over.. everything happens again. Just like this. Congratulations! :)</div>
			</div>
		</div>
</body>

normal.css
Code: 
/* CSS Document */

body {
	font-family: "Trebuchet MS", Tahoma;
	font-size: 12px;
	background-image: url(../images/bg.gif);
}
#maincontainer {
	align: center;
	width: 700px; /* Width */
	height: 100%; /* Height */
	
	margin-left: auto;
	margin-right: auto; /* Center the layout */
	text-align: left; /* Resets text alignement */
	
	background-color: #FFFEE6;
}
#header {
	text-align: center;
	vertical-align: bottom;
	width: 100%;
	height: 60px;
	}
	
#left {
	padding: 3px;
	width: 200px;
	float: left;
}
#right {
	padding: 3px;
	width: 300px;
	float: left;
}
#mainheader {
	padding-left: 3px;
	padding-right: 3px;
	background-color: #616d77;
	font-weight: bold;
	color: #FFFFFF;
}
#maincontent{
	padding: 1px 1px 2px 3px;
	background-color: #7e8992;
	color: #d2dae1;
}
R

Rvl

Legacy Member
Btw flipto ik weet niet van waar ge u css hebt geleerd maar ne id kunt ge maar 1 keer gebruiken per pagina als ge het meer keer wilt gebruiken dan moet ge een class gebruiken da doe ge hier al fout. Dus verander u id en # in u css maar naar een class en . in u css

Effe ne edit zodat ge zeker geen extra vragen hierover hebt.
<div id="mainheader">Last five forum topics</div>
<div id="maincontent">blah blah blah</div>
Die id mag maar 1 keer per pagina gebruikt worden, jij gebruikt beide id's hier al 2 keer per pagina. verander dus naar
<div class="mainheader">...
<div class="maincontent">...
verander in u css #mainheader en #maincontent naar .mainheader en .maincontent
Als u probleem zich blijft voordoen steek dan is juist voor da ge uwe container afsluit ne <div> met clear:both; erbij. Da zou in ieder geval u probleem moete oplosse
b

bRahms

Legacy Member
Btw flipto ik weet niet van waar ge u css hebt geleerd maar ne id kunt ge maar 1 keer gebruiken per pagina als ge het meer keer wilt gebruiken dan moet ge een class gebruiken da doe ge hier al fout. Dus verander u id en # in u css maar naar een class en . in u css

dat wordt aangeraden, verplicht is het niet.
G

GenesisX

Legacy Member
@Rvl - Werkt niet :s Of doek weer iets verkeerd? :p

In FF - http://users.pandora.be/hydrofive/xHTML/
http://users.pandora.be/hydrofive/xHTML/styles/normal.css

Code: 
.mainheader {
	padding-left: 3px;
	padding-right: 3px;
	background-color: #616d77;
	font-weight: bold;
	color: #FFFFFF;
}
.maincontent{
	padding: 1px 1px 2px 3px;
	background-color: #7e8992;
	color: #d2dae1;
}
#close {
	clear:both;
}

Code: 
		<div id="maincontainer">
			<div id="header">
				<h3>Header</h3>
			</div>
			<div id="left">
				<div class="mainheader">Last five forum topics</div>
				<div class="maincontent">blah blah blah</div>
			</div>
			<div id="right">
				<div class="mainheader">Intro</div>
				<div class="maincontent">When you think it's all over.. everything happens again. Just like this. Congratulations! :)</div>
			</div>
		
		<div id="close"></div>
		</div>
G

GenesisX

Legacy Member
LoL! Dat javascriptje werkte niet en dan maar ff dieper die code bekeken en gefoefeld.

Gewoonweg..
Code: 
/* under = IE */
height: 1px;
toegevoegd :p

Thx!
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