Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Calling all CSS positioning experts HELP!!

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 10-11-2004, 07:32 PM   PM User | #1
finstah1
Regular Coder

 
Join Date: May 2004
Location: The First State
Posts: 233
Thanks: 9
Thanked 0 Times in 0 Posts
finstah1 is an unknown quantity at this point
Calling all CSS positioning experts HELP!!
#*$!! ARGH!

I'm trying to put an animation in the black square to the right that overlaps two div's, header and bar. The bodyblock, l-col and cont divs are pushed down in IE and my menu is pushed down in Firefox (haven't checked the other browsers yet.) Can someone else see the solution cause I've been racking my brain all day to no avail. When I take out any reference to the black block on the right, everything lines up perfectly in all browsers. What am I doing wrong?

Please Help!

Here's the page and the styles

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">
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="NOINDEX" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<!--<link rel="stylesheet" type="text/css" href="1007c.css" />-->
<style>

body {
 	margin: 10px;
 	background: #D0D58A url(images/bkgd0.gif) repeat scroll left top;
	text-align: center;
 	padding: 0;
}

#outer {
 	text-align: left;
 	border: 1px solid #74003C;
 	width: 675px;
 	margin: auto;
}



#hdr {
 	height: 88px;
    background: #fff url(images/test_block.gif) no-repeat scroll left top; 
}
 
#bar {
 	height: 60px;
	border: solid #74003C;	
	border-width: 0 0 1px 0;
	background: #fff url(images/barback2_675.gif) no-repeat scroll left top;
	overflow: hidden;
} 
 
 #anim {
	width: 148px;
	height: 231px;
	float: right;
	margin: 0px;
	padding: 0px;
	background: transparent url(images/test_block.gif) no-repeat;  /* scroll left top;*/
} 

#bodyblock {
	position: relative;
	background: #74003C;
	color: #333333;
	width: 675px;
	margin: 0;
	padding: 0;
}

#l-col {
	 float: right;
	 clear: both;
	 background: #dcdcdc;
	 color: #333333;
	 width: 150px;
	 margin: 0;
}

#cont {
	 width: 522px;
	 background: #E1F2FF;
	 font: normal 10pt Trebuchet MS,Verdana,Helvetica,Arial,sans-serif;
	 margin: 0;
}

#cont ul li {
	 color: #333333;
	 text-align: left; 
	 font: normal 10pt Trebuchet MS,Verdana,Helvetica,Arial,sans-serif;
	 margin: 0px 26px 0px 26px;
	 padding: 0px 26px 0px 26px;
}
 
 #cont h3, p {
 	margin: 0;
 	padding: 15px;
}
 
 #l-col h4 {
 	margin: 0; 
 	padding: 5px 0;
}
 
#ftr {
 	height: 25px;
 	background: #74003C;
 	margin: 0; 
	padding: 0;
	border-top: 1px solid #FFFFFF;
 	font: italic normal 9px/24px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;	
	color: gainsboro;
 	text-decoration: none;
	text-align: center;
}

/* list styles set to fix opera problem */ 
 ol, ul {
 	margin: 2px 20px; 
	padding: 2px 20px;
}	

/* BEGIN style9 */
 #navcontainer {
	margin: 0 0 0 -35px;
	padding: 0;
	height: 60px;
	overflow: hidden;
}

#navcontainer ul {
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

#navcontainer ul li {
	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
 }

#navcontainer ul li.date {
	width: 248px;
	height: 25px;
	margin: 38px 0 0 0;
	padding: 0;
	z-index: 10000;
	font: normal normal normal 9pt Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
	color: #997400;
 } 

#navcontainer ul li.home a {
	width: 72px;
	height: 120px;
	background: transparent url(images/home1.gif) no-repeat scroll 0px -60px;
	padding: 0;
	margin: 0;
	text-decoration: none;
	display: block;
	text-align: center;
}

#navcontainer ul li.home a:hover {
	background: transparent url(images/home1.gif) no-repeat scroll 0px 0px;
}

#navcontainer ul li.imagery a {
	width: 72px;
	height: 120px;
	background: transparent url(images/imagery1.gif) no-repeat scroll 0px -60px;
	padding: 0;
	margin: 0;
	text-decoration: none;
	display: block;
	text-align: center;
}

#navcontainer ul li.imagery a:hover {
	background: transparent url(images/imagery1.gif) no-repeat scroll 0px 0px;
}

#navcontainer ul li.resonance a {
	width: 84px;
	height: 120px;
	background: transparent url(images/resonance2.gif) no-repeat scroll 0px -60px;
	padding: 0;
	margin: 0;
	text-decoration: none;
	display: block;
	text-align: center;
}

#navcontainer ul li.resonance a:hover {
	background: transparent url(images/resonance2.gif) no-repeat scroll 0px 0px;
}

#navcontainer ul li.contact a {
	width: 68px;
	height: 120px;
	background: transparent url(images/contact2.gif) no-repeat scroll 0px -60px;
	padding: 0;
	margin: 0;
	text-decoration: none;
	display: block;
	text-align: center;
}

#navcontainer ul li.contact a:hover {
	background: transparent url(images/contact2.gif) no-repeat scroll 0px 0px;
}

</style>
</head>
<body>
<div id="outer">
	<div id="anim"></div>	
	<div id="hdr"></div>

	<div id="bar">
		<div id="navcontainer">
			<ul>
			<li class="date">Friday, October 9th, 2004</li>
			<li class="home"><a href="#" title="home"><home></a></li>
			<li class="imagery"><a href="http:#" title="imagery"><imagery></a></li>
			<li class="resonance"><a href="#" title="resonance"><resonance></a></li>
			<li class="contact"><a href="#" title="contact"><contact></a></li>

			</ul>
		</div>
  	</div>
	<!-- remove bodyblock and cont divs to test -->
	<div id="bodyblock" align="left">
	<!-- <div id="anim"></div> -->
		<div id="l-col" align="center">
			<h4 align="center">Nav Menu</h4>
			<a href="#">Link</a><br />
			<a href="#">Link</a><br />
			<a href="#">Link</a><br />
			<a href="#">Link</a><br />
			<br />					
		</div>

		<div id="cont">
		<h3 align="center">Page title blurb text here</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
		  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
		  wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
		  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
		  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
		  dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
		  dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
		  feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing
		  elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
		  erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
		  suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
		  eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
		  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
		  odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
		  te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing
		  elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
		  erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
		  suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
		  eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
		  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
		  odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
		  te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing
		  elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
		  erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
		  suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
		  eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
		  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
		  odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
		  te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing
		  elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
		  erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
		  suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
		  eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
		  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
		  odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
		  te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing
		  elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
		  erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
		  suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
		  eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
		  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
		  odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
		  te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing
		  elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
		  erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
		  suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
		  eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
		  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
		  odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
		  te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing
		  elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
		  erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tati</p>
		<br />
		</div>
	</div>
	<div id="ftr">Copyright &copy; 2004,  All rights reserved.</div>

</div>
</body>
</html>
thanks
Last edited by finstah1; 10-11-2004 at 08:45 PM..
finstah1 is offline   Reply With Quote
Old 10-11-2004, 09:44 PM   PM User | #2
bradyj
Senior Coder

 
Join Date: Apr 2003
Location: San Francisco, CA
Posts: 2,469
Thanks: 0
Thanked 0 Times in 0 Posts
bradyj is an unknown quantity at this point
Do you have a link, you can pm me if you want, I'd like to test it with the images.

Edit: nevermind, I don't think I'll need it -- however, I don't see any black block in any browser for my Mac so:
1) which div or tag is the block meant to be at
2) is the menu not supposed to drop like that, is it to be at the top?
__________________
// Art is what you can get away with. <-- Andy Warhol
...:.:::: bradyjfrey.com : htmldog : ::::.:...
Last edited by bradyj; 10-11-2004 at 10:04 PM..
bradyj is offline   Reply With Quote
Old 10-11-2004, 11:39 PM   PM User | #3
hemebond
Senior Coder

 
Join Date: Jul 2004
Location: New Zealand
Posts: 1,315
Thanks: 0
Thanked 2 Times in 2 Posts
hemebond is an unknown quantity at this point
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>45897</title>
		<style type="text/css">
			html
			{
			 	background:#d0d58a url("images/1.jpg") left top;
			 	font-family:sans-serif;
		 	}

			body
			{
			 	margin:10px auto;
			 	width:40em;
			 	padding:0;

			 	background-color:#74003c;
			 	border:1px solid #74003c;
			}

			#header
			{
				background-color:#fff;
				margin-bottom:1px;
				position:relative;
				min-height:90px;
			}
			#header h1
			{
				margin:0;
			}
			#header ul
			{
				margin:0;
				padding:0;
			}
			#header li
			{
				display:inline;
			}
			#header #animation
			{
				position:absolute;
				top:0;
				right:0;
			}

			#content
			{
				float:left;
				background-color:#e1f2ff;
				width:29em;
				padding:0.5em;
			}
			#content h2
			{
				margin:0;
			}

			#menu
			{
				background-color:#fff;
				margin:0 0 0 30em;
				border-left:1px solid #74003c;
			}
			#menu dd
			{
				margin:0;
			}

			#footer
			{
				clear:both;
				color:#fff;
				font-size:0.9em;
				font-style:italic;
				text-align:center;
				padding:1em;
				margin:0;
			}
		</style>
		<!--[if IE]>
		<style type="text/css">
		#header
		{
			height:90px;
		}
		</style>
		<![endif]-->
	</head>
	<body>
		<div id="header">
			<h1>Site name</h1>
			<ul>
				<li id="home"><a href="" title="home">home</a></li>
				<li id="imagery"><a href="" title="imagery">imagery</a></li>
				<li id="resonance"><a href="" title="resonance">resonance</a></li>
				<li id="contact"><a href="" title="contact">contact</a></li>
			</ul>
			<img id="animation" src="images/2.jpg" alt="animation">
	  	</div>
		<div id="content">
			<h2>Page title blurb text here</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...
			</p>
		</div>
		<dl id="menu">
			<dt>Nav Menu</dt>
			<dd><a href="">Link</a><dd>
			<dd><a href="">Link</a><dd>
			<dd><a href="">Link</a><dd>
			<dd><a href="">Link</a><dd>
		</dl>
		</div>
		<p id="footer">Copyright &copy; 2004,  All rights reserved.</p>
	</body>
</html>
hemebond is offline   Reply With Quote
Old 10-14-2004, 06:28 PM   PM User | #4
finstah1
Regular Coder

 
Join Date: May 2004
Location: The First State
Posts: 233
Thanks: 9
Thanked 0 Times in 0 Posts
finstah1 is an unknown quantity at this point
Hemebond,

thanks for the help. But resizing the window brings positioning issues. i.e. absolute items not bound by the container.


???

finstah
finstah1 is offline   Reply With Quote
Old 10-14-2004, 10:32 PM   PM User | #5
hemebond
Senior Coder

 
Join Date: Jul 2004
Location: New Zealand
Posts: 1,315
Thanks: 0
Thanked 2 Times in 2 Posts
hemebond is an unknown quantity at this point
Only in Internet Explorer.
hemebond is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 04:40 AM.
Advertisement
Log in to turn off these ads.