Jump to content
Stef's Coding Community
Sign in to follow this  
fishcuisine

How can I extend my Nav Menu out to 1050 px?

Recommended Posts

Hello,

 

I have my new Nav bar looking pretty good. It is a little short; about 6" short.

How can I extend it out to cover 1050 px? I wonder...

 

Codes:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta name="keywords" content="SushiMenu1">

<meta name="description" content="Horizontal menu item1">

<meta http-equiv="content-type" content="text/html; charset=utf-8">

 

<title>Sushi Menu</title>

 

<style type="text/css">

#menu{

font-family: arial, sans-serif; line-height: 1.3;

color: #000000;

font-size: 11px;

font-weight: normal;

}

 

#menu{

padding:0;

margin:0;

}

#menu ul{

padding:0;

margin:0;

}

#menu li{

position: relative;

 

 

float: left;

list-style: none;

margin: 0;

padding:0;

}

#menu li a{

padding: 0 10px;

height: 25px;

display: block;

text-decoration:none;

text-align: center;

line-height: 25px;

background-color: #660033;

color: white;

}

#menu li a:hover{

background-color: #663366;

}

#menu ul ul{

position: absolute;

top: 22px;

visibility: hidden;

}

 

.style1 {color: #B7C8C5}

</style>

 

</head>

<body>

 

<div id="menu">

<ul>

<li><a href="#nogo"><span class="style1"></span>HOME</a>

</li>

<li><a href="#nogo">CHEF DIPLOMA COURSE</a>

</li>

<li><a href=”#nogo”>METROPOLIS TOKYO</a>

</li>

<li><a href=”#nogo”>LOCATION</a>

</li>

<li><a href=”#nogo”>INQUIRE</a>

</li>

<li><a href=”#nogo”></a>

</li>

<li><a href=”#nogo”></a>

</li>

<li><a href=”#nogo”></a>

</li>

 

 

 

</ul>

</div>

 

</body>

</html>

Share this post


Link to post
Share on other sites

The quickest thing to do to make the menu 1050px wide is this:-

#menu{ 
font-family: arial, sans-serif; line-height: 1.3;
color: #000000;
font-size: 11px;
font-weight: normal; 
padding:0;
margin: 0 auto; /*was margin: 0; the auto will center it in windows over 1050px wide*/
width: 1050px; 
}
#menu ul{  
padding:0;
margin:0;
}
#menu li{ width: 131.25px;
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}

 

You have 8 menu tabs (three have no text yet) so 1050 / 8 = 131.25px so use 131.25px. Some browsers will process decimal places, some will use 131px which will mean 2px spare at the right end which you probably won't notice.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...