div span image issues

Discussion in 'CSS' started by filthywombat, Jul 29, 2007.

  1. #1
    This is probably not the way I am supposed to be doing this but I created separate div classes for individual images and used span to put them where I want them. My problem is that if I make the window smaller the images move to the left and off the screen after the window is about half closed. I want them not to move. I've only been doing this about a week so bare with me. Oh yeah, I'm not sure but does myspace even have a doctype?
    This is how I have it set up:

    <div class="titleheader"><span><img src="image url">
    </span></div>

    .titleheader {width: 421px; height: 137px; position: absolute; margin-left: -203px; left: 50%; top: 525px; background-image: url(image url); background-attachment: relative}

    .titleheader {
    width: 421px;
    }
    .titleheader img {
    width: 100%;
    }

    This is how I have positioned all of the images but I need them to be in front of the already established tables and static in relation to the window size, if anyone could help it would be much appreciated. Here is the url:

    http://www.myspace.com/mongrelmatricide

    P.S. I'm not talking about the background image
     
    filthywombat, Jul 29, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Not entirely certain what you are trying to accomplish, though I suspect you are going about it the wrong way - at least that's my assumption the moment I see position:absolute with left and top being used... In either case, why are you not just putting the class on the image tag, and the background on it, and saving yourself a assload of HTML? Oh wait, you said myspace.

    Myspace is to HTML as Barry Gibb is to Beck. (thanks Molly)

    I THINK this is what you are trying to do, but not certain... There's a reason I avoid absolute positioning like the plague.

    <img class="titleheader" src="image url" />

    .titleheader {
    width:421px;
    height:137px;
    position:absolute;
    margin-left:-203px;
    left:50%;
    top:525px;
    z-index:5000;
    background:url(image url);
    }


    The addition of a z-index will put the content atop everything else.

    Still not 100% sure though given the trainwreck of code one finds on myspace.
     
    deathshadow, Jul 30, 2007 IP
  3. filthywombat

    filthywombat Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for the help, the z-index is good to know and it makes sense to assign them to an image class rather a div. My problem isn't really just keeping the image in front but keeping it in front of the table while passing over its perimeter and making sure that it remains glued to the table it is encompassing. So when I grab my browser window and pull it shut the image will stay with the table and not move out of position. Would I maybe us float somehow? It probably isn't the biggest deal because it only moves when the window is about half shut but it bothers me nonetheless. Sorry that its myspace but I think that there are far to many people that use it for us to any longer turn our noses to the heinous code and perhaps see it more as a challenge, so I do appreciate your help cause it really is like putting on a retard cap.
     
    filthywombat, Jul 30, 2007 IP