Sidfot underst med varierande höjd på containern

3 svar · 597 visningar · startad av J07 10 mars 2008

J07Medlem sedan maj 2007172 inlägg

Frågan10 mars 2008 08:58#1

2 frågot om denna kod som ger en enkel sidlayout.
1)Hur får jag sidfoten att ligga centrerad underst om sidans höjd varierar?
2)Vad tycker ni om detta sätta att lägga upp layouten på? Att sätta container till relative och innehållet tilll absolut? Fördelar och nackdelar? Ville testa att bygga på detta sätt för att kunna styra positioner exakt.

<!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>Untitled Document</title>

<style type="text/css">
<!--
body {
	font-style: Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}
.bodyfix #container {
	width: 900px;
	background: #FFFFFF;
	margin: 0 auto; 
	border: 1px solid #000000;
	text-align: left; 
	position:relative;
	height:100%;
	clear:both;
}
#sidhuvud{
position:absolute;
width:900px;
height:100px;
left:0px;
top:0px;
background-color:#999999;
}
#vanster{
position:absolute;
width:200px;
left:0px;
top:100px;
background-color:#666666;
height:100%;
}
#hoger{
position:absolute;
width:200px;
left:700px;
top:100px;
background-color:#666666;
height:100%;
}
#sok{
position:absolute;
width:200px;
height:20px;
left:700px;
top:20px;
background-color:#666600;
}
#innehall{
position:absolute;
width:500px;
height:500px;
left:200px;
top:100px;
height:100%;
background-color:#CCCCCC;
}
-->
</style></head>

<body class="bodyfix">

<div id="container">
<div id="sidhuvud">1</div>
<div id="vanster">2</div>
<div id="hoger">3</div>
<div id="sok">Sök</div>
<div id="innehall">Text</div>
</div>
<div id="container2">Sidfot</div>
</body>
</html>

J07Medlem sedan maj 2007172 inlägg

11 mars 2008 10:52#2

Antar att detta inte är en bra lösning och möjligt med sidfoten som jag skriver att jag vill ha in eftersom ingen verkar kunna komma med lösning..

Danne VMedlem sedan aug. 20068 090 inlägg

11 mars 2008 11:08#3

Kolla Jarvklo's lösning:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>Ett av Jarvklos exempel</title>

	<style type="text/css">
	html,body {margin:0;padding:0;height:100%}
	#container {
		min-height: 100%;
		background-color:#eee;
		width:300px;
		margin:0 auto;
	}
	* html #container {  /* hack för MSIE 6 och tidigare */
		height: 100%;
	}
	#bottenutrymme {
		height: 30px;   /* garanterar plats för #fot */
		background-color: #ccf;
	}
	#fot {
		/* samma width, height, margin och ev. padding som #container */
		width:300px;
		margin:0 auto;
		
		height: 30px; /* samma höjd som #bottenutrymme */
		margin-top: -31px; /* samma höjd som #bottenutrymme (inkl ev paddings och border-top dör) */
		border-top: 1px solid #000;
		}
	</style>

</head>

<body>
<div id="container">
	Container
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	Sed ut ante a sapien venenatis euismod. 
	Ut vitae leo non tellus congue pulvinar. Vestibulum sed risus. 
	Aenean eget lectus ac dui tincidunt imperdiet. 
	Curabitur vestibulum augue in odio. Quisque eget tortor. 
	Etiam hendrerit velit nec nisl. 
	Quisque et sapien eu odio aliquet vehicula. 
	Suspendisse volutpat, magna et iaculis accumsan, 
	ante purus rutrum mauris, non sodales dolor mauris et urna. 
	Nam at ligula. Vestibulum ante ipsum primis in faucibus orci
	luctus et ultrices posuere cubilia Curae; 
	Curabitur vitae justo. Nam tellus ipsum, adipiscing quis, 
	imperdiet vel, gravida id, sem. 
	Maecenas et magna nec erat tincidunt placerat. 
	Sed viverra, erat vitae euismod tristique, eros arcu molestie sem, 
	id sagittis justo urna at erat.
	<div id="bottenutrymme">&nbsp;</div>
</div>
<div id="fot">Fot (Obs utanför containern i koden)</div>
</body>
</html>

J07Medlem sedan maj 2007172 inlägg

11 mars 2008 12:00#4

Ok, ser bra ut men testade att kombinera mitt och Jarvklos. Verkar svårt att få det att gå ihop. Vitsen med mitt var att man skulle kunna positionera hej vilt inuti boxen innehall och det går ju inte att göra det i Jarvklos?

<!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>Untitled Document</title>

<style type="text/css">
<!--
body {
	font-style: Verdana, Arial, Helvetica, sans-serif;
	background:#fff;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}
.bodyfix #container{
	width: 900px;
	background: #FFFFFF;
	margin: 0 auto; 
	border: 1px solid #000000;
	text-align: left; 
	position:relative;
	height:100%;
	z-index:1;
	clear:both
}
#container2{
	width: 900px;
	background: #000;
	height:100px;
	position:relative;
	z-index:10;
	padding-bottom:0px;

}
#sidhuvud{
position:absolute;
width:900px;
height:192px;
left:0px;
top:0px;
background-color:#999999;
}
#vanster{
position:absolute;
width:200px;
left:0px;
top:192px;
background-color:#666666;
height:500px;
z-index:10;
}
#hoger{
position:absolute;
width:200px;
left:700px;
top:192px;
background-color:#666666;
height:500px;
clear:right;
}
#sok{
position:absolute;
width:200px;
height:20px;
left:700px;
top:20px;
background-color:#666600;
z-index:5;
}
#innehall{
position:absolute;
width:500px;
height:500px;
left:200px;
top:192px;
height:100%;
background-color:#CCCCCC;
}
* html #container {  /* hack för MSIE 6 och tidigare */
		height: 100%;
	}
#bottenutrymme {
		height: 30px;   /* garanterar plats för #fot */
		background-color: #ccf;
	}
#fot {
		/* samma width, height, margin och ev. padding som #container */
		width:900px;
		margin:0 auto;
		background-color:#009966;
		height: 30px; /* samma höjd som #bottenutrymme */
		margin-top: -31px; /* samma höjd som #bottenutrymme (inkl ev paddings och border-top dör) */
		border-top: 1px solid #000;
		z-index:100;
		}
-->
</style></head>

<body class="bodyfix">

<div id="container">

<div id="sidhuvud"><img src="TOP.jpg" alt="-" width="900" height="192" /></div>
<div id="vanster">
  <p>2</p>
  <p>&nbsp;</p>
</div>
<div id="hoger">
  <p>3</p>
  <p>&nbsp;</p>
</div>
<div id="sok">Sök</div>
<div id="innehall">
  <p>Text</p>
</div>

</div>
<div id="bottenutrymme">&nbsp;</div>
</div>
<div id="fot">Fot (Obs utanför containern i koden)</div>
</body>
</html>