Help - Search - Members - Calendar
Full Version: Help with HTMl.
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Hefty
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?
pandy
Without looking at it in a browser, you use the background with the links in the navbar instead of with the navbar itself.
Hefty
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|
pandy
I thought you wanted the background image.
Hefty
I do, I want the background image under the text.
Darin McGrew
QUOTE
I do, I want the background image under the text.
Under which text?
pandy
You've lost me too. wacko.gif
Frederiek
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 Maxdesign's list tutorials or CSSPlay's menu's.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.