10 replies [Last post]
harlequeen
harlequeen's picture
Offline
Regular
Wales
Last seen: 11 years 9 weeks ago
Wales
Joined: 2004-07-17
Posts: 35
Points: 0

Hi

Please help me with this, I can't seem to get it right. I did try using one image then only displaying half of it, but couldn't get it to work. So abandoned it for this.
I am trying to get some text under an image in a navbar. The images change on mouseover, but I cannot get the text underneath. Using dreamweaver everything looks OK, but after I uploaded it all went pear shaped.

#navbar li { list-style: none; display: inline; height: 20px; clear: both; padding: 8px 20px 2px 20px; }

#navbar img {

display: inline;

  • Home

  • Details

  • Attendants

  • Travel

  • Registry

  • Photos

  • RSVP



  • When I initially checked the page in the browser when in Dreamweaver, it looked fine and my css #navbar img was set to 'block'. Yet when I uploaded the page the navbar images were one on top of the other. I changed my #navbar img to 'inline' and it does put them all along one line, but the images are next to the text, not above it.

    Can anyone help please. Smile
    Here is the page url
    [url]http://www.our-perfect-day.co.uk/CC/index.htm

    Thanks in advance.
    Harlequeen

    bringing colour to a dull world

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 44 weeks 7 hours ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    Well first off the mark,

    Well first off the mark, your DTD leaves browsers in their "quirks mode" rendering engines so you really don't have any basis for expecting any CSS rule to work in any particular way. And especially cross-browser compatability will be extremely difficult.

    So first change your Doctype declaration to html 4.01 STRICT. Read the sticky messages on this site that will tell you how to do it right.

    Once you've done that, validate your html against the new doctype and fix all the errors. Even with your loose doctype you have html errors that can affect the rendering of elements.

    You have no basis on which to complain about how any browser renders any html or CSS rules until and unless you have valid html. And a new page should use a STRICT DTD. In the long run, doing this will save you hours and hours of time and trouble.

    I would also get rid of all the javascript you are using for rollovers. You are using a proper list construction with anchor elements for your menu and all modern browsers can do rollover effects using CSS. The result is cleaner code and faster response for the rollovers.

    Fix this stuff up and come on back if you still have problems. You waited a long time for help, probably because the really smart folks at this site don't bother wasting their time on invalid code and quirks mode documents, such as your page.

    You did give us a link, and that's the best way to get some help, missed by more than half of the new posters here, seemingly.

    Anyway, apply the fixes above and come back. It's possible that following my advice will make your site look even worse. Don't worry about that since if it looks worse it will still be much much easier to fix with proper html.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    harlequeen
    harlequeen's picture
    Offline
    Regular
    Wales
    Last seen: 11 years 9 weeks ago
    Wales
    Joined: 2004-07-17
    Posts: 35
    Points: 0

    Changed Doc Type

    Hi

    Thanks for your help. I have changed the doc type and validated it as suggested. I am going to try to do the rollover using css again. I will be back if I can't get it right.

    Thanks for your input and I appreciate everything you say about using good, clean code.

    Cheers

    Harlequeen

    bringing colour to a dull world

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 31 weeks 2 days ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    I like your avatar

    I like your avatar Wink

    Verschwindende wrote:
    • CSS doesn't make pies

    harlequeen
    harlequeen's picture
    Offline
    Regular
    Wales
    Last seen: 11 years 9 weeks ago
    Wales
    Joined: 2004-07-17
    Posts: 35
    Points: 0

    Done what you suggested

    Hi

    I did what you suggested and now it validates as strict HTML.

    I have managed to get one rollover to work, but I don't know how to get others to work. I want the same rollover images to work for different links. Can someone help me with that.

    Here is my html

  • Home
  • Details
  • Attendants
  • Travel
  • Things to Do
  • Registry
  • Photos

  • and here is the css which makes the first one work. I don't know how to procede now.

    #rollover { display: block; width: 49px; height:59px; border: 0px solid; background: url("images/rollover.gif") no-repeat 0 0; }

    #rollover:hover {
    background-position: -50px 0px;
    }

    #rollover span
    {
    display: none;
    }

    Thanks in advance.

    Harlequeen

    ps, unfotunately, I'm nothing like my avatar.

    bringing colour to a dull world

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 31 weeks 2 days ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    Use classes, and simplify

    Use classes, and simplify your code:

  • Home
  • Details
  • Attendants
  • Travel
  • Things to Do
  • Registry
  • Photos

  • #navbar a { display: block; width: 49px; height:59px; border: 0px solid; background: url("images/rollover.gif") no-repeat 0 0; }

    #navbar a:hover {
    background-position: -50px 0px;
    }

    #navbar a span {display: none;}

    That's all the CSS you need, that will then affect any link you add in the navbar.

    Quote:
    ps, unfotunately, I'm nothing like my avatar.

    Shame Laughing out loud Been watching Shark on five recently?

    Verschwindende wrote:
    • CSS doesn't make pies

    harlequeen
    harlequeen's picture
    Offline
    Regular
    Wales
    Last seen: 11 years 9 weeks ago
    Wales
    Joined: 2004-07-17
    Posts: 35
    Points: 0

    Thanks, but..

    Thanks, but although I can get the swap images and the links I can't seem to get the images across the screen, only down.

    I have uploaded the page to a testing area so that you can see what I mean. I did a new bare page, just so that I could get it working before implementing it, but no go.

    http://www.our-perfect-day.co.uk/test/index.htm

    Here's the code.

    and the css
    body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: .8em;
    }

    #navbar li {
    list-style-type: none;
    }

    #navbar li a {
    display: block;
    width: 49px;
    height: 59px;
    border: 0px solid;
    background: url("images/rollover.gif") no-repeat 0 0;
    text-decoration: none;
    }

    #navbar a:hover {
    background-position: -50px 0px;
    }

    #navbar a span {
    display: none;
    margin: 50px 0px;
    color: green;
    text-align: center;
    }

    Sorry if I seem to be making a meal out of this, but it is so easy in tables and I just can't get my head around it in css.

    Thanks
    Harlequeen

    bringing colour to a dull world

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 41 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Across the screen,

    Across the screen, horizontally?

    #navbar li { float:left; list-style-type: none; }

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    harlequeen
    harlequeen's picture
    Offline
    Regular
    Wales
    Last seen: 11 years 9 weeks ago
    Wales
    Joined: 2004-07-17
    Posts: 35
    Points: 0

    Duh!

    I can't believe I missed something so obvious.

    Thanks for taking the time.
    Harlqueen

    bringing colour to a dull world

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 31 weeks 2 days ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    All sorted now?

    All sorted now?

    Verschwindende wrote:
    • CSS doesn't make pies

    harlequeen
    harlequeen's picture
    Offline
    Regular
    Wales
    Last seen: 11 years 9 weeks ago
    Wales
    Joined: 2004-07-17
    Posts: 35
    Points: 0

    Yes, all sorted now and

    Smile Yes, all sorted now and validates. Thanks for your help

    Harlequeen

    bringing colour to a dull world