Share via

Help me fix my CSS!

  • Article

I'm blogging to:

Sirius Satellite Radio
Left of Center

Okay all you CSS studs and studettes out there...help me out.  I'm having a CSS crisis!  If you are a regular reader of my blog you notice that I try to give you some insight into my strange mind by telling you what music I am listening to while I blog.  I created a schema for describing this information and then built some CSS that I thought would render it nicely over in the right hand margin of the page.  It works fine when you go to one specific post, but if you go to the page where all the blog posts are listed one after the other, the CSS doesn't work correctly.  So each post will have an entry for the music, but I only want it to show up for the top most post...you get what I'm saying?  So here's an example of the schema:

<DIV id=NowPlaying>
<DIV id=Intro>I'm blogging to:</DIV>
<DIV id=Image><A title="Check out the Beatie Boys" href="https://www.beastieboys.com"><IMG src="https://images.amazon.com/images/P/B00021LRWM.01.THUMBZZZ.jpg"></A></DIV>
<DIV id=Artist>
<H5>The Beastie Boys</H5></DIV>
<DIV id=Album>
<H5>To The 5 Burroughs</H5></DIV></DIV>

Here's the CSS I'm using:

#NowPlaying {
        position: absolute;
 height: 200px;
 width: 170px;
 background-color: #DDDDCC;
        right: 0px;
        top: 400px;
        border: 1px;
        border-color: #770000;
        border-style: solid;

}

#Intro, #Artist, #Album{
 text-align: center;
 color: #770000;
}

#Image{
 margin-left: 50px;
}

How can I make just the top most "NowPlaying" div render and ignore any subsequent ones?  What happens instead is the bottom-most entry gets displayed (the last one) instead of the top-most entry (the first one).

Comments

  • Anonymous
    March 22, 2006
    just stumbled here, was looking at something else. Anyway, you want to use the z-index style sheet attribute. This is the vertical stacking order of the DIVs. Higher values sit higher. So, add one to the z-index on each post. You could do this with a single instance of some embedded javascript that counts all DIVs with the ID of 'nowplaying' and assigns z-indexs on page load.
  • Anonymous
    March 30, 2006
    Cool!  Thanks for you help.  I'll take a look at this soon.
  • Anonymous
    March 30, 2006
    good