Forums

goalieman34

Hey everyone,
I am looking to move a chunk of html into my header area just below my search bar using absolute positioning. Any help on this would be great.

Here is my website:
http://petrowest.squarespace.com/

goalieman34

I have used this

<DIV style="position: absolute; top: 125px; right: 350px; overflow: visible;">Stock Ticker</DIV>

but when i look at it with my iphone and stuff the text is out of place

Senff

As soon as you position something like that absolutely, it is removed from the document "flow", which basically means that all other elements will kind of disregard/ignore your block and not place themselves around it.

So, it is now ABOVE the menu. If you would move it to BELOW the menu, by keeping it absolute but just a different top coordinate, anything else on the page will not change or move. If that's what you want -- great! If not, I would advise against using position absolute.

goalieman34

oh ok I see what your saying. Thanks for teaching me about that. @Senff Is there another method that you would recommend using?

Senff

Well, why don't you just put the ticker in a div and place it in your code wherever you want it (below the navigation, above the image slider), without using position absolute?

goalieman34

Ok so i created a div

<div id="stockticker">
<p>text</p>
</div>

and have this as the css. If i dont use absolute it does not place it in the right location.
#stockticker { margin-top:50px; right:400px;}
Can you show me what the css show look like

Senff

Don't put the div right at the top of the code (right after <body). Just put it where you want it to appear.

For example, if you want it to appear right above the main menu, you need to put your div right before the line:

<div id="navigationBottom">

If you want it to appear right above the image slider, you need to place your code right before the line:

<div id="pageBodyWrapper">

And so on.

goalieman34

@Senff I am soo close to fixing it. Can you take a look at it. The stock ticker is behind my petrowest logo and I would like it moved over to under the search bar
http://petrowest.squarespace.com/

goalieman34

SOLVED

Robskiwarrior

2 threads linked kinda: http://css-tricks.com/forums/discussion/17797/positioning-question

Closing this one down and marking solved.

treehouse : what would you like to learn today?

Forums

[Solved] absolute position help