Hello, nice to see such a helpful community.
I was hoping someone could help me with this, I'm creating a page wich has a, container (duh), three article boxes and a menu, since I'm not a css wizard I was hoping someone could explain a few things in word's that a dummy like me would understand.
Ok, I've been trying to implement the two top article boxes using padding, these are supposed to be on the same horizontal line, but the second box keeps falling either below or to far away.
Im only using css, I read somewhere tables would slow down the loading period.
The setup is like this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Sample Layout</title>
<style type="text/css">
<!--
body {
background-color: gray;
margin: 0;
padding: 10px;
font: medium arial, sans-serif;
}
div, #nav {
background-color: white;
color: black;
padding: 9px;
border: solid 1px black;
}
#container {
width: 770px;
margin: 0 auto;
padding: 0;
border: none;
background-color: transparent;
}
#head {
text-align: center;
margin: 0;
padding: 10px;
margin-bottom: 5px;
}
#nav {
list-style: none;
float: left;
width: 150px;
margin: 0;
background-color: white;
height: 300px;
overflow: auto;
}
#left, #right {
float: left;
margin-left: 5px;
width: 275px;
height: 300px;
overflow: auto;
margin-bottom: 5px;
}
#bottom {
clear: both;
margin-left: 175px;
margin-top: 5px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="head">
<h1>Title Goes Here</h1>
<h2>This Is a Sub-Title</h2>
</div> <!-- head -->
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Page 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Page 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Page 3</a></li>
</ul>
<div id="left">
<h3>Left Column</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet
est nec massa lacinia iaculis. Phasellus urna lectus, vehicula vitae, rhoncus
non, posuere sed, felis. Vivamus mauris. Cras adipiscing interdum enim. Nunc a
mi. Fusce vel ligula et ante venenatis adipiscing. Curabitur cursus felis a
ligula. Phasellus sed nunc at nisl pellentesque fermentum. Etiam commodo. Ut
quis velit. Donec pulvinar augue sed pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet
est nec massa lacinia iaculis. Phasellus urna lectus, vehicula vitae, rhoncus
non, posuere sed, felis. Vivamus mauris. Cras adipiscing interdum enim. Nunc a
mi. Fusce vel ligula et ante venenatis adipiscing. Curabitur cursus felis a
ligula. Phasellus sed nunc at nisl pellentesque fermentum. Etiam commodo. Ut
quis velit. Donec pulvinar augue sed pede.</p>
</div>
<div id="right">
<h3>Right Column</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet
est nec massa lacinia iaculis. Phasellus urna lectus, vehicula vitae, rhoncus
non, posuere sed, felis. Vivamus mauris. Cras adipiscing interdum enim. Nunc a
mi. Fusce vel ligula et ante venenatis adipiscing. Curabitur cursus felis a
ligula. Phasellus sed nunc at nisl pellentesque fermentum. Etiam commodo. Ut
quis velit. Donec pulvinar augue sed pede.</p>
</div>
<div id="bottom">
<h3>Bottom Section</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet
est nec massa lacinia iaculis. Phasellus urna lectus, vehicula vitae, rhoncus
non, posuere sed, felis. Vivamus mauris. Cras adipiscing interdum enim. Nunc a
mi. Fusce vel ligula et ante venenatis adipiscing. Curabitur cursus felis a
ligula. Phasellus sed nunc at nisl pellentesque fermentum. Etiam commodo. Ut
quis velit. Donec pulvinar augue sed pede.</p>
</div>
</div> <!-- container -->
</body>
</html>Thank you!Thank you!
You're welcome. There are probably other ways to do that, and some likely better, but at least that should give you something to study and play around with.Yeah, im reading the code to see where I got it wrong.
So if Im lucky I might even learn something!
I was hoping someone could help me with this, I'm creating a page wich has a, container (duh), three article boxes and a menu, since I'm not a css wizard I was hoping someone could explain a few things in word's that a dummy like me would understand.
Ok, I've been trying to implement the two top article boxes using padding, these are supposed to be on the same horizontal line, but the second box keeps falling either below or to far away.
Im only using css, I read somewhere tables would slow down the loading period.
The setup is like this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Sample Layout</title>
<style type="text/css">
<!--
body {
background-color: gray;
margin: 0;
padding: 10px;
font: medium arial, sans-serif;
}
div, #nav {
background-color: white;
color: black;
padding: 9px;
border: solid 1px black;
}
#container {
width: 770px;
margin: 0 auto;
padding: 0;
border: none;
background-color: transparent;
}
#head {
text-align: center;
margin: 0;
padding: 10px;
margin-bottom: 5px;
}
#nav {
list-style: none;
float: left;
width: 150px;
margin: 0;
background-color: white;
height: 300px;
overflow: auto;
}
#left, #right {
float: left;
margin-left: 5px;
width: 275px;
height: 300px;
overflow: auto;
margin-bottom: 5px;
}
#bottom {
clear: both;
margin-left: 175px;
margin-top: 5px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="head">
<h1>Title Goes Here</h1>
<h2>This Is a Sub-Title</h2>
</div> <!-- head -->
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Page 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Page 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Page 3</a></li>
</ul>
<div id="left">
<h3>Left Column</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet
est nec massa lacinia iaculis. Phasellus urna lectus, vehicula vitae, rhoncus
non, posuere sed, felis. Vivamus mauris. Cras adipiscing interdum enim. Nunc a
mi. Fusce vel ligula et ante venenatis adipiscing. Curabitur cursus felis a
ligula. Phasellus sed nunc at nisl pellentesque fermentum. Etiam commodo. Ut
quis velit. Donec pulvinar augue sed pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet
est nec massa lacinia iaculis. Phasellus urna lectus, vehicula vitae, rhoncus
non, posuere sed, felis. Vivamus mauris. Cras adipiscing interdum enim. Nunc a
mi. Fusce vel ligula et ante venenatis adipiscing. Curabitur cursus felis a
ligula. Phasellus sed nunc at nisl pellentesque fermentum. Etiam commodo. Ut
quis velit. Donec pulvinar augue sed pede.</p>
</div>
<div id="right">
<h3>Right Column</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet
est nec massa lacinia iaculis. Phasellus urna lectus, vehicula vitae, rhoncus
non, posuere sed, felis. Vivamus mauris. Cras adipiscing interdum enim. Nunc a
mi. Fusce vel ligula et ante venenatis adipiscing. Curabitur cursus felis a
ligula. Phasellus sed nunc at nisl pellentesque fermentum. Etiam commodo. Ut
quis velit. Donec pulvinar augue sed pede.</p>
</div>
<div id="bottom">
<h3>Bottom Section</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet
est nec massa lacinia iaculis. Phasellus urna lectus, vehicula vitae, rhoncus
non, posuere sed, felis. Vivamus mauris. Cras adipiscing interdum enim. Nunc a
mi. Fusce vel ligula et ante venenatis adipiscing. Curabitur cursus felis a
ligula. Phasellus sed nunc at nisl pellentesque fermentum. Etiam commodo. Ut
quis velit. Donec pulvinar augue sed pede.</p>
</div>
</div> <!-- container -->
</body>
</html>Thank you!Thank you!
You're welcome. There are probably other ways to do that, and some likely better, but at least that should give you something to study and play around with.Yeah, im reading the code to see where I got it wrong.
So if Im lucky I might even learn something!