CSS - Containing Layer Resizing To Fit Other Layers Inside?

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?

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?

Ive seen a few topics about centering layers in browsers and it seems really complicated and often to specific to relate to my site. I used to use tables which were of course easy to center, but now at college we have to use layers (im working in design view im not a coder) and the teacher said try putting a layer in a layer and centering that but ive tried this and it doesnt work, i can get a layer in another layer, but not center it within it.

This is the site im trying to do, i notice on cssvault.com cssbeauty.com most of the css sites (i know mines not really in css as such) are all centered and I was wondering how everyone does it? I went to the macromedia website and it said you can use an extension which works but for some reason it doesnt let you edit the site once you have centered it.

Basically is there a simple way for me to center my site or is it really complicated? I wonder why we are learning in layers when tables center easily and move relative to each other

Hello

I thought I could make it, but what I got so far is jumping over the screen, so please a need some help.

I got a image with two transparant shapes.
Behind those shapes I would like to show 2 other images.

|-------1-------|
| |-----| |----| |
| |...2..| |..3..| |
| |____| |____| |
|_____________|

Image 1 should be on top z-Index
Image 2 should under image 1, a part of the image should be visible.
Image 3 should under image 1, a part of the image should be visible.

Now the issue, image 2 and 3 should be dynamically replaceable.

Please help

Thanks

I've tried different implementations, but none seem to be working.

I have two images crossing over each other using two position: absolute divs. When I click on the one behind using an onClick javascript function, I want that div's z-layer value to change, but none of the sites are helping me. How do I do this?

Hi guys,

I am using the following code on my page but the 'profile-description' div layer is not displaying correctly

Some of the text shown as a result of this <? echo nl2br($row['description']); ?> is being shown outside the blue border created by this code :

<div style="text-align:center;border:#a9c5df 1px solid;width:90%;padding:20px; background:url(images/bg-image.jpg) no-repeat 0 4px #ffffff;background-position:top right;">


PHP Code:
#div-profile {
 position:relative;
}
#profile-data {
 position:absolute;
 top:-15px;
 right:230px;
 width:250px;
 font: 12px/17px  verdana,arial,sans-serif;
 line-height:18px;
 text-align:left;


}
#profile-pic {
 position:absolute;
 top:0;
 left:-10px;
 width:170px;

}


#profile-description {
 position:relative;
 top:150px;
 left:60px;
  width:450px;
   font: 12px/17px  verdana,arial,sans-serif;
 line-height:18px;
 text-align:left;
}






<div style="text-align:center;border:#a9c5df 1px solid;width:90%;padding:20px; background:url(images/bg-image.jpg) no-repeat 0 4px #ffffff;background-position:top right;">




<div id="div-profile">
                <div id="profile-pic">
                <img src="profile-pics/<? echo $pic ;?>" alt="" width="120" height="140" align="left">
                </div>
                

                <div id="profile-data">
                <br />
                <strong>Name:</strong> <? echo("$row2[first_name]"); ?> <? echo("$row2[last_name]"); ?><br />
                <strong>Specialist Area:</strong> <? echo("$row2[specialist_area]"); ?><br />
                <strong>Phone:</strong> <? echo("$row2[phone]"); ?><br />
                <strong>Mobile:</strong> <? echo("$row2[mobile]"); ?><br />
                <strong>Company:</strong> <? echo("$row2[company]"); ?><br />
                <strong>Address:</strong> <? echo("$row2[city]"); ?>, <? echo("$row2[state]"); ?><br />
                <strong>Email:</strong> 
                <a href="contact-agent.php?id=<? echo $_SESSION['member_id'];?>" title="Contact This Agent" onclick="NewWindow(this.href,'name','450','350','yes');return false">contact us here</a><br />


    <?
    
    }
    ?>
    

                </div>
                

        <br /><br />


                <div id="profile-description">
                
                <? echo nl2br($row['description']); ?>
                
                <br /><br /><br /><br />
                
                
                    <div align="right">
                        <a href="contact-agent.php?id=<? echo $member_id ;?>" title="Contact This Agent" onclick="NewWindow(this.href,'name','450','350','yes');return false">
                        <img src="icon-email.gif" alt="Contact This Agent" width="60" height="60" hspace="10" border="0"></a>
                        
                        <a href="javascript:window.print()" title="Print This Page">
                        <img src="icon-print.gif" alt="Print This Page" width="60" height="60" border="0"></a>
                    </div>
                
                </div>
                
                
            </div> 





Can anyone possibly help?

How many layers or z-indexes can you reasonably use on one page? I'm thinking mostly IE here, since that is the browser I will be working with.

For instance, you design a bunch of tabs - at least 24, and have a a span or div below those tabs that contain checkboxes and text preceeding each check box, for each tab on its own layer. Maybe a maximum of 40 checkboxes/text per layer. Clicking each tab will hide/unhide the appropriate layer of checkboxes/text in the div area. I know this may be better done axaj style, but for the sake of argument, what would you think is a maximum load for this scenario for a browser (latest IE) on a standard pc that may be up to 3 years old?

Ok, I have this:
Code:

#background {
	position:relative;
	width:600px;
	height:480px;
	z-index:1;
	background-image:"/background.jpg";
	border-style:none;
	color:#000000;
	} <div ID="background">Whatever</div>

But it doesn't work.. why?

have I got this right....any selector effectively becomes a layer once I add a 'position' and a 'z-index'?
Thanks

Chris

I hope someone can help me with this, please have a look at a page I have created:

http://www.funnestgames.com/header_1.php

Now before rolling over any of the links on the left side, notice the text "Rollover game for preview". I have been trying to get that inside the white rectangular outlined box, but the only way I know is if i use css and specify a certain number of pixels from the left side. I can't do this because the website is centered, and resizing the page would change the widths and it all gets messy, i hope you have the idea.

I have the same problem if you rollover a link, you can barely read it but it says loading below the text "rollover game for preview"

does anyone know a way to solve my problem? please view source on page if you can help me out and see what i did wrong. the divs start at approx line 135 thanks

Code:

<center>
						<div style="width:100px; height:100px;background-color:#E0E1E2; border: 1px double #ffffff; font-size:11px; font-weight:700; color:#333333; text-align:center;">Game Preview
						<div style="position: absolute; top: 300px;">Rollover game for preview</div>
						<div id="preview" style="width:100px; height:100px;background-color:#E0E1E2; visibility:hidden; z-index:99;">
 						<img name="preview_img" src="spacer.gif" style="height:100px; width: 100px; visiblility:hidden; " onload="showmehideme()">
						<div id="loading" style="font-size:11px; font-weight:700; color:#333333; text-align:center; position: absolute; top: 300px;">Loading...</div>
 						</div>
						</div>
						</center>

Is it possible to make a layer relative to the 'body' or some other container in my web page?
The position of my layer changes with each screen, browser or setting but I would like to be able to keep it, say, 150px in from the left edge of the 800px wide 'container' I've made.
In other words, I want a layer to act like any other selection.
Thanks
Chris

Hi,
http://sinistersuicide.net/lolastour12.html is the page I'm working on.

Problems:
- I tried using absolute positioning on my div layers but if the page was viewed on a lower resolution than what I'm using 1440x900 the div layers would move from where they were positioned.

- So I transfered over to relative positioning and all was fine till I noticed a huge gap at the bottom of the page.

The code for the page is:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<html>
<head>
<title>lolastour1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<style type="text/css">
.centre {
width: 406px;
height: 260px;
overflow:auto; 
margin-right: auto;
margin-left: auto;
position: relative;
top: -480px;
left: 15px;
z-index: 50;
}
/*hack for IE5*/
body {
text-align: center;
}

.samplemovie {
width: 500px;
height: 340px;
overflow:auto; 
margin-right: auto;
margin-left: auto;
position: relative;
top: -1105px;
left: 20px;
z-index: 50;
}
/*hack for IE5*/
body {
text-align: center;
}

</style>

       	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
	<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

		<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
		<script type="text/javascript" charset="utf-8"> 
			google.load("jquery", "1.3");
		</script> 
        
		<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" /> 
		<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script></stylesheet>
		
        <script type="text/javascript" src="swfobject.js"></script>
        
</head>

<body bgcolor="#faabcb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto();
		});
	</script>
    
<!-- Save for Web Slices (lolastour1.psd) -->
<table width="921" height="1301" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
	<tr>
		<td colspan="17">
			<img src="images/lolastour1_01.jpg" width="920" height="209" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="209" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="5">
			<img src="images/lolastour1_02.jpg" width="60" height="910" alt=""></td>
		<td rowspan="2">
			<a href="http://">
				<img src="images/Join.jpg" width="102" height="47" border="0" alt="Join"></a></td>
		<td colspan="2" rowspan="3">
			<img src="images/lolastour1_04.jpg" width="93" height="553" alt=""></td>
		<td colspan="2">
			<a href="http://">
				<img src="images/Members.jpg" width="172" height="41" border="0" alt="Members Log In Here"></a></td>
		<td rowspan="3">
			<img src="images/lolastour1_06.jpg" width="66" height="553" alt=""></td>
		<td colspan="2">
			<a href="http://">
				<img src="images/Gallery.jpg" width="138" height="41" border="0" alt="Gallery"></a></td>
		<td colspan="2" rowspan="3">
			<img src="images/lolastour1_08.jpg" width="89" height="553" alt=""></td>
		<td colspan="2">
			<a href="http://">
				<img src="images/Videos.jpg" width="144" height="41" border="0" alt="Videos"></a></td>
		<td colspan="3" rowspan="5">
			<img src="images/lolastour1_10.jpg" width="56" height="910" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="41" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/lolastour1_11.jpg" width="172" height="512" alt=""></td>
		<td colspan="2" rowspan="2">
			<img src="images/lolastour1_12.jpg" width="138" height="512" alt=""></td>
		<td colspan="2" rowspan="4">
			<img src="images/lolastour1_13.jpg" width="144" height="869" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="6" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/lolastour1_14.jpg" width="102" height="863" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="506" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/lolastour1_15.jpg" width="24" height="357" alt=""></td>
		<td colspan="7">
			<a href="http://">
				<img src="images/Join-17.jpg" width="521" height="40" border="0" alt="Join"></a></td>
		<td rowspan="2">
			<img src="images/lolastour1_17.jpg" width="13" height="357" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="40" alt=""></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="images/lolastour1_18.jpg" width="521" height="317" alt="">   
                     
 </td>
 
		<td>
			<img src="images/spacer.gif" width="1" height="317" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/lolastour1_19.jpg" width="34" height="181" alt=""></td>
		<td colspan="14">
			<a href="http://">
				<img src="images/Join-21.jpg" width="863" height="68" border="0" alt="Join"></a></td>
		<td colspan="2" rowspan="2">
			<img src="images/lolastour1_21.jpg" width="23" height="123" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="68" alt=""></td>
	</tr>
	<tr>
		<td colspan="14">
			<img src="images/lolastour1_22.jpg" width="863" height="55" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="55" alt=""></td>
	</tr>
	<tr>
		<td colspan="12">
			<img src="images/lolastour1_23.jpg" width="703" height="26" alt=""></td>
		<td colspan="3" rowspan="2">
			<a href="http://www.sinistersuicide.net/lolastour2.html">
			  <img src="images/Page-2-Tour.jpg" width="172" height="58" border="0" alt="Page 2 Of Tour"></a></td>
		<td rowspan="2">
			<img src="images/lolastour1_25.jpg" width="11" height="58" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="5">
			<img src="images/lolastour1_26.jpg" width="310" height="32" alt=""></td>
		<td colspan="3">
			<a href="http://">
				<img src="images/Webmasters.jpg" width="259" height="32" border="0" alt="Webmasters"></a></td>
		<td colspan="4">
			<img src="images/lolastour1_28.jpg" width="134" height="32" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="32" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="34" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="102" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="24" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="69" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="89" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="83" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="66" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="110" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="28" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="76" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="127" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="33" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="12" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="11" height="1" alt=""></td>
		<td></td>
	</tr>
</table>

    <div class="centre">
	        <a href="images/freeimage1.jpg" rel="prettyPhoto" title=""><img src="images/freeimage1thumb.jpg" width="90" height="120" alt="" /></a>
            <a href="images/freeimage2.jpg" rel="prettyPhoto" title=""><img src="images/freeimage2thumb.jpg" width="90" height="120" alt="" /></a>
            <a href="images/freeimage3.jpg" rel="prettyPhoto" title=""><img src="images/freeimage3thumb.jpg" width="90" height="120" alt="" /></a>
            <a href="images/freeimage4.jpg" rel="prettyPhoto" title=""><img src="images/freeimage4thumb.jpg" width="90" height="120" alt="" /></a>
            <a href="images/freeimage5.jpg" rel="prettyPhoto" title=""><img src="images/freeimage5thumb.jpg" width="90" height="120" alt="" /></a>
            <a href="images/freeimage6.jpg" rel="prettyPhoto" title=""><img src="images/freeimage6thumb.jpg" width="90" height="120" alt="" /></a>
            <a href="images/freeimage7.jpg" rel="prettyPhoto" title=""><img src="images/freeimage7thumb.jpg" width="90" height="120" alt="" /></a>
            <a href="images/freeimage8.jpg" rel="prettyPhoto" title=""><img src="images/freeimage8thumb.jpg" width="90" height="120" alt="" /></a>
            <a href="images/freeimage9.jpg" rel="prettyPhoto" title=""><img src="images/freeimage9thumb.jpg" width="90" height="120" alt="" /></a>
            <a href="images/freeimage10.jpg" rel="prettyPhoto" title=""><img src="images/freeimage10thumb.jpg" width="90" height="120" alt="" /></a>
</div>


    <div class="samplemovie">
<script type='text/javascript' src='swfobject.js'></script>
 
<div id='mediaspace'>This text will be replaced</div>
 
<script type='text/javascript'>
  var so = new SWFObject('player.swf','mpl','450','300','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','http://sinistersuicide.net/lolacasting.flv');
  so.addVariable('controlbar','none');
  so.addVariable('autostart','true');
  so.addVariable('icons','false');
  so.addVariable('stretching','fill');
  so.write('mediaspace');
</script>
</div>


<!-- End Save for Web Slices -->
</body>
</html>

Hi,

I've been using nested layers in Dreamweaver and wanted to know if it's possible to hide all nested layers of a given layer (say A) by applying a behavior to hide just the layer A to an object? Or is it that in order to hide the nested layers also, I'll need to apply behaviors for each nested layer separately?

Also, is there a way to load the content of a layer (such as swf movies, images and other stuff) only when its property is changed to visible (by default the layer is hidden).

Thanks,
Jayant

Hi

I have a div (#adcontainer), in that there are some boxes (#adcontainer .ad).
Inside every box there should be a small image at top 5, left 5. At top 5, right 5 there should be a price-flash-image.
Everything works perfect besides the price-flash.. I can't manage to position correctly. The css I'm using is:

Code:

#adContainer { position: relative; width: 155px; float: left; margin: 0; margin-left: 5px; padding: 0;}
#adContainer .ad { width: 100%; margin: 0; padding: 0px; border: 1px solid black; background-color: white; }
#adContainer img { position: relative; display: block; top: 0px; left: 0px; padding: 3px; z-index: 1; }
.price { position: absolute; width: 68px; height: 40px; top: 5px; right: 5px; background-image: url('../images/price_flash_small.png'); font-size: 13pt; font-weight: bold; text-align: center; line-height: 40px; display: block; z-index: 99; }

HTML:
Code:

<div id="adContainer">
<div class="ad"><img src="shop/images/products/48602_small.jpg" width="94" height="100"><div class="price">24,90</div></div>
<div class="ad"><img src="shop/images/products/4258_small.jpg" width="100" height="57" alt="Flow"><div class="price">78,00</div></div>
<div class="ad">ad 3</div>
</div>

Please help!

i seem to be having trouble aligning two css layers

i have a border and then content within in (content is images) i would like to align another layer in here to the middle left. can this be done?

also the HTML is wrapping around the image, any way i can stop this?
as the images should be along the bottom below the image.

the link and data are as follows:
http://wakefieldfhs.co.uk/stu/users/njacques/9

and one last thing i just noticed while testing all this, its not displaying the footer and ending data
(this only occurs on my server, not on my test server. :S
Code:

(
                                layout->doExifBorder();
				echo("EXIF INO HERE");

				$layout->endBorder();
				$layout->endBorder();

		

		 footer();  // for future refernce footer.inc include the end div's!!
		 ?>)

(this would equate to: )
Code:

<div class='t-exif'><div class='b-exif'><div class='l-exif'><div class='r-exif'><div class='bl-exif'><div class='br-exif'><div class='tl-exif'><div class='tr-exif'>EXIF INO HERE</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>

<div class="footer" align="center">

 <a href='about.php'>about</a> | disclaimer | privacy | terms of use<br></div>
</div>
</body>
</body>
</html>