Seperating Navbar, Banner, Footer, Sponsers, and the pages contents.

**drhowarddrfine** · Oct 13 '07, 05:09 PM

You are forgetting that floated elements are removed from the normal flow and other elements will pretend they aren't there. Because content, sponsor, banner are all floated, the footer rises up into their place (except for the actual content).

**Death Slaught** · Oct 13 '07, 05:18 PM

Originally posted by drhowarddrfine

You are forgetting that floated elements are removed from the normal flow and other elements will pretend they aren't there. Because content, sponsor, banner are all floated, the footer rises up into their place (except for the actual content).

then how can I fix it? i can't get rid of any of the floats because if I do it looks even worse. Espesually in the contents, it moves the first row of text way past the nav bar.

Thanks, Death

**drhowarddrfine** · Oct 13 '07, 05:33 PM

This is as far as I got before getting yelled at by the wife. Don't catch divits, ie, the need to feel everything needs to be wrapped in a div.
[HTML]<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<html>
<head>
<title>Home Page</title>
<style type="text/css">

body
{
background-color: black;
}

#wrapper{
position:relati ve;
overflow:auto;
}

.banner{
float:left;
width:200px;
height:650px;
}
.sponsor{
float:right;
width:200px;
height:650px;
}
.list1{
float:left;
width:30%;
margin:0 auto;
list-style-type:none;
}
a.nav{
float:left;
text-decoration:none ;
color:#000;
background-color:#e00;
padding:0.2em 0.6em;
border-right: 1px solid #000;
font-size:20px;
}

</style>
</head>

<body>

<div class="main">
<div id="wrapper">
<img class="banner" src="2.png" />

<ul class="list1">
<li class="navin">< a class="nav" href="Home.html ">Home</a></li>
<li class="navin">< a class="nav" href="Stories.h tml">Stories</a></li>
<li class="navin">< a class="nav" href="Blogs.htm l">Blogs</a></li>
<li class="navin">< a class="nav" href="Music.htm l">Music</a></li>
<li class="navin">< a class="nav" href="Videos">V ideo</a></li>
<li class="navin">< a class="nav" href="About.htm l">About</a></li>
</ul>

<img class="sponsor" src="2.png" />

<div class="contents ">



<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</div>
</div>

<ul class="list2">
<li class="footerin 1"><a class="footer" href="Home.html ">Home</a></li>
<li class="footerin 1"><a class="footer" href="Storys.ht ml">Storys</a></li>
<li class="footerin 1"><a class="footer" href="Blogs.htm l">Blogs</a></li>
<li class="footerin 1"><a class="footer" href="Music.htm l">Music</a></li>
<li class="footerin 1"><a class="footer" href="Videos.ht ml">Videos</a></li>
<li class="footerin 1"><a class="footer" href="About.htm l">About</a></li>
</ul>

<ul>
<li class="footerin 2"><a class="footer" href="Help.html ">Help</a></li>
<li class="footerin 2"><a class="footer" href="Suggestio ns.html">Sugges tions</a></li>
<li class="footerin 2"><a class="footer" href="Support.h tml">Support</a></li>
</ul>

</div>

</body>
</html>[/HTML]

**Death Slaught** · Oct 13 '07, 05:54 PM

Any way you can finish it? i'm totally lost. i tried putting the sponser pic in, and it fits perfectly inside of it, but when I tried to put the banner pic in, it went wrong, it puts it outside of the box where it needs to go and that pushes the navbar over.

Also I need the footer links to go inbetween the banner and sponsers pics, kinda like the 2 pics are the borders and nothing need to go above, outside, or below them.

Thanks alot, Death

PS - Usually I would never ask for the answer, but I was up till 3:00 in the morning last night trying every things I could think of to fix it, and my parents were ready to kill me. CSS is not my thing, but it's alot better than a pure HTML site.......fram es (twitch) bad idea.

**drhowarddrfine** · Oct 13 '07, 07:48 PM

Busy weekend. It started raining outside so now I have to work inside.
I was hoping you could study what I did and finish it.

**Death Slaught** · Oct 15 '07, 04:37 PM

Originally posted by drhowarddrfine

Busy weekend. It started raining outside so now I have to work inside.
I was hoping you could study what I did and finish it.

I think I can work it out, but I have one more question.

Would I use margin-left to move the footer over to the middle of the page, and the use margin-bottom to move it up?

Thanks, Death

**drhowarddrfine** · Oct 15 '07, 08:32 PM

If you want to center it, give it a width and then 'margin:0 auto;'. Not sure about a margin off the bottom cause that could be trickier. One trick is to wrap everything on the page in a div except the footer. Then give the footer a negative margin which will pull it back inside the wrapper div but keep it at the bottom.

**Death Slaught** · Oct 16 '07, 02:16 PM

Originally posted by drhowarddrfine

If you want to center it, give it a width and then 'margin:0 auto;'. Not sure about a margin off the bottom cause that could be trickier. One trick is to wrap everything on the page in a div except the footer. Then give the footer a negative margin which will pull it back inside the wrapper div but keep it at the bottom.

I got it where I want it but I have a problem.......t he first row has a space between it and the second row......how would I fix that?

Also I'm trying to make all my borders glow, but for that it has to have a width property and when I try to give it one it looks worse.

and it looks different from comp-comp, it's driving me nuts(it's only the footer).
Oh and FF is a nightmare all it's own.

Here's what I got so far:

[HTML]<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<html>
<head>
<title>Home Page</title>
<style type="text/css">

body
{
background-color: black;
}
.main{
border-top:1px solid gray;
border-left:1px solid gray;
border-right:1px solid gray;
border-bottom:1px solid gray;
}
#wrapper{
position:relati ve;
overflow:auto;
}
.banner{
float:left;
width:200px;
height:650px;
}
.sponsor{
float:right;
width:200px;
height:650px;
}
.list1{
float:left;
margin:0 auto;
list-style-type:none;
}
.list2{
margin-left:375px;
}
.list3{
margin-left:413px;
}
a.nav{
float:left;
text-decoration:none ;
color:#000;
background-color:#e00;
padding:0.2em 0.6em;
border-right: 1px solid #000;
font-size:20px;
}
a.nav:hover{
color:#e00;
background-color:#000;
}
a.footer{
color:#e00;
background-color:#000;
}
a.footer:hover{
color:#000;
background-color:#e00;
}
li.navin{
display:inline;
}
li.footerin{
display:inline;
}
.contents{
color:#000;
padding:10em;
float:left;
border-top:1px solid #000;
border-bottom:1px solid #000;
filter:glow;
}
</style>
</head>

<body>

<div class="main">
<div id="wrapper">
<img class="banner" src="C:\Web\Dea th.jpg" alt=" " />

<ul class="list1">
<li class="navin">< a class="nav" href="Home.html ">Home</a></li>
<li class="navin">< a class="nav" href="Stories.h tml">Stories</a></li>
<li class="navin">< a class="nav" href="Blogs.htm l">Blogs</a></li>
<li class="navin">< a class="nav" href="Music.htm l">Music</a></li>
<li class="navin">< a class="nav" href="Videos">V ideo</a></li>
<li class="navin">< a class="nav" href="About.htm l">About</a></li>
</ul>

<img class="sponsor" src="C:\Web\Dea th.jpg" alt=" " />

<div class="contents ">



Text Text Text Text Text Text Text Text Text Text Text Text Text

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</div>

<ul class="list2">
<li class="footerin "><a class="footer" href="Home.html ">Home</a></li>
<li class="footerin "><a class="footer" href="Storys.ht ml">Storys</a></li>
<li class="footerin "><a class="footer" href="Blogs.htm l">Blogs</a></li>
<li class="footerin "><a class="footer" href="Music.htm l">Music</a></li>
<li class="footerin "><a class="footer" href="Videos.ht ml">Videos</a></li>
<li class="footerin "><a class="footer" href="About.htm l">About</a></li>
</ul>
<ul class="list3">
<li class="footerin "><a class="footer" href="Help.html ">Help</a></li>
<li class="footerin "><a class="footer" href="Suggestio ns.html">Sugges tions</a></li>
<li class="footerin "><a class="footer" href="Support.h tml">Support</a></li>
</ul>

</div>
</div>

</body>
</html>

[/HTML]

Thanks, Death

**drhowarddrfine** · Oct 16 '07, 02:54 PM

There is no such thing as 'filter:flow'. IE-only.
FF is a nightmare compared to what? If it doesn't work in IE then the markup is wrong. FF is not the problem.

Gone till tonight.

**Death Slaught** · Oct 16 '07, 02:56 PM

Originally posted by drhowarddrfine

There is no such thing as 'filter:flow'. IE-only.
FF is a nightmare compared to what? If it doesn't work in IE then the markup is wrong. FF is not the problem.

Gone till tonight.

sorry typo I ment filter:glow;

and the pics wont even show up in FF that's what I ment, and by no means do I mean that IE is better than FF.

Thanks, Death

**drhowarddrfine** · Oct 16 '07, 08:30 PM

No, it was my mistyping. There is no such thing as 'filter:glow' either.

**Death Slaught** · Oct 16 '07, 08:35 PM

Originally posted by drhowarddrfine

No, it was my mistyping. There is no such thing as 'filter:glow' either.

You mean there's no such thing as filter:glow; in all browsers except IE right? Cause it works there, and it looks great, but I guess it's gota go now....oh well lol.

Thanks, Death

**Death Slaught** · Oct 16 '07, 08:43 PM

Ok I stepped away from the computer for a while so I wouldn't start beating it with a mallet, but if I can't get this stupid footer to work I'm going to start beating myself with a mallet =p.

Here's the problem this time:

Every time I take it and test on a different computer the footer apears somewhere else......mainl y on the left side shoved way up, right next to the contents. I thought I had fixed that by giving the contents of the page 10em but that apparanetly didn't work, so how can I get the top row to stay centered, and the bottom row exactly below it but centered below the first footer. ( If this doesn't make much sense then please tell me and i'll try to make it a bit more clear ).

Thanks, Death

Seperating Navbar, Banner, Footer, Sponsers, and the pages contents.

Seperating Navbar, Banner, Footer, Sponsers, and the pages contents.

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment