Solved

Why is this image being bumped down to the bottom?

Posted on 2013-05-27
5
182 Views
Last Modified: 2013-05-28
Look at the screenshot that I've got attached. You'll notice my right arrow is positioned below the black bar and I want it to be alongside it - parallel to the left arrow.

My stylesheet it is below. Where am I blowing it? I've been at this for more than a couple of hours now and I'm thinking this should be intuitive, but I'm missing something.

Thanks!

HTML:

<div id="scroll_container">
      <div id="scroll_caps_left"></div>
      <div id="scroll_caps"></div>
      <div id="scroll_caps_right"></div>
</div>

CSS:

#scroll_container {
position:relative;
background-image:url(images/scroll_bar_patern.png);
background-repeat:repeat-x;
height:27px;
width:320px;
}

#scroll_caps
{
position:relative;
margin:auto;
width:250px;
height:27px;
background-color:#000000;
}

#scroll_caps_left {
position:absolute;
left:3px;
width:17px;
height:27px;
background-image:url(images/left_arrow.png);
background-repeat:none;
}

#scroll_caps_right {
position:absolute;
right:3px;
width:17px;
height:27px;
background-image:url(images/right_arrow.png);
background-repeat:none;
}
0
Comment
Question by:brucegust
  • 3
  • 2
5 Comments
 
LVL 12

Expert Comment

by:duttcom
Comment Utility
No screenshot. Would be better if you can provide a link so the page can be firebugged.
0
 

Author Comment

by:brucegust
Comment Utility
Nuts!

Here's the screenshot. I'll upload the page to a server so you can see the live version.
Screen-Shot-2013-05-27-at-8.14.5.png
0
 

Author Comment

by:brucegust
Comment Utility
0
 
LVL 12

Accepted Solution

by:
duttcom earned 500 total points
Comment Utility
Try swapping the second two divs in your HTML

<div id="scroll_container">
      <div id="scroll_caps_left"></div>
      <div id="scroll_caps_right"></div>
      <div id="scroll_caps"></div>
</div>
0
 

Author Comment

by:brucegust
Comment Utility
That worked! Can you tell me why it worked? What was I doing that was solved by your solution?
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Convert a Master Page to HTML 16 59
Hover Gone 16 29
Hovering effect 9 28
Menu Inconsistent 3 18
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now