fishcuisine Posted December 30, 2010 Report Share Posted 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> <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> ----------------------------------------------- Quote Link to comment Share on other sites More sharing options...
Andrea Posted December 30, 2010 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 11, 2011 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.