SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    simple CSS problem

    Hi there

    I'm having probs getting my image to show up at the top left of the page. Can someone please assist and tell me what I'm doing wrong? Thanks so much.

    here's the link:

    http://www.vdbpainting.co.nz/dev/

    Here's the CSS:
    http://www.vdbpainting.co.nz/css/main2.css

    The element I'm having probs with is the "leftimg" id sitting under the body element. And I have inserted it directly under the "body" tag in the xhtml which I thought was logical.

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't seem to have any width (which it would actually need to have if it's positioned absolutely).

    I'm a bit confused though. The image seems to be the same as the header's background image. What's the point of that. Also, I think if you have that there, when the window is narrow, it will cover your navigation.

  3. #3
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there
    Yes, you're correct, but that's why I used the z-index so the menu would ride over top of it if the window was narrowed. However, I'm obviously using the z-indexing incorrectly. The image is to look like a very subtle paint stroke that is slightly embossed and it can be easily seen against the green. Placing the width did work but now am having probs with the menu riding over the top. Should I place the image html tags elsewhere? I want the image to sit in the right top corner.
    What are your suggestions?

    thanks so much

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can remove the z-index from that, apply it to your container div and make the container div 'position:relative'. Your next problem is that your heading is not just text - it's an image on a background - so the paint stroke will be hidden by the background that's behind the text. You might want to change your heading to an image of text in the form of a transparent gif (or even just text (no image) as what you have is not particularly styled (no offence)).

    Does that make sense?

  5. #5
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again
    Thanks heaps for that info and no offence taken. Yes, I do understand what you are suggesting and I have added the relative position and have made the logo in the header a transparent gif. I'm still experiencing probs with the image on the left side where the logo is still disappearing under it when the window is reduced. hmmm, any ideas as to how I can fix that?

    Also, now the bg colour next to where the tabs sit is not correct. It's suppose to be the same colour green as the rest of the header. The 1px green gif is the correct colour and is working behind the tabs but only where they sit - not beyond them to the right. Any ideas here? I hope this makes sense.

    Cheers

  6. #6
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was wondering whether you'd be able to help me with the above problem. Still can't get that left image to go under the top logo gif. Any ideas?

  7. #7
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #sitename{
    position:relative;
    z-index:100;
    }
    should do that, but your logo is still a big block rather than just letters on a transparent background, so the background of your header will still cover the paint thing.

    I'm afraid I can't see what's going on with the colour next to your tabs there. If I had more free time I'd have a better look...


Bookmarks

Posting Permissions

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