473,387 Members | 1,590 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 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 2072
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

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

Similar topics

3
by: David Rwj Cherry CS2000 | last post by:
is there any way to disable or lock vertical scroll bars on a browser window? im a newbie and i just don't want them to appear on my screen. sometimes they appear on IE but not on mozilla. any...
2
by: Harlan Messinger | last post by:
Is IE6 known to have a bug whereby a vertical table cell border (with border-collapse: collapse), instead of stopping at the bottom of a horizontal border, sticks up into it by one pixel? My other...
3
by: sumit | last post by:
Hi, I made a data grid vertically as well as horizontal scrollable as number of columns are very large!! But when i scroll horizontally then header is not visible as it also gets scrolled...
0
by: Eric | last post by:
Is there a way to turn off horizontal scrolling while leaving vertical scrolling for a TableLayoutPanel.
3
by: WB | last post by:
Hi, I have a RadioButtonList that display a table of my products like so: <asp:RadioButtonList ID="RblProducts" runat="server" CssClass="text" RepeatColumns="4" RepeatDirection="Horizontal" />...
3
by: lolo | last post by:
hello. happy new year. I'm trying to build a website for my wife and she is adament on having a horizontal thumbnail scrolling div. great. I have a good vertical scrolling thing, but can't...
0
by: slakmagik | last post by:
Is there a way to declare horizontal positioning (without referring to or changing vertical) or vertical positioning (without referring to or changing horizontal) in a single declaration? ...
1
by: bai | last post by:
In my page, I have both horizontal and vertical scroll bars. I want to to some action on Vertical scrollbar click/move and some other action on horizontal scrollbar move/click. How to know whether...
8
by: ayamopamo | last post by:
Hi- I am trying to center a web page. It seems like this should be very simple to do, but apparently it isn't my day. I have successfully centered the background by calling it in the css body tag:...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

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.