Tag: absolute-positioning
Nabin Nepal (Starx) absolute-positioning css css-float
April 5, 2012

CSS Text on an Image

Question by DJ Howarth

DJ HowarthDJ Howarth

I have the hardest time with CSS because it is so fickle it seems. Need to help with this.

I want my “section.png” image to be the Header Bar, which is clickable, and a table Expands and Collapses as you click the Header Bar.

<table width="100%">
 <tr>
 <td width=80% align=left>
 <font color="white" size="4"><strong>&nbsp;General Airport Information</strong></font>
 </td>
 <td align=right><font color="white" size="2">
    <div id='oc5' style="border-style: none; vertical-align:bottom;">
<img src="http://.../images/expand.png" width="15" height="15" style="border-style: none; vertical-align:top;">&nbsp;Show&nbsp;
</div></font>
</td>
</tr>
</table>
</div>

^^^
Everything in the “Div” above needs to be on top of the section.png image.
^^^

<div id="id5" style="display: none">    

<table width=80% align="center">
<tr align="left">
    <td colspan="2" align="right">
   Hidden text - Until Header Bar is Clicked.
    </td>
</tr>
</table>
</div>

I have looked around for answers, regarding this issue. I know it has to do with CSS and float or position and absolute or relative. IDK, I cant figure it out. Can someone steer me in the right direction.

Answer by Starx

StarxStarx

The correct way to do this, would be to set a background instead of adding a image element

<div class="parent" style="background: url('image.jpg'); height: 300px; width: 500px;">
    <div class="text">...</div>
</div>
Nabin Nepal (Starx) absolute-positioning css html position-fixed size
April 5, 2011

Why does the size of a div element change when changing position from fixed to absolute?

Question by ThiefMaster

ThiefMasterThiefMaster

I have a div containing some text. This div used to be position:fixed, but for some reasons I need it to be position:absolute.

However, when changing it from fixed to static its size changed (the “auto-sizing” during fixed display was nice and should be preserved).

Here’s a minimal example: http://jsfiddle.net/ThiefMaster/yBRa9/3/

I’m looking for a way to keep position:absolute without the element shrinking to the lowest possible size.

Using JavaScript it’s easy to achieve but if it could be done without additional JS it would be nice.

Answer by Starx

StarxStarx

Here Check it. I used a span with inline-block, seems to do what you want (Of course, If I had understood your question properly).

Nabin Nepal (Starx) absolute-positioning css jquery positioning
January 12, 2011

Center div horizontally

Question by Don

DonDon

On this page, I would like to horizontally center the main #container div relative to the page. Normally I would achieve this by adding a CSS rule,

#container { margin: 0 auto }

However, the layout of this page (which I did not write), uses absolute positioning for #container and most of its child elements, so this property has no effect.

Is there any way I can achieve this horizontal centering without rewriting the layout to use static positioning? I’ve no problem with using JavaScript/JQuery if that’s the only way to achieving my objective.

Answer by Starx

StarxStarx

Same as @rquinn answer but this will adjust to any width. Check this demo

http://jsfiddle.net/Starx/V7xrF/1/

...

Please fill the form - I will response as fast as I can!