How do I change font type and reduce font size?

fishcuisine · December 17, 2010

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>

<title>Sushi Menu</title>

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

<ul>

</ul>

</li>

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

</li>

</li>

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

</li>

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

</li>

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

</li>

</li>

</li>

</li>

</ul>

</div>

</body>

</html>

Wickham · December 17, 2010

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

fishcuisine · December 18, 2010

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>

<title>Sushi Menu</title>

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

<ul>

</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>

</li>

</li>

</ul>

</div>

</body>

</html>

falkencreative · December 18, 2010

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.

fishcuisine · December 21, 2010

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.

fishcuisine · December 21, 2010

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>

<title>Sushi Menu</title>

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

<ul>

</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>

</li>

</li>

</ul>

</div>

</body>

</html>

falkencreative · December 21, 2010

Sorry, I meant #menu, not #nav. You can't have quotes around your CSS. This:

"padding:0 10px;"

needs to be

padding:0 10px;

The quotes were only intended to indicate what code you needed to add.

fishcuisine · December 22, 2010

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>

<title>Sushi Menu</title>

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

<ul>

</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>

</li>

</li>

</ul>

</div>

</body>

</html>

falkencreative · December 22, 2010

Please see my last post. You still have quotes around "padding: 0 10px;".

fishcuisine · December 22, 2010

Hello there,

You know what? What? You can't have quotes around your CSS.

I missed that! Without the quotes, it works P e r f e c t l y!

I really must brush up on my typing skills.

Regards

fish... deep fried with tartar sauce

fishcuisine · December 22, 2010

Last two items. That should do it. I hope...

-- When I place my arrow over each Menu Item, there is no change of hover color. It did it before.

-- Since my Header Image is 1025 px in length, I have to extend the Nav Bar to match (1025 px)

Right now it is about 6 inches in length.

Tnks again...

fishcuisine · December 22, 2010

Guess what? What?

If I do the F12 routine, the hover color works

I forgot about that!

Sign In

How do I change font type and reduce font size?

Recommended Posts

fishcuisine

Wickham

fishcuisine

falkencreative

fishcuisine

fishcuisine

falkencreative

fishcuisine

falkencreative

fishcuisine

fishcuisine

fishcuisine

Join the conversation

Browse

Activity

Store

Support