Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Why is this image being bumped down to the bottom?

Posted on 2013-05-27
5
Medium Priority
?
189 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
ID: 39200025
No screenshot. Would be better if you can provide a link so the page can be firebugged.
0
 

Author Comment

by:brucegust
ID: 39200064
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
ID: 39200136
0
 
LVL 12

Accepted Solution

by:
duttcom earned 2000 total points
ID: 39200215
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
ID: 39200942
That worked! Can you tell me why it worked? What was I doing that was solved by your solution?
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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 …
Suggested Courses

877 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