By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,375 Members | 1,095 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,375 IT Pros & Developers. It's quick & easy.

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

Death Slaught
100+
P: 1,137
I have my entire page in my "main" div.

Expand|Select|Wrap|Line Numbers
  1. div.main
  2. {
  3. width: 100%;
  4. height: 100%;
  5. border: 1px solid gray;
  6. }
on the left of the page I have a banner.

Expand|Select|Wrap|Line Numbers
  1. div.banner
  2. {
  3. border-right: 1px solid gray;
  4. float: left;
  5. }
[HTML]<div class="banner">
<img src="Location" width="200" height="650" />
</div>[/HTML]

on the right I have the sponsers banner.

Expand|Select|Wrap|Line Numbers
  1. div.sponser
  2. {
  3. border-left: 1px solid gray;
  4. float: right;
  5. margin: 0;
  6. }
[HTML]<div class="sponser">
<img src="Location" width="200" height="650" />
</div>[/HTML]

Inbetween the banner and the sponsers, I have a navagation bar.

Expand|Select|Wrap|Line Numbers
  1. ul.list1
  2. {
  3. float: left;
  4. margin: 0;
  5. list-style-type: none;
  6. }
  7.  
  8. a.nav
  9. {
  10. float: left;
  11. text-decoration: none;
  12. color: #000000;
  13. background-color: #e00000;
  14. padding: 0.2em 0.6em;
  15. border-right: 1px solid #000000;
  16. font-size: 20px;
  17. }
  18.  
  19. a.nav:hover
  20. {
  21. color: #e00000;
  22. background-color: #000000;
  23. }
  24.  
  25. li.navin
  26. {
  27. display: inline;
  28. }
[HTML]<ul class="list1">
<li class="navin"><a class="nav" href="Home.html">Home</a></li>
<li class="navin"><a class="nav" href="Storys.html">Storys</a></li>
<li class="navin"><a class="nav" href="Blogs.html">Blogs</a></li>
<li class="navin"><a class="nav" href="Music.html">Music</a></li>
<li class="navin"><a class="nav" href="Videos.html">Video</a></li>
<li class="navin"><a class="nav" href="About.html">About</a></li>
</ul>[/HTML]

Then under the navagation bar I have the pages contents.

Expand|Select|Wrap|Line Numbers
  1. div.contents
  2. {
  3. color: #e00000;
  4. font-size: 17px;
  5. padding: 5em;
  6. border-top: 1px solid gray;
  7. border-bottom: 1px solid gray;
  8. float: left;
  9. }
[HTML]<div class="contents">

<!-- 19 line breaks to extend the page -->

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

</div>[/HTML]

And below the contents I have the footer.

Expand|Select|Wrap|Line Numbers
  1. ul.list2
  2. {
  3. padding: 0;
  4. margin: 0;
  5. list-style-type: none;
  6. }
  7.  
  8. a.footer
  9. {
  10. color: #e00000;
  11. }
  12.  
  13. a.footer:hover
  14. {
  15. color: #000000;
  16. background-color: #e00000;
  17. }
  18. li.footerin1
  19. {
  20. display: inline;
  21. }
  22.  
  23. li.footerin2
  24. {
  25. display: inline;
  26. }
  27. div.footer1
  28. {
  29. margin-left: 395px;
  30. }
  31.  
  32. div.footer2
  33. {
  34. margin-left: 425px;
  35. }
[HTML]<div class="footer1">
<ul class="list2">
<li class="footerin1"><a class="footer" href="Home.html"><Home</a></li>
<li class="footerin1"><a class="footer" href="Storys.html">Storys</a></li>
<li class="footerin1"><a class="footer" href="Blogs.html">Blogs</a></li>
<li class="footerin1"><a class="footer" href="Music.html">Music</a></li>
<li class="footerin1"><a class="footer" href="Videos.html">Videos</a></li>
<li class="footerin1"><a class="footer" href="About.html">About</a></li>
</div>
<div class="footer2">
<li class="footerin2"><a class="footer" href="Help.html">Help</a></li>
<li class="footerin2"><a class="footer" href="Suggestions.html">Suggestions</a></li>
<li class="footerin2"><a class="footer" href="Support.html">Support</a></li>
</ul>
</div>[/HTML]

Here are my problems.

My footer is literally right below my div.contents bottom border, and I can can't get it to go down.

I want the banner and sponsers to be eqaul with the rest of the divisions, but when I stretch the image, it make the div.main longer, and it puts space between the images borders and the div.main bottom border.

And my div.contents, top and bottom borders don't go all the way right into the sponsers, they stop about a cenimeter short.


Here's the entire code I did it the way I did above so it would be easier to read.

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

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

body
{
background-color: black;
}

div.main
{
width: 100%;
height: 100%;
border: 1px solid gray;
}

ul.list1
{
float: left;
margin: 0;
list-style-type: none;
}

ul.list2
{
padding: 0;
margin: 0;
list-style-type: none;
}

a.nav
{
float: left;
text-decoration: none;
color: #000000;
background-color: #e00000;
padding: 0.2em 0.6em;
border-right: 1px solid #000000;
font-size: 20px;
}

a.nav:hover
{
color: #e00000;
background-color: #000000;
}

a.footer
{
color: #e00000;
}

a.footer:hover
{
color: #000000;
background-color: #e00000;
}

li.navin
{
display: inline;
}

li.footerin1
{
display: inline;
}

li.footerin2
{
display: inline;
}

div.contents
{
color: #e00000;
font-size: 17px;
padding: 5em;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
float: left;
}

div.footer1
{
margin-left: 395px;
}

div.footer2
{
margin-left: 425px;
}

div.banner
{
border-right: 1px solid gray;
float: left;
}

div.sponser
{
border-left: 1px solid gray;
float: right;
margin: 0;
}

</style>
</head>

<body>

<div class="main">

<div class="banner">
<img src="Location" width="200" height="650" />
</div>

<ul class="list1">
<li class="navin"><a class="nav" href="Home.html">Home</a></li>
<li class="navin"><a class="nav" href="Storys.html">Storys</a></li>
<li class="navin"><a class="nav" href="Blogs.html">Blogs</a></li>
<li class="navin"><a class="nav" href="Music.html">Music</a></li>
<li class="navin"><a class="nav" href="Videos">Video</a></li>
<li class="navin"><a class="nav" href="About.html">About</a></li>
</ul>

<div class="sponser">
<img src="Location" width="200" height="650" />
</div>

<div class="contents">

<!-- 19 line breaks to extend the page -->

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

</div>

<div class="footer1">
<ul class="list2">
<li class="footerin1"><a class="footer" href="Home.html"><Home</a></li>
<li class="footerin1"><a class="footer" href="Storys.html">Storys</a></li>
<li class="footerin1"><a class="footer" href="Blogs.html">Blogs</a></li>
<li class="footerin1"><a class="footer" href="Music.html">Music</a></li>
<li class="footerin1"><a class="footer" href="Videos.html">Videos</a></li>
<li class="footerin1"><a class="footer" href="About.html">About</a></li>
</div>
<div class="footer2">
<li class="footerin2"><a class="footer" href="Help.html">Help</a></li>
<li class="footerin2"><a class="footer" href="Suggestions.html">Suggestions</a></li>
<li class="footerin2"><a class="footer" href="Support.html">Support</a></li>
</ul>
</div>

</div>


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


Thanks, Death

PS - If there are better ways to do what i'm doing please let me know.
Oct 13 '07 #1
Share this Question
Share on Google+
13 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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).
Oct 13 '07 #2

Death Slaught
100+
P: 1,137
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
Oct 13 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
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.dtd">

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

body
{
background-color: black;
}

#wrapper{
position:relative;
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.html">Stories</a></li>
<li class="navin"><a class="nav" href="Blogs.html">Blogs</a></li>
<li class="navin"><a class="nav" href="Music.html">Music</a></li>
<li class="navin"><a class="nav" href="Videos">Video</a></li>
<li class="navin"><a class="nav" href="About.html">About</a></li>
</ul>

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

<div class="contents">

<!-- 19 line breaks to extend the page -->

<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="footerin1"><a class="footer" href="Home.html">Home</a></li>
<li class="footerin1"><a class="footer" href="Storys.html">Storys</a></li>
<li class="footerin1"><a class="footer" href="Blogs.html">Blogs</a></li>
<li class="footerin1"><a class="footer" href="Music.html">Music</a></li>
<li class="footerin1"><a class="footer" href="Videos.html">Videos</a></li>
<li class="footerin1"><a class="footer" href="About.html">About</a></li>
</ul>

<ul>
<li class="footerin2"><a class="footer" href="Help.html">Help</a></li>
<li class="footerin2"><a class="footer" href="Suggestions.html">Suggestions</a></li>
<li class="footerin2"><a class="footer" href="Support.html">Support</a></li>
</ul>


</div>


</body>
</html>[/HTML]
Oct 13 '07 #4

Death Slaught
100+
P: 1,137
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.......frames (twitch) bad idea.
Oct 13 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
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.
Oct 13 '07 #6

Death Slaught
100+
P: 1,137
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
Oct 15 '07 #7

drhowarddrfine
Expert 5K+
P: 7,435
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.
Oct 15 '07 #8

Death Slaught
100+
P: 1,137
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.......the 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.dtd">

<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:relative;
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\Death.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.html">Stories</a></li>
<li class="navin"><a class="nav" href="Blogs.html">Blogs</a></li>
<li class="navin"><a class="nav" href="Music.html">Music</a></li>
<li class="navin"><a class="nav" href="Videos">Video</a></li>
<li class="navin"><a class="nav" href="About.html">About</a></li>
</ul>

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

<div class="contents">

<!-- 19 line breaks to extend the page -->

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.html">Storys</a></li>
<li class="footerin"><a class="footer" href="Blogs.html">Blogs</a></li>
<li class="footerin"><a class="footer" href="Music.html">Music</a></li>
<li class="footerin"><a class="footer" href="Videos.html">Videos</a></li>
<li class="footerin"><a class="footer" href="About.html">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="Suggestions.html">Suggestions</a></li>
<li class="footerin"><a class="footer" href="Support.html">Support</a></li>
</ul>

</div>
</div>


</body>
</html>




[/HTML]


Thanks, Death
Oct 16 '07 #9

drhowarddrfine
Expert 5K+
P: 7,435
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.
Oct 16 '07 #10

Death Slaught
100+
P: 1,137
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
Oct 16 '07 #11

drhowarddrfine
Expert 5K+
P: 7,435
No, it was my mistyping. There is no such thing as 'filter:glow' either.
Oct 16 '07 #12

Death Slaught
100+
P: 1,137
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
Oct 16 '07 #13

Death Slaught
100+
P: 1,137
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......mainly 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
Oct 16 '07 #14

Post your reply

Sign in to post your reply or Sign up for a free account.