471,605 Members | 1,355 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

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

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:collapse;}
#menuSystem table td { padding:0px; }

#mainTable table { border:1px outset #FFFFFF; border-collapse:collapse; }
#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!
Sep 11 '07 #1
7 2002
Hey, I still need help on this one. Let me know if you know how to do this. Thanks.

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:collapse;}
#menuSystem table td { padding:0px; }

#mainTable table { border:1px outset #FFFFFF; border-collapse:collapse; }
#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!
Sep 12 '07 #2
ronverdonk
4,258 Expert 4TB
Please show the code that sets up (fills) the menu entries.

Ronald
Sep 13 '07 #3
drhowarddrfine
7,435 Expert 4TB
Showing the css alone is only showing half the problem.
Sep 13 '07 #4
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.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="archeology,anthropology,ethnography,ethno logy,cultural,biological,medical,linguistic,lingui stics,social,adaptation,critical theory,language,paleoanthropology,economic,behavio ral ecology,semiotics,worldview,world view,indigeneity,indigenous,ethnographic,epidemiol ogy,zooarcheology,paleoecology,evolution,evolution ary,theory,primate,kinship," />
<meta name="description" content="Department 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/DHTMLMenuExpanderV2.js" type="text/javascript" language="javascript">


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

<script language="JavaScript" type="text/JavaScript">
<!--
function popup(url, id, width, height)
{
newwindow = window.open(url,id,'toolbar=no,scrollbars=yes,loca tion=no,statusbar=no,menubar=no,resizable=yes,widt h=' + width + ',height=' + height);
newwindow.focus();
}
-->
</script>

</head>

<body>
<div id="ku_accessibilty_skip">
<a href="#maincontent">



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

<div id="ku_container">
<!-- ==================================== Header ==================================== -->
<div id="ku_intro">
<div id="ku_topmostheader">
<div id="ku_header_links">KU Home | Kyou | Email | Blackboard | News | Calendar | Directories | Maps | KU A-Z
<div id="ku_header_logo" align="right">



</div>
<div id="ku_topbar">
<div id="ku_titlebar">
<div id="ku_kuaffiliation">

<a href="http://www2.ku.edu/~kuanth/" style="color:#666666;">Department of Anthropology

</div>
<div id="ku_searchbar">

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

<option value="anth" selected="selected">Search this site
<option value="kuweb">Search 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_searchtext" name="keyword" type="text" value="keyword/name" onfocus="this.value='';" size="20" />
<input class="ku_searchbutton" name="Search" type="image" src="http://www.ku.edu/images/kutemplate/searchbutton.gif" alt="Search" />
</form>
</div>

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

<div id="ku_frame">


<!-- ***************************************** Navigation ***************************************** -->
<div id="ku_contentleft">
<!-- DHTML Tree Menu Reference --->
<script type="text/javascript" language="JavaScript" src="/~kuanth/dmenu/DHTMLMenuExpanderV2.js">
<script type="text/javascript" language="JavaScript" src="/~kuanth/dmenu/sample2.js">
<LINK rel="stylesheet" type="text/css" href="/~kuanth/dmenu/vertical.css">
<!-- End of DHTML Tree Menu Reference --->

<!-- start menu --->

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

<TABLE>
<TR>KU Anthropology
<TR>About us
<TR> Archaeology
<TR>Biological Anthropology
<TR>Cultural Anthropology

<TR>Linguistic Anthropology
<TR>Medical Anthropology


<TABLE>
<TR>Academic Programs
<TR>Why Choose KU?
<TR>Undergraduate Program
<TR>Graduate Program
<TR>Curriculum

</TR>
<TR>Field Schools

<TABLE>
<TR>People
<TR>Faculty
<TR>Emeritus Professors
<TR>Department Affiliates
<TR>Departmental Staff
<TR>Alumni Portal

<TR>Current Graduate Students
</TR>

<TABLE>
<TR>Resources
<TR>Funding & Scholarships
<TR>Pubs In Anth
<TR>Distance Learning
<TR>Biological Anthropology Lab
<TR>Anthropological 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>Newsletter
<TR>Current Events

</TABLE>

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

</div>
<div id="ku_container_nav">
<!-- ***************************************** Main Content ***************************************** -->
<div id="ku_contentcenter">

<div id="ku_maincontent">
<a name="maincontent">
<!-- ***************************************** Begin Editable ***************************************** -->

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

<html>
<head>
<title>Welcome 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:jross@ku.edu">Contact Us

<td width="60%">
<a href="http://www.ku.edu/~kuanth/">Anthropology 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.png" 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]
Sep 14 '07 #5
drhowarddrfine
7,435 Expert 4TB
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.
Sep 14 '07 #6
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.
Sep 15 '07 #7
drhowarddrfine
7,435 Expert 4TB
Under articles above, find CSSPlay and Listamatic. If Listamatic isn't there, google for it.
Sep 16 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by David Rwj Cherry CS2000 | last post: by
2 posts views Thread by Harlan Messinger | last post: by
3 posts views Thread by sumit | last post: by
reply views Thread by slakmagik | last post: by
reply views Thread by MichaelMortimer | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.