3 replies [Last post]
cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 6 years 26 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Hi! I'm trying to deal with an overlap issue and am not quite there yet.

The layout I'm working on is here:

http://afterglowskincare.ca/test.html

As you can see, the menu DIV goes behind the upper-right photo. However, the last menu item within the menu is still bumped down to the next line (it's white-on-white so hard to see, but it's down there). The photo is a transparent PNG so the left edge is not that obvious, but clearly having an effect.

The relevant CSS:

#header { float: left; border: 0; padding: 0; }

#pageImage {
float: right;
}

#menu {
clear: left;
}

All the CSS is here:

http://afterglowskincare.ca/afterglow2007.css

Is there a way to get that last menu item to stay "under" the photo?

Many thanks!
adam

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 12 years 5 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

'contact' has too much right padding

  • contact
  • Just doin' my best at www.jinotega.com
    Tony Robins

    hira kumar
    hira kumar's picture
    Offline
    Enthusiast
    kathmandu
    Last seen: 10 years 19 weeks ago
    kathmandu
    Timezone: GMT+5.75
    Joined: 2007-09-12
    Posts: 55
    Points: 3

    /* Replace this code into

    /* Replace this code into your code */

    #nav a {
    padding: 7px 12px 8px 5px;
    border-right: 1px solid white;
    display: block;
    text-decoration: none;
    }

    /* The problem is due to the large padding of navigation &/

    CSS 2.0 Creator

    cosmocanuck
    cosmocanuck's picture
    Offline
    Enthusiast
    Vancouver, Canada
    Last seen: 6 years 26 weeks ago
    Vancouver, Canada
    Timezone: GMT-7
    Joined: 2007-10-08
    Posts: 56
    Points: 37

    Thanks to you both for

    Thanks to you both for pointing me in the right direction!

    Since my menu links all have a specific ID I was able to simply add this extra rule for the last one, with the ID of "contact":

    li#contact a { padding-right: 0; border-right: none; }

    Worked like a charm.

    Again, thanks a lot!