...

View Full Version : Menu hoover help needed



Wardy118
01-22-2007, 11:35 PM
Hi,

I have recently been learning how to develop and design websites as i wish to have a career around website designing in the future and require a bit of help. But bare with me i'm a bit of a novice of all this. Basically i'm trying to get the hoover effect on my top menu navigation but i'm having a bit of a problem.I've tried using onmouseout and onmouseover and some other alternatives but i just cant seem to crack it. If anyone can help I would be very grateful.

Thanks

My code for menu is shown below:

<DIV style="position:absolute;background:#F0F0F0;border:1px solid #DC261D;left:841px;top:92px;width:120px;height:20px;z-index:59" align="left">
<align="top" alt="" border="0" width="115" height="23">
</DIV>
<DIV style="position:absolute;left:695px;top:91px;width:147px;height:23px;z-index:60" align="left">
<align="top" alt="" border="0" width="147" height="23">
</DIV>
<DIV style="position:absolute;background:#F0F0F0;border:1px solid #DC261D;left:120px;top:92px;width:144px;height:20px;z-index:61" align="center">
<FONT style="font-size:14px" color="#000000" face="Maiandra GD"><B>Home</B></FONT>
</DIV>
<DIV style="position:absolute;background:#F0F0F0;border:1px solid #DC261D;left:552px;top:92px;width:147px;height:20px;z-index:62" align="center">
<FONT style="font-size:14px" color="#000000" face="Maiandra GD"><B>Vans</B></FONT>
</DIV>
<DIV style="position:absolute;background:#F0F0F0;border:1px solid #DC261D;left:699px;top:92px;width:142px;height:20px;z-index:63" align="center">
<FONT style="font-size:14px" color="#000000" face="Maiandra GD"><B>Trucks</B></FONT>
</DIV>
<DIV style="position:absolute;background:#F0F0F0;border:1px solid #DC261D;left:408px;top:92px;width:144px;height:20px;z-index:64" align="center">
<FONT style="font-size:14px" color="#000000" face="Maiandra GD"><B>Bikes</B></FONT>
</DIV>
<HR size="3" width="951" style="position:absolute;left:3px;top:839px;width:951px;height:3px;z-index:65">
<DIV style="position:absolute;background:#F0F0F0;border:1px solid #DC261D;left:0px;top:92px;width:120px;height:20px;z-index:66" align="left">
<align="top" alt="" border="0" width="115" height="23">
</DIV>
<DIV style="position:absolute;left:258px;top:91px;width:145px;height:23px;z-index:67" align="left">
<align="top" alt="" border="0" width="145" height="23">
</DIV>
<DIV style="position:absolute;background:#F0F0F0;border:1px solid #DC261D;left:264px;top:92px;width:144px;height:20px;z-index:68" align="center">
<FONT style="font-size:14px" color="#000000" face="Maiandra GD"><B>Cars</B></FONT>
</DIV>

</BODY>
</HTML>
</HTML>

VIPStephan
01-23-2007, 12:03 AM
You have a long way ahead of you if you wanna be a pro.
I don't quite understand this "menu"... what's this supposed to be:


<align="top" alt="" border="0" width="115" height="23">

...an image?
No wonder it's not working because that's pretty wrong.

If you wanna have links that change the color you should put your CSS into an external file and use the respective pseudo classes:


a {color: green;}
a:hover {color: red;}


A CSS navigation with changing images is somewhat more complex and I think this is way ahead of you yet. Do some reading on HTML and CSS (http://htmldog.com) basics and take it step by step.

Wardy118
01-23-2007, 11:52 AM
Thanks for your help and advice but after spending most of last night working on it I finally cracked it. I ended up changing alot of the code and was left with the following:

<style>
.menu {
display:table;
padding:0;
position:absolute;
left: 0px;
top:92px;
list-style-type:none;
white-space:nowrap;
border:1px #FF0000;
}
* html .menu {
display:inline-block;
width:1px;
padding:0 2px;
}
.menu li {
display:table-cell;
}
* html .menu li {
display:inline;
}
.menu a, .menu a:visited {
display:block;
padding:2px; 2px;
color:000000;
width:138px;
text-align:center;
height:18px;
background:#F0F0F0;
border:1px solid #DC261D;
text-decoration:none;
}
* html .menu a, * html .menu a:visited {
display:inline-block;
margin:0 -2px;
}
.menu a:hover {
color:#fff;
background:#DC261D;
}

.lefted {margin:0 auto 0 0;}
.centered {margin:0 auto;}
.righted {margin:0 0 0 auto;}

</style>


<ul class="menu lefted">
<FONT style="font-size:14px" color="#000000" face="Maiandra GD">
<b>
<li><a href="#nogo"></a></li>
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Cars</a></li>
<li><a href="#nogo">Bikes</a></li>
<li><a href="#nogo">Vans</a></li>
<li><a href="#nogo">Trucks</a></li>
<li><a href="#nogo"></a></li>

</FONT>


:)

VIPStephan
01-23-2007, 12:18 PM
That definitely looks better. But there are still a lot of things to improve.
1) Get rid of the <font> element. That's deprecated (outdated, not valid).
2) Your list isn't formatted properly. I'm wodnering that you get an acceptable result at all? A list looks like this:


<ul>
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Cars</a></li>
</ul>

No <font> or <b> tags are allowed between <ul> and <li>. you can only put other elements inside the list items (li) like you put the anchors.

Can you show us a link or screenshot how it's supposed to look like?

Oh and in future please use the small '#' button in the reply window if you're posting code.

Wardy118
01-23-2007, 12:42 PM
Hi Stephan,

I've moved the code around a bit upon your advice and it now looks like the following:



<FONT style="font-size:14px" color="#000000" face="Maiandra GD">
<b>
<ul class="menu lefted">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About Us</a></li>
<li><a href="#nogo">Cars</a></li>
<li><a href="#nogo">Bikes</a></li>
<li><a href="#nogo">Vans</a></li>
<li><a href="#nogo">Trucks</a></li>
<li><a href="#nogo">Latest Reviews</a></li>
<li><a href="#nogo">Contact Us</a></li>
</ul>
</b>
</FONT>


What would you suggest I do with the Font element? It seems to work with both Internet explorer and Firefox.

Here is a link to the site so you can have a look. The sites only in the early stages so still a lot of work to do. I have not installed any links yet on the page.

http://www.geocities.com/motors_4_u//home2.html

ronaldb66
01-23-2007, 01:44 PM
The preferred method for controlling presentational aspects like font and text styling is with CSS; see "Colors and Backgrounds (http://www.w3.org/TR/CSS21/colors.html)", "Fonts (http://www.w3.org/TR/CSS21/fonts.html)" and "Text (http://www.w3.org/TR/CSS21/text.html)".
Ideally, all elements and attributes with a purely presentational character (like font, b, i, center, align, etc.) should be avoided in favour of CSS.

Wardy118
01-23-2007, 02:28 PM
I have removed the Font elements and and placed them into the CSS so the code now looks like the following:


.menu a, .menu a:visited {
display:block;
padding:2px; 2px;
font-family: Maiandra GD;
color:000000;
height:18px;
width:117px;
text-align:center;
font-size: 13px;
font-weight: bold;
background:#F0F0F0;
border:1px solid #DC261D;
text-decoration:none;
}


Thanks for those links Ronald they were very helpful :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum