 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
uk1simon
Joined: 05 Nov 2008
Posts: 16
|
 Posted: Mon Nov 10, 2008 11:10 am website layout |
 |
|
|
I've just googled this topic and I'm still wondering what kind of layout I should use.
Setting the main layout using <table> tags doesn't seem to be a good idea.
Many people say that using <div> tags for a layout is a very good option.
So which method should I apply to a simple website (home, about us, contact us, some text, a few pictures)?
What kind of layouts have some huge websites got, table tags, divs or something else?
Regards,
Simon |
|
sticks464
Joined: 31 Dec 2006
Posts: 1284
|
| Posted: Mon Nov 10, 2008 12:32 pm |
|
|
|
Most modern websites are using div's and css. You can use either a one column layout with a menu at the top or a two column with a menu either left or right.
References:
http://www.pmob.co.uk/
http://www.cssplay.co.uk/menus/
Here's a good layout that can be used for either left or right menu
| Code: |
<!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>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #87ceeb;
font-size: 1.2em;
}
#container {
width:760px; /* any width including 100% will work */
color: inherit;
margin:0 auto; /* remove if 100% width */
background:#FFF;
}
#header {
width: 100%;
height: 160px;
background: #1e90ff;
}
#menu {
background: #1e90ff;
height:26px;
}
/* optional for right sidebar */
/*#content {
background: #99C;
color: inherit;
float: left;
margin: 0 -200px 0 0;
width: 100%;
}
#content .wrapper {
background: #FFF;
margin: 0 200px 0 0;
overflow: hidden;
padding: 10px 0 10px 10px; /* optional, feel free to remove */
#content {/* use for left sidebar, menu etc. */
background: #99C;
color: #000;
float: right;
margin: 0 0 0 -200px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {
background: #FFF;
margin: 0 0 0 200px;
overflow: hidden;
padding: 10px; /* optional, feel free to remove */
}
#sidebar {
background: #99C;
color: inherit;
float: left;
width: 180px;
padding: 10px;
}
.clearer {
height: 1px;
font-size: -1px;
clear: both;
}
/* content styles */
#header h1 {
padding: 0 0 0 5px;
}
#menu p {
font-size: 1em;
font-weight: bold;
padding: 5px 0 5px 5px;
}
#footer {
clear: both;
border-top: 1px solid #1e90ff;
border-bottom: 10px solid #1e90ff;
text-align: center;
font-size: 50%;
font-weight: bold;
}
#footer p {
padding: 10px 0;
}
</style>
</head>
<body>
<div id="container">
<!--header and menu content goes here -->
<div id="header">
<h1>Header Goes Here</h1>
</div>
<div id="menu"><h3>Optional Menu</h3></div><!--delete this line if using sidebar menu-->
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</div>
</div>
<div id="sidebar">
<!--sidebar content, menu goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>
</div>
<div class="clearer"></div><!--clears footer from content-->
<!--footer content goes here -->
<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html> |
|
|
uk1simon
Joined: 05 Nov 2008
Posts: 16
|
| Posted: Tue Nov 11, 2008 2:27 am |
|
|
|
that's massive
thanks |
|
uk1simon
Joined: 05 Nov 2008
Posts: 16
|
|
sticks464
Joined: 31 Dec 2006
Posts: 1284
|
| Posted: Tue Nov 11, 2008 5:57 am |
|
|
|
| And people wonder why we continuously berate tables and promote css. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
