homepage Welcome to WebmasterWorld Guest from 54.197.65.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Menu Code
captainron19

5+ Year Member



 
Msg#: 4640102 posted 4:06 pm on Jan 25, 2014 (gmt 0)

Wondering if someone could look at a page for me I am making for my Fire Department and let me know where you think I went wrong with some coding.

The menu across the top has 7 links. The small images next to each link are all fixed in place and part of the top graphic (header.jpg). On 2 of the links (Audits and Elections) the full word is not acting as a link. Actually with the word elections on the letters "Ele" are clickable (at least in my browser using Firefox)

I am sure it has something to do with the CSS file pertaining to the header section but cannot figure it out. I am using a PHP Include for the menu but even without having that in place and having the code for the links directly in the file .... it still happens. Any input would be appreciated.

The Web Page is located at <snip>

[edited by: incrediBILL at 9:03 pm (utc) on Jan 26, 2014]
[edit reason] URls removed. No site reviews. Please see forum charter and TOS [/edit]

 

tangor

WebmasterWorld Senior Member tangor us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4640102 posted 7:18 pm on Jan 25, 2014 (gmt 0)

Your best bet for any help is to post your best effort CSS and html related code using example.com instead of your site domain. That way the next person with similar problem can find the answers here.

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4640102 posted 8:03 pm on Jan 25, 2014 (gmt 0)

The words are cut off because you set the width of the li at 97px but put a bunch of &nbsp ; in there for positioning (which you shouldn't do). Use margin instead though the whole nav isn't really set up the way it should be.

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4640102 posted 8:33 pm on Jan 25, 2014 (gmt 0)

Hi there captainron19,
the validator shows 14 coding errors for your page...



This is how I would code it...


<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://htfd5.org/">
<meta charset="utf-8">

<title>Hamilton Township Fire District #5</title>

<link rel="stylesheet" href="/">

<style>
body {
margin:0;
font-family:arial,helvetica,sans-serif;
font-size:14px;
color:#fff;
background-color:#00007f;
}
#container {
width:814px;
padding-top:364px;
margin:auto;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
}
#nav {
padding:0 0 13px 30px;
margin:0;
list-style-type:none;
overflow:hidden;
}
#nav li{
float:left;
width:112px;
}
#nav a {
display:block;
line-height:26px;
padding:0 4px;
margin-left:8px;
font-size:12px;
font-weight:900;
color:#fff;
text-decoration:none;
}
#nav a:hover {
color:#f00;
}
#welcome {
background-image:url(images/engine_main.jpg);
background-repeat:no-repeat;
background-position:528px top;
}
#welcome h3 {
margin:10px 10px 10px 110px;
font-size:20px;
color: #f00;
text-transform:uppercase;
}
#welcome p {
width:416px;
margin:10px 10px 10px 110px;
}
#personnel {
width:600px;
margin:0 auto 50px;
overflow:hidden;
}
#personnel h2 {
margin-top:70px;
color:#f00;
text-align:center;
}
#personnel dl {
float:left;
width:300px;
}
#personnel dt {
margin-bottom:5px;
font-weight:bold;
text-decoration:underline;
}
#personnel dd {
margin:0 0 2px 0;
}

#footer {
background-image:url(images/line.jpg);
background-repeat:no-repeat;
background-position:left top;
padding:10px 10px 10px 110px;
text-align:center;
}
</style>

</head>
<body>

<div id="container">

<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="budgets.php">Budgets</a></li>
<li><a href="minutes.php">Minutes</a></li>
<li><a href="meetings.php">Meetings</a></li>
<li><a href="audits.php">Audits</a></li>
<li><a href="elections.php">Elections</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>

<div id="welcome">

<h3>Welcome</h3>

<p>
The goal of Hamilton Township Fire District 5 is to provide a high quality
professional fire service, along with educating the residents and businesses
who reside in the district on fire prevention and fire safety.
</p><p>
Hamilton Township Fire District 5 also assists in emergency medical services
to the residents and businesses within the District and provide mutual aide
within the Township and surrounding communities.
</p><p>
This website has been developed in order to satisy the requirements of
enacted law A3908 requiring all Fire Districts and other governing agencies
to become more transparent to the general public by providing specific
information pertaining to our fire district
</p>

</div><!-- end #welcome -->

<div id="personnel">

<h2>PERSONNEL</h2>

<dl>
<dt>Commissioners<dt>
<dd>Bernard Crammer Jr. - Chairman</dd>
<dd>Jonathan Tomko- Treasurer</dd>
<dd>Leonard J. Gadsby - Secretary</dd>
<dd>Anthony Gulotta - Buildings & Grounds</dd>
<dd>Robert A. Dill - Personnel</dd>
</dl>

<dl>
<dt>Career Staff<dt>
<dd>Thomas Garey - Captain</dd>
<dd>Vincent Jarzyk</dd>
<dd>Ronald O'Hara</dd>
<dd>Kinte Holt</dd>
<dd>Jarrett Gadsby</dd>
<dd>Eric Wojcik</dd>
</dl>

</div><!-- end #personnel -->

<div id="footer"></div>

</div><!-- end #container -->

</body>
</html>




birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved