www.webdeveloper.com
Page 1 of 6 123 ... LastLast
Results 1 to 15 of 81

Thread: please help

  1. #1
    Join Date
    Aug 2007
    Location
    Toowoomba, QLD Australia
    Posts
    46

    please help

    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 04:21 AM. Reason: vB code added

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Code:
    	#banner {
    		background:#fff url(nfbanner.gif);
    		height:40px;
    		border-top:1px solid #000;
    		border-right:1px solid #000;
    		border-left:1px solid #000;
    		voice-family: "\"}\"";
    		voice-family: inherit;
    		height:39px;
    		}

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    ....</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>....
    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.
    Last edited by WebJoel; 08-23-2007 at 09:12 AM.

  4. #4
    Join Date
    Aug 2007
    Location
    Toowoomba, QLD Australia
    Posts
    46
    Quote Originally Posted by WebJoel
    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?

  5. #5
    Join Date
    Aug 2007
    Location
    Toowoomba, QLD Australia
    Posts
    46
    ok thanks i took out a <body>

    ok so the <ul> tag separates the navigation bar from the banner right

    is this how i use the <ul> tag?
    <ul><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><ul>

    and where should i put it in the code so that it goes along the whole page and above the left center and right columns?

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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
    Code:
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">GuestBook</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Forum</a></li>
      <li><a href="#">Links</a></li>
      <li><a href="#">Clan Members</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">Enemies and Allies</a></li>
      <li><a href="#">Rules</a></li>
      <li><a href="#">Chat Room</a></li>
    </ul>
    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.

  7. #7
    Join Date
    Aug 2007
    Location
    Toowoomba, QLD Australia
    Posts
    46
    ok can it be separated from the #banner div???

  8. #8
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Well, the navigation code can be placed after the div, but then the #banner div has no content which also semantically doesn't make sense.

    Can you post a picture of what you want this to look like?

  9. #9
    Join Date
    Aug 2007
    Location
    Toowoomba, QLD Australia
    Posts
    46
    yep here http://i15.tinypic.com/53kc51l.jpg could that be done???

  10. #10
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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?

  11. #11
    Join Date
    Aug 2007
    Location
    Toowoomba, QLD Australia
    Posts
    46
    i want the navigation to have a white background and the size of the graphic is 700x150

  12. #12
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    To utilise the menu code you orginally had, little change is needed for the html :
    Code:
    <body>
    <div id="header">
      <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>
    </div>
    and the associated css :
    Code:
    	body {
    		margin:10px 10px 0 10px;
    		padding: 0;
    		background-color: #66CCFF;
    }
    	#header {
    		background:#FFF url(nfbanner.gif) no-repeat center top;
    		padding-top:150px;
    		border:1px solid #000;
    		border-bottom:0;
    }
    Note that I changed the body bgcolor from thehtml to the body css, and also that zero values do not need units assigned.

  13. #13
    Join Date
    Aug 2007
    Location
    Toowoomba, QLD Australia
    Posts
    46
    ok so do i replace that css with the old one??

  14. #14
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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.

  15. #15
    Join Date
    Aug 2007
    Location
    Toowoomba, QLD Australia
    Posts
    46
    ok yep sure i got it thanks

    umm can a line a <hr> be put at the top of the navigation bar ???

    and what is the length of the header box because i will have to remake the header pic to fit in?
    Last edited by SniperElite; 08-24-2007 at 07:25 AM. Reason: forgot to say

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles