Solved

Why is this image being bumped down to the bottom?

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

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
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…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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…

770 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