CSS - Either Position: Relative Or Display: Table Is Breaking My Css

Hi, I'm following a tutorial and I would like to understand the position functioning.
I have a box container and some elements in. In the css, the are all set relative position. I don't understand why the second element (AMPT) has its contain offset and third one (Writing) is not. I understand that the first element has like a reference the container box. I would sincerely glad if you can help me to understand the relative positioning.

Thanks in advance.

PS: I'm using firefox and here is the code: artefact89.free.fr/relative.html (without www)

This may or may not be a stupid question, but mostly because the sites I learn this stuff from dont really go into much detail I really have to ask...

Whats the real difference between using...
margin: 12px 0px 0px 12px
and
position: relative; top: 12; left: 12;

This is mostly concerning <div>'s that are just making boxes onscreen (which will have images/text in em). I guess you guys will wanna see code, so heres an example:

Code:

div#menu_head {
	background: #ffffff;
	float: left;
	margin: 0px 0px 0px 0px;
	width: 200px;
	height: 60px;
	font-family: verdana;
	font-size: 11px;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-right: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	color: #000000;
}

div#cont_head {
	background: #ffffff;
	float: left;
	 margin: 12px 0px 0px 12px; 
	width: 200px;
	height: 60px;
	font-family: verdana;
	font-size: 11px;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-right: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	color: #000000;
}

As you can see on #cont_head I used a margin to set it 12 pixels away from #menu_head ... If I were to change it to this instead...
Code:

div#cont_head {
	background: #ffffff;
	float: left;
	 position: relative;
        top: 12;
        left: 12; 
	width: 200px;
	height: 60px;
	font-family: verdana;
	font-size: 11px;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-right: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	color: #000000;
}

...then it still looks exactly the same in the browser. So I am mainly looking to know, please, which one is proper to use and why? im sorta confused on what the purpose of both margins and position:relative are specifically for.

I mean as far as I know.. position:relative; is like position:static; but allows you to take where its naturally supposed to go, and adjust it. so to me that makes sense for my situation. That's what its there for!.. but the only site i could find that shows floats being used with spacing inbetween it using margins to do so. but i mean how do i know that are right? yknow?

Your help is greatly appreciated. And maybe since I was brave enough to post this I might mention another strange thing I don't understand (compared to old, non-xhtml ways)

Code:

<div id="container">
	<div id="sub_container">
		<div id="pasta"></div>
		<div id="trees"></div>
		<div id="widget"></div>
		<div id="squirrel"></div>
	</div>
</div>

Code:

div#container {
	background: #ff0000;
	position: relative;
	margin: 0 auto 0 auto;
	width: 600px;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-right: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
}

div#sub_container {
	padding: 4px;
	position: relative;
}

For whatever reason that #sub_container seems to be required if I want to have padding of 4 pixels around all my content. because if i put the padding: 4px into #container instead and remove #sub_container altogether.. then the width stretches further than it is supposed to... and actually just now as I write this, I suddenly consider that maybe, like with borders, when you add padding it increases the width/height by the padding amounts. hmm maybe that must be it then I am not sure why I hadnt thought of that. I guess because it never did that with tables.
Is this new assumption correct? But then thats almost like the padding gets put onto the outside of the layer rather than the inside of the layer like before??? I'm sorry I am just a confused person I guess :P

Thank you so very much for the help.. I really do appreciate it.

-Chi

I want to create a div that goes right under an input, I can get it to look fine in FF but not IE using absolute positioning.

Is there anyway I can position the new div relative to the input rather relative to containers around it?

I am a newbie to CSS and HTML
I am trying to understand how div positioning works
I made a CSS and a class container where I did put some thing
now I made another class say named useful which is placed inside div tags of class container white I am finding problem is when the next div element of class useful is placed then its position is not coming as I desire

some one told me to use float to over come it worked when I used an image but it did not worked when it was not an image here are the contents of my CSS about which I am asking



.header_container {
margin:auto;
height:101px;
width: 1290px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: #D5EDB3;
border-right-color: #D5EDB3;
border-bottom-color: #D5EDB3;
border-left-color: #D5EDB3;
}

.header {
background-image: url(n/mm_health_photo.jpg);
height: 101px;
width: 382px;
}

.header1 {
position:relative;
background-color: #D5EDB3;
height:101px;
width: 908px;
float:left;
border-left-color:#999900;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: solid;
margin-left: 381px;
margin-top: -101px;

}


Now the problem is in above CSS margin-left and margin-top has been used which I dont think is needed following is my html code

<!-- Header Container Startts -->
<div class="header_container" >
<div class="header"> </div> <!-- header container left image in this box -->
<div class="header1"></div> <!-- the right side of header -->
</div>
<!--Header Finishes here -->

Hi folks,

Just got one of those "can I or can't I" questions that relates to position:relative and position:absolute.

I have the following structure -

Code:

<div>
   <div style="position:relative">
      <ul style="position:relative">
         <li>
           <p>

<span style="display:block"></span>
<span style="display:block"></span>
<span style="display:block; position:absolute"></span>

          </p>
        </li>
      </ul>
   </div>
</div>

The Third Span is where I am not sure about. I'd like it to sit at the bottom right of the enclosing <p>. When I use <span style="display:absolute; bottom:2px; right:2px>, the whole span disappears - not exactly sure where it vanishes to. Without the bottom and right declarations, the span stays put. There is sufficient space within the <p> for the <span> to move about. This absolute positioning worked fine without the relative div and relative ul - so I am assuming that's where my issue lies. BUT, I need the outer structure and it's not an option to change anything except the third <span>.

Question is:

Is what I am attempting going against the grain and something that just isn't going to work?

If so, what steps can I take to position the contents of the <span> where I need it? I have tried making the <span> fit the width of the <p> and then positioning the internal contents to text-align:right. I can't do a padding-top or margin-top as the content in the second span is variable.

Any clever ideas?

The code below displays the boxes i want but i do not understand why those that could be aligned to left are not aligned.

I would like to have those boxes to be aligned to the left.

Any help is appreciated.

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title></title>
<style type="text/css">


div {
	position: relative;
	width: 10em;
	padding: 0.25em;
	margin: 0.25em;
    border: 1px solid black;
	text-align: center;
	overflow: auto;
	float: left;
}

</style>
</head>
<body>
    <div style="top: 0em; height: 2em;"> 8 pm</div>
    <div style="top: 5em; height: 2em;"> 9 pm</div>
    <div style="top: 10em; height: 2em;">10 pm</div>
    <div style="top: 8em; height: 5em;">Box A</div>
    <div style="top: 9em; height: 5em;">Box B</div>
</body>
</html>

Dreamweaver.
I built a simple animated banner: two overlapped layers containing an image with their own link. Timeline to define hide/show timing.
It works fine at the top of the page (absolute position)

Now I need to place the animation in the row #11 of a dynamic table.
In CSS Rules I set "relative" position for these two layers and they are shown inside row #11. Timeline is played but layers are not overlapping. I've tried some settings but I get always the same.
Any idea on how overlap theese two layers with relative position?
Thank you in advance.

Hello,

I've been trying to find a solution to this on the board already but nothing quite answers what Im trying to do.

I have a layer that opens from this css:

Code:

#helplayeropen {

	margin-top: auto;
	margin-right: auto;
	float: right;
	position: relative;
	right: 0px;
	top: 80%;
	z-index: auto;
	visibility: hidden;
}

The problem is that if the page is scrollable, when you scroll to the bottom and open the layer, it opens the layer 80% from the top of the original screen, not the new view of the page. 80% from the real top, not 80% from the top of your current view of the page.

Is there any way to get the layer to open 80% from the top of the screen that you are viewing and not from the absolute top.

Heres an example of whats going on Go here and click on the help chilli (right floating layer)

Hello

I'm running into a very simple CSS problem (IMHO). I'm hoping that someone will be able to help out.

The problem is related to a div layer that I'm positioning. The layer is positioned fine, but there is a gap at the bottom of the page where the div was created, eventhough it's positioned else where. This gap only happens in IE, FireFox looks great (no gap).

Basically the code is this:

Code:

<div id="right-footer">
<img src="images/logo_small.gif" border=0><br />
</div>

This is at the bottom of the page, above the </body></html>. I have content on the page, so scrolling is necessary. The gap is approximately 40px tall.

Here is the relevant section of the stylesheet:
Code:

#right-footer {
	position: relative;
	top: -100px;
	left: 550px;
	width: 100px;
	height: 10px;
	overflow: none;
	z-index: 100;
	padding: 0px;
	margin: 0px;
}

As you can see, the layer will be positioned above where div is in the code and pushed to the left, it's height is 10px. I added the z-index, overflow, padding, margin in a desperate attempt to fix it.

Commenting out the div block or setting position to absolute removes the gap, but my position is blown.

Any ideas? Please let me know if you need any more information or code.

Thanks!
hanji

Hello

I'm hoping a CSS guru will be able to help me out. I'm thinking this is a simple question, but CSS is not my strength.

I have a three column layout. First column is going to contain RSS feed headline, second column is the main site content and the third column is meant for ads. As it stands now, the first column and the third column are slowing the page load, since they use javascript to suck in RSS (for the headline) and phpAdNew for the the Ads. What I'd like to do is create a div at the bottom of the page, so these load last and then are positioned relatively to those columns? I hope that makes sense. I'm not sure how to move position after page load.. almost seems like I need to make a layer within a layer or something??

This is an example of what I'm trying to do:

Code:

<html>
<head>
	<title>Test</title>
</head>
<table cellpadding=0 cellspacing=0 border=0 valign="top">
<tr>
	<td width=100>
	<!-- headline rss feed javascript -->
	</td>
	<td width=500>
	<!-- main content -->
	</td>
	<td width=100>
	<!-- phpAdNew javascript -->
	</td>
</tr>
</table>
<div id="headline">
<script language="javascript" src="http://www.domain.com/path/to/headline.js></script>
<!-- I'd like this to be placed in column 1 -->
</div>
<div id="ads">
<script language="javascript" src="http://www.domain.com/path/to/ad.js></script>
<!-- I'd like this to be placed in column 3 -->
</div>
</body>
</html>

Anyways, any help is greatly appreciated. Let me know if you need any additional information from me, etc.

Thanks!
hanji

I picked up the unitpngfix.js that was released recently because it's smaller, less complicated, and fit my needs better than the Twin Helix fix. (Twin Helix released an updated Alpha version 2 days ago that supports background-repeat and background-position!)

Anyway, when the unitpngfix.js is fired upon site load, most of my content disappears. The general layout remains basically intact, but everything inside does not show. The IE developer toolbar outlines the divs in the upper-left hand of the page. I was shooting back and forth a few emails with the creator of the script, and he said that it happens when the Javascript is fired. The script goes through and changes most position:static elements to position:relative. He was not sure why it was effecting my page that way, because he said that how elements display should not change based on position:relative or position:static (default).

I'm working on getting a test site up shortly and will edit the post accordingly. But does this sound familiar to anyone?

Not sure where to put this because it involves php, dhtml, css and layers?

But anyway I'll give it a shot here. I have a problem that I can't seem to tackle.

Basically what I need is:
I need to set a number of layers on an absolute position from a relative point, the topleft corner of an image of a map (that has no fixed position from the top of the page because the amount of content from the top before the image of the map can change because it is a dynamically generated page).

I have: An image of a map and in a mysql table a number of sets of xy coordinates (in pixels) from the top-left corner on that image to some points on the map. (Unfortunately I can't show you the pages, but I'll try to be as clear as posssible)

Trying to accomplish: A map somewhere on a page and query from a database a set of x-y-coordinates of different points, that correspond to top left corner of that map. On the exact x-y coordinates I want to display a small image of a crosshair, so that a number of points are indicated on the map with crosshairs. The points on the map (read: sets of x-y coordinates) can differ.

Solution (I thought): Use layers using the <div> tag. So I use a layer to specify the location of the map. Then I query the table for all the x-y coordinates of the poins on the map and create a layer for every set of x-y coordinates. Here's the code ($cat and $de are taken from an URL):
PHP Code:
//get xy coordinates of primary position
$locbase = mysql_query("SELECT lb_xcoord, lb_ycoord FROM locbases WHERE lb_cat_id = $cat AND lb_ad_id = $de ");
$locbasered = mysql_fetch_array($locbase);
$xred = $locbasered["lb_xcoord"];
$yred = $locbasered["lb_ycoord"];
//get xy coordinates of other positions on the same map
$locotherbases = mysql_query("SELECT lb_xcoord, lb_ycoord FROM nuke_zc_locbases WHERE lb_cat_id = $cat AND lb_ad_id <> $de ");
 
//position the map at coordinates 0-0
echo "<div id=\"Layer1\" style=\"position:relative; left:0; top:0; z-index:0;\"><IMG SRC=\"$img\" border=\"0\"></div>";
 
//position the primary position on the map in a layer on top of the map layer
echo "<div id=\"Layer2\" style=\"position:relative; left:$xred; top:$yred; z-index:1;\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\"></div>";
 
//create a loop and for each loop create a layer with based on the set of x-y coordinates and display a crosshair image in that layer
$k = 3 ;
while( $locothers = mysql_fetch_array( $locotherbases ) ) {
$xgrey = $locothers["lb_xcoord"];
$ygrey = $locothers["lb_ycoord"];
echo "<div id=\"Layer$k\" style=\"position:relative; left:$xgrey; top:$ygrey; z-index:$k\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\" ></div>"; 
$k++ ;
} 




Problem 1: This all works (except for problem 2, described later) when the position statements in the tag are set to absolute. Then it will display correctly in the left hand corner and all crosshairs are positioned correctly. The thing is that I want it embedded in another page, so that it is displayed below some content that is also dynamically generated (so I can't set position to absolute, because I don't know where the content before the map stops) So I have to set it to relative and then all the divs are displayed relative to the previous tag. Since the tags are dynamically generated through a while loop, the crosshairs will all move down a blank line.

Problem 2: The layers do not stack exactly as planned, first because the images of the crosshairs are displayed under the map (but the z-index builds up correctly doesn't it?) he weird thing is that when I put the <div> tag of the map image after the looped and primary crosshair div-tags, then the crosshairs are all displayed on top of the map. To my knowledge the z-index should work regardless of where the code is , no?)

Anyone any idea how to do this?
(or would I have to display the map and crosshairs in an <iframe>within the dynamically generated page)


Thanks for any feedback!
Cheers,
Gurt