Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by bradyj; 10-11-2004 at 10:04 PM.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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>

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Hemebond,

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


    ???

    finstah

  • #5
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Only in Internet Explorer.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •