CSS - Positioning Layers Inside A Layer Help Please!!

Okay here's what my HTML basically looks like:

<div id="container">
<div id="top"></div>
<div id="middle"><div id="text"></div></div>
<div id="bottom"></div>
</div>

Now, the top, middle and bottom have a separate background image, that when they are all placed UNDERNEATH each other makes up an image. This works out fine in IE, but in Firefox with the CSS I have set for it, it puts a white line underneath each image (kinda like there's an imaginary <p> in between them, but there's not).

Can anyone help if this is a basic problem? Or do I need to post my CSS in order to get this figured out?

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>

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.

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

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?!

Hi all,

After being away from the forums for some while I picked up the "webdesign-bug" again (it's raining during my summer holidays) but I'm having some troubles catching up with all new techniques/syntaxes at the moment. I did have a look at some tutorial sites and searched the forum for similar problems but somehow it's a bit overwhelming and I didn't find the solution I'm looking for yet. I do hope I didn't overlook something very basic or ask a frequently asked question (sorry then )

The goal
I'm trying to make a (css-based) site with a central column with all 'normal' data. Below this central column I'd like to place some additional layers which are (partly) hidden underneath the main layer and which show themselves if you move with your mouse over the visible parts. The idea behind it is to create some 'desktop' where you have all kinds of things laying on eachother (like additional pieces of paper, some photographs, some money, ...). As an extra feature there would be another layer which makes sure there's a shadow from the 'main column' on the items below it. (Hope this is clear?)

What I did so far
To achieve this I thought I'd use different layers with different z-indexes and position them over and underneath eachother. So far I have the following code:

html4strict Code:
Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Layers</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> function show( obj ) { bla = document.getElementById( obj ); bla.style.zIndex += 10; } function hide( obj ) { bla = document.getElementById( obj ); bla.style.zIndex -= 10; } </script> </head> <body> <!-- CONTAINER --> <div id="container"> <h2 class="title">Quick Links</h2> <!-- SUBCONTENT --> <div class="subcontent1" id="subcontent1" onMouseOver="show('subcontent1');" onMouseOut="hide('subcontent1');"> Subtext1<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <div class="subcontent2" id="subcontent2" onMouseOver="show('subcontent2');" onMouseOut="hide('subcontent2');"> Subtext2<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <!-- CONTENT --> <div class="content_shadow"> <div class="content"> <h1 class="title">Site Title</h1> <div class="content_white"> <h2 class="title">Content Title</h2> Maintext1 </div> </div> </div> </div> </body> </html>

  

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml">


 <head>


     <title>Test Layers</title>


     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />


     <link href="style.css" type="text/css" rel="stylesheet" />


     <script type="text/javascript">


         function show( obj ) {


             bla = document.getElementById( obj );


             bla.style.zIndex += 10;


         }


         function hide( obj ) {


             bla = document.getElementById( obj );


             bla.style.zIndex -= 10;


         }


     </script>


 </head>


 <body>


  


 <!-- CONTAINER -->


 <div id="container">


     <h2 class="title">Quick Links</h2>


  


     <!-- SUBCONTENT -->


     <div class="subcontent1" id="subcontent1" onMouseOver="show('subcontent1');" onMouseOut="hide('subcontent1');">


         Subtext1<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/>


     </div>


     <div class="subcontent2" id="subcontent2" onMouseOver="show('subcontent2');" onMouseOut="hide('subcontent2');">


         Subtext2<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/>


     </div>


  


     <!-- CONTENT -->


     <div class="content_shadow">


         <div class="content">


             <h1 class="title">Site Title</h1>


             <div class="content_white">


                 <h2 class="title">Content Title</h2>


                 Maintext1


             </div>


         </div>


     </div>


 </div>


  


 </body>


 </html> 

css Code:
Original - css Code * { margin: 0; padding: 0; } body { background-color: orange; } h1.title { display: none; } h2.title { display: none; } /******************************************************************** * CONTAINER ********************************************************************/ #container { border: solid 1px black; margin: 0 auto; width: 1000px; z-index: 1; /* background-color: lightgray;*/ /* filter: alpha(opacity=50);*/ } /******************************************************************** * SUB CONTENT ********************************************************************/ /* http://msdn2.microsoft.com/en-us/library/ms530301.aspx http://www.w3schools.com/htmldom/prop_style_clear.asp http://www.dynamicsitesolutions.com/css/layout-techniques/ */ #container .subcontent1 { background-color: lime; float: left; position: relative; top: 100px; width: 400px; z-index: 2; /* display: inline;*/ /* height: 200px;*/ /* left: 0px;*/ } #container .subcontent2 { background-color: lime; display: block; float: right; position: relative; top: 200px; width: 400px; z-index: 3; /* display: block;*/ /* height: 200px;*/ } /******************************************************************** * MAIN CONTENT ********************************************************************/ #container .content_shadow { background-color: gray; display: block; margin: 0 auto; opacity: .75; position: relative; top: 0px; width: 850px; z-index: 8; } #container .content { clear: none; margin: 0 auto; width: 800px; z-index: 9; } #container .content_white { background-color: white; display: block; height: 800px; margin: 0 auto; position: relative; top: 0px; width: 100%; z-index: 10; }

  

 * {


     margin: 0;


     padding: 0;


 }


  


 body {


     background-color: orange;


 }


  


 h1.title {


     display: none;


 }


 h2.title {


     display: none;


 }


  


 /********************************************************************


  * CONTAINER


  ********************************************************************/


  


 #container {


     border: solid 1px black;


     margin: 0 auto;


     width: 1000px;


     z-index: 1;


 /*  background-color: lightgray;*/


 /*  filter: alpha(opacity=50);*/


 }


  


 /********************************************************************


  * SUB CONTENT


  ********************************************************************/


  


 /*


 http://msdn2.microsoft.com/en-us/library/ms530301.aspx


 http://www.w3schools.com/htmldom/prop_style_clear.asp


 http://www.dynamicsitesolutions.com/css/layout-techniques/


 */


  


 #container .subcontent1 {


     background-color: lime;


     float: left;


     position: relative;


     top: 100px;


     width: 400px;


     z-index: 2;


 /*  display: inline;*/


 /*  height: 200px;*/


 /*  left: 0px;*/


 }


  


 #container .subcontent2 {


     background-color: lime;


     display: block;


     float: right;


     position: relative;


     top: 200px;


     width: 400px;


     z-index: 3;


 /*  display: block;*/


 /*  height: 200px;*/


 }


  


 /********************************************************************


  * MAIN CONTENT


  ********************************************************************/


  


 #container .content_shadow {


     background-color: gray;


     display: block;


     margin: 0 auto;


     opacity: .75;


     position: relative;


     top: 0px;


     width: 850px;


     z-index: 8;


 }


 #container .content {


     clear: none;


     margin: 0 auto;


     width: 800px;


     z-index: 9;


 }


  


 #container .content_white {


     background-color: white;


     display: block;


     height: 800px;


     margin: 0 auto;


     position: relative;


     top: 0px;


     width: 100%;


     z-index: 10;


 } 

The problem(s)
Besides the (css)code probably being sloppy (and redundant at points?!?) since I experimented a lot with adding and removing of position-tags, floating-tags, etc etc.. it still fails to do what I'm aiming for. As can be seen on the attached screenshot most of it seems to be working (at least in FF2) (I had my mouse over the 2nd subcontent-layer btw) but the maintext1 won't start at the left of it's layer but instead starts on a x-coordinate where the 1st subcontent-layer finishes Can somebody point me to what I'm doing wrong? Also, if somebody has a relevant tutorial I'd appreciate it as well since I obviously need some extra exercise with this stuff (working on it already btw but you never know if there's another good one)

Thanks for any help and if something isn't clear I'll try to explain it further!

Ok, I thought I had some idea what I was doing, but I'm starting to realize that I have none...



If everything is square in the top-left corner there is _NO_ problem, everything looks fine.

However, when I set the content of the page to _center_ obviously the positions of the dropdown menus get messed up. Is there anyway for the dropdowns to follow the bottom of the "Weddings" text? I.E. when the user stretches their window window open further it still lines up in the correct place?

Should all 3 parts be on layers? or is it ok to have two tables, and a pull down menu as a layer?

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 // -->

EDIT: OK, I've worked out all of the issues except the fourth one, which doesn't really have to do with CSS specifically. Why do line breaks insert gaps? The problem is especially prevalent in IE.

First issue: I'm trying to position one image over another image and its inserting this big gap! As seen on http://www.zacwittedesign.com/olive/pool.html we have the "about the pool" image position on top of the big image to the left side, but you can see there is a big gap above the big image. If I simply comment out the 'about the pool' image, the gap goes away and all is fine. I thought relatively placed elements were not supposed to affect the flow of elements beneath them? Can you see anything wrong in my code?

Second Issue: There are two issues with the layer on the top of the page where the dots should be coming out of 'new projects' (id=projects_layer). It should be positioned over top.jpg as seen in hotstuff.html. In that page I manually moved it down by adding an additional 60px to the relative offset, but the space where it would have occupied remains and pushes the whole page down. Everything should look like it does in portfolio.html which doesn't currently use layers. You can see a version without my manually shifting it down and demonstrating the third issue at pool-valign.html.

Third Issue: The vertical-align of all the images inside the projects layer. For the layout to be correct, the images need to be top-aligned or they won't line up with the dots and they'll slightly cover the button images beneath them. I have a style property set vertical-align:top; but it doesn't seem to do anything. Do I misunderstand the vertical-align property? There's also a small gap beneath the images when viewed with IE. I've changed the background color of the layer so you can more easily see the problem.

Fourth issue: You've probably noticed in my code that I insert and HTML comment for every line break. That is because if I don't, IE reads the line beaks as non-whitespace and inserts both vertical or horizontal gaps between the images. Whats the deal there?

Fifth Issue: In IE there is a one or two pixel gap above right.jpg where the tim olive logo is. This doesn't happen on firefox and it doesn't happen on pages that don't use layers like portfolio.html.

...And I haven't even tried it on a mac browser yet...

Hello,

I am very new to CSS, having only used stylesheets for basic formatting of text, etc. I have created a site where the layout is based on tables (I know ... when I have spare time, I will start learning CSS for this).

I have a main table with 1 row and 1 column, height 95%, width 100%. Within this I have a table with a fixed layout (set height, width) for the table elements. This table is centre and middle aligned.

Unfortunately the text provided for one of the cells in the table is exceeding the amount expected and the cell height has increased to accommodate for this. I thought of creating a layer and placing it over the cell and inserting the text here and setting the overflow to scroll. However, depending on screen resolution, browser the layer is not always positioned where I want it. Can I somehow position the layer relative to the table cell ? If not, do you have any suggestions as to what I can do to fix this. I do not have the option to rewrite the site using CSS, due to deadlines.

Thanks in advance for your help.

Bea

This is the first website I'm trying to make compatible with all browers so I'm running into a few new things.

Positioning a div inside another div: I usually use margins to position the second div where I want it, but I noticed this doesnt work in firefox, safari, opera, etc. Only IE. Which I know IE is the problem not the other browsers. I did switch to padding rather than margins and it got the desired effect across all browsers. Is padding the right way to go? Just want to make sure before I keep going forward with it. Thanks.

Hi there,

I would like to know from css veterans when and why are tables needed inside a web layout built mainly by css. If they are at all.

Best regards,

- Dehumanizer

Hello, thanks for taking the time to read my post.

I'm having a problem getting my divs to layout where I want them to.

Here is the worst example:here
Obviously, the footer is not in the traditional location. This seems the most logical for the code, the footer is at the bottom of the main div. I thought it would get pushed down by all the other stuff in the main div...

This works ok: this
But if the content for that page is short, it's going to do this: here

This only works for very short content, nesting it in with the menu: here

I am able to position it horizontally depending on which div I nest it in.

It seems to me that I should have the footer div at the end of the 'main' div so that it winds up at the bottom.

thanks for your time,
juglesh

I am honestly trying to do this thing with CSS but CSS does not seem rational.
I had some nested div elements now I thought that position relative
was with respect to the parent. So if I put position: relative; left:100px; top: 8px on the red one it will be close to the top of the parent (the blue one) and 100 px over from the left. Then if I do the green div the same except top: 22px it will be right below the red one. I know divs make a new line but they were skipping a line. So I turned them into spans. now it starts the second one at the right place top to bottom, but left to right it starts where the last one left off. And now here's an even harder question, I guess without using zindex they won't overlay, right? and centering is just out of the question...

Code:

 <div> 
    <div> </div> 
    <div> </div> 
 </div> 

Here is some sample actual code: http://www.colleenweb.com/onetix.html

It doesnt have all the normal styles but it shows the problem very clearly.
If you look at the code it should be pretty clear what I intended.
Please tell me why the position specifications are being ignored.

And problems are compounded when you try to print it, it makes the graphic background bigger and cuts it off. If you just print the graphic it is fine. I gave up with the transparent for now because this has to work tomorrow, and just made a hard coded blue one but eventually I'd like to address that too.

I need to be able to make these look acceptable both for screen and print.
I never had these problems when I did everything with tables. This is why people don't learn CSS.

How do i layout elements within a div without effecting everything outside the container div? this has been frustrating me, everything on the page seems to get effected.

i want the div (question) and the div (answer) next to each other..... i thought position:relative does this since it changes position from the container div.

The below code has the div(answer) below the div(question). I put top:0px; and position:relative assuming they both start at the top of the container div.
Code:

<div id="adult">
	<?php echo "<ul><li>test1</li></ul>";  ?>
	</div>
	<div id="qanda">
	<?php  echo "
<div id='questions'>
 <ul id='questionsul'>
 <li><font color='#FFFFFF' face='Century Gothic' size='5px'>QUESTION</font><font color='#FFFFFF' face='Arial' size='5px'>?</font></li>
 </ul>
</div>

<div id='answers'>
 <ul id='answersul'>
  <li><font color='#D99C29' face='Century Gothic' size='5px'><a href='answer.php?id=1&search=$search' style='text-decoration:none' class='Options6'>Answer</a></font></li>
 </ul>
</div>
 

";  ?>
	</div>
<div id="amount"">
	<?php echo "<ul><li>test3</li></ul>";;  ?>
		
	</div>
		<div id="results">
	<?php echo "<ul><li>test4</li></ul>";  ?>
	</div>
	<div id="contributing">
	<?php echo "<ul><li>test5</li></ul>";  ?>
	</div>
	<div id="advert">
	<?php echo "<ul><li>test6</li></ul>";  ?>
	</div>
	</div></div>

CSS

Code:

#questions{
position:relative;
top:0px;
text-align:left;

}

#answers{
position:relative;
top:0px;
text-align:right;


}


#adult{
width:700px;
margin:0 auto;

}

#qanda {
width:700px;
margin:0 auto;
}

#amount {

width:700px;
margin:0 auto;
}

#results {
width:700px;
margin:0 auto;

}

#contributing {
width:700px;
margin:0 auto;

}
#advert {
width:700px;
margin:0 auto;

}