The code is a result of me google’ing how to do something or stealing somebody else’s code then trying to make sense of it enough to make it work for my website.
We all start somewhere. : )
If you’re into books, I can recommend Ian Lloyd’s Build Your Own Web Site the Right Way Using HTML and CSS. (it only happens to be a Sitepoint book I swear). It was my first book, it set me straight on a lot of the basics of HTML/CSS. You don’t get done with that book knowing how to build a site, but you do build “a” site (Bubble Under - The diving club for the south-west UK) and it’s a great start.
You mentioned moving the image over off the screen. Does this work across all browsers?
I meant your divs that you’re opening/closing… instead of display none/block, you can make them absolutely positioned and margin-left: -999em on :hover instead. This removes them from the document flow (they won’t take up space) and they’ll be off-screen (to the left of the screen).
It’s popularly used in dropdown menus, to hide/show the submenus.
if so do I do it the same way I make my button hover effects go from the top to the bottom half of the pic.
That’s a different technique (a css sprite that slides). It’s generally an excellent technique, though yours has a few disadvantages:
You have a :hover state, but no :focus state. Let keyboarders and mobile users know where they are as well: add a :focus state right after your hover state.
Example:
.Home:hover, .Home:focus {
Second, the negative text-indent means, if for whatever reason the image doesn’t load, there’s no text left behind to give people information! It becomes a Mystery Meat menu. One possible solution is to try out Gilder-Levin (my preferred technique much of the time), but it’s somewhat complicated. It took me a while to figure it out myself.
List (somewhat outdated) of various image-replacement techniques (Gilder-Levin is near the bottom).
Your code could use some updating as well : ) If you’re interested, start with a Strict doctype instead of transitional. Then let the W3C validator tell you everything you did wrong, and see where you can go from there.
Your menu:
<div id="Bonkage"><a class="Bonkage" href="http://www.bonkage.com"></a>
</div>
<div id="Home"><a class="Home" href="http://www.bonkage.com"></a>
</div>
<div id="Portfolio"><a class="Portfolio" href="http://bit.ly/m9FsMG?r=bb"></a>
</div>
<div id="Services"><a class="Services" href="http://www.bonkage.com/Services.html"></a>
</div>
<div id="Contact"><a class="Contact" href="mailto:bonkageservices@gmail.com"></a>
</div>
<div id="Logo"><a class="Logo" href="http://www.bonkage.com"></a>
</div>
<div id="SearchBar">
<a class="SearchBar" href="http://www.bonkage.com"></a>
</div>
Generally in the web dev community, a menu is considered a list of links… which means we write it as an unordered list:
(I'd have the main-clickable-logo thing separate)
<ul id="menu">
<li><a class="Home" href="http://www.bonkage.com">Home</a></li>
<li><a class="Portfolio" href="http://bit.ly/m9FsMG?r=bb">Portfolio</a></li>
<li><a class="Services" href="http://www.bonkage.com/Services.html">Services</a></li>
<li><a class="Contact" href="mailto:bonkageservices@gmail.com">Contact</a></li>
</ul>
The search bar would be an HTML form.
Your portfolio link is reliant on the bit.ly servers to be up. They’ll also be able to measure how many people click on that link (every server a link goes through, those servers can catch all that referrer info). If bit.ly goes down, so does your link.
Having the contact button attempt to open someone’s mail program can be rather disorienting: most sites, the Contact button in the main menu goes to a page, where an email may be listed but is more clearly marked as an email.
For example, my graphical mail client sucks and is always broken. I log into a server via SSH to read and send mail. So someone like me would want to be able to highlight/copy the link instead.
Just ideas.
Anyway, with just classes on the anchors, you can style everything.
You’d remove default margins and padding from #menu, set #menu li to display: inline (normally no style at all but IE likes a state set on li’s here), and float the #menu a’s.
Everything that all those anchors have in common, you can state just once as
#menu a {
everything they share;
}
then whatever’s different (widths etc), you can list just those:
#menu .Home {
width: 200px;
}
and you can list everyone’s hover/focus styles the same way. You can combine all those individual images onto a single menu image.
Here is one example I have of the image replacement (tho it was unusual in that the guy who designed it had large spaces between each menu item):
Bella menu
Here’s another, a site design idea by kyllle:
Practice makes
Here’s the image:
http://stommepoes.nl/Kyle/menu.gif (today I would make it a png)
