Solved

Why is this image being bumped down to the bottom?

Posted on 2013-05-27
5
184 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 500 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

856 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