Hey! First time CSS page builder.
Anyway, got some questions for you here, building my page at work so cant show it to you but have the code.
What I want to know is, how to get the menu and the content horizontally aligned.. Asked this in another thread aswell but this is probably a location.
Here is the code:
<html lang="en">
<head>
<style type="text/css" media="screen">
body
{margin: 0;
padding: 0;
text-align: center;
background-color: #D6D6D6;
background-image: url(img_39.gif);}
#container
{margin: 1em auto;
width: 650px;
text-align: left;
background-color: #fff;
border: 1px solid #676767;}}
#header
{height: 120px;
background-image: url(vinter.jpg);
background-repeat: no-repeat;
background-position: 0 0;
border-bottom: 1px solid #fff;
position: relative;}
#mainnav
{
background-color: #6894B7;}
#menu
{float: left;
width: 100px;
background-color: green;}
#contents
{
margin-left: 116px;
background-color: #6894B7;}
#footer
{background-color: #6894B7;}
ul
{float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;}
a
{float:left;
width:6em;
text-decoration:none;
color:white;
background-color:#6894B7;
padding:0.2em 0.6em;
}
p.right
{text-align:right;}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainnav">
Her skal det v閹焑 linker
</div>
<div id="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http:\\www.vg.no">Hovedsiden</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Reiseplan</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Utstyr</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Galleri</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Om Oss</a>
</div>
<div id="contents">
<h2>Welcome to the Kilimanjaro 2007 Expedition</h2>
<p>
<img class="imagefloat" src=http://www.webdeveloper.com/forum/archive/index.php/"palace.jpg" alt="" width="100" height="100" border="0">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
</p>
</div>
<div id="footer">
Copyright & copy; The Kilimanjaro Project 2007 Christian Haugen
</div>
</div>
</body>
</html>First, use a proper doctype:
<!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">Along with a doctype is this what you mean?
h2 { margin-top:0 }Thanks! helped a lot, looking into the whole doctype thing now, guess I better learn it sooner or later
Thanks! helped a lot, looking into the whole doctype thing now, guess I better learn it sooner or later
Don't feel you have to use a XHTML doctype, an HTML 4.01 doctype will work just fine for what you've marked up so far (in fact, the markup is not valid XHTML, but is valid HTML).
Anyway, got some questions for you here, building my page at work so cant show it to you but have the code.
What I want to know is, how to get the menu and the content horizontally aligned.. Asked this in another thread aswell but this is probably a location.
Here is the code:
<html lang="en">
<head>
<style type="text/css" media="screen">
body
{margin: 0;
padding: 0;
text-align: center;
background-color: #D6D6D6;
background-image: url(img_39.gif);}
#container
{margin: 1em auto;
width: 650px;
text-align: left;
background-color: #fff;
border: 1px solid #676767;}}
#header
{height: 120px;
background-image: url(vinter.jpg);
background-repeat: no-repeat;
background-position: 0 0;
border-bottom: 1px solid #fff;
position: relative;}
#mainnav
{
background-color: #6894B7;}
#menu
{float: left;
width: 100px;
background-color: green;}
#contents
{
margin-left: 116px;
background-color: #6894B7;}
#footer
{background-color: #6894B7;}
ul
{float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;}
a
{float:left;
width:6em;
text-decoration:none;
color:white;
background-color:#6894B7;
padding:0.2em 0.6em;
}
p.right
{text-align:right;}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainnav">
Her skal det v閹焑 linker
</div>
<div id="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http:\\www.vg.no">Hovedsiden</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Reiseplan</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Utstyr</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Galleri</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Om Oss</a>
</div>
<div id="contents">
<h2>Welcome to the Kilimanjaro 2007 Expedition</h2>
<p>
<img class="imagefloat" src=http://www.webdeveloper.com/forum/archive/index.php/"palace.jpg" alt="" width="100" height="100" border="0">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
</p>
</div>
<div id="footer">
Copyright & copy; The Kilimanjaro Project 2007 Christian Haugen
</div>
</div>
</body>
</html>First, use a proper doctype:
<!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">Along with a doctype is this what you mean?
h2 { margin-top:0 }Thanks! helped a lot, looking into the whole doctype thing now, guess I better learn it sooner or later
Thanks! helped a lot, looking into the whole doctype thing now, guess I better learn it sooner or later Don't feel you have to use a XHTML doctype, an HTML 4.01 doctype will work just fine for what you've marked up so far (in fact, the markup is not valid XHTML, but is valid HTML).