PDA

View Full Version : Help with padding/margin in navbar

odbqpo
11-08-2007, 03:49 AM
Hello, I need help eliminating the space between the tabs in my navbar and the content below. Please excuse the probably incorrect code, I'm new at this. The site is for my wife's violin studio.

http://w3.cnm.edu/~jcram1/kcvs/test/firefox.tiff


Site is here: http://w3.cnm.edu/~jcram1/kcvs/test/index.html

HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

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

<title>
Kristin Cram's Violin Studio
</title>

<link href="kcvs_style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="outer">

<img src="images/kcvs_main_banner.gif" alt="Kristin Cram's Violin Studio" />

<ul id="navbar">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="kcvs_about.html">Kristin Cram</a></li>
<li><a href="#nogo">Suzuki Method</a></li>
<li><a href="#nogo">Studio Policy</a></li>
<li><a href="kcvs_calendar">Calendar</a></li>
<li><a href="#nogo">F.A.Q.</a></li>
</ul>

<div id="content">
<h2>Announcements!</h2>
<ul style="text-align:center">

<li>
The Novemeber 17th pillow concert has been cancelled and is rescheduled for April 5th.
</li>
</ul>

<hr />

<p class="content" style="text-align:center">
<a href= "http://maps.google.com/maps?f=q&amp;hl=en&amp;q=7108+Way+Cross+Ave+NW,+Albuquerque,+NM+87120&amp;ie=UTF8&amp;z=15&amp;ll=35.103795,-106.716385&amp;spn=0.018187,0.032315&amp;om=1&amp;iwloc=addr&amp;mid=1173040952" target="_blank">Located near Coors and I-40. Click here for map.</a>
</p>

<p class="content">

<span class="first">K</span>ristin Cram teaches violin lessons in her studio which is located on the
Westside of Albuquerque, New Mexico near Coors and I-40.
<br /><br />
<span class="first">M</span>rs. Cram has a Bachelor of Music Education and Violin Performance degree from
Northern Arizona University. She is registered with the Suzuki Association of the Americas, Books 1-10
</p>
</div>

<div id="footer">
Copyright &copy; 2007 Kristin Cram
</div>

</div> <!-- outer closing div -->
</body>
</html>


CSS body {
text-align:center;
background-color:#CCBF7A;
color:#762B1B;
}


img {
border:none;
}


h2 {
text-align:center;
}


hr {
border: none 0;
border-top: 1px solid #762B1B;/*the border*/
width: 50%;
height: 1px;/*whatever the total width of the border-top and border-bottom equal*/
text-align:center;
}


#outer {
position:relative;
margin: 0 auto;
background-color:#FFFFFF;
border: 4px solid #762B1B;
width:800px;
padding: 20px;
}


#navbar {
color: #000;
border-bottom: 1px solid #762B1B;
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }


#navbar li {
display: inline;
overflow: hidden;
list-style-type: none; }


#navbar a, a.active {
color: #FFFFFF;
background-color: #CCBF7A;
font: bold 1em verdana, arial, sans-serif;
border-top:1px solid #762B1B;
border-right:1px solid #762B1B;
border-left:1px solid #762B1B;
padding: 2px 5px 0px 5px;
margin: 0px;
text-decoration: none; }


#navbar a.active {
background-color: #EFECCA;
border-bottom: 2px solid #EFECCA;
color:#762B1B;
}


#navbar a:hover {
color: #762B1B;
background-color: #EFECCA; }


#navbar a:visited {
color: #762B1B; }


#navbar a.active:hover {
background-color: #EFECCA;
color: #762B1B; }


#content {
font-family:Times New Roman, Times, serif;
text-align:justify;
line-height:1.3em;
background-color: #EFECCA;
padding: 20px;
border: 1px solid #762B1B;
border-top: none;
z-index: 2;
}


.first {
font-family:Times New Roman, Times, serif;
color:#4F1B12;
font-size:18pt;
font-weight:bold;
}



#content a {
text-decoration: none;
color: #E8E9BE; }


#content a:hover { background-color: #898B5E; }


#footer {
background-color:#FFFFFF;
width:800px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
color:#000000;
line-height:2em;
padding-top:10px;
}

Code for the tabbed menu adapted from this page: http://nontroppo.org/test/tab1.html
I assume it is something easy, but I can't wrap my head around it.
Thank you very much!

p.s. This site is a valuable resource for newbies, without it my site would be unattractive and probably unusable.
abduraooft
11-08-2007, 09:39 AM
First of all, add
*{
margin:0;
padding:0;
} (then you have to set the required margin/padding explicitly for required elements )
And your #navbar has 12px top margin
margin:12px 0px 0px;
Excavator
11-08-2007, 06:00 PM
Hello odbqpo,
I'm not sure this is really a solution...#navbar a {
color: #FFFFFF;
font: bold 1em verdana, arial, sans-serif;
background-color: #CCBF7A;
border-top:1px solid #762B1B;
border-right:1px solid #762B1B;
border-left:1px solid #762B1B;
padding: 2px 5px 0 5px;
margin: 0 -2px;
text-decoration: none;}

It works but I don't know why. I can't seem to find what's creating the space between the li's....
It works without the negative margin if you give a width to li. Like this: http://www.nopeople.com/CSS/menu_buttons_horizontal/no_images.html
jcdevelopment
11-08-2007, 07:44 PM
You may want to try a line-height: Attribute, that may be the cause of all of the space between the li's.
effpeetee
11-08-2007, 08:25 PM
#navbar {
color: #000;
border-bottom: 1px solid #762B1B;
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }

Remove the border.

Frank
Excavator
11-08-2007, 09:04 PM
Duh!
Re-read the question. Still don't know what the space between the li's is caused by but I see now that you don't want to get rid of it.

Try this to get rid of the gap below your nav:

#navbar a, a.active {
color: #FFFFFF;
background-color: #CCBF7A;
border-bottom: 2px solid #CCBF7A;
font: bold 1em verdana, arial, sans-serif;
border-top:1px solid #762B1B;
border-right:1px solid #762B1B;
border-left:1px solid #762B1B;
padding: 2px 5px 0px 5px;
margin: 0px;
text-decoration: none; }
odbqpo
11-09-2007, 04:40 AM
Thank you so much! I really appreciate your time and effort. The "space" is gone, but in it's place is a an extra pixel of border. It looks great in Opera but strange in FF and Safari.

Here is the newer css and the link: http://w3.cnm.edu/~jcram1/kcvs/test/index.html


*{
margin:0;
padding:0;
}

body {
text-align:center;
background-color:#CCBF7A;
color:#762B1B;
}


img {
border:none;
}


h2 {
text-align:center;
}


hr {
border: none 0;
border-top: 1px solid #762B1B;/*the border*/
width: 50%;
height: 1px;/*whatever the total width of the border-top and border-bottom equal*/
text-align:center;
}


#outer {
position:relative;
margin: 0 auto;
background-color:#FFFFFF;
border: 4px solid #762B1B;
width:800px;
padding: 20px;
}


#navbar {
color: #000;
border-bottom: 1px solid #762B1B;
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px;}


#navbar li {
display: inline;
overflow:hidden;
list-style-type: none; }


#navbar a, a.active {
color: #FFFFFF;
background-color: #CCBF7A;
font: bold 1em verdana, arial, sans-serif;
border-top:1px solid #762B1B;
border-right:1px solid #762B1B;
border-bottom:1px solid #762B1B;
border-left:1px solid #762B1B;
padding: 2px 5px 0px 5px;
margin: 2px;
text-decoration: none; }


#navbar a.active {
background-color: #EFECCA;
border-bottom: 2px solid #EFECCA;
color:#762B1B;
}


#navbar a:hover {
color: #762B1B;
background-color: #EFECCA; }


#navbar a:visited {
color: #762B1B; }


#navbar a.active:hover {
background-color: #EFECCA;
color: #762B1B; }


#content {
font-family:Times New Roman, Times, serif;
text-align:justify;
line-height:1.3em;
background-color: #EFECCA;
padding: 20px;
border: 1px solid #762B1B;
border-top: none;
z-index: 2;
}


.first {
font-family:Times New Roman, Times, serif;
color:#4F1B12;
font-size:18pt;
font-weight:bold;
}



#content a {
text-decoration: none;
color: #E8E9BE; }


#content a:hover { background-color: #898B5E; }


#footer {
background-color:#FFFFFF;
width:800px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
color:#000000;
line-height:2em;
padding-top:10px;
}


Thanks again for everybody's help!