TalkPHP - View Single Post

Tanax · 02-24-2009, 12:11 PM

Actually, nevermind, I kinda solved it. Here's the finished CSS:

Code:

body {

	margin: 0;
	padding: 0;

}

#container {

	background-color: #8CC6FF;
	padding: 15px;
	margin-left: 20px;
	margin-right: 20px;

}

#header {

	top: 15px;
	height: 200px;
	margin-bottom: 15px;

}

#logo {

	background-color: blue;
	height: 170px;
	width: 200px;
	padding: 15px;
	position: relative;

}

#head {

	background-color: green;
	height: 200px;
	float: right;
	padding-left: 15px;
	width: 1065px;

}

#top-menu {

	background-color: orange;
	margin-bottom: 10px;
	position: relative;
	margin-left: 180px;
	font-size: 17px;
	text-align: center;

}

#top-menu ul {

	list-style: none;
	margin: 0;
	padding: 0;

}

#top-menu ul li {

	display: inline;
	margin-right: 40px;

}

#left-menu {

	background-color: blue;
	width: 165px;
	float: left;
	position: relative;

}

#left-menu #title {

	text-align: center;
	border-bottom: 1px dotted #000;
	padding: 5px;

}

#left-menu ul {

	list-style: none;

}

#left-menu ul li {

	margin-bottom: 5px;

}

#main {

	background-color: blue;
	position: relative;
	margin-left: 180px;
	padding: 30px;

} 

#main #title {

	font-size: 24px;
	font-weight: bold;
	text-align: center;

}

And the HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Eldobado</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>

	<div id="container" >

		<div id="header">

			<div id="head">head</div>
			<div id="logo">f</div>

		</div>

		<div id="contents">

			<div id="left-menu">

				<div id="title">Produkter</div>

				<ul>
					<li>Kaminer</li>
					<li>Skorstenar</li>
					<li>Solpaneler</li>
					<li>Uterum</li>
					<li>Fönster</li>
					<li>Garageportar</li>
					<li>Spabad</li>
				</ul>

			</div>
			
			<div id="top-menu">

				<ul>
					<li>Nyheter</li>
					<li>Erbjudanden</li>
					<li>Köpvillkor</li>
					<li>Rådgivning</li>
					<li>Kontakt</li>
					<li>Öppettider</li>
				</ul>

			</div>

			<div id="main">

				<div id="title">Lorem ipsum</div>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere, nulla sed tempor imperdiet, dolor tortor aliquet arcu, 
				et fermentum justo elit id leo. Nullam libero. Integer condimentum ipsum sit amet dui. Vivamus bibendum lectus. Praesent aliquam arcu 
				nec libero. Etiam eget sem in ante interdum fringilla. Vivamus sem risus, placerat sit amet, tempus sit amet, hendrerit nec, sem. Ut lectus. 
				Aenean pede. Suspendisse ac neque in risus mattis cursus. Nam in justo a augue commodo malesuada. Fusce vitae ipsum in nisi aliquet 
				pharetra. Etiam dignissim, ligula vel tincidunt placerat, lorem neque aliquam augue, vel mattis ligula augue sit amet justo. Cras pulvinar, 
				ligula non rhoncus adipiscing, turpis dolor rutrum odio, ac tempor diam arcu quis dolor. Fusce varius purus. Phasellus mattis, leo quis suscipit 
				sollicitudin, dolor ante placerat mi, vitae blandit arcu mi id eros.</p>

				<p>Nam adipiscing laoreet odio. Phasellus sapien elit, euismod vel, pellentesque ut, fermentum sit amet, elit. Mauris interdum dapibus libero. 
				Ut dignissim orci. Nulla aliquam convallis lectus. Vivamus libero ipsum, ultricies in, pulvinar non, suscipit vel, ante. Mauris justo. 
				Mauris aliquet pede in lectus. Etiam tempus magna et elit. Nulla facilisi.</p>

			</div>

		</div>

	</div>

</body>
</html>

Looks okay? Any errors you see?
I removed the #contents from the CSS completely, but kept it in the HTML, and then the container got fluid and expanded when the #main div expanded.

I also reversed the float, so the "bar" div is floated left, and the links and main divs are positioned relative.