You are free to use and modify my layout in any purpose, and I hope you find this useful! Enjoy...
Layout Sample #1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Layout 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body { margin: 0; padding: 0; }
body {
font: 60% Verdana, Helvetica, arial, sans-serif;
background-color: #373832;
color: #696969;
text-align: center;
}
h1, h2, h3, h4, h5, h6 {
font: 700 2.0em Verdana, Tahoma, arial, sans-serif;
color: Midnightblue;
padding: 15px 0 5px 20px;
margin: auto;
}
p {
padding: 10px 10px 10px 20px;
line-height: 17px;
margin: auto;
}
#wrapper {
width: 800px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
background-color: inherit;
padding: 0;
text-align: left;
}
#content-wrapper {
float: left;
width: 800px;
margin: 0;
padding: 0;
border-right: 2px solid #E5E5E5;
}
#header {
width: 800px;
height: 200px auto;
background-color: #F2F2F2;
float: left;
margin: 0;
}
#top-nav {
width: 800px;
height: 40px;
float: left;
margin: 0;
padding: 0;
}
#navigation {
width: 795px;
height: 33px;
float: left;
margin: 0;
padding: 0;
background-color: #eee;
border: 2px solid #ccc;
}
#navigation ul {
width: 450px;
line-height: 25px;
list-style-type: none;
margin: 5px 0 0 3px;
padding: 0;
float: left;
}
#navigation li {
width: auto;
line-height: 25px;
display: inline;
margin: 0;
padding: 0;
float: left;
}
#navigation a {
padding: 5px;
}
#navigation a:link, #navigation a:visited {
font: 700 14px Verdana, Helvetica, arial, sans-serif;
color: #555;
text-decoration: none;
background-color: inherit;
cursor: hand;
text-transform: uppercase;
}
#navigation a:active, #navigation a:hover, #navigation a.current {
font: 700 14px Verdana, Helvetica, arial, sans-serif;
color: orange;
text-decoration: none;
background-color: inherit;
cursor: hand;
text-transform: uppercase;
}
#navigation form {
float: right;
background: none;
width: 250px;
margin: 0;
padding: 0;
}
#navigation .search-field {
float: left;
width: 200px;
margin: 5px 0 0 0;
padding: 5px 0 5px 0;
border: none;
}
#navigation .search-button {
float: right;
border: none;
background: #000;
padding: 5px 9px 5px 9px;
margin: 5px 10px 0 0;
color: #FFF;
}
#logo {
width: 800px;
height: 120px;
float: left;
margin: 0;
padding: 0;
}
#logo h1 {
font: 700 26px Verdana, Tahoma, arial;
float: left;
padding: 5px 0 0 20px;
color: #181818;
}
#logo .top-banner {
float: right;
height: 100px;
width: 300px;
margin: 7px 10px;
padding: 0;
background-color: #E9E9E9;
border: 2px solid #000;
text-align: center;
}
.top-banner h3 {
font: 700 18px Arial, Verdana, sans-serif;
color: darkorange;
padding-top: 27px;
}
#content {
width: 486px;
float: left;
background-color: #FAFAFA;
margin: 0;
padding: 0;
position: relative;
}
#side-bar {
width: 310px;
float: right;
position: relative;
margin: 0;
padding: 0;
color: #E5E5E5;
}
#side-bar h3 {
color: orange;
}
#side-bar .long-banner {
width: 120px;
height: 320px;
float: right;
text-align: center;
margin: 0 10px 5px 7px;
padding: 10px;
background-color: #FFF;
border: 2px solid #696969;
}
#side-bar .long-banner h3 {
margin: 0;
padding: 15px 0 0 0;
}
#footer {
width: 800px;
height: 35px;
float: left;
background-color: #F2F2F2;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content-wrapper">
<div id="header">
<div id="top-nav">
<div id="navigation">
<ul>
<li><a href="#" alt="" class="current">Home</a></li>
<li><a href="#" alt="">About</a></li>
<li><a href="#" alt="">Services</a></li>
<li><a href="#" alt="">Contact</a></li>
</ul>
<form action="#" method="get">
<input type="text" value="" class="search-field" />
<input type="button" class="search-button" value="Go!" />
</form>
</div>
</div>
<div id="logo">
<h1> COMPANY LOGO </h1>
<div class="top-banner">
<h3> Banner 300x100 </h3>
</div>
</div>
</div>
<div id="content">
<h3>Contents Goes Here!</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. </p>
</div>
<div id="side-bar">
<h3 style="clear:both;"> Side Bar </h3>
<div class="long-banner">
<h3> LONG BANNER 120x320 </h3>
</div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. </p>
</div>
<div id="footer">
<h4>Footer</h4>
</div>
</div>
</div>
</body>
</html>
Philippe_1 0 Newbie Poster
Bedankt voor de script. Deze kan ik zeker gebruiken. Maar hoe kan ik het menu aanpassen en submenu's maken? Het menu moet horizontaal blijven en hoe zorg ik ervoor dat de andere webpagina's van mijn website hetzelfde blijven van layout? Gewoon hetzelfde script kopieren en plakken naar de andere webpagina's en dan gewoon de inhoud aanpassen?
Ik zou graag een professioneel horizontaal menu met submenu's willen maken maar ik vind niet het gene wat ik wil. Ik heb al enkele programma's gedownload om menu's te maken maar deze zijn nogal onhandig. Kan iemand me hiermee helpen? Alvast bedankt.
Groeten
Philippe
halomas 0 Newbie Poster
thanks broooo... this is very helpful
webgab 0 Newbie Poster
Thanks for sharing. Nice layout but doesn't render in FF v. 8.0.1. (Works fine in IE & Chrome). Going to mess around with it to see what the FF issue is.
rotten69 20 Posting Whiz
I'm gonna have to give it a go and see what it looks like. Hmmm, That'd be really GREAT if a screenshot of the layout was posted.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.