achtergrond laten door lopen

Door Alexander Kraan op 18-07-2010 15:54 gewijzigd op 18-07-2010 17:09

3.179 views

Is het mogelijk om de achtergrond te laten doorlopen tot de footer bij left col en right col het logo div heb ik hand matig door getrokken zie voorbeeld

wat moet ik in de css of html code veranderen?

css code


/* CSS layout */
body {
	margin: 0;
	padding: 0;
}
#top_nav {
background-color: #99CCFF;	
}

#masthead {
	min-width: 600px;
}

#logo {
	float: left;
	width: 16px;
	Background-color: #003399;
	background-repeat: repeat-y;
	overflow:hidden; 

}

#header {
	margin-left:16px;
	background-color: #99CCFF;
	font-family: "Times New Roman", Times, serif;
	font-size: 36pt;
	color: #0000FF;

}

#container {
	clear: both;
	min-width: 600px;
}

#left_col {
    width: 30px;
	float: left;
	background-color: #003399;
	background-repeat: repeat-y;
	overflow:hidden; 
}

#right_col {
	float: right;
	width: 200px;
	width: 200px;
	float: right;
	background-color: #0000FF;
    background-repeat: repeat;
	color: #FFFFFF;
	font-family: "Times New Roman", Times, serif;
	font-size: 10pt;

}

#page_content {
	margin-left: 30px;
	margin-right: 200px;
	background-color: #99CCFF;
	background-repeat: repeat;
	font-family: "Times New Roman", Times, serif;
	font-size: 12pt;
	color: #0000FF;
}

#footer {
	clear: both;
	background-color: #6699FF;
}

html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Untitled 1</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="masthead">
<div id="top_nav">
	</div>
	<div id="logo" style="width: 16px; height: 55px">
		<img height="16" src="../../ttvyerseke.png" width="16" /></div>
	<div id="header">
		TTVYerseke</div>
</div>
<div id="container">
	<div id="left_col">
		left<br />
		col</div>
	<div id="right_col">
		tekst</div>
	<div id="page_content">
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
	</div>
</div>
<div id="footer">
	kk</div>

</body>

</html>

Victor Php

18-07-2010 16:09

Geef de body een kleur..
En zoveel <br /> is nutteloos.
Zoek liever op een goede footer tutorial.

marco -

18-07-2010 16:52 gewijzigd op 18-07-2010 17:08

epic fail

P Lekensteyn

18-07-2010 20:56

Hee, kom je niet van Antagonist vandaan?
Ik had je toch verteld hoe je dat moest doen?

Verander bij de container position:relative.
Bij de balken links en rechts: position:absolute;top:0;bottom:0

Alexander Kraan

22-07-2010 22:56

ik heb nu deze code alleen het werkt nog niet


/* CSS layout */
body {
	margin: 0;
	padding: 0;
	background-color: #99CCFF;
}
#top_nav {
background-color: #99CCFF;	
}

#masthead {
	min-width: 600px;
}

#logo {
	float: left;
	width: 16px;
	Background-color: #003399;
	background-repeat: repeat-y;
	overflow:hidden; 

}

#header {
	margin-left:16px;
	background-color: #99CCFF;
	font-family: "Times New Roman", Times, serif;
	font-size: 36pt;
	color: #0000FF;

}

#container {
	clear: both;
	min-width: 600px;
	position: relative;
}
#left_col {
	width: 30px;
	float: left;
	background-color: #003399;
	background-repeat: repeat-y;
	overflow: hidden;
	top: 0px;
	position: absolute;
	bottom: 0px;
}
#right_col {
	width: 200px;
	float: right;
	background-color: #0000FF;
	background-repeat: repeat;
	color: #FFFFFF;
	font-family: "Times New Roman", Times, serif;
	font-size: 10pt;
	position: absolute;
	top: 0px;
	bottom: 0px;
}

#page_content {
	margin-left: 30px;
	margin-right: 200px;
	background-color: #99CCFF;
	background-repeat: repeat;
	font-family: "Times New Roman", Times, serif;
	font-size: 12pt;
	color: #0000FF;
}

#footer {
	clear: both;
	background-color: #6699FF;
}

Michael Beers

22-07-2010 23:46 gewijzigd op 22-07-2010 23:52

Ik snap niet wat je bedoelt maar ik doe een poging voor je omdat ik denk dat ik weet wat je wilt...

JE 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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>TITLE</title>
	</head>
	<body>
		<div id="wrapper">
		
			HIER AL JE CONTENT PLAATSEN ENZ.
			HIER AL JE CONTENT PLAATSEN ENZ.
			HIER AL JE CONTENT PLAATSEN ENZ.
			HIER AL JE CONTENT PLAATSEN ENZ.
			HIER AL JE CONTENT PLAATSEN
		
			<div id="push"></div>
		</div>
		<div id="footer">

		</div>
	</body>

</html>

JE CSS


/*
** RESETS
** Hierbij haal ik de padding,margins weg zorg ik dat de html/body container schermvullend is!
*/
html,body
{
	height:		100%;
	width:		100%;
}

body
{
	margin:		0;
	padding:	0;
}

/*
** Dit is de wrapper hier komt alle content in :)
** De margin zorgt er in dit geval voor dat de wrapper altijd gecentreerd staat in het beeld
** De min waarde in de margin haalt de footer weer naar boven :)
*/
#wrapper
{
	margin:		0 auto -116px; /*Waardes van de footer meenemen! heb je dus een top van 16px moet je deze ook aftrekken*/
	min-height:	100%;
	width:		100%;
	height:		auto !important; /* !important zorgt ervoor dat een element voorang krijgt! */
	background:	#FF0000;
}

/*
** Dit zorgt ervoor dat de content niet onder de footer gaat :)
** Deze moet gelijk zijn aan de footer hoogte
*/
#push
{
	position:	relative;
	min-height:	100px;
	height:		100px;
}

/*
** Dit is de footer deze blijft nu altijd aan de onderkant van je scherm plakken
*/
#footer
{
	position:	relative;
	clear:		both;
	bottom:		0px;
	top:		16px; /*Top waarde van de wrapper*/
	height:		100px; /*Hoogte van de footer conclusie van de wrapper: 100 + 16 = 116 dus de min waarde word 116*/
	width:		100%; /*Zorgt dat de footer over de hele lengte gaat*/
	background:	#00FF00;
}

Edit
Verder zou ik nooit een Times als font gebruiken :)
Reden waarom: Wiki link

Alexander Kraan

24-07-2010 18:07 gewijzigd op 24-07-2010 18:14

het is de bedoeling dat het er zo komt uit te zien http://www.ttvyerseke.nl/test/test13/index.html en dat de linker en rechter div de achtergrond automatische door lopen met de content div tot de footer zie voorbeeld

Reageren

Inloggen om te reageren