...

View Full Version : Calling all CSS positioning experts HELP!!



finstah1
10-11-2004, 08:32 PM
#*$!! 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



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

bradyj
10-11-2004, 10:44 PM
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?

hemebond
10-12-2004, 12:39 AM
<!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>

finstah1
10-14-2004, 07:28 PM
Hemebond,

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


???

finstah

hemebond
10-14-2004, 11:32 PM
Only in Internet Explorer.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum