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

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

Recommended Posts

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>

 

 

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

<title>Untitled Document</title>

</head>

 

<body>

<img src="image%202/TCIlogo2.jpg" width="1050" height="150"></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>

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

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

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.

Share this post


Link to post
Share on other sites

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.

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