Kigge/prøve denne kode, og lav dit layout ud fra den skabelon -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Website Powered by Bravenet</title>
<meta name="Generator" content="Stone's WebWriter 4">
<style type="text/css" media="screen">
body
{
font: 16px arial;
background-color: #000000;
}
/* these are the font styles for the links that appear on your web page */
a:link {font: bold 13px arial; color: #ffffff; text-decoration: none;}
a:active {font: bold 13px arial; color: #ffffff; text-decoration: none;}
a:visited {font: bold 13px arial; color: #ffffff; text-decoration: none;}
a:hover {font: bold 13px arial; color: #eeeeee; text-decoration: underline;}/*this one changes the mouseover or hover state of the link*/
.border
{
/* this is used for all kinds of borders */
/* be it for the whole page, or just the content section */
border: solid 1px #889573;
}
.left
{
/* floats the item to the left side of the page, and adds a margin */
float: left;
}
.right
{
/* floats the item to the right side of the page, and adds a margin */
float: right;
}
.scroll
{
/* this makes the element create scroll bars if the text is too long */
/* to be displayed. This is very similar to the effect created by */
/* frames and iframes, but does not allow page transitions like frames do */
overflow: auto;
}
.wrapper
{
/* remove this to have the page load at full width */
width: 780px;
}
.title
{
/* this is the styling for the title. Semantically, this should be an h1 */
/* padding all four sides of the div in order top, right, bottom, left */
background-color: #64951A;
color: #ffffff;
font-face: Arial;
font-weight: bold;
font-size: 36px;
padding: 10px 20px 10px 20px;
}
.title2
{
color: #ffffff;
font-face: Arial;
font-weight: bold;
font-size: 18px;
}
.titlemargin
{
margin: 10px 0px 10px 0px;
}
.subtitle {
color: #ffffff;
font-face: Arial;
font-weight: bold;
font-size: 14px;
}
.content
{
/* this describes the container of the content paragraphs. */
padding: 0px 20px 0px 20px; /* keeps text off the borders */
font-face: Arial;
font-size: 12px;
color: #ffffff;
padding: 0px;
margin: 0px;
}
.content.padleft
{
/* this is to pad if there's a sidebar on the left */
padding-left: 180px;
}
.content.padright
{
/* this is to pad if there's a sidebar on the right */
padding-right: 180px;
}
.sidebar
{
width: 150px;
height: 400px; /* remove this to allow different-sized sidebars */
background-color: #889573;
color: #64951A;
font-weight: bold;
padding: 10px 0px 5px 0px;
}
.sidebaritem
{
width: 130px;
background-color: #4F5743;
color: #889573;
border: solid 1px #64951A;
font-size: 14px;
padding: 2px;
margin-bottom: 3px;
}
.horiz
{
color: #4B1A95;
font-weight: bold;
width: 124px;
float: left;
text-align: center;
}
.sidebaritem.first
{
margin-top: 10px;
}
.footer
{
background-color:#64951A;
font-size: 10px;
font-face: arial;
text-align: center;
}
</style>
</head>
<body>
<div class="title titlemargin" style="height: 50px;">
<div style="float: left; margin-right: 60px;">My Website Title</div>
</div>
<div class="sidebar left" align="center" style="clear: both;">
<div class="subtitle">Main menu</div>
<div class="sidebaritem first"><a href="">menu item</a></div>
<div class="sidebaritem"><a href="">menu item</a></div>
<div class="sidebaritem"><a href="">menu item</a></div>
<div class="sidebaritem"><a href="">menu item</a></div>
<div class="sidebaritem"><a href="">menu item</a></div>
<div class="sidebaritem"><a href="">menu item</a></div>
</div>
<div class="sidebar right" align="center">
<div class="subtitle">Cool Links</div>
<div class="sidebaritem first"><a href="#">link</a></div>
<div class="sidebaritem"><a href="#">link</a></div>
</div>
<div class="content padleft padright">
<p class="title2">Welcome to Your New Website</p>
<p>Welcome to your new home on the Net! If you don't have your own Domain Name yet, you can get one through your Hosting Manager. Also in your Hosting Manager, you can find handy tools to maintain and update your Web Site, such as our Java-based FTP Applet, an easy way to upload your files to the server.</p>
<p>From the Hosting Manager you will also find links to our Web-based File Manager which includes a Text Editor and Visual Editor, making Site maintenance easy. And don't forget to check out the <a href="
http://www.bravenet.com/resources/index.php">Resource Area</a> for HTML help, scripts, clip art, audio clips, fonts, and more!</p><br />
<p class="title2">Adding Fun Tools to Your Site</p>
<p>Through your Bravenet Account, you can choose many of our FREE Tools to enhance your Site. Add as many as you like! Get a Hit Counter, Guestbook, Message Board, Email Form, Minipoll, Web Journal, or any of Bravenet's other great <a href="
http://www.bravenet.com/webtools/index.php">Tools and Services</a> to make your Site fun and interactive.</p>
<p>Finally, don't forget to join the <a href="
http://www.bravenet.com/webtools/affiliate/index.php">Bravenet Affiliate Program</a> and earn money everytime you send somebody to join Bravenet.</p>
</div>
<div class="footer" style="clear: both;"><a href="
http://www.bravenet.com">Powered by Bravenet.com</a></div>
</div>
</body>
</html>
