CSS - Positioning A Layer Relative To A Table

Hello, i'm making a new site and i did the layout in photoshop, then i did the slices and i came out with this layout:
_http://chromex.altervista.org/cse/CSE.htm

The problem is now to add the content since i have to use Layers Visibility. But i cant make them stay in the same place. When i resize the window, the layer doesnt stay in the same place

Any solution?


PS: click on contatti in the layout to show the layer

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

I need to position a 200px high by 300px wide layer in the center of the page.

does anyone know a simple way to do this, i have thought about using JS to calculate the width of the page, take off the 200px, and halve it, but that seems like overkill, isnt there a simple CSS command?

Thanks

Xaphan

I have a webpage located at http://www.niu-sae.com

I have a drop down menu image, in a div layer that will pop up when you roll over the first link "Active Chapter".

First of all the positioning is all weird... when I am at full screen I have to set the div left at 285... even though it is really only about 116. any idea what I am doing wrong?

Second even when I get it lined up... the way it is now... it changes if you resize the window.

HELP. please.

Well, I can't post links so this is going to be hard as hell to type out. I have a layer within that page that I want in a certain position, yet when I move the width of my browser the layer does not stay where I want it. Obviousely, this does not make any sense because its something you have to see.

I checked the rules for the forums and I can't find where it states anything about URLs, if someone would be so kind to show me, I'd appericiate it.


Not that it matters witout seeing it on the page but my code for this layer is:

Code:

<div id="Layer1" style="position:absolute; left:848px; top:85px; width:118px; height:167px; z-index:1">    
	  <div class="mltop">schedule +4hrs </div>
	  <p>00:00 - Music <br>
	    01:00 - Music <br>
	    02:00 - Music <br>
	  03:00 - <a href="">BRR</a></p>
	  <p><b>Current time: 00:00</b><br>
	    Times in CST/CDT
	    <br>
      </p>
	</div>

Hi,

I'm trying to set up a side menu, which appears on the right-hand side of the page.

Code:

<style type="text/css">
#SideMenu {
	color: #639;
	background-color: #FBFBFB;
	position: absolute;
	top: 275px;
	left: 630px;
	width: 190px;
	height: 250px;
	}
</style>

However, when the browser window is resized, the layer then obstructs the main content (by floating over it), and does not remain in its place as it should. This is how it should look like::



However, as the browser is resized, the layer does this:



I'm tring to remedy this using CSS only, so please send any suggestions to me. The code for the sidebar is:

Code:

  <div id="SideMenu">
  <p>Side Content. I like to eat food.</p>
  </div>

Any ideas guys?!

I am trying to get the footer DIV to appear directly below the content div on the page. Cant get it to work. CSS and DIV code is below if anyone can offer some advice? Thanks.

Code:

#page_footer {
	background-color: #ff0000;
	width: 729px;
	height: 30px;
	position:relative;	
	bottom: 0px;
	left: 35px;
	font-family: arial, tahoma, times new roman;
	font-size: 11px;
	font-weight: normal;
	color: #5A5A5A;
}

	<!-- // MANDATORY PAGE CONTENT HOLDER // -->

	<div id="page_content_holder_sizing">

		<div id="page_content_section_name"><?=str_replace("::", "-", $page_title)?></div>
		<div id="page_content_top_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>
		<div id="page_content_bottom_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>

		<!-- // CONTENT TEMPLATE // -->



		<!-- // END CONTENT TEMPLATE // -->

	</div>

	<!-- // MANDATORY PAGE FOOTER // -->

	<div id="page_footer">

	 footer goes here

	</div>

	<!-- // END MANDATORY PAGE FOOTER // -->

	<!-- // END MANDATORY PAGE CONTENT HOLDER // -->

In the following code i need *Signup* to align just to the right of *Login*. Due to *SearchContainer* location, it must be absolute positioned. Thanks for the help.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<style type="text/css" title="">
#SearchContainer	{ position:absolute; z-index:1; width:210px; height:125px; border:1px solid red; }
	#SearchField	{ position:relative; z-index:3; width:200px; top: 5px; border:1px solid orange; }
	#LoginMessage	{ position:relative; z-index:3; width:200px; top: 10px; border:1px solid yellow; }
	#Login			{ position:relative; z-index:3; width:150px; top: 20px; border:1px solid green; }
	#Signup			{ position:relative; z-index:4; width: 25px; top: 20px; left: 10px; border:1px solid blue; }

</style>

</head>
<body>

	<div id="SearchContainer">
		<div id="SearchField">Epsum factorial non</div>
		<div id="LoginMessage">Lorem ipsum dolor</div>
		<div id="Login">Li Europan lingues<br>Li Europan lingues</div>
		<div id="Signup">xxx</div>
	</div>

</body>
</html>

I am trying to learn CSS Positioning in an effort to move away from table-based layout. I use some pretty complicated layouts and I am a big fan of the "stretch" effect for my site headers.

As my first project, I am converting a site that uses a stretch header, and in table layout, used to be divided into 5 columns. I have managed to re-create the header almost as good as the original with just 3 divs, using absolute positioning, z-index, and a background image. Then I used relative positioning to create the div for the main content, and I was planning to do another relative-positioned div for the footer. I feel that I'm very close but could use a little help to get over the hump. I have two main problems:

1. When you resize the window horizontally below about 850px, the images in the header start to overlap. I would like them to "bump" each other and have a scrollbar appear. I've tried to fix this using the min-width property in various divs, and I tried to use a wrapper div, but nothing seemed to work very well. This is something I can live with, but any tips would be appreciated.

2. Relative positioning seems to work fine for the main content div (#middlebox in my .css). However, I did the footer div in the same manner, and it only works in Firefox, not IE. If I could get it to work in both Fx and IE I'd be happy - I don't care about any other browsers.

3. Any other tips and tricks that would make it cleaner or better, etc. would be appreciated. Remember I am a n00b so go slow.

Original site (tables): http://www.gpleague.com
New test site (css): http://www.gpleague.com/cssp.htm
Css file: http://www.gpleague.com/csstest.css

Ok here's my problem - I have three columns/layers (left, center, right) which are inside the content layer. I need to use relative positioning so when the page is re-sized all the page elements are still centered on the page. The problem I am having is that I cannot figure out a way for the colums to be aligned and seem to go under one another. I also need to keep the center colum with an overflow. If anyone has any ideas I would be very grateful! Thanks

<div id="content">
<div id="leftcolumn"></div>
<div id="centercolumn"></div>
<div id="rightcolumn"></div>
<!-- End content -->
</div>


#leftcolumn {
background-image: url(images/leftcolumn.gif);
height: 412px;
width: 148px;
position: relative;
margin-top: 0px;
margin-left: 4px;

}

#centercolumn {
background-color:#FFFFFF;
height: 412px;
width: 382px;
position: relative;
margin-top: 0px;
margin-left: 3px;
overflow: auto;
text-indent: 2px;

}

#rightcolumn {
background-image:url(images/rightcolumn.gif);
height: 412px;
width: 148px;
position: relative;
margin-top: 0px;
margin-left: 7px;

}

How can I position several elements, relative to the position of another element?

I tried this:

<div>
Test
<span style="position:relative;top:40;left:40">Foo</span>
<span style="position:relative;top:40;left:40">Bar</span>
</div>


I want both Foo and Bar to be 40 pixels to the right and below of Test.

But they appear next to eachother instead of stacking on top of eachother.

How can I position them "relative" to the div tag?

Okay, I have a few menu items and when I mouse over one of them, I want a sub div to show up. However, if I try and position the div relative to another, it gets positioned properly, but pushes the content below it downward, which I do not want. I want the content to float above like any sub menu would when the main menu item is rolled over.

However, when I absolutely position the div, it's position changes based on the current width of the browser. I could technically get the width of the browser when the page loads and dynamically position it but I'm obviously making this harder than it has to be. Besides, the function would have to rerun every time the person changes the width of the browser. Possible, but again I know I'm making this harder than need be.

I'd rather not spam devshed with a link to my site, but if you want to see the problem, I'll post it. Thanks in advance.

Alright... i am creating a simple website and because of the way the site is to be created, I am using position: relative. However I'm trying to get the links on the left and right of an image to go under part of the image... In IE it works fine... in Opera, NS, and FF it doesn't. Is there something I need to add to my css to get it to work properly...

CSS:
Quote:
td.homeleft {position:relative;
top:50px;
left:50px;
font-size:14px;
}

td.homeright {position:relative;
top:50px;
right:30px;
font-size:14px;
}



HTML Code:
<html>
<head>
<link rel="stylesheet" href="lolli.css" type="text/css">
<title>UF Lollicup!</title>
</head>
<body bgcolor="fdf066">
<table align="center">
<tr>
<td class="homeleft">
<center>Menu<br><br>
Shop Now<br><br>
What's New<br><br>
Promos</center>
</td>
<td>
<img src="images/homepageflower.gif">
</td>
<td class="homeright">
<center>Links<br><br>
Feeback<br><br>
Newsletter<br><br>
Pictures</center>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<img src="images/bar.gif">
</td>
</tr>
<tr>
<td colspan="3" align="center">
Gainesville, Florida 352-505-3662
</td>
</tr>
</table>

</body>
</html>

I know some of you don't like tables... sorry for using them.
Here's the site I'm working on:
Site in Progress
Here's what the site should look like:
http://www.crash-tech.com/Lollicup/images/main.jpg

Also the blue bar at the bottom... I'm going to want to place text on top of that as well, so would use relative positioning again.

If anyone can suggest a better way to do this, that would be great. Had also considered doing the main page in Flash or using the image and mapping links.

Thanks in advance.

I have a div block which contains links on the left, it is using absolute positioning, I want to have the contents div block on the right, I want it 20 pixels away from the right border and 20 pixels away from the left div block, so if I resize my left div block, my right div block is always 20 pixels ahead of it. The code is included below:

Code:

	<div 
		style="position:absolute; 
		top:20; left:20; width:200; height:200; 
		z-index:1; 
		padding:3px; 
		border: #0000FF 1px solid; 
		background-color:#FFFFFF;">

		<div align="left">- <a href="#1">News</a></div>
		<div align="left">- <a href="#3">FAQ</a></div>
		<div align="left">- <a href="#2">ABC</a></div>
		<div align="left">- <a href="#6">Forums</a></div>
		<div align="left">- <a href="#7">Contact</a></div>
	</div>
	
	<div 
		style="position:absolute; 
		top:20; left:235; right:20;
		z-index:1; 
		padding:3px; 
		border: #0000FF 1px solid; 
		background-color:#FFFFFF;">

		<div align="left">Caption</div>
		<div align="left">bla bla bla This is the right side.
		</div>
	</div>