...

View Full Version : ALA footer and floats



Antoniohawk
03-05-2004, 11:35 PM
I'm attempting to make a footer, following the tutorial over at ala (http://www.alistapart.com/articles/footers/). As you can see it's (http://www.graphics-forum.com/manicpyro/index2.html) not going as well as expected. Also I have a slight problem with the name and date on my content box, floats need a width, but I want it to stay fluid.

shlagish
03-06-2004, 03:43 AM
I can't find it's, I get file not found

Antoniohawk
03-06-2004, 04:25 AM
LOL, problem resolved, try now.

beetle
03-06-2004, 05:34 AM
You're not clearing any of your floats. try adding

clear: both;

to the footer definition.

Antoniohawk
03-06-2004, 05:46 AM
No go :(

beetle
03-06-2004, 06: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


<!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.codingforums.com">Coding Forums</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
03-06-2004, 04:47 PM
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
03-07-2004, 08: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
03-07-2004, 08:09 PM
Thanks alot, I was wondering how to accomplish that.

Antoniohawk
03-09-2004, 11:12 PM
Still having problems, can someone please help me with the navCont problem mentioned above?

Willy Duitt
03-09-2004, 11: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 (http://www.codingforums.com/showthread.php?s=&postid=173698#post173698)?

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
03-09-2004, 11:37 PM
Sorry, I have a bad habit of posting before I actually upload the new file, check it out now.

Antoniohawk
03-12-2004, 02:03 AM
Willy? You never came back.

Antoniohawk
03-14-2004, 08:08 PM
Still looking for help...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum