Question

I have a dashboard in which I’d like a scrolling ticker. (We’ll know if the UI sucks or not once it’s been running on the wall for a while.) Because this is a specific purpose dashboard, we can assume a recent WebKit in our markup and use even the latest CSS3 markup if it’s implemented.

This is some exemplary markup, but we’re free to change it as needed, although I’d prefer to keep it relatively semantic if possible:

<div class="ticker">
  <div class="itemDiv">
    <img src="x">
    <div class="itemBodyDiv">
      <span>Upper Box</span>
      <span>Lorem ipsum dolor sit amet</span>
      <span>Lower Box has longer text</span>
    </div>
  </div>
</div>

This is the layout I’d like to achieve:

The outer solid black line is a div. The dashed line is a div that represents an individual item in the ticker. Items will scroll right-to-left using -webkit-marquee. The main body of the ticker item is the lorem ipsum text, which needs overflow-x set to cause the marquee behavior. The main body should be text-align: middle.

The problem I’m having is in finding suitable CSS markup to describe the position of the Upper Box and Lower Box. I’ve tried several permutations of display: inline and inline-block that didn’t work. They either ruined the marquee behavior or moved the main body over. It seems that they need to be pulled out of the normal box model, but can’t be absolute since they wouldn’t have the marquee behavior. It seems like there should be some sort of relative positioning that is outside of the box model flow that doesn’t preserve normal flow spacing that would handle cases like this, but I’m not finding it amid the many drafts of the many revisions of CSS and certainly not among the cargo cult of Google search results.

By request, this is my current non-working CSS at the state of my last experiment:

.itemDiv {
    display: inline;
    vertical-align: middle;
}

.itemDiv > img {
    margin: 10px 10px 10px 30px;
    vertical-align: middle;
    height: 48px;
    width: 48px;
/*  border: 1px solid red; */
}

.itemBodyDiv {
    display: inline;
    vertical-align: middle;
}

.itemDiv span:nth-child(1) {
    font-size: small;
    clear:left;
    vertical-align: top;
    color: green;
}

.itemDiv span:nth-child(2) {
    font-size: x-large;
    vertical-align: middle;
    color: white;
}

.itemDiv span:nth-child(3) {
    font-size: smaller;
    vertical-align: bottom;
    color: gray;
}

Any suggestions?

Answer 1

You should wrap the entire scrolling message in a a div with its position set to relative. That way, you’re free to absolutely position elements inside of the message absolutely while not breaking the marquee behavior:

.message
{
    position: relative;
}

.upper-box
{
    position: absolute;
    top: 5px;
    left: 10px;
}

.lower-box
{
    position: absolute;
    bottom: 5px;
    left: 10px;
}