Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    11
    Rep Power
    0

    How to place an image in the menu navigation


    Hi,

    I really help someone could help me accomplish what I need in order to finish a project for a friend I started, I am still a newb at CSS and HTML, so if you could explain to me in simple terms this would be ideal.

    I want to place a button located here in the menu of the website. The image will link to a booking page, I would also like a hover image too if possible.

    Maybe even have just text with Bold formatting then have an arrow or icon next to it, either way would be fine.

    If any body could help me this would be great.

    This is what the index.html file looks like;
    <body>
    <div id="wrapper">
    <div id="topwrapper"></div>
    <div id="mainwrapper">
    <!-- Header Start -->
    <div id="header">
    <div class="center">
    <!-- Logo Start -->
    <div id="logo">
    <a href="./index.html"><img src="./images/logo.png" alt="logo" /></a>
    </div>
    <!-- Logo End -->

    <div id="headerright">

    <!-- Menu Navigation Start -->
    <div id="mainmenu">
    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="http://" class="selected">Home</a>

    <li><a href="./about.html">About</a>
    <ul>
    <li><a href="#">Our Company</a></li>
    <li><a href="#">Vision and Mission</a></li>
    <li><a href="#">Testomonials</a></li>
    </ul>
    </li>
    <li><a href="#./.html">Services</a>
    <li><a href="./.html">Vehicles</a>
    <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a> </li> </ul>
    </li>
    <li><a href="./.html">Testomonials</a>
    <ul>
    </ul>
    <li><a href="./html">Contact</a></li>
    </ul>
    </div>
    </div>
    <!-- Menu Navigation End -->
    </div>
    </div>
    </div>

    Thanks so much in advance, I cant place an image to show you so if anyone understands this confusing posts and still wants to help, email me so I can send you an example.
  2. #2
  3. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    There are many sites that offer tutorials for this; search 'css rollover' or 'css image rollover'.

    Perhaps try Elated
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    11
    Rep Power
    0
    Originally Posted by Gemini3rdeye
    Hi,

    I really help someone could help me accomplish what I need in order to finish a project for a friend I started, I am still a newb at CSS and HTML, so if you could explain to me in simple terms this would be ideal.

    I want to place a button located here in the menu of the website. The image will link to a booking page, I would also like a hover image too if possible.

    Maybe even have just text with Bold formatting then have an arrow or icon next to it, either way would be fine.

    If any body could help me this would be great.

    This is what the index.html file looks like;
    <body>
    <div id="wrapper">
    <div id="topwrapper"></div>
    <div id="mainwrapper">
    <!-- Header Start -->
    <div id="header">
    <div class="center">
    <!-- Logo Start -->
    <div id="logo">
    <a href="./index.html"><img src="./images/logo.png" alt="logo" /></a>
    </div>
    <!-- Logo End -->

    <div id="headerright">

    <!-- Menu Navigation Start -->
    <div id="mainmenu">
    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="http://" class="selected">Home</a>

    <li><a href="./about.html">About</a>
    <ul>
    <li><a href="#">Our Company</a></li>
    <li><a href="#">Vision and Mission</a></li>
    <li><a href="#">Testomonials</a></li>
    </ul>
    </li>
    <li><a href="#./.html">Services</a>
    <li><a href="./.html">Vehicles</a>
    <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a> </li> </ul>
    </li>
    <li><a href="./.html">Testomonials</a>
    <ul>
    </ul>
    <li><a href="./html">Contact</a></li>
    </ul>
    </div>
    </div>
    <!-- Menu Navigation End -->
    </div>
    </div>
    </div>

    Thanks so much in advance, I cant place an image to show you so if anyone understands this confusing posts and still wants to help, email me so I can send you an example.
    I have tried so many times, but the logo or the menu keeps changing or something goes wrong, I dont understand where to put the coding and what coding to use, as each article is different.
  6. #4
  7. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    You're using list items to provide navigation so decide where you want the link to appear, within an existing list, and add this in your page at the appropriate place:

    <li><a href="#" id="book">Booking</a></li>

    Add the following within the <head> tag of your page:

    Code:
    <style type="text/css">
        #book { color:red; }
        #book:hover { color:green; }
    </style>
    Test this first. The link should be red initially but green if you hover the mouse over it.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    11
    Rep Power
    0
    Originally Posted by AndrewSW
    You're using list items to provide navigation so decide where you want the link to appear, within an existing list, and add this in your page at the appropriate place:

    <li><a href="#" id="book">Booking</a></li>

    Add the following within the <head> tag of your page:

    Code:
    <style type="text/css">
        #book { color:red; }
        #book:hover { color:green; }
    </style>
    Test this first. The link should be red initially but green if you hover the mouse over it.
    I have tried this, I think my style.css is overriding the colour settings though, but it shows up in my test site.

    The problem is, that it is 75% to the left and has a bullet point. All I need to do now, is move this over underneath the menu, then add a image.

    Thanks so far.
  10. #6
  11. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    It has a bullet point because it is a list item <li>. If you don't want this then put it outside the unordered list <ul> and perhaps put it in a span or paragraph <p>:

    <span><a href="#" id="book">Booking</a></span>

    I don't know how you want it to behave, but if you want it to have an image that then disappears when you hover over it then amend the css to:
    Code:
    #book { display:block; width:150px; height:32px; background: url("images/image.ext") no-repeat 0 0; }
    #book:hover { background: none; }
    Amend it for your own image and change the width and height to the w/h of the image.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    11
    Rep Power
    0
    Originally Posted by AndrewSW
    It has a bullet point because it is a list item <li>. If you don't want this then put it outside the unordered list <ul> and perhaps put it in a span or paragraph <p>:

    <span><a href="#" id="book">Booking</a></span>

    I don't know how you want it to behave, but if you want it to have an image that then disappears when you hover over it then amend the css to:
    Code:
    #book { display:block; width:150px; height:32px; background: url("images/image.ext") no-repeat 0 0; }
    #book:hover { background: none; }
    Amend it for your own image and change the width and height to the w/h of the image.
    As I cant send you the links, it is very difficult to show you what I mean. The current header I have is using a repeated .png background, and this code does not seem to work.

    I have made the menu navigation a little bit thicker than normal, just under the menu navigation list, I would like to add a linked image which has a rollover effect, called bookings, or book here, which will then direct the customer to a booking form page.

    How do I show the picture of the image if I am not allowed.

    Thanks
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    11
    Rep Power
    0
    Originally Posted by Gemini3rdeye
    As I cant send you the links, it is very difficult to show you what I mean. The current header I have is using a repeated .png background, and this code does not seem to work.

    I have made the menu navigation a little bit thicker than normal, just under the menu navigation list, I would like to add a linked image which has a rollover effect, called bookings, or book here, which will then direct the customer to a booking form page.

    Thanks
    If you go to img638.ima geshack.us/i/ac exe cu.png/
  16. #9
  17. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    You still haven't clarified what you want the rollover effect to be. If I assume that you want the image 'Book Now' to be replaced with a slightly different image on hover then:
    Code:
    <span><a href="#" id="book"> </a></span>
    and the css
    Code:
    #book { display:block; width:150px; height:32px; background: url("images/image1.ext") no-repeat 0 0; }
    #book:hover { background: url("images/image2.ext") no-repeat 0 0; }
    Will swap the images on hover, having corrected the image names/locations and height/ width.

    Notice that I've removed the image from the <a> tag - the images are inserted by the css.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    11
    Rep Power
    0
    Originally Posted by AndrewSW
    You still haven't clarified what you want the rollover effect to be. If I assume that you want the image 'Book Now' to be replaced with a slightly different image on hover then:
    Code:
    <span><a href="#" id="book"> </a></span>
    and the css
    Code:
    #book { display:block; width:150px; height:32px; background: url("images/image1.ext") no-repeat 0 0; }
    #book:hover { background: url("images/image2.ext") no-repeat 0 0; }
    Will swap the images on hover, having corrected the image names/locations and height/ width.

    Notice that I've removed the image from the <a> tag - the images are inserted by the css.
    Sorry, I want the image to have BOOK NOW ------> then when hovered a slight colour change, so the writing goes from light to dark.

    I have added the image to my directory, changed the url, the size and cleaned the cache as well as refrshed the page.

    But nothing is showing up.

  20. #11
  21. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    Can you post the relevant snippets of css and HTML?

    If you want the text to go from light to dark then you will need a second, darker, image..
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    11
    Rep Power
    0
    Originally Posted by AndrewSW
    Can you post the relevant snippets of css and HTML?

    If you want the text to go from light to dark then you will need a second, darker, image..
    Yes I understand this, there is also the possibility of using css image sprites, but I dont want to get to complicated.

    Please clarify what part of the code you would look like to see, otherwise you could also go to ac-exec utives .co m and have a look for yourself.

    The coding you provided will not be seen on the live site, as I have been editing offline.

    Thanks

    P.S Also if you can help me do this, I would happily send you a little drink to your paypal as a way to say thanks, but it would have to be friday, I am a man of my word and would make sure to send you something.
  24. #13
  25. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    From what I can see the original HTML is

    Code:
    <a href="#">Book Now</a>
    but something called 'cufon.js' renders the page like this
    Code:
    <a href="#">
    <cufon style="width: 42px; height: 18px;" alt="Book " class="cufon cufon-canvas">
    <canvas style="width: 55px; height: 19px; top: 0px; left: 0px;" height="19" width="55">
    </canvas>
    <cufontext>Book </cufontext>
    </cufon>
    <cufon style="width: 36px; height: 18px;" alt="Now" class="cufon cufon-canvas">
    <canvas style="width: 39px; height: 19px; top: 0px; left: 0px;" height="19" width="39">
    </canvas>
    <cufontext>Now</cufontext>
    </cufon>
    </a>
    Anyway, I would modify the original to
    Code:
    <a href="#" id="book">Book Now</a>
    and add the css (that refers to 'book') into the file 'style.css'.

    If this doesn't work then it might be that all this cufon stuff is interfering.

    I also received an error on the page which might not help:
    $("a[rel^='prettyPhoto']").prettyPhoto is not a function

    Andy.
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    11
    Rep Power
    0
    Originally Posted by AndrewSW
    From what I can see the original HTML is

    Code:
    <a href="#">Book Now</a>
    but something called 'cufon.js' renders the page like this
    Code:
    <a href="#">
    <cufon style="width: 42px; height: 18px;" alt="Book " class="cufon cufon-canvas">
    <canvas style="width: 55px; height: 19px; top: 0px; left: 0px;" height="19" width="55">
    </canvas>
    <cufontext>Book </cufontext>
    </cufon>
    <cufon style="width: 36px; height: 18px;" alt="Now" class="cufon cufon-canvas">
    <canvas style="width: 39px; height: 19px; top: 0px; left: 0px;" height="19" width="39">
    </canvas>
    <cufontext>Now</cufontext>
    </cufon>
    </a>
    Anyway, I would modify the original to
    Code:
    <a href="#" id="book">Book Now</a>
    and add the css (that refers to 'book') into the file 'style.css'.

    If this doesn't work then it might be that all this cufon stuff is interfering.

    I also received an error on the page which might not help:
    $("a[rel^='prettyPhoto']").prettyPhoto is not a function

    Andy.
    Thanks for the update, do you mind me asking you what browser your using?

    The cufon script is to display the fonts in a custom font.

    I have changed my offline version, to no avail.

    Thanks
  28. #15
  29. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    I'm using FireFox 3.6.13.

    I would try disabling cufon (temporarily delete the line that links to the .js file) and see what happens.

    Could you post part of your HTML code that includes the Book Now link and the css that you've added for it.
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo