This is probably very simple and easy, but a search of google hasn’t really helped me.
I am trying to create a page layout that only has one column. The page consists of:
Menu
Content
Footer
The layout is very simple.
I will have these areas with a white background and their width will be set to 800px using a page container. The actual page background will be pattern of some sort.
I want to create space between these vertical areas. In the space you will be able to see the background.
Is this possible with CSS?
Everything i’ve seen so far is about removing space created by bugs in IE.
All you need to do is to give these elements top and/or bottom margins (e.g., margin:10px 0;).
You might want to take a look at some existing template designs or layout samples to become more familiar with how CSS works (here’s an example:
http://blog.html.it/layoutgala/).
I learn something new every day (assuming I pay attention)...
-
MODX Staff
- 2,502 Posts
This layout as about as easy at it comes. You should really do this yourself but here is your layout.
<!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=utf-8">
<title>untitled</title>
<style type="text/css" media="screen">
html{background:#aa9 url(bg_imgurl.png) 0 0;}
body{width:760px;margin:0px auto;}
#menu,#content,#footer{margin-bottom:20px;border:2px solid #333;padding:20px;}
#menu ul{list-style-type:none;margin:0;padding:0;clear:both;}
#menu li{display:inline;padding:0 10px;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</div>
<div id="content">
<h1 id="heading">Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="footer">
Footer content
</div>
</body>
</html>
This will need conditional comments for working in IE6. You can either create a table to wrap the content an container div and position it seperately.
Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup
magician.
Blog ✦
Twitter ✦
LinkedIn ✦
GitHub
