Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    81
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Menu hoover help needed

    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>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    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:
    Code:
    <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:
    Code:
    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 basics and take it step by step.

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    81
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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>



  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    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:
    Code:
    <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.

  • #5
    New Coder
    Join Date
    Jul 2006
    Posts
    81
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi Stephan,

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

    Code:
    <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

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Font styling

    The preferred method for controlling presentational aspects like font and text styling is with CSS; see "Colors and Backgrounds", "Fonts" and "Text".
    Ideally, all elements and attributes with a purely presentational character (like font, b, i, center, align, etc.) should be avoided in favour of CSS.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    New Coder
    Join Date
    Jul 2006
    Posts
    81
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I have removed the Font elements and and placed them into the CSS so the code now looks like the following:

    Code:
    .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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •