CSS - Relative Positioning, Dhtml Menu, Tables And Frames

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

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.

ok, here's what i'm working with:

multiple rows of data (divs stacked on top of eachother, we'll call main_container), with 2 columns each. the right hand column has a list of emails (call it sent_details), but it only shows as many as can fit in main_container. the design calls for me to put a "more" link on the bottom right hand corner of sent_details. so, i have to give sent_details a position of relative and the more link an absolute position fixed to the bottom right. in firefox, when i click "more", sent_details will expand, reveling more emails (sent_details was given overflow: hidden). in IE, however, sent_details will expand, however all sent_details below it will remain in their fixed positions, making the expanded div above it overlap.

does anyone have a suggestion to fix this? do i need to post code?

thanks

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!

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>

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.

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?

First this seems like a common problem but I couldn't find an answer. I did look, maybe I didn't use the right search terms but I did look.

So I have always wanted to do this but could never figure out a way to do it. I'd like to have relative positioned divs overlap each other and not push the rest of the layout around. Pretty much the exact same way absolute works, but just position relatively.

Hi, I'm using a floated division for my menu; and using relative positioning to move this slightly to the left and up - you can see it here.
It works in all browsers I've tried except Konqueror - the positioning simply has no effect . Also: the content of the main division (to the right) becomes completely distorted when scrolling - again: only when using Konqueror . Could this be due to the fact that they are floated divs?

The code is valid HTML and CSS. Is Konqueror non-compliant with W3 Standards? Should I bother trying to accommodate it?

Anyone have any ideas?

Code:

<div style="width: 500px; height: 500px;">
  <div style="position:relative; top: 0px; left: 0px; width: 30px; height: 10px;">at 0</div>
  <div style="position:relative; top: 10px; left: 0px; width: 30px; height: 10px;">at 10</div>
</div>

The divider seems to add a break rendering absolute positioning useless. How can I fix this so that I can use absolute positioning in more than one div inside the main fixed size container?

Thanks

Hi,

I have the following code:

PHP Code:
<table cellspacing="0" cellpadding="2" border="0">
                            <tr>
                                <td valign="top">
                                
                                <span style="position: relative; top: 80px; left: 10px;"><img src="images/sold.gif" alt="" border="0"></span> 


                                <img src="upload/mainimage.jpg>" alt="" border="0">
</td>
</tr></table> 





The span and sold.gif image are pushing the main image down in the table, so there's a big piece of whitespace above it. Not sure what I'm doing wrong here.. is there some special trick I should know about using relative positioning?

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

Is it bad css form to use negative values when you are working with relative positioning? I have a graphic intensive site that was drawn in photoshop and I am trying to code it. The graphics require exact placement but also need to move with the design if the browser window is re-sized, relative positioning will do this but I find myself having to use negative values on some of the graphics to have them place properly.

I know if I move a graphic above another in the html code the relative values will change but I am having problems figuring out what should go first, second, third... I know relative positioning deals with the regular flow of the page but when you are dealing with all graphics how do you know what to put first etc...

I hope I made sense and I wish I had an address for you to look at the page but I don't at the moment... Can anyone help?

Thank you,
Jen

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>