The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Image is overlapping text on browser resize

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
  • #43072

    Really pulling my hair out over what I feel is probably quite a simple problem. I’ve gone through CSS validation (which did find some pesky unclosed tags, sorted now). I’m trying to align an image to the top right side of my page, with title text on the top left. I can do this, but when I resize the browser window the image always wants to overlap the title text before either of them resize. If I remove the margins that I’ve used to place the image then the image sits under the title text (and to the right) instead of just to the right of it, but I feel removing this (while keeping the positioning) might be key. I do need the image to be overlapped by some other elements though.

    Here’s a snippet of my code for the image:

    img#site-logo {
    max-width: 100%;
    height: auto;
    clear: both;
    position: relative;
    z-index: 0;
    margin: -12.87em 2em -16em 0px;

    And for the site title:

    #site-title a {
    font-size: 4.875em;
    font-weight: bold;
    line-height: 78px;
    padding: 0px;
    margin-right: auto;
    white-space: nowrap;
    z-index: 2;
    position: relative;

    Site is live [here:]( “here”)


    OK…to start with you can’t give your div an ID of #site-logo AND do the same to the image inside it.

    IDs can only be used once for one element alone.

    I’m not sure why your header link text is inside a span inside an H1….that seems redundant.


    In Chrome…nothing is (currently) changing heights/sizes except the primary div.


    I think the divs have different IDs don’t they? site-logo and site-logo-div (I read that this might be a problem when validating HTML).
    You’re right though, that span was unnecessary – thanks! Removed.

    I was just trying a min-width across the whole page to see if that helped, so maybe that’s why nothing was changing size? I’ve changed it back now, as I want something responsive. The key elements don’t resize until the page is really small though (which is really the problem – if they did then they wouldn’t overlap).


    No….you have a div with a ID of site-logo.

    The first thing inside it is an image with the same ID.


    Sorry Paulie – am I looking at the wrong bit of code?


    Frankly the best option is to take the logo image out of the HTML all together and use it as a background image to your header. That way it can’t overlap.


    >Sorry Paulie – am I looking at the wrong bit of code?

    I’m looking at the link you gave and I get this..


    Thanks Paulie – I’d tried backgrounding it earlier and it didn’t seem to make a difference. I’ve tried again (I think I’ve followed your code correctly? Have inserted into what I think are the appropriate divs), but it still overlaps. Your help is much appreciated – been struggling with this for hours.


    Are you sure it’s overlapping? I bet it’s not…

    Remember the image and your h2 text are both black. Try changing the color of the h2 text.


    Ah sorry, I see!
    I don’t think I’ve explained myself very well…
    I don’t want the image to collide with h1 or h2 _at all_ (over or underlapping) – I want it (well, all elements) to begin shrinking when the two elements. meet.


    Ahhhh….well that’s a whole other ball game.

    You need floats &/or percentages…let me play on it.


    Thanks very much! Sorry for not making it clear in the original post.
    Yes, that’s kind of the avenue I’ve been going down, but I think I’ve got muddled!
    I’ll switch back from a background image to how it was in that case.


    I’ve fiddled around a bit more, and I’ve managed to make the image resize a bit more reliably now, but when it does it changes position, so I need to find a way of affixing it to another element.
    And I still need to stop it colliding with the title.


    Ok….now you will have to look at media queries to reduce the font-sizes of the text in the head ar certain widths.

Viewing 15 posts - 1 through 15 (of 16 total)
  • The forum ‘CSS’ is closed to new topics and replies.