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

7,435

Expert 4TB

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

1,137

1GB

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

7,435

Expert 4TB

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



<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

1,137

1GB

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

7,435

Expert 4TB

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

1,137

1GB

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

7,435

Expert 4TB

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

1,137

1GB

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



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

7,435

Expert 4TB

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

1,137

1GB

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

7,435

Expert 4TB

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

Oct 16 '07 #12

1,137

1GB

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

navbar file examples from msdn

1,137

1GB

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

Similar topics

by: rick | last post by:

Hello everyone I am trying to locate the sample files used in "A tour of the code - NavBar" for the redesign of the msdn online website in 1998. They were written and developed by Robert Carter...

ASP / Active Server Pages

Alignment of footer

by: J.Storta | last post by:

On my site, I have created a footer that is simply a shaded box with a   character. Using Server Side Includes, I use this footer on every page. On some pages it loads fine, on other pages...

liquid navbar

by: Chad | last post by:

I have a horizontal navbar between my banner and the page's main content (divided into three columns). Below the navbar, the left and right columns are fixed and the center is liquid. I want to...

include content of navbar in css?

by: Uwe Brauer | last post by:

Hello In the w3c website: http://www.w3.org/Style/Examples/011/firstcss There is an example of a first attempt of a css. Is it possible that Not only the form but also the content of...

master pages - header, content, footer

Bottom Banner

by: | last post by:

I want a banner to appear at the bottom of each page of a web app. I created a user control that describes the banner and have it placed in all my pages. For the most part it functions as needed....

ASP.NET

by: xkeops | last post by:

Thinking of creating a website, most of the pages will have a general toolbar menu, a content and a footer. The content will be the only one who's gonna change but the rest (header,footer) will...

ASP.NET

Selecting the class of a navbar link

by: nonsensitor | last post by:

I'm having some trouble with horizontal navbars. In particular, I can't seem to get the width right for IE. I think I can resolve it if I can apply a separate style (via a class "lastnavitem") to...

navbar won't go up next to everything else; insists on being underneath

by: sevenalive | last post by:

Hi-- I am very new at this and trying to teach myself, and I have run into a roadblock that I can't figure out no matter how many times I Google it......my navbar is a vertical column of images,...

Flash movie(banner) center problem between browsers [Video Proof]

by: GloStix | last post by:

I'm trying to center this banner, it's in a div that has the same width so it's not exactly "centering" but it's screwed up, It works in safari but in Firefox it's messed up. I uploaded a Video to...