Forum Moderators: not2easy
I learnt HTML a few years back, to a decent (not great) standard, but kind of stopped doing it a while back.
I'm now trying to get back into web design again, and wanted some help with the basic layout of the site.
Below is the plan for the basic layout of the site (very, very scrappy 2 minute job, but shows what I'm going for I hope)
<snip>
Basically, the bit that is obviousy the links (the red bar with news/home/etc on it), I wanted to be buttons to go to the page, but also rollover drop down menus to the sub pages.
The main thing I was wondering is, should that bar all be 1 image, or does it need to be split into different images per link/button (so "Home" is one button image, "News" is another etc)?
And should the logo bit at the top (picture/site title that joins onto the red bar) be part of that same image as the red bar, or a seperate one?
Think thats it ;) And anything else you think I should consider would be greatly appreciated! Cheers
[edited by: swa66 at 7:04 pm (utc) on Jan. 31, 2009]
[edit reason] No personal URLs, please see ToS [/edit]
You're not allowed to post any links so you should remove them before an admin does.
Seeing as this is the CSS forum I will answer within those confines.
You can easily split the nav menu in CSS and if I were you I would keep the header seperate because sometimes nav menus can be a cross browser problem so you may not want to add to the problems until your fluent enough in CSS to fix them.
You don't need to have them as an image because you can style them in CSS. Just google CSS menus or CSS dropdown menus and you'll get lots of examples.
The main thing I was wondering is, should that bar all be 1 image, or does it need to be split into different images per link/button (so "Home" is one button image, "News" is another etc)?
I'd do neither.
<h1 id="header"><a href="/"><img src="images/headerimg.jpg"></a></h1>
<ul id="nav">
<li><a href="/">HOME</a></li>
<li><a href="news.html">NEWS</a></li>
<li><a href="pics.html">PICS</a></li>
<li><a href="contact.html">EMAIL</a></li>
<li><a href="links.html">LINKS</a></li>
</ul>
Then in your CSS, define a background image for the anchors within the nav ul li, "something" like this.
#header { margin:0; padding:0; text-align: center; }
#nav {
padding:0;
margin:0;
text-align: center;
font-size: 90%;
font-weight: 700;
}
#nav li { list-style:none; display: inline; }
#nav li a {
display:block;
width: 100px;
height: 50px;
background:url(images/nav-bg.gif) top left repeat-x;
color:#ffffff;
}
#nav li a:hover {
background:url(images/nav-bg-over.gif) top left repeat-x;
color:#ff0000;
}
