Jump to content

How do I change font type and reduce font size?


fishcuisine

Recommended Posts

I’m back…

 

As you can see below, I just might make it into Little League.

 

Question: Where should I place the code to reduce the size of print?Since type size is too large, I can not place in the complete Menu wordings.

 

Also, if I wanted to change the font to Arial font?

How would I reflect that?

 

fish

 

CODE BELOW:

 

<!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{

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{

width:110px;

height: 22px;

display: block;

text-decoration:none;

text-align: center;

line-height: 22px;

background-color: #660033;

color: white;

}

#menu li a:hover{

background-color: #663366;

}

#menu ul ul{

position: absolute;

top: 22px;

visibility: hidden;

}

 

</style>

 

</head>

<body>

 

<div id="menu">

<ul>

<li><a href="#nogo">HOME</a>

</ul>

</li>

<li><a href="#nogo">OUR MISSION</a>

</li>

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

</li>

<li><a href=”#nogo”>METROPOLIS</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>

Link to comment
Share on other sites

Place this code immediately after <style type="text/css"> :-

body {
font-family: arial, sans-serif; line-height: 1.3;
color: #000000;
font-size: 12px;
font-weight: normal;
}

with a color of your choice (#00000 is black) and change the font-size to what you want.

 

If you only want the font to apply to the menu, change body to #menu

Link to comment
Share on other sites

Hello Wickham,

 

It works! Appreciate it.

 

But you probably already saw this coming...

 

As you know each box has 122px width, which means there are uneven gaps between MENU ITEMS

 

i.e. HOME OUR MISSION CHEF DIPLOMA COURSE LOCATION INQUIRE

QUESTION: Where would I place codes to even out the spacing between MENU ITEMS?

 

i.e. HOME OUR MISSION CHEF DIPLOMA COURSE LOCATION INQUIRE

 

Tnks again,

fish

 

CURRENT 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{

width:122px;

height: 22px;

display: block;

text-decoration:none;

text-align: center;

line-height: 22px;

background-color: #660033;

color: white;

}

#menu li a:hover{

background-color: #663366;

}

#menu ul ul{

position: absolute;

top: 22px;

visibility: hidden;

}

 

</style>

 

</head>

<body>

 

<div id="menu">

<ul>

<li><a href="#nogo">HOME</a>

</ul>

</li>

<li><a href="#nogo">OUR MISSION</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>

Link to comment
Share on other sites

Where would I place codes to even out the spacing between MENU ITEMS?

If you need each item to have the same width as all your other nav items, you can't. However, if different nav items can have different widths, you can do this:

 

-- remove "width:122px; " from "#nav li a"

-- add "padding: 0 10px;" to "#nav li a". This adds 10 px padding to the left/right of the nav element, and you can then adjust as necessary.

Link to comment
Share on other sites

If you need each item to have the same width as all your other nav items, you can't. However, if different nav items can have different widths, you can do this:

 

-- remove "width:122px; " from "#nav li a"

-- add "padding: 0 10px;" to "#nav li a". This adds 10 px padding to the left/right of the nav element, and you can then adjust as necessary.

Link to comment
Share on other sites

Hello Wickham,

 

I replaced “width:122px;” with “padding:0 10px:” . I changed the 0 and 10px to various numbers 10 20 15 etc. but no change.

I notice you have #nav li a" and I have it #menu li a" ?

 

Result is the wordings are stuck together and in two levels of Nav Bar…?

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

 

HOME

OUR MISSIONCHEF DIPLOMA COURSEMETROPOLIS TOKYOLOCATIONINQUIRE

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

 

 

<!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: 22px;

background-color: #660033;

color: white;

}

#menu li a:hover{

background-color: #663366;

}

#menu ul ul{

position: absolute;

top: 22px;

visibility: hidden;

}

 

</style>

 

</head>

<body>

 

<div id="menu">

<ul>

<li><a href="#nogo">HOME</a>

</ul>

</li>

<li><a href="#nogo">OUR MISSION</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>

Link to comment
Share on other sites

Did the following:

 

-- remove "width:122px; " from "#nav li a"

-- add "padding: 0 10px;" to "#nav li a".

 

Nothing happened.

 

Added 5px to other padding.I get the spacings but there are gaps between Menu Items...? What can I say...?

 

<!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:5;

margin:0;

}

#menu ul{

padding:5;

margin:0;

}

#menu li{

position: relative;

 

 

float: left;

list-style: none;

margin: 0;

padding:5;

}

#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;

}

 

</style>

 

</head>

<body>

 

<div id="menu">

<ul>

<li><a href="#nogo">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>

Link to comment
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...
×
×
  • Create New...