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


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,930
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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
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


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,930
Joined: 9-August 06
Member No.: 6



I thought you wanted the background image.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB 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: 7,987
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?


--------------------
Darin McGrew
WDG Member since 1998
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


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,930
Joined: 9-August 06
Member No.: 6



You've lost me too. wacko.gif


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
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: 4,133
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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 24th April 2014 - 08:33 AM