English Deutsch Français Italiano Español Português 繁體中文 Bahasa Indonesia Tiếng Việt ภาษาไทย
All categories

Here's the link where I'm trying to tweak some things on a page template set up by a friend of mine:

http://jesusfreak.com/page.php

The thing I'm trying to figure out is how to change the spacing on menu.css, as follows:

#top_nav {
width: 100%;
background: #000;
height: 30px;
padding: 0px;
margin: 0px auto;
border-bottom: 2px solid #555;
}

#top_nav ul{
list-style-type:none;
padding:0px;
margin:0px auto;
height: 30px;
z-index: 1000;
text-align: center;
/*
position: absolute;
left: 590px;
*/
}
/* make the top level links horizontal and position relative so that we can position the sub level */
#top_nav li{
float:left;
position:relative;
z-index:99;
background: #373737;
width: 9.9%;
border-right: 1px solid #494949;
}

/* use the table to position the dropdown list */
#top_nav table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:0px;
top:30px;
}

2007-06-10 21:54:33 · 1 answers · asked by Pastor Chad from JesusFreak.com 6 in Computers & Internet Programming & Design

/* style all the links */
#top_nav ul a, #top_nav ul a:visited {
display:block;
height:relative;
line-height: 28px;
padding:0px 12px 0px 12px;
overflow: visible;
color:#FFFC00;
background: transparent;
text-decoration:none;
margin:0px;
text-align:center;
border: 1px solid #494949;
}
/* style the links hover */
#top_nav ul a:hover{
color:#fff;
background:#000;
}

/* hide the sub level links */
#top_nav ul ul {
visibility:hidden;
position:absolute;
height:0;

width: 100%;
left: 0px;
}
#top_nav ul ul li {
width:100%;
font-size: 83%;
padding: 0px;
margin: 0px;
left: -1px;
}

#top_nav ul ul a {
padding: 0px 5px 0px 5px;
margin: 0px;
color: #f2f2f2;
}

/* make the sub level visible on hover list or link */
#top_nav ul li:hover ul,
#top_nav ul a:hover ul{
visibility:visible;
}

2007-06-10 21:54:48 · update #1

If I change line-height: 28px; to line-height: 12px; it skews the height of the drop-down box and leaves a blank space at the bottom of the main box yet the height of the drop-down boxes themselves stay the same.

2007-06-10 22:28:15 · update #2

1 answers

I dont know which of these you want this in but the basic code is

Looks like you have one set to 28px but I dont know that that is the one you want to change.. you can add others in the other tags.

You can see a working example at
http://freecsstutorial.com/fct-csslinespacing.htm

You just need to set the "line height" where you want it.
Here is another really good method
http://alistapart.com/articles/horizdropdowns

God Bless your efforts! :)

2007-06-11 02:50:14 · answer #1 · answered by Tracy L 7 · 0 0

fedest.com, questions and answers