Solved

A smile css menu with different width

Posted on 2008-10-10
4
201 Views
Last Modified: 2012-08-13
Can anyone  please code this simple css menu. Each link must have  different width. And please can the other words come on a different line as  shown in the demo picture of the menu.
Thank you
menu-Demo.jpg
0
Comment
Question by:xposegrafix
  • 2
4 Comments
 
LVL 4

Accepted Solution

by:
ad5qa earned 150 total points
Comment Utility
This will get you started


<style type="text/css">

#nav

{

	font-size: 14px;

	font-family: arial;

	margin: 0px;

	padding: 0px;

	list-style-type: none;

	float: left;

	border-left: 1px solid #ccc;

}

#nav li

{

	margin: 0px;

	padding: 0px;

	float: left;

	font-weight: bold;

}

#nav a

{

	padding: 0px 5px 0px 5px;

	height: 40px;

	display: block;

	float: left;

	text-align: center;

	color: #800000;

	text-decoration: none;

	border-right: 1px solid #ccc;

	vertical-align: center;

}

#nav a:hover

{

	background-color: #800000;

	color: #ffffff;

}

</style> 

 
 

<ul id="nav">

<li><a href="">About US</a></li>

<li><a href="">Financial<br />Services</a></li>

<li><a href="">Social<br />Responsibility</a></li>

<li><a href="">Social<br />Responsibility</a></li>

<li><a href="">Financial<br />Services</a></li>

</ul>

Open in new window

0
 
LVL 4

Expert Comment

by:ad5qa
Comment Utility
Better Yet



<style type="text/css">

#nav

{

	font-size: 14px;

	font-family: arial;

	margin: 0px;

	padding: 0px;

	list-style-type: none;

	float: left;

	 

}

#nav li

{

	margin: 0px 0px 0px 3px;

	padding: 0px;

	float: left;

	font-weight: bold;

}

#nav a

{
 

	height: 35px;

	display: block;

	float: left;

	text-align: center;

	color: #800000;

	text-decoration: none;

}

#nav a:hover

{

	background-color: #800000;

	color: #ffffff;

}

#nav li span

{

	height: 35px;

	border-right: 4px solid #ccc;

}

#nav li.oneline

{

	line-height:35px;

}

</style> 

 
 

<ul id="nav">

<li class="oneline"><a href="">About US</a><span></span></li>

<li><a href="">Financial<br />Services</a><span></span></li>

<li><a href="">Social<br />Responsibility</a><span></span></li>

<li><a href="">Social<br />Responsibility</a><span></span></li>

<li><a href="">Financial<br />Services</a></li>

</ul>

Open in new window

menu.jpg
0
 
LVL 16

Expert Comment

by:rbudj
Comment Utility
here you go... i placed the images in a folder called menu... adjust the paths as needed.  
<!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>

<title></title>

<style type="text/css">

#container {

width:500px;

}
 

#oneone {

width:76px;

float:left;

}
 

#twotwo {

width:99px;

float:left;
 

}
 

#threethree {

width:107px;

float:left;
 

}
 

#fourfour {

width:131px;

float:left;

}
 

#fivefive {

width:87px;

float:left;

}

</style>

</head>

<body>

<div id="container">

<div id="oneone"><img src="menu/1.jpg" width="76" height="50" /></div>

<div id="twotwo"><img src="menu/2.jpg" width="99" height="50" /></div>

<div id="threethree"><img src="menu/3.jpg" width="107" height="50" /></div>

<div id="fourfour"><img src="menu/4.jpg" width="131" height="50" /></div>

<div id="fivefive"><img src="menu/5.jpg" width="87" height="50" /></div>
 

</div>

</body>

</html>

Open in new window

menu.zip
0
 

Author Comment

by:xposegrafix
Comment Utility
Okay I will look into it right now and get back to you. Thank you rbudj.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
CSS menu problem 2 34
Suggestion on WebSite Template Sites 5 48
jQuery Time Off Event 20 41
HTML CSS 7 13
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

728 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

11 Experts available now in Live!

Get 1:1 Help Now