The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Help with HTMl.
Hefty
post Dec 6 2007, 07:58 PM
Post #1


Member
***

Group: Members
Posts: 48
Joined: 30-November 07
Member No.: 4,440
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 6 2007, 08:20 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Without looking at it in a browser, you use the background with the links in the navbar instead of with the navbar itself.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hefty
post Dec 6 2007, 10:19 PM
Post #3


Member
***

Group: Members
Posts: 48
Joined: 30-November 07
Member No.: 4,440
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|
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 6 2007, 10:58 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I thought you wanted the background image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hefty
post Dec 6 2007, 11:35 PM
Post #5


Member
***

Group: Members
Posts: 48
Joined: 30-November 07
Member No.: 4,440
I do, I want the background image under the text.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Dec 7 2007, 12:29 AM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
QUOTE
I do, I want the background image under the text.
Under which text?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 7 2007, 12:38 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
You've lost me too. wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 7 2007, 03:31 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 04:12 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC