Can someone help me turn this vertical nav to a horizontal?

**romeorion** · Sep 12 '07, 10:43 PM

Hey, I still need help on this one. Let me know if you know how to do this. Thanks.

Originally posted by romeorion

Hey, I'm new to CSS, working on a website I inherited. I have this css nav code. It's vertical and everyone want it to be horizontal. Can someone point out how to change this?

body { background-color: #FFFFFF; margin:0px;}

#menuSystem { left: 0px; top: 45px; z-index: 1;}
#menuSystem table { font-family:Arial; font-size: 9pt; border-collapse:collap se;}
#menuSystem table td { padding:0px; }

#mainTable table { border:1px outset #FFFFFF; border-collapse:collap se; }
#mainTable th { background-color: #FFFFFF; padding-left: 3px; padding-right: 3px; width:130; text-align:left; color:#005984}
#mainTable table td { background-color: #FFFFFF; padding-left: 3px; padding-right: 3px; text-align:left;}

#mainTable a { color: #005984 ; padding-left: 0px; padding-right: 3px; font-family: Arial; font-size: 9pt; text-decoration: none }
#mainTable a:link { color: #005984 ; padding-left: 3px; padding-right: 3px; font-family: Arial; font-size: 9pt; text-decoration: none }
#mainTable a:hover { color: #FFFFFF ; padding-left: 3px; padding-right: 3px; background-color:#003366; font-family: Arial; font-size: 9pt; text-decoration: none; display:block; }

I would greatly appreciate the help. Thanks!

**ronverdonk** · Sep 13 '07, 12:31 PM

Please show the code that sets up (fills) the menu entries.

Ronald

**drhowarddrfine** · Sep 13 '07, 03:00 PM

Showing the css alone is only showing half the problem.

**romeorion** · Sep 14 '07, 09:16 PM

here's the entire home page. I have another problem with this site now too. I have added pages to our faculty page, and the nav isn't showing up on these pages. It's strange. Anyway, Here's the home page with nav and code around it.

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dt d">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="archeo logy,anthropolo gy,ethnography, ethnology,cultu ral,biological, medical,linguis tic,linguistics ,social,adaptat ion,critical theory,language ,paleoanthropol ogy,economic,be havioral ecology,semioti cs,worldview,wo rld view,indigeneit y,indigenous,et hnographic,epid emiology,zooarc heology,paleoec ology,evolution ,evolutionary,t heory,primate,k inship," />
<meta name="descripti on" content="Depart ment of Anthropology at the University of Kansas " />
<title>KU: Department of Anthropology

<link href="http://www.ku.edu/css/main_ku.css" rel="stylesheet " type="text/css" title="KU Style" />

<style type="text/css">
@import "/~kuanth/dmenu/vertical.css" ;
</style>

<script src="/~kuanth/dmenu/DHTMLMenuExpand erV2.js" type="text/javascript" language="javas cript">

<script src="/~kuanth/dmenu/sample2.js" type="text/javascript" language="javas cript">

<script language="JavaS cript" type="text/JavaScript">

</script>

</head>

<body>
<div id="ku_accessib ilty_skip">
<a href="#maincont ent">

</div>
<a name="top">

<div id="ku_containe r">

<div id="ku_intro">
<div id="ku_topmosth eader">
<div id="ku_header_l inks">KU Home | Kyou | Email | Blackboard | News | Calendar | Directories | Maps | KU A-Z
<div id="ku_header_l ogo" align="right">

</div>
<div id="ku_topbar" >
<div id="ku_titlebar ">
<div id="ku_kuaffili ation">

<a href="http://www2.ku.edu/~kuanth/" style="color:#6 66666;">Departm ent of Anthropology

</div>
<div id="ku_searchba r">

<div id="ku_searchfo rm" align="right">
<form action="http://www.ku.edu/cgiwrap/http/send_search/index.php" class="ku_searc h" method="post">
<label for="searchtype ">
<select id="searchtype " name="site">

<option value="anth" selected="selec ted">Search this site
<option value="kuweb">S earch KU Web

<option value="kupeople ">Search KU People
<option value="kuevents ">Search KU Events
<option value="kuinfo"> Search KU Info
</select>

<label for="searchtext ">
<input id="searchtext " class="ku_searc htext" name="keyword" type="text" value="keyword/name" onfocus="this.v alue='';" size="20" />
<input class="ku_searc hbutton" name="Search" type="image" src="http://www.ku.edu/images/kutemplate/searchbutton.gi f" alt="Search" />
</form>
</div>

</div>
</div>
</div>

<div id="ku_frame">


<div id="ku_contentl eft">

<script type="text/javascript" language="JavaS cript" src="/~kuanth/dmenu/DHTMLMenuExpand erV2.js">
<script type="text/javascript" language="JavaS cript" src="/~kuanth/dmenu/sample2.js">
<LINK rel="stylesheet " type="text/css" href="/~kuanth/dmenu/vertical.css">




<DIV id="menuSystem" >
<TABLE id="mainTable" >
<TR>

<TABLE>
<TR>KU Anthropology
<TR>About us
<TR> Archaeology
<TR>Biologica l Anthropology
<TR>Cultural Anthropology

<TR>Linguisti c Anthropology
<TR>Medical Anthropology

<TABLE>
<TR>Academic Programs
<TR>Why Choose KU?
<TR>Undergradua te Program
<TR>Graduate Program
<TR>Curriculu m

</TR>
<TR>Field Schools

<TABLE>
<TR>People
<TR>Faculty
<TR>Emeritus Professors
<TR>Departmen t Affiliates
<TR>Departmenta l Staff
<TR>Alumni Portal

<TR>Current Graduate Students
</TR>

<TABLE>
<TR>Resources
<TR>Funding & Scholarships
<TR>Pubs In Anth
<TR>Distance Learning
<TR>Biologica l Anthropology Lab
<TR>Anthropolog ical Research and Cultural Collections

<TR>Study Abroad
<TR>KU Libraries
<TR>Lawrence Information
<TR>KU Home
<TR>More Links

<TABLE>
<TR>News
<TR>What's Up?
<TR>Event Calendar

<TR>Newslette r
<TR>Current Events

</TABLE>

</TD>
</TABLE>
</DIV>

</div>
<div id="ku_containe r_nav">

<div id="ku_contentc enter">

<div id="ku_maincont ent">
<a name="mainconte nt">


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<html>
<head>
<title>Welcom e To The KU Anthropology Department Website!
<meta http-equiv="Content-Type" content="text/html; charset= utf-8">
<link rel="stylesheet " type="text/css" href="/~kuanth/anth2.css">
<!--[if IE]>
</head>

<body>

<img align="center" src="/~kuanth/anthtitle.jpg">

</body>
</html>

<tr>
<hr>
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td width="20%"> The University of Kansas

Department of Anthropology<br >
Lawrence, KS 66045<br>
Phone: (785) 864-4103<br>
Fax: (785) 864-5224<br>
<a href="mailto:jr oss@ku.edu">Con tact Us

<td width="60%">
<a href="http://www.ku.edu/~kuanth/">Anthropol ogy Home
<a href="http://www.ku.edu/">KU Home | Webmaster
<br>Contents of this site are © Copyright 2007 University of Kansas. All rights reserved.</center></td>

<td width="%20">

<a href="http://getfirefox.com/" title="Get Firefox - The Browser, Reloaded."><img align="right" src="http://www.mozilla.org/products/firefox/buttons/firefox_80x15.p ng" width="80" height="15" border="0" alt="Get Firefox"></a>

<a href="http://www.adobe.com/products/acrobat/readstep2.html" >[img]/%7Ekuanth/getacrobat.gif[/img]
</td></tr></table>
</tr>
</tbody>
</table>[/HTML]

**drhowarddrfine** · Sep 14 '07, 10:42 PM

Do you mean all that stuff down the left side? If so, you'll need a multi-level menu which can be done in either css or javascript. If that's what you want, I can steer you to some example sites.

**romeorion** · Sep 15 '07, 10:43 PM

Originally posted by drhowarddrfine

Do you mean all that stuff down the left side? If so, you'll need a multi-level menu which can be done in either css or javascript. If that's what you want, I can steer you to some example sites.

Yeah, at this point it is a nav bar on the left side of the screen in css. I would like to have the menus displayed across the top of the screen.

**drhowarddrfine** · Sep 16 '07, 12:04 AM

Under articles above, find CSSPlay and Listamatic. If Listamatic isn't there, google for it.

Can someone help me turn this vertical nav to a horizontal?

Can someone help me turn this vertical nav to a horizontal?

Comment

Comment

Comment

Comment

Comment

Comment

Comment