How would I combine (A) Header Image with (B) Horizontal Nav Bar?

fishcuisine · December 30, 2010

Hello again,

Website: www.tokyo-sushi-chef-institute.com

These are the two elements of my Horizontal Nav Bar:

A. This is the image I have pasted on my DW MX file page.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

</html>

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

B.This is the Nav Bar that I wanted to place directly under Image and aligned left.

Question: How do I combine A and B? Which symbols do I keep and where would they go, I wonder? Thanks.

Regards

Rk

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

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

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

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

</body>

</html>

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

Andrea · December 30, 2010

Have you read any basic webdesign tutorials yet, as have been recommended? It'll help you understand basic structure:

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


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

This is your head section and appears only ONE time on every page.

This:

<body>

....

</body>
</html>

This is your body section, it also appears only once, and this is where all your content belongs.

Wickham · January 11, 2011

The code in your post has 32 li tags all coded side by side. It will be impossible to fit them all side by side.

You need to restrict the number (as you have done in the page in your link) or use a dropdown menu.

You say you want to combine the menu with the header, but the header image has lots of dark colors so it won't be easy to show text over it.

Your header image is shown in the code in your post as image%202/TCIlogo2.jpg where the %20 indicates that you have a space in the folder/directory name which is a bad thing. Use a - or _ to fill spaces.

A previous thread showed how to make a background-image for the menu links. Your online page at present has a h5 tag with the header image inside, followed by the menu links which isn't the way to code it.

Sign In

How would I combine (A) Header Image with (B) Horizontal Nav Bar?

Recommended Posts

fishcuisine

Link to comment

Share on other sites

Andrea

Link to comment

Share on other sites

Wickham

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Store

Support