Announcement

**shlagish** · Mar 5, 2004, 10:43 PM

I can't find it's, I get file not found

**Antoniohawk** · Mar 5, 2004, 11:25 PM

LOL, problem resolved, try now.

**beetle** · Mar 6, 2004, 12:34 AM

You're not clearing any of your floats. try adding

clear: both;

to the footer definition.

**Antoniohawk** · Mar 6, 2004, 12:46 AM

No go

**beetle** · Mar 6, 2004, 01:56 AM

I didn't dig into the linkMenu.css file, so #navCont isn't positioned right, but I think maybe you can get it

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="linkMenu.js"></script>
<link rel="stylesheet" type="text/css" href="linkMenu.css" />

  <title>[Manic Pyro] :: footer escapade</title>

<style type="text/css">
body {
  margin: 20px;
  font: 8pt verdana, arial, helvetica, sans-serif;
  background: #EEE;
  color: #424242;
  text-align: center;
}

#container {
  position: relative;
  min-height: 100%;
  height: 100%;
  voice-family: "\"}\"";
  voice-family: inherit;
  height: auto;
  background-color: red;
}

html>body #container {
  height: auto;
}

div#title {
  padding: 5px;
  border: 1px solid gray;
  background-color: #B2B2B2;
}

#title div {
  background-color: #424242;
}

div#content {
  padding: 5px;
  margin: 1px 0 1px 141px;
  background: #B2B2B2;
  border: 1px solid gray;
  text-align: left;
  position: relative;
}

/* replacement for buggy hr's */
.hr {
  margin: 0;
  padding: 0;
  border-bottom: 1px dotted #FFFFFF;
}

html .hr {
  border-bottom: none;
  padding: 1px;
  background: url(images/hr2.gif) repeat-x bottom;	
}
/* end hr */

/* implementation of a vertical rule (vr) object */
.vr {
  background: url("image/vr.gif") repeat-y;
  width: 1px;
  margin-top: 5px;
  margin-bottom: 5px;
}
a:link, a:visited, a:active, a:hover {
  color: #424242;
  background-color: transparent;
  text-decoration: none;
  border-bottom: 1px dashed #424242;
  font-weight: bold;
}
div#content p {
  line-height: 1.25em;
}

.postHeader {
  background: #989898;
  border: 1px solid gray;
  border-left: none;
  border-right: none;
  padding: 2px 0;
  color: #EEE;
  margin-bottom: 1em;
  position: relative;
  width: 100%;
}

.postHeader .name {
	float: left;
	margin-left: 2px;
	}

.postHeader .date {
	float: right;
	margin-right: 2px;
	}
#footer {
  padding: 5px;
  margin: 0 auto;
  border: 1px solid #808080;
  background-color: #B2B2B2;
}

#footer span a {
  padding: 1px;
  margin: 0;
  background: #CCC;
  border: 1px solid gray;
}
.clear {
	clear: both;
	}
</style>
</head>
<body>

<div id="container">

<div id="title">
  <div>
    <img src="images/manicTitle3.gif" alt="Manic Pyro header image" style="width: 419px; height: 100px;"/>
  </div>
</div>

<div id="content">
  <div class="postHeader">
    <span class="name">Antoniohawk</span><span class="date">1.17.2004</span>
	<br class="clear"/>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam orci. Nam vitae orci. Aenean augue. Mauris fermentum condimentum ligula. Pellentesque et sapien sed est interdum varius. In nonummy. Proin nec tortor. Ut ultrices. Nam metus magna, malesuada ut, vestibulum eget, bibendum eu, quam. Aliquam laoreet sagittis arcu. Nunc massa nulla, faucibus at, venenatis nec, venenatis sed, augue. Donec fermentum. Phasellus accumsan nulla ut ligula. Duis eros felis, ultrices ac, bibendum eget, cursus at, risus. Fusce feugiat elit sit amet lorem. Maecenas congue elit et nisl. Ut eget neque sit amet lorem lobortis cursus.
</p>
<p>
Nullam eleifend velit et diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin laoreet. Aenean pede. Duis lacinia molestie elit. Mauris aliquam tortor quis nibh. Etiam tristique, diam non tempus tincidunt, justo risus semper elit, quis rhoncus nunc diam sed quam. Donec eu dui in felis placerat consectetuer. Sed at dolor. Sed varius. In pretium ligula et velit. Mauris magna dolor, feugiat molestie, blandit ac, euismod in, arcu.
</p>
<p>
Quisque lorem ligula, <a href="#">vulputate</a> nec, porta non, aliquam et, enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In hac habitasse platea dictumst. Mauris luctus, odio vel ornare elementum, ipsum sem sagittis libero, ac elementum ante augue vel orci. Donec vel sapien. Curabitur ligula ipsum, mollis non, hendrerit a, tincidunt in, elit. Sed et magna. Cras laoreet eleifend risus. Vestibulum ac libero quis turpis cursus pharetra. Pellentesque porttitor purus vitae nulla. Donec a lacus. Pellentesque in tellus.
</p>
<p>
Mauris ut tellus eget elit commodo pulvinar. Mauris magna odio, egestas sit amet, cursus quis, cursus sit amet, lectus. Ut diam wisi, convallis ac, sodales sed, pharetra at, pede. Mauris arcu. In sit amet pede. Donec accumsan. Cras mi urna, nonummy sit amet, tristique viverra, porta ut, turpis. Aenean convallis orci ac mi. Morbi sem. Quisque eleifend wisi vitae massa. Proin quis nibh sed tellus auctor suscipit. Nullam ut mi eu mi eleifend commodo. Aliquam iaculis urna sit amet massa. Nulla magna odio, adipiscing eget, eleifend id, tempor at, dolor. Morbi vel felis. Aliquam sagittis wisi vitae dolor. Nullam vitae eros vel tellus faucibus accumsan. Vestibulum tortor dolor, pulvinar ut, semper eget, ornare non, odio.
</p>
<p>
In hac habitasse platea dictumst. Sed commodo porta libero. Aenean adipiscing nisl ac lectus. Donec placerat fermentum ligula. Nullam id eros. Nam egestas elit eget nunc. Sed molestie pulvinar massa. Ut suscipit. Sed est nibh, porta in, egestas sit amet, congue sed, libero. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent fringilla magna ac velit. Donec at dolor. Donec et massa nec massa cursus fermentum. Donec erat lacus, tristique sit amet, tincidunt ut, mattis at, urna. In sed wisi quis pede tempor suscipit. In tellus mauris, mollis quis, dictum non, vestibulum vel, purus. Pellentesque aliquet ullamcorper ligula.
</p>
</div>

<div id="navCont">
<ul>
  <li><a href="#" onClick="door('item1')"><img id="img_master" src="images/minus.gif" alt="menu item" />animals</a>
    <ul id="item2">
      <li class="parent"><a href="#" onClick="door('item2')"><img id="img_parent1" src="images/minus.gif" alt="menu item" />birds</a>
        <ul id="item3">
          <li><a href="#"><img src="images/item.gif" alt="menu item" />sparrow</a></li>
          <li><a href="#"><img src="images/item.gif" alt="menu item" />finch</a></li>
          <li><a href="#"><img src="images/item.gif" alt="menu item" />blue jay</a></li>
        </ul>
      </li>
    </ul>
    <ul id="item4">
      <li class="parent"><a href="#" onClick="door('item3')"><img id="img_parent2" src="images/minus.gif" alt="menu item" />fish</a>
        <ul id="item5">
          <li><a href="#"><img src="images/item.gif" alt="menu item" />catfish</a></li>
          <li><a href="#"><img src="images/item.gif" alt="menu item" />trout</a></li>
          <li><a href="#"><img src="images/item.gif" alt="menu item" />herring</a></li>
          <li><a href="#"><img src="images/item.gif" alt="menu item" />cod</a></li>
          <li><a href="#"><img src="images/item.gif" alt="menu item" />swordfish</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>  
</div>


<div id="footer">
  [Linkage] :: <a href="http://hardforum.com">Hard Forums</a> : 
  <a href="http://www.codingforum.net">Coding Forum</a> : 
  <a href="http://www.google.com">Google</a> ::
  <span>
    <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.graphics-forum.com%2Fmanicpyro%2F">xhtml 1.1</a>
  </span>
</div>

</div>

</body>
</html>

**Antoniohawk** · Mar 6, 2004, 11:47 AM

Works beautifully Beetle, thanks a lot. Couple of questions. I have managed to get the navCont box positioned correctly in mozilla, but it seems that ie wants to center it, even when i declare it as left: 0;. Also, is there anyway to make the navCont box as tall as the content box, without setting a pixel height?

**shlagish** · Mar 7, 2004, 03:01 PM

I don't know, but you might want to add a return false; to the links in your menu, it's at the bottom and the page keeps scrolling up.
Although I think beign at the bottom is not intended
IE5.5 btw

**Antoniohawk** · Mar 7, 2004, 03:09 PM

Thanks alot, I was wondering how to accomplish that.

**Antoniohawk** · Mar 9, 2004, 06:12 PM

Still having problems, can someone please help me with the navCont problem mentioned above?

**Willy Duitt** · Mar 9, 2004, 06:34 PM

I didn't look at your code but could you be having the same problem of not defining the menu width as you were having here?

BTW: That link doesn't seemed to have been fixed.
Did you scrap that layout all together?
That one seems better to me.

.....Willy

**Antoniohawk** · Mar 9, 2004, 06:37 PM

Sorry, I have a bad habit of posting before I actually upload the new file, check it out now.

**Antoniohawk** · Mar 11, 2004, 09:03 PM

Willy? You never came back.

**Antoniohawk** · Mar 14, 2004, 03:08 PM

Still looking for help...

Announcement

ALA footer and floats

ALA footer and floats

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment