CSS - Layer Problems: Absolute Or Relative?

I'm not sure if this is the right place to ask, but I'll ask anyway.

I have an absolutely positioned DIV layer that's made visible when an image is clicked. The DIV pops up, but is partly obscured by a SELECT element that's a bit further down the page. Here's a screenshot. The grey box saying "O'Reilly" and Addison-Wesley" is the DIV in question. The "Prentice Hall" bit is hidden under the SELECT element.

Now the question is, is there any way to get the DIV to be on top? I've already given the DIV element a Z-Index of 1, and the SELECT element a Z-Index of 0, but to no avail. Any help would be highly appreciated

Hi,

i think i use too many DIV tags. How can I get around this problem? Is there any direction you think you can push me to?
The homepage is here http://www.chocolateriewanders.com/...lder/index.html

an image explaining the layout of the graphics is he


and another question:
would you ever consider to combine CSS and tables? i ask because of this design, that i have .... the main box is kinda easy to arrange in tables, i don't really know yet if i can manage to make it entirely in css ....

any ideas are appreciated

EDIT:
okay - starting from scratch

Hi, I have a problem that seems like it's on the edge of solveability but I haven't hit on it yet.

I have a page that's layed out like this:

http://i55.photobucket.com/albums/g129/alexmarsz/CSSProblem1a.jpg

And most of the time it's fine. There's an image in BackgroundDiv with a javascript function that resizes the image to fit the screen, and then three divs are absolute within it, with BottomDiv then relative below.

The problem is that ColumnLeft has a variable length. Sometimes it gets long and busts out of BackgroundDiv. Which would be fine if BottomDiv would politely push down like it does when BackgroundDiv expands. But it doesn't. Instead, ColumnLeft overlaps, as seen he


http://i55.photobucket.com/albums/g129/alexmarsz/CSSProblem1b.jpg

If you want to see it in action, here is a mock-up:
http://www.simunomics.com/Mockup-NewLayout.php
If your screen is wide it may not bust out, but narrow your browser down to ~1000px or imagine the LeftColumn being longer and you'll see what I mean.

The Divs are structured in the HTML like this:
Code:

<div id="BackgroundDiv" onload="resizeImage('BkgImage');" style="min-height:840px">

  <div id="TwoColumnInfoBox" align="center">
  </div>

  <div id="ColumnLeft" class="FactoryBox">
  </div>

  <div id="ColumnRight" class="FactoryBox">
  </div>

<img onload="resizeImage('BkgImage');" id="BkgImage1" src="Images/FactoryForm.JPG" width="100%" />
</div>

<div id="BottomDiv">
</div>

And the css looks like this:
Code:

#BackgroundDiv {
	color: #FFFFFF;
	margin-left: 210px;
	margin-top: 10px;
	padding: 10px;
}
#TwoColumnInfoBox{
	position:absolute; 
	margin-top:20px; 
	right:70px;
	margin-left:auto;
	z-index:50;
	background-image:url(Images/InfoBackground.GIF);
	color:#000000;
	height:150px;
	width:250px;
}
#ColumnLeft{
	position:absolute;
	margin-left:5%;
	margin-top:50px; 
	z-index:30;
}
#ColumnRight{
	position:absolute;
	right:5%; 
	margin-top:200px; 
	z-index:28;
}
.FactoryBox{
	color:#FFFFFF; 
	width:300px;
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
}
#BottomDiv {
	color: #FFFFFF;
	margin-left: 210px;
	margin-top: 10px;
	padding: 10px;
}

Just to address some considered but unfeasible options (so far as I know), if I float ColumnLeft I can't position it over the image, so it has to be absolute. And if I use the image as a background attribute, I can't dynamically resize it. (Not until CSS 3 anyway.)

Again, I feel like this is close but not-quite-there, like there should be some sort of wrapper I can make to get BottomDiv to respect the proper distance. Thanks in advance for any suggestions.

Hello

Can anybody explain me the difference between the absolute and the relative positioning methods?

If i use nested <span> elements in a table row which one is suitable?

And also what the "Z-index" property tells us?

I am so confused with these terms nowadays.And waiting your help.

Thank You Very Much...

Hi, guys

I am working on this css issue and could use your expertise. It follows the basic principles of the article http://www.stopdesign.com/articles/absolute/.

But I cant seem to get it to work. Here is the issue I am trying to have some text that appears at the top of source code be displayed down at the bottom of the page. The issue is with validation error messages it pushes the page down and then the text starts to overlap. To see it in action look at:
https://www.homeloancenter.com/HomeEquity/HomeEquity.aspx

I would greatly appreciate any help you can give. Or a push in the right direction.

Hi,

I'm not sure if this is possible or not, but I can't get it to work accurately, and I wondered if anyone could give me some help.

I would like to position a layer at an absolute position (T:128 L:253) which is no problem, but then I would like that layer to have a relative width from that fixed point, expanding/contracting to whatever size the browser is.

I've tried several different things, but can't seem to get this particular setup. If I set the width of the layer to 100%, the layer positions itself correctly on the page, but pushes beyond the right hand side of the browser causing a horizontal scroll.

Has anyone done this before? Am I missing something critical? or is this impossible to do with layers/css

Thank you!

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?

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

Hello,

I am trying to absolute position two elements within a relatively positioned DIV. My relatively positioned DIV is necessary to center my content on the page. The elements within this DIV must be placed in the upper left corner of the DIV. The reason why is because I want them to be placed on top of one another. Here is the code I have thus far:

<div>
<div id="elem1Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;">
<img id="myItem1" src="image1.png" />
</div>
<div id="elem2Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;">
<img id="myItem2" src="image2.png" />
</div>
</div>

Can anyone help me accomplish my goal? For some reason, the second image is always below the first image. In reality I need it right on top of the first image. At the same time, these two images centered in relation to my page. That is why I placed them in a general div element.

Thank you!
Crystal

im creating ajax auto complete text box

but my div tag does not appear correctly in IE7
(ok on firefox) appearing behind the textbox

IE7 screen shot URL

Firefox screen shot URL


codes are

HTML

Code:

            <tr>
                <td align="left">PHONE BRAND</td>
                <td>:</td>
                <td>
                    <div class="au_cm_loc">
                        <asp:TextBox ID="txtBrand" runat="server" CssClass="textbox"></asp:TextBox>
                        <div id="pnlBrand" class="au_cm_pnl"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td align="left">PHONE MODEL</td>
                <td>:</td>
                <td>
                    <div class="au_cm_loc">
                        <asp:TextBox ID="txtModel" runat="server" CssClass="textbox"></asp:TextBox>
                        <div id="pnlModel" onmouseout="autoComplete.closeSuggestionPanel(event, this)" class="au_cm_pnl"></div>
                    </div>
                </td>
            </tr>

CSS

Code:

.au_cm_loc
{
	text-align:left;
	position:relative;
}

.au_cm_pnl
{
	position:absolute;
	top:25px;
	left:0px;
	border:1px solid #39AAE4;
	width:204px;
	max-height:50px;
	overflow-x: hidden; 
	overflow-y: auto; 
	visibility:hidden;
	background-color:#FEFEFE;
	z-index:500;
}

.au_cm_pnl a
{
	display:block;
	padding:5px 0px;
	width:95%;
	margin:-7px 0px;
	color:Blue;
	text-decoration:none;
	padding-left:5%;
	background-image:url(../Images/textbox_bg.jpg);
}

.au_cm_pnl a:hover
{
	background-image:url(../Images/button_bg.jpg);
	color:#FFFFFF;
}

please help me to fix this problem

thank you

chathura

To design my new site properly I am learning to use CSS for layout. To practice my CSS styling I want my first sample site to have, from top to bottom:
1) a simple centered H1 heading;
2) a CSS-styled drop-down menu bar centered under the heading; and
3) two columns of text (paragraphs).

Finally, the footer includes a page hit counter followed by the two W3C gif files (XHTML 1.0 and CSS) in the lower-left and right corners.

All together, these pieces should make up a very simple practice page for me (http://stallinswebdesign.com/vs/index.php). However, I cannot find an online tutorial to explain in great detail how to use the position property to put these things where I need them to be. I am getting very frustrated that I can't figure out through trial and error how the absolute and relative values work together to position my stuff the best way on the page. I don't what to write hack CSS. I don't want to "hard code" the whole page with absolute positioning, because it won't scale when font sizes change from visitor to visitor, right? I want to write lean, best-practice CSS.

I've concluded that, after reading some online tutorials and perusing the CSS books I've recently bought, I don't have the first clue how absolute and relative positioning work. For example, I can't get that second column of paragraphs to line up alongside the left column unless I apply what looks to me like a CSS hack.

Like many examples I've seen online, I'm using the <div> tag to wrap multiple pieces of data together so that I can apply styling (especially positioning) to them as a whole. In particular, the left column paragraphs are wrapped in <div id="contentLeft">, and the right column paragraphs are wrapped in <div id="contentRight">, and both together are surrounded by parental <div id="content"> tags. Still, it takes a lot of pain for me to style those three id's in the CSS file so that the two columns appear where I want them.

And don't even ask me about what should be a simple footer placement! I can't get the hit counter paragraph and those two W3C images to get to the bottom of the page without absolute positioning. But when I do that, they don't scale up or down automatically as the amount of text in those two columns increases or decreases.

Can you please glance at my .css and .htm files below and tell me where I'm going wrong? More importantly (teaching me to fish and not just feeding me fish :-) ) can you point me to an online or printed resource that goes into great detail explaining the uses of the position property?

This is so not like tables :-D

Thank you for your time and advice.
Curtis

my content CSS file (no menu stuff):
Code:

body {
         font: 100%/1.4 arial, helvetica, serif; background-color:#fff; 
		text-align:left; padding:0px; margin:0em; width:64em;}
		
#homeTitle {
	position:absolute; font-size:2.0em; 
	background-color:#f5f8ec; color:green; letter-spacing:0.3em; 
	margin: 0em 0em .1em 1em;}
	
p {
	background-color:#fff5e8;}
	
#bannerRight {
	position:absolute; z-index:2; top:7em; left:29em; 
	background-color:#fff;}
	
#content {
	position:absolute; width:45em; border:dotted 1px red; 
	margin-left:9em; margin-top:19em;}
		
#contentLeft {
	position:relative; margin-left:0.5em; margin-right:24em; 
	border:dotted 1px blue;}
		
#contentRight {
	position:relative;  margin-top:-78.5em; margin-left:24em; 
	margin-right:0.5em; border:dotted 1px fuchsia;}
		
#counter {
	position:relative; top:1.5em;  border:dotted 1px gray;}
	
#W3C_boxes {
	position:relative; margin-top:6.5em;}	
	
#W3C_css {
	display:inline; padding-left:48em;}	

img {
	border:0px;}

my sample web page:
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" lang="en" xml:lang="en">
  <head>
    <title>
      Valley Spokesmen Bicycle Touring Club
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="The Valley Spokesmen Bicycle Touring Club, for bicycle enthusiasts of all ages, is based in Dublin California and hosts dozens of club rides each month, both local and afar, ranging from 15-mile cruises to 100-mile epics!" />
    <meta name="keywords" content="Valley Spokesmen, Cinderella Classic, valley spokesman, cinderella ride, cinderella century, valleyspokesmen bike club, valleyspokesmen, cinderella bike ride, cinderella classic bike ride, cinderella ride california,	cinderella bicycle ride, valley spokesmen bike club, valleyspokesmen.org, cinderella bike, bike club san francisco" />
    <script type="text/javascript" src="js/formEmailValid.js"></script>
    <script type="text/javascript" src="js/newWindow.js"></script>
    <script type="text/javascript" src="js/newWindow_2.js"></script>
    <script type="text/javascript" src="js/linkExternal.js"></script>
    <script type="text/javascript" src="js/navDrop.js"></script>
    <link rel="shortcut icon" href="ico/favicon.ico" />
    <link rel="icon" href="images/animated_favicon1.gif" type="image/gif" />
    <link rel="stylesheet" type="text/css" href="css/siteWide.css" />
    <link rel="stylesheet" type="text/css" href="css/menus.css" />
  </head>
  <body>
		<h1 id="homeTitle">Valley&nbsp;Spokesmen&nbsp;Bicycle&nbsp;Touring&nbsp;Club</h1>  
		<div id="container">
			<ul id="nav">
				<li><a href="#">Home</a> <!-- first dropdown -->
					<ul>
						<li><a href="#">Home Page</a></li>
						<li><a href="#">About Our Club</a></li>
						<li><a href="#">Contact Us</a></li>
					</ul>
				</li>
				<li><a href="#">Events</a> <!-- second dropdown -->
					<ul>
						<li><a href="#" class="topDrop">Cinderella Classic</a>
							<ul>
								<li><a href="#">Training Schedule</a></li>
							</ul>
						</li>
						<li><a href="#" class="topDrop">TOSRD</a>
							<ul>
								<li><a href="#">Registration Form</a></li>
							</ul>
						</li>
						<li><a href="#">Clinics</a></li>
					</ul>
				</li>
				<li><a href="#">Favorites</a> <!-- third dropdown -->
					<ul>
						<li><a href="#">Ride Calendar</a></li>
						<li><a href="gallery.php" class="topDrop">Photo Gallery</a>
							<ul>
								<li><a href="gallery_2008.php">2008 Photos</a></li>
								<li><a href="gallery_2007.php">2007 Photos</a></li>
								<li><a href="gallery_2006.php">2006 Photos</a></li>
								<li><a href="gallery_2005andEarlier.php">2005 and Earlier</a></li>
							</ul>
						</li>
						<li><a href="#">Local Bike Shops</a></li>
						<li><a href="#">Favorite Links</a></li>
						<li><a href="#">West Coast Rides</a></li>
						<li><a href="#">BikeJournal.com</a></li>
					</ul>
				</li>
				<li><a href="#">Downloads</a> <!-- third dropdown -->
					<ul>
						<li><a href="#">Membership App</a></li>
						<li><a href="#">For New Members</a></li>
						<li><a href="#">Club Newsletters</a></li>
						<li><a href="#">Rules of the Road</a></li>
						<li><a href="#">New Ride Leaders</a></li>
						<li><a href="#">Club Ride Waiver</a></li>
					</ul>
				</li>
				<li><a href="#">Grab Bag</a> <!-- third dropdown -->
					<ul>
						<li><a href="#">Bike Routes</a></li>
						<li><a href="#">Route Ratings</a></li>
						<li><a href="#">Club Clothing</a></li>
						<li><a href="#">VS E-Mail List</a></li>
						<li><a href="#">VS Race Team</a></li>
					</ul>
				</li>
			</ul>
		</div>
    <p id="bannerRight">
      <?php
        $bannerPhoto_array = file('random/bannerArrayPhotos.txt');  // Get photos into an array from the text file using file()
        $quote3 = $bannerPhoto_array[rand(0, count($bannerPhoto_array) - 1)]; // Randomly pick one element of the array
        $quote3 = trim($quote3);
        echo "$quote3";
      ?>
    </p>
    <div id="content">
			<div id="contentLeft"><!-- begin left-side content -->
				<p>
					<script type="text/javascript">
						<!-- hide from archaic browsers...
						// greeting for home page
						function dayPart( ) {
							var oneDate = new Date( );
							var theHour = oneDate.getHours( );
							if (theHour < 12) {
								return "morning";
							} else if (theHour < 17) {
								return "afternoon";
							} else {
								return "evening";
							}
						}
						document.write("<p class=\"homeWelcome\">Good " + dayPart( ) + ", and welcome!</p>");
						// end hide -->
					</script>
				</p>
				<noscript>
					<p>
						Welcome!
					</p>
				</noscript>
	
			  <p class="">
					From our President:
				</p>
				<p class="">					
					Happy New Year! This is the season to renew, reflect and recover. I trust that your new year brings a renewed interest in biking, 
					fitness and adventure. I can assure you that the new leadership team of the Valley Spokesmen Bicycle Touring Club 
					has all of these interests in mind as we enter our new jobs working for you.
				</p>
				<p class="">
					But first I would like to recognize Susan Gibbs and her team for their contributions over the past year. 
					They  made a significant contribution to the club and bicycling in our community during the past year. 
					I want to say thank you on behalf of the entire club for their service.
				</p>
				<p class="">
					Our new leadership team includes Vice-President Mark Dedon; Treasurer Bill Well; Corresponding Secretary Bonnie Powers; 
					Recording Secretary Kim Autrey; Race Team Representative Bob Fusco; Newsletter Editor Marcia Seeger; TOSRD Chairperson 
					Francie Cushman; Newsletter Publisher	Mary Murphy; and Ride Chairpersons Curtis Stallins and Peter Rathmann. Each of us 
					appreciates the confidence that you entrusted in us to serve you during 2008.
				</p>
				<p class="">
					We plan on beginning our year by reflecting on what the state of governance of the club is to assure we have a solid 
					path forward. That includes updating the club&rsquo;s by-laws, seeking professional help to deal with our fiduciary 
					responsibility of managing our club&rsquo;s money, and aligning our responsibilities on the leadership team. Of course, 
					we need everyone to support Bob, Bonnie and Jim in organizing the events that make up the Cinderella Classic during the  
					weekend of April 4-6, 2008. Please save the dates. But most of all, we need you to ride with us. 
				</p>
				<p class="">
					I look forward to meeting every one on a ride during the coming year and greeting you at the Mid-winter party on 
					February 9, 2008. The location is the same as last year, however the hotel has a new name: Pleasanton Plaza by Marriott&rsquo;s 
					(formerly Crowne Plaza). Make your reservation today!
				</p>
				<p class="">
					Have a great ride today and every day.
					<br />
					<span class="bold">- Jim Kohnen</span>
				</p>
			</div> <!-- end left side content -->
		
			<div id="contentRight"> <!-- begin right-side content -->
				<p class="">
					Want to earn some free V.S. gear? Look at all the cool 
					<a href="javascript:newWindow_2('rideLeaderAwards.htm')">
						Valley Spokesmen clothing</a> you can earn just by leading some rides each year!
				</p>
				<p class="size12px">
					<?php
						echo "<span class=\"cheers\">Cheers from the Valley Spokesmen!</span><br />";
						$cheers_array = file('random/cheersQuotes.txt');  // Get quotes into an array from the text file using file()
						$quote2 = $cheers_array[rand(0, count($cheers_array) - 1)]; // Randomly pick one element of the array
						$quote2 = trim($quote2);
						echo "$quote2";	// Echo results.
					?>
				</p>
				<p class="">
					<span class="boldOrange">New Members</span> - get up to speed quickly! Download and browse through our 
					<a href="pdfFiles/0712_New_Member_Booklet.pdf" rel="external">New&nbsp;Member&nbsp;Handbook</a>.
				</p>
				<p class="">
					<span class="boldOrange">
						Not sure what "Car up!" means?
				 	</span>
				 	<br />
				 	Read over our new 
					<a href="pdfFiles/0712_Bike_Rules_Of_The_Road.pdf" rel="external">Rules of the Road</a>.
				</p>
				<p class="">
					<span class="boldOrange">How easy is it to lead a ride?</span> 
					Find out how much fun it can be when you look through our new 
					<a href="pdfFiles/0712_Becoming_A_Ride_Leader.pdf" rel="external">Ride Leader Guide</a>!
					<br />View our <a href="javascript:newWindow_2('rideLeaderAwards.htm')" style="font-size:16px">Ride 
					Leader Awards</a> program!
				</p>
			  <p class="">
			  	<span class="boldOrange">
			  		YES! - it&rsquo;s Winter!
			  	</span>
			  	<br />
					Which are you most looking forward to?
					<br />&nbsp;-&nbsp;<span class="boldBold">Scraping ice from your windshield
					<br />&nbsp;-&nbsp;Valentine&rsquo;s card shopping
					<br />&nbsp;-&nbsp;Cycling through a crisp winter day</span>
					<br />We knew it! You ought&rsquo;a join the Valley Spokesmen and savor some beautiful winter riding, 
					so check our <a href="vsCalendar/month.php" rel="external">ride calendar</a> for dates that look the most 
					fun to you.
			  </p>          
			  <p class="">
			  	<span class="boldOrange">
			    	Rides For The Rest Of Us</span>
			    <br />
			    If you want to start riding casually and make new friends who share your
			    interests, then you should join us on our <!-- <a href="rides.html#newbie">newbie rides</a> -->
			    shorter rides. We offer at least two rides a month for people just like you! Check the
			    <a href="vsCalendar/month.php" rel="external">ride calendar</a> and see how many rides suit you!
			    <br />
				</p>
			  <p class="">
			    <span class="boldOrange">
			      Join the Club!
			    </span>
			    <br />
			    For a few dollars a year you get all this:<br />
			    - Monthly newsletter packed with info<br />
			    - A map to local pubs and coffee shops<br />
			    - Tons of advice on bicycle repair<br />
			    - Discounts in local bike shops<br />
			    - All the new friends you can handle!<br />
			    Mail <a href="pdfFiles/membershipApp.pdf" rel="external">your application form</a> today!
			  </p>
				<p class="">
			    <span class="boldOrange">
			    	Ride in style
			    </span>
			    <br />
			    View <a href="clothing.php">clothing information</a> online. Send an e-mail to Jim Duncan if you
			    are interested in club jerseys, shorts, socks, vests, jackets, etc. His address is hey-you at comcast dot net.
			  </p>
		  </div> <!-- end right-side content -->
		</div><!-- end two columns of content; begin counter and footer -->
		<div id="counter"> 
		  <p>
		  	Visitors to our site since November 14, 2006:&nbsp;&nbsp;<img src='http://counter.dreamhost.com/cgi-bin/Count.cgi?df=cstallins-VScounter.dat&pad=F&ft=0&dd=odb&istrip=F' alt="Our page hit counter is over a million for the year!" />
		  </p>
		</div> <!-- end counter; begin footer -->
	  <div id="W3C_boxes">
    	<a href="http://validator.w3.org/check?uri=referer">
    		<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
			<a href="http://jigsaw.w3.org/css-validator/">
  			<img id="W3C_css" style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-css-blue" alt="Valid CSS!" /></a>
  	</div>
 	</body>
</html>

I was under the understanding that an element positioned absolutely is positioned in context to the closest parent object that has positioning of absolute or relative, and barring that, the body.

I have quite simple code:

html4strict Code:
Original - html4strict Code <div style="position:relative; height:50px; width:250px; background:#69c;"> <input type="text" style="position:absolute; top:5px; left:0; right:0;"> </div>

  

  


 <div style="position:relative; height:50px; width:250px; background:#69c;">


     <input type="text" style="position:absolute; top:5px; left:0; right:0;">


 </div> 

I would expect this to be top-aligned with 5 pixels of blue showing, and stretched the width of the containing div, but it's not. It's the correct height from the div but not the sides of the container - can anyone tell me why that is, or what should be done ( short of width:100%; )?

Thanks,

Brett

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

hello,

i have a centered element and i would like to create an absolutely positioned div that attaches to the left side of the centered div.

ive been following this resource which states:
Quote:
#wrapper {position: relative; width: 760px; margin: 0 auto; text-align: left; }

This will make an inner element that you absolutely position at, for example, top: 0; left: 0; appear at the top left corner of the wrapper, and not of the the top left of the entire window.

and so my css is:

Code:

body {
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
text-align: center;}

#container {
position:relative;
border: 4px #99968F solid;
width:587px;
margin: 20px auto;}

#left_block {
position:absolute ; top: 0px; left: 0px;
width: 299px;
height: 209px;
background-image: url(../images/mediaplayer_bg.png);}

what is happening though is that the left block is in the top left of the window and not the top left of the centred div.

does anyone know how i can get this in the top left of the centred div and then ultimately to the left of the centred div (is a negative value possible?)

thank you!