hey i am having trouble on where to put my banner in my html code i want to get the banner so that it is above the navigation bar can someone please tell me where i should put <img src="nfbanner.gif/> in my code?
Here is my code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>[KWG]. Kids With Guns</title>
<style type="text/css">
@import "all.css"; /* just some basic formatting, no layout stuff */
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#FFF;
border:1px solid #000;
}
#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}
#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#banner {
background:#fff;
height:40px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
html>body #banner {
height:39px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#banner h1 {
font-size:14px;
padding:10px 10px 0px 10px;
margin:0px;
}
#rightcontent p {
font-size:10px
}
</style>
</head><body><body bgcolor="#66CCFF">
<div id="banner"><br /><a href="#">Home</a> | <a href="#">GuestBook</a> | <a href="#">Blog</a> | <a href="#">Forum</a> | <a href="#">Links</a> | <a href="#">Clan Members</a> | <a href="#">Downloads</a> | <a href="#">Enemies and Allies</a> | <a href="#">Rules</a> | <a href="#">Chat Room</a></h1>
</div>
<div id="leftcontent">
<h2>Scrims</h2>
<p>Scrim Results</p>
<p>Organize to scrim with [KWG].<p>
</div>
<div id="centercontent">
<br />
<br />
<br />
<br />
<br />
<h2 align="center">Welcome</h2>
<p>Hey and welcome to [KWG]. nightfire clan site please enjoy the site.
Our clan is new and we hope to be successful so can all members please follow all rules we have and enjoy being in our clan.
[KWG]. Clan leaders are Jewou and SniperElite so if you have any problems please speak to them :)</p><hr />
<h2 align="center">News</h2>
<hr />
<p> [KWG].Clan is now running try outs to recruit there members.
The try outs will take place in CTF_Romania.
Jewou will be organizing the try outs so if you would like to join [KWG]. Please speak to Jewou in GSA, in game or post in our blog or forum to arrange a time for a try out with him.:) </p><hr />
<div id="rightcontent">
<h2>GSA</h2><hr />
<p></p>
<h2>The Site<h2/>
<p>This site was created by: [KWG]SniperElite{NC}<p>
</div>
</body>
</html>
Last edited by Fang; 08-23-2007 at 03:21 AM.
Reason: vB code added
I usually only put one "<body>" tag in any one web page.
And this wysiwyg navigation list could be best styled as an "<ul>" and make it alot more accessible, easier to edit/update, etc./
It is a small point of contunture here, but using the word "banner" is nearly akin to naming a DIV id="spam". Seriously, use of word "banner" can affect rating because it has been so oft used in 'spammer' pages in the past...
I had an (presumeably biased but seemingly factual) article bookmarked regarding this but am sure that I no longer have it.
I usually only put one "<body>" tag in any one web page.
And this wysiwyg navigation list could be best styled as an "<ul>" and make it alot more accessible, easier to edit/update, etc./
It is a small point of contunture here, but using the word "banner" is nearly akin to naming a DIV id="spam". Seriously, use of word "banner" can affect rating because it has been so oft used in 'spammer' pages in the past...
I had an (presumeably biased but seemingly factual) article bookmarked regarding this but am sure that I no longer have it.
ok thanks i took out a <body>
i am not familiar with the <ul> tag does that separate the navigation bar form the banner?
The <ul> is an unordered list, which can only directly contain <li> list elements, which in turn can contain the links. A navigation is essentially a list of links, so if it is marked up as such, it makes more sense to non-visual browsers (such as screen readers and search engine spiders). The markup for such a list would look like
Without styling, this looks like a vertical list with bullet points - not what you normally want to use for a navigation bar, so it needs considerable css styling to get it to display similar to your markup. However, it opens up much more styling options, and as said, makes more sense semantically.
As the navigation code is within the #banner div, it will not be separated from it. However, you can use padding and/or margins to position the navigation within #banner in such a way as it is clear of the background graphic - hard to tell without seeing what the graphic is and knowing your desired look.
Yes, but the navigation doesn't need to be moved out of the #banner div at all. If the #banner div is given a top padding equal to the height of the banner graphic (which would be applied as a background), the navigation will effectively look like it is below the banner. Whatever colour you want behind the navigation is what you set the background colour of the #banner div at.
What size is the graphic you want to use as the banner? and what colours do you want for the navigation?
Sorry, yes, I forget to note that I changed the name of the div from "banner" to "header" (for reasons that were mentioned previously - some browser plugins could treat it as advertising and prevent it displaying), so replace the body and #banner css you had with that I posted.
Reply With Quote
Seriously, use of word "banner" can affect rating because it has been so oft used in 'spammer' pages in the past...
Originally Posted by WebJoel
Bookmarks