Solved

Formatting Horizontal Menu Bar

Posted on 2008-06-10
6
575 Views
Last Modified: 2013-11-19
The horizontal menu bar that Im working on can be viewed here;
http://www.taxconcern.co.uk/default1.htm

As you can see there are some problems. Basically Id like each menu item to be centered in its "box". eg. you can see that "home" is placed at the bottom. How do I format the menu so it looks professional? Note:  I dont want to change the size of each menu item.

Ive attached both the html file and css file for you to look at.

Thanks.


HTML CODE below

---------------------------
 

<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0 Transitional//EN">

<html>

<head>

    <title>Tax Concern</title>

    <link media="screen" href="styles1.css" type="text/css" rel="StyleSheet">

</head>

<body>

     <div id="container">

    <h1><img alt="Taxconcern header" src="images/header1.png" /></h1>

        <br />

        <ul id="topnav">

            <li><a href="default.htm" title="cgtcalculator home page">Home</a></li>

            <li><a href="calculator.aspx" title="capital gains calculator">About Taxconcern</a></li>

            <li><a href="example.htm" title="capital gains calculator examples">HMRC COPS 2005 Investigation</a></li>

            <li><a href="instructions.htm" title="capital gains calculator instructions">HMRC COP 11 Personal Enquiry</a></li>

            <li><a href="algorithm.htm" title="cgtcalculator calculations explained">HMRC COP 14 Company Enquiry</a></li>

            <li><a href="convert.aspx" title="cgtcalculator convert format">HMRC PN160 VAT Enquiry</a></li>

            <li><a href="calculatecgt.aspx" title="tax calculator">Student Tax Refund</a></li>

	    <li><a href="calculatecgt.aspx" title="tax calculator">CIS Calculator</a></li>

	    <li><a href="calculatecgt.aspx" title="tax calculator">Shopping Calculator</a></li>

        </ul>

    </div>

    <div id="bodycontainer">

        <h1>

            Welcome to TaxConcern</h1>

        <div>

            <p>

                Content goes in here

            </p>

	</div>

     </div>   

</body>

</html>
 
 
 

CSS code below

---------------
 

/* Default CSS Stylesheet for a new Web Application project */
 
 

*

{

	-moz-box-sizing: border-box;

}
 
 

h1

{

	color: #003366;

	font-size: 110%;

	margin: 0;

	padding: 0;

}
 
 

ul

{

	list-style-type: none;

	margin:				0;

	

}
 

body

{

	font-family: arial, helvetica, sans-serif;

	margin: 0;

	padding: 0;

	text-align: center;

	color: #444;

}
 

img

{

	border-style: none;

}
 
 

a.nounderline

{

	text-decoration: none;

}
 

#container

{

	text-align: left;

	margin: 0 auto;

	width: 980;

	background: #fff;

}
 
 

#bodycontainer

{

	text-align: left;

	width: 980;

	background: #fff;

	padding: 20px 20px 7px 20px;

	border: 1px solid green;

	margin: 0 auto;

}
 
 
 
 

h1 img

{

	display: block;

	border: 0;

}
 
 
 

ul#topnav

{

	margin: 0;

	padding: 8px 2px;

	list-style-type: none;

	background: green;

	text-align: left;

	vertical-align: middle;

	font-size: 70%;

}
 
 

ul#topnav li

{

	font-weight: bold;

	display: inline;

	padding: 0 5px 0 5px;

	width:105px;

	border-right: thin solid #fff;

}
 
 

ul#topnav li a:link, ul#topnav li a:visited

{

	text-decoration: none;

	color: #fff;

}
 
 

ul#topnav li a:hover, ul#topnav li a:active

{

	text-decoration: underline;

	color: #90EE90;

	background: green;

}

Open in new window

0
Comment
Question by:rangers99
  • 4
  • 2
6 Comments
 
LVL 12

Expert Comment

by:pigmentarts
ID: 21754533
you have too many menu items, unless you make bigger the size of the page or make the text smaller its not going to look right. if you dont want to do this, why not condense some items together under one title by adding a CSS dropdown menu. no javascript just pure CSS so its Google friendly and very accessible. for example something like this: http://www.cssplay.co.uk/menus/final_drop.html

style it the same as your menu and it will look good
0
 

Author Comment

by:rangers99
ID: 21755182
Thanks but Im really looking for a specific solution to the above problem. I cant beleive a CSS expert (not me!) cant make changes/additions to the above style sheet to create a professional looking menu bar.
0
 
LVL 12

Expert Comment

by:pigmentarts
ID: 21755284
describe what you mean by professional looking menu bar? are you just on about aligning the text up, or  the style look and feel?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:rangers99
ID: 21755353
Its mainly about aligning the text up (Im quite happy with a simple menu bar).
Also the white right border. That should be from top to bottom on all the items.
The text size can perhaps be reduced a bit if that necessary.
0
 

Author Comment

by:rangers99
ID: 21757536
Ive increased points to 500
0
 

Accepted Solution

by:
rangers99 earned 0 total points
ID: 21758595
Ive changed the text-align to "center" and played about with the length of the menu items and it looks great. So please consider this question closed now.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Problem with a CSS in a page 2 25
Form Submit falis 6 24
Centered Image 2 19
Configuring a checkbox in CSS and php 18 27
This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now