Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Help with HTMl.

Posted by: Hefty Dec 6 2007, 07:58 PM

Ok so what I want to do is make it so my navigation has a background image. Note: The current background image i'm using is from google jsut for testing.

HTML:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>ECS | Home</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body style="border:1px solid #000000; ">
<div id="banner"><img src="/ECSbanner.png" alt="banner" /></div>
<div id="nav">
<div id="navsearch">
<form name="input" action="/pagenotfound.html"
method="get">
<input type="text" name="search" />
<input type="submit" value="Submit" />
</form></div>
<span class="navleft">
<a href="http://www.yoursite.com/about.html">Home</a> | <a href="LINK">Code Directory</a> | <a href="http://www.yoursite.com/contact">Forums</a> | <a href="LINK">About</a> | <a href="LINK">Terms</a> |</span>
</div>
<div id="wlcmtbl">
<table style="border: 3px solid #0102FF; margin: 0 auto; width: 50%; align: center;">
<tr><td bgcolor="#000000" align="center" style="border-bottom: 2px solid #CCC"><span class="wlcmcaption"><img src="/welcometoecs.png" alt="welcomecaption" /></span></td></tr>
<tr><td style="background: #000">Welcome to ECU, ECU stands for Elite Computer Skills. At this site you can learn a lot of computer related things, just click on "Code Directory" to find out!. Expect major updates since this site just recently came out on December 23rd!<p>ECS is looking for staff. Click "<a href="/staffapp.html">Here</a>" to see what is open.</p><p><font color="green">Next Scheduled Update:</font> Re-model of home.html!</p><p><a href="http://www.firefox.com"><img src="http://img238.imageshack.us/img238/5808/firefoxdw9.png" alt="Get firefox!" /></a></p></td></tr><tr><td bgcolor="#000000" align="center">Virus Free: <img src="/checkmark.png" alt="checkmark" /></td>
</tr>
</table></div>
</body>
</html>

CSS:

CODE

body {
background-color: #FFF;
margin: auto;
}

a:link {color: #FFF; text-decoration: none; }
a:visited {color: #FFF; }
a:active {color: #FFF; }
a:hover {color: #999999; font-style: italic; }

#nav {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
padding:5px;
margin: auto;
background-color:#000000;
color:#fff;
border-bottom: 1px solid #999999;
}

#nav a {
color:#fff;
text-decoration:none;
background-image: url('http://cooltext.com/Previews/117.gif');
}
#nav a:hover {
font-weight: normal; color:#999999;
font-style: italic;
}

.navright {
float: right;
padding-right:10px;
}

.navleft {
padding-left:10px;
}

#navsearch {
float:right;
}

#wlcmtbl {
font-family: Verdana, Arial, sans-serif;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
color: #FFF;
font-size: 16px;
}

.wlcmcaption {
font-size: 20px;
font-family: Verdana, Arial, sans-serif;
}

#banner {display: block;
}

input {
background-color: #000000;
color: #ffffff;
}

it shows a little part of the background image but not the whole thing in the navigation. Whats wrong?

Posted by: pandy Dec 6 2007, 08:20 PM

Without looking at it in a browser, you use the background with the links in the navbar instead of with the navbar itself.

Posted by: Hefty Dec 6 2007, 10:19 PM

So how should I change the code? I still want the black background there because i'm going to make it so the links will have a tab like background. |IMAGE|

Posted by: pandy Dec 6 2007, 10:58 PM

I thought you wanted the background image.

Posted by: Hefty Dec 6 2007, 11:35 PM

I do, I want the background image under the text.

Posted by: Darin McGrew Dec 7 2007, 12:29 AM

QUOTE

I do, I want the background image under the text.

Under which text?

Posted by: pandy Dec 7 2007, 12:38 AM

You've lost me too.

Posted by: Frederiek Dec 7 2007, 03:31 AM

The text of the links on the navigation is white. The currently used image starts off white in the top left corner. And since the links are too small to fit the large image (185 x 75 px), the text seems invisible.

You need to set a width, height and/or padding to the links. But I suggest you go see one of http://css.maxdesign.com.au/ or http://www.cssplay.co.uk/menus/.