My first webpage - Need some help with coding layout
3 replies, posted
Hello
I just started learning from w3schools.com yesterday and I got pretty far with a homepage until I created the navigation menu which I am having trouble getting placed correctly.
Picture of current state: [url]http://i.imgur.com/xf5qRiA.jpg[/url]
Picture of the desired layout: [url]http://i.imgur.com/fFPZsVx.png[/url]
Nevermind the fp logo, it's just a placeholder..
Here is the html along with the images and a font: [url]http://www.mediafire.com/?jze713i8drz8dr1[/url]
The code:
[code]
<!DOCTYPE html>
<html>
<head>
<title>Fisker's Server - Home</title>
<style>
body {
background-image: url('background.png');
background-color: #E6E6E6;
}
@font-face { font-family: coolvetica; src: url('coolvetica.otf'); }
p.dot {color:white; font-size:2px;}
p.cn {
font-size:1em;
font-family:calibri, sans-serif;
text-shadow: 0 0 1px rgba(51,51,51,0.3);
margin-left:35px;
}
h1.cn {
font-size:3em;
font-family:coolvetica, sans-serif;
text-shadow: 0 0 1px rgba(51,51,51,0.3);
letter-spacing:1px;
font-weight: normal;
margin-left:35px;
}
#navigation {
width:128px;
}
#navigation a {
display:block;
background:url(navigation.png);
height:48px;
text-indent:-9000px;
box-shadow: -1px 1px 1px 0px #444444;
}
#navigation a.link1 {background-position:0px 0px;}
#navigation a.link1:hover {background-position:-128px 0px;}
#navigation a.link2 {background-position:0px -48px;}
#navigation a.link2:hover {background-position:-128px -48px;}
#navigation a.link3 {background-position:0px -96px;}
#navigation a.link3:hover {background-position:-128px -96px;}
#navigation a.link4 {background-position:0px -144px;}
#navigation a.link4:hover {background-position:-128px -144px;}
#navigation a.link5 {background-position:0px -192px;}
#navigation a.link5:hover {background-position:-128px -192px;}
#navigation a.link6 {background-position:0px -240px;}
#navigation a.link6:hover {background-position:-128px -240px;}
#navigation a.link7 {background-position:0px -288px;}
#navigation a.link7:hover {background-position:-128px -288px;}
</style>
</head>
<body>
<div id="container" align="center" style="
margin-top:30px;
margin-right:20px;
min-height:800px;
max-width:1128px;
">
<div id="sidemenu" style="width:128px; height: 464px;">
<img src="logo.png" alt="Logo" style="box-shadow: -1px -1px 1px 0px #444444;" align="left"></img>
<ul id="navigation" style="list-style-type: none;">
<li><a href="home.html" class="link1">Home</a><li>
<li><a href="news.html" class="link2">News</a><li>
<li><a href="server.html" class="link3">Server</a><li>
<li><a href="guide.html" class="link4">Guide</a><li>
<li><a href="faq.html" class="link5">FAQ</a><li>
<li><a href="contact.html" class="link6">Contact</a><li>
<li><a href="Forum.html" class="link7">Forum</a><li>
</ul>
</div>
<div id="content" style="
text-align:left;
margin-left:128px;
min-height:800px;
min-width:528px;
max-width:1128px;
background-color:#FFFFFF;
box-shadow: 0 0 1px 1px #444444;
">
<p class="dot" style="">.</p>
<h1 class="cn">Fisker's Server</h1>
<p class="cn" style="margin-top:-20px;">This is a paragraph..</br>Hello you.</p>
<p class="cn">This is yet another paragraph.<p>
</div>
</div>
</body>
</html>
[/code]
Thanks in advance :)
w3schools is not a good source of information, they frequently get [URL="http://w3fools.com/"]things wrong[/URL] and are not associated with w3c.
A good first stab at web development but there are a few things you are doing wrong. In-line styles are bad and using a sprite-sheet for the navigation text seems excessive.
As I'm bored I'll post the fixed code shortly so you can see the difference.
Edit: Here [url]https://www.dropbox.com/s/0lr2t4rsobwo2kf/Fiskers-fixed.zip[/url]
I'm sure some of the others here can direct you to some good learning resources and give specific advice.
what CBastard said, learn html from here
[url]http://htmldog.com/[/url]
I've heard they give great tutorials.
[QUOTE=CBastard;40226747]w3schools is not a good source of information, they frequently get [URL="http://w3fools.com/"]things wrong[/URL] and are not associated with w3c.
A good first stab at web development but there are a few things you are doing wrong. In-line styles are bad and using a sprite-sheet for the navigation text seems excessive.
As I'm bored I'll post the fixed code shortly so you can see the difference.
Edit: Here [url]https://www.dropbox.com/s/0lr2t4rsobwo2kf/Fiskers-fixed.zip[/url]
I'm sure some of the others here can direct you to some good learning resources and give specific advice.[/QUOTE]
Thank you very much, I can see now why every tutorial told to create a stylesheet, but with this the code becomes much more comprehensive.
[QUOTE=jung3o;40227155]what CBastard said, learn html from here
[url]http://htmldog.com/[/url]
I've heard they give great tutorials.[/QUOTE]
Thanks for the link, great stuff so far :)
Sorry, you need to Log In to post a reply to this thread.
