• Toll-free  888-665-8637
  • International  +1 717-220-0012
Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error
CSS: position absolute vs. relative
Options Go to last post Go to first unread
Previous Topic Next Topic
casti004
#1 Posted : Wednesday, July 16, 2008 5:59:47 PM(UTC)
casti004

Rank: Member

Joined: 1/18/2008(UTC)
Posts: 50
Hi,

I have (probably) a stupid question but I really can't figure this one out:

When I use position 'relative', on the container class, my background image appears.

However, when I change the position to 'absolute', the background disappears and there is just a white background.

Any insights?

Here is my code:

html {background-image:url("../images/bg-theme.jpg");}
body {background-image: url("../images/background.jpg");background-repeat: repeat-x; background-position: center top; margin: 0px 0px 0px 0px; font-family: Arial, Verdana, Sans-Serif;font-size: 13px; line-height: 2em; }


/* Container - Centered */
//#container {margin: 0px auto; width: 930px; border: 1px solid #000; position: relative; } // This works!!


#container {margin: 0px auto; width: 930px; background-color: #fff; border: 1px solid #000; position: absolute; left:163px; top: 0px;} //// This doesn't work :(
[email protected]
#2 Posted : Wednesday, July 16, 2008 6:38:29 PM(UTC)
gdelorey@mitcs.com

Rank: Member

Joined: 10/11/2006(UTC)
Posts: 162

Thanks: 1 times
I'm not sure of the technical reason why this occurs. I'm assuming it has something to do with that container now being pulled out of the document flow due to the position: absolute., and possibly losing it's height or something. Can you tell us what you are trying to accomplish by absolutely positioning the container? Perhaps then we can think of a solution that might work better for you.

: Greg
casti004
#3 Posted : Wednesday, July 16, 2008 7:05:33 PM(UTC)
casti004

Rank: Member

Joined: 1/18/2008(UTC)
Posts: 50
Hi Greg,

Thanks for your reply.

My problem is that I have incorporated a flash object and styled it as to position ontop of the container so it will show as an overlay.

I cannot for some reason use relative positioning to overlay it and when I use absolute only for the flash style, it will not position properly in respect to the container (for ex, if I open the page in Firefox the position is ok, but in IE it is wrong...or if the screen resolution is different the location is wrong...). Basically, in any browser and in any screen resolution i need the flash object to appear exactly at the corner of the container object.

Dave

See full code below:

/* Body Styles */
// body { background: #334; font-family: Arial, Verdana, Sans-Serif; color: #000; font-size: 13px; line-height: 2em; }

html {background-image:url("../images/bg-theme.jpg");}
body {background-image: url("../images/background.jpg");background-repeat: repeat-x; background-position: center top; margin: 0px 0px 0px 0px; font-family: Arial, Verdana, Sans-Serif;font-size: 13px; line-height: 2em; }


/* Container - Centered */
//#container {margin: 0px auto; width: 930px; border: 1px solid #000; position: relative; top: 2px;left:163px;}


#container {margin: 0px auto; width: 930px; background-color: #fff; border: 1px solid #000; position: absolute; left:163px; top: 0px;}

#index_flash {position:absolute; left: -1px; top:1px;}
#template_flash {position:absolute; left:163px; top: -2px;}
Aqua-Man
#4 Posted : Thursday, July 17, 2008 4:50:19 PM(UTC)
Aqua-Man

Rank: Member

Joined: 7/12/2007(UTC)
Posts: 19
When you use relative position the elements appear one after the other like this:
{element 1}
{element 2}
{element 3}

It's pretty much the same way they would be in a word processing document. you can shift them from where they would normally go by using top, bottom, right, or left. You can use float: left or float:right to put them next to each other like:
{element 1}{element 2}{element 3}

If you use absolute position the elements go where you tell them even on top of each other. The elements position themselves with the side of the page, not the element (container) if they are not in it.


I'm thinking you have a higher level element (on top of the one with the background) that has a white background on it.

Are you trying something like this, with the flash elements inside the container? Try the relative elements like that.

<div id="container">
<div id="index_flash">
</div>
<div id="template_flash">
</div>
</div>

Good Luck,
~ Rob
casti004
#5 Posted : Thursday, July 17, 2008 5:40:57 PM(UTC)
casti004

Rank: Member

Joined: 1/18/2008(UTC)
Posts: 50
Aqua-Man,

Thanks so much!!!!!!

I was eating retard sandwiches!

Yep..I was not paying attention where I put the flash object in reference to the container class..

Here is the proper code...I had the flash code just above the <div id="container"> tag....DOOOOH!!!


<body id="HomePage">


<form id="form1" runat="server">
<uc3:AdminPanel ID="AdminPanel1" runat="server"></uc3:AdminPanel>
<div id="container">
<!--Start template_flash-->
<div id="template_flash">
<div id="flashcode"></div>
<script type="text/javascript">
var so = new SWFObject("../flash/flash-images/template-images.swf", "flashcode", "255", "149", "6");
so.addParam("wmode", "window");
so.addParam("base", rootFlashLocation);
so.addVariable("music_on", music_on);
so.addVariable("clock24hour", clock24hour);
so.write("flashcode");
</script>
</div>

<!--End template_flash-->

<uc1:Header ID="Header2" runat="server" />
<div id="content">
<asp:ContentPlaceHolder ID="MainContentHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
<uc2:Footer ID="Footer1" runat="server" />
</div>
</form>
</body>
</html>
Matt@9BallDesign
#6 Posted : Friday, July 18, 2008 12:29:15 AM(UTC)
Matt@9BallDesign

Rank: Member

Joined: 12/23/2003(UTC)
Posts: 909
Hey hog, just to expand a little bit on Aqua-Man's post:

&lt;div id="container"&gt;
&lt;div id="element"&gt;Some text or something&lt;/div&gt;
&lt;/div&gt;

STYLES:

#container {display: block; width: 400px; height: 150px; position: relative:}
#element {position: absolute; top: 20px; left: 20px;}


This will absolute position the element from the top left of the container. If you don't have the position: relative; for the container div, the element will be positioned from the top left of the browser.

Logically, I'm telling the browser to position the element exactly where I want it, relative to where the container is on the page.
Matt Martell

http://www.9balldesign.com - Web, Print, Graphic


http://www.martellhardware.com/ - Decorative &amp; Builder's Hardware

------------------------------------------------
Aqua-Man
#7 Posted : Monday, July 21, 2008 6:59:33 PM(UTC)
Aqua-Man

Rank: Member

Joined: 7/12/2007(UTC)
Posts: 19
Yes I probably should have mentioned of course you need to make styles for each id you reference. I guess it seemed to me you had gotten that far already, just didn't have the flash div inside the container div.
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Powered by YAF | YAF © 2003-2024, Yet Another Forum.NET
©2024 Develisys. All rights reserved.
  • Toll-free  888-665-8637
  • International  +1 717-220-0012