need some assistance with a nav bar

ROCKINDANO · October 14, 2011

I need some assistance with a navbar. It seems that i can't get the right side to get all the way to the right. this is my css code for the nave bar:

#navcontainer ul
{
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
height:39px;
font-family: georgia, Tahoma, Helvetica, Myriad;
background: url(../images/navbg.png) repeat-x left #900;
border-bottom: 3px solid #999;
margin-bottom: 3px;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding-top: 15px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
color: #525252;
text-decoration: none;
float: left;
border-right: 1px solid #B0B4AF;
}

#navcontainer ul li a:hover
{
background:url(../images/hovernavbg.jpg) repeat-x;
color: #036;
}

this is the code for my header code:

        	<div id="navcontainer"> 
            <ul>
            	<li><a href="index.php"> HOME </a></li>
                <li><a href="meetv.php"> ABOUT V </a></li>
                <li><a href="district.php"> DISTRICT 34 </a></li>
                <li><a href="endorsements.php">ENDORSEMENTS</a></li>                
                <li><a href="news.php">NEWSROOM</a></li>
                <li><a href="getinvolved.php">GET INVOLVED</a></li>
                <li><a href="#" target="_blank" style="background: url(images/donatebg.jpg) repeat-x; color:#CCC;">DONATE NOW!</a></li>

            </ul>
            </div>

it seems like there is a padding on the right and if i increase the padding to the list is pushes the last link on the list down.

any advice?

Frank P · October 14, 2011

Remove the float:left for the <ul> and the <a href>, because they don't do anything but get you into trouble. The display:inline for the <li> is enough to line up the menu items horizontally. Unless that cures it, post the whole relevant code, in one code block, from <!doctype...> to </html>, because your code is not enough.

ROCKINDANO · October 22, 2011

still dealing with this bug and its killing me!!!!!!!!

having a padding on the right side of the navigation bar. please see screen shot attached. below is my code for css and page.

@charset "utf-8";
/* CSS Document 
CSS layout by Danny Vera
Copyright 2011
Villalobos Website
*/

/* Hides from IE5-mac \*/
* html .leftbar {height: 1%;}
/* End hide from IE5-mac */
/* \*/
* html #main_content { margin-left: 0; height: 1%; }
* html #left_bar { margin-right: 7px; }
/* */

* {margin: 0px auto; padding:0;}
html {
margin: 0 auto;
padding:0;
}
body {
font-family: Helvetica, Bdaskerville, Tahoma, Myriad;
font-size:12px;
margin-top: auto;
background: #006;
color:#666666;
background:url(../images/homebackground.jpg) center no-repeat #131e43 fixed;
}
.contactlist, ul li {
list-style:none;
list-style-image:none;
display:block;
font-size:14px;
}
#container {
margin:0, auto;
padding:0px;
width:960px;
height: 0, auto;
}

/****************HEADER ELEMENTS(*************************/
#header {
position: relative;
height: 176px;
border:0px solid #00CC00;
width: 960px;
}
/****************END HEADER ELEMENTS(*************************/

/****************NAVIGATION ELEMENTS***************************/
#navlinks {
width: 960px;
height: 38px;
background: url(../images/navbg.png) repeat-x left #900;
font-family: georgia, Tahoma, Helvetica, Myriad;
border-bottom:4px solid #CCC;

}
#navlinks ul li a:hover {
text-decoration: none;
padding-left:25px;
padding-right:25px;
padding-top:20px;
padding-bottom:16px;
border-left: 1px solid #b7b7b7;
font-size: 13px;
line-height:35px;
color: #525252;
background:url(../images/hovernavbg.jpg) repeat-x; 
}
#navlinks ul {
padding:0px;
margin-left:0px;
list-style:none;
}

#navlinks ul li {
display:inline;
}
#navlinks ul li a {
text-decoration: none;
padding-left:25px;
padding-right:25px;
padding-top:20px;
padding-bottom:16px;
border-left: 1px solid #b7b7b7;
font-size: 13px;
line-height:35px;
color: #525252;
}

/* Fix IE. Hide from IE Mac \*/
* html #navlinks  ul li { float: left; height: 1%;}
* html #navlinks ul li a { height: 1%; top:1%;}
/* End */


/******************THIS IS THE STAY CONNECTED BAR****************************/
#connected {
width:960px;  
margin-top: 150px;
/*	background:url(../images/stayconnected.png) no-repeat center; 
*/	height:15px; 
color:#FFFFFF; 
text-align:center;
padding: 0px;
}


.social ul {
margin-right: 100px;
padding:0;
list-style:none;
float: right;
}

.social ul li {
display: inline;
margin-left:20px;
position:relative;
}
.social ul li a {
text-decoration: none;
}
/*********************SLIDESHOW CONTAINERS********************************/
#slideshowbox1 {
width:960px; 
margin-top:0px;
margin-left: -10px; 
height:305px; 
color: #0C0; 
text-align:center; 
padding: 0px; 
position: relative;
background: #fff;
}
#slideshowbox2 {
width:841px;
height:287px; 
margin-top:10px; 
position:relative;
}

#bodyholder {
margin-top:0px; 
height: 0, auto;
padding:0px;
overflow:hidden;
width: 960px;
background: #FFF;
font-family: Helvetica, Bdaskerville, Tahoma, Myriad;
}
#home_page_info {
padding-left: 10px; 
padding-right:10px; 
padding-bottom: 10px;
margin-top:5px; 
height: 0, auto;
width: 940px;
overflow:hidden;
font-family: Helvetica, Bdaskerville, Tahoma, Myriad;
margin-bottom:0px;
}
#home_page_info p { 
font-family: Helvetica, Bdaskerville, Tahoma, Myriad;
font-size: 15px;
line-height:17px;
color: #666;
text-align:justify;
padding-bottom:10px;

}
#right_hold {
position: relative;
float: right; 
width: 275px;
padding:5px;
text-align:center; 
margin-right:-5px;
margin-top:20px;
}
#right_hold a {
text-decoration: none;
color: #0D2746;
}
#right_hold a:hover {color: #036;}
#left_hold {
float:left; 
width: 655px;  
padding:5px;
margin-top:20px;
margin-left:-5px;
}
h1 {
font-size:19px; 
color: #0D2746;
padding-bottom:5px; 
font-family:Georgia, "Times New Roman", Times, serif; 
font-weight:bold; 
}
h3 {
margin-top:10px;
padding-left: 10px;
font-size:17px;
color: #0D2746; 
font-family:Georgia, "Times New Roman", Times, serif; 
font-weight:bold; 
}
h4 {
margin-top:0px;
padding-left: 10px;
font-size:12px;
color: #666; 
font-family:Georgia, "Times New Roman", Times, serif; 
font-weight:bold; 
}

#left_hold p {
padding:10px;
}
#left_hold a {
text-decoration: none;
color: #0D2746;
}
#left_hold a:hover {color: #036;}
#left_hold img {margin:5px;}
.leftlinks a {color:#F00; font-size:11px;}
#page_info {
padding: 15px; 
padding-bottom: 50px;
margin-top:5px; 
height: 0, auto;
width: 940px;
overflow:hidden;
font-family:  Helvetica, Arial, Tahoma, Myriad;
background: #FFF;
margin-bottom:25px;
}
#page_info p {
font-family:  Helvetica, Arial, Tahoma, Myriad;
font-size: 13px;
line-height:17px;
color:#666;
text-align:justify;
}
#page_info ul li {
line-height:17px;
list-style:disc;
margin-left:50px;
}
/*****************************FOOTER OF PAGE *********************/
#footer {
position: absolute;
width:960px;
height:100px;
margin: 0 auto;
color: #0F5BB1;
padding-top:20px;
padding-bottom: 0px;
background:url(../images/footerbg.png) no-repeat center;
}
#footer a {
color: #7681ce;
text-decoration: none;
font-size:11px;
text-align:center;
}
#footer a:hover {color: #FFF;}
#footer ul li {
display:inline;
font-size:17px;
text-align:center;
}

#footer p {
font-family: Arial, Tahoma, Helvetica, Myriad;
color: #0F5BB1;
font-size:11px;
text-align: center;
padding-right:10px;
}
table {
border:0px solid #000; 
}
tr td {
color:#666;
font-size: 13px;
}
.subbottom {
float: left;
width: auto;
padding:10px;
border: 0px solid #999;
margin-left:25px; margin-top:0, auto;

}

.bottompart ul li {
line-height:17px; margin-left:0px;
}
.bottompart ul li a {
font-size: 13px;
color: #999999;
}

.bottompart li a:hover {
text-decoration:underline;
color:#333333;
}
.floatright
{
float: right;
clear:both;
margin:0px;
clear: right;
}
.floatleft {
float: left;
clear: both;
margin: 0;
clear: left;
}

<!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 name="Keywords" content="v,villalobos, congress, " />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Armando Villalobos &#8212; Get Involved</title>
<link rel="stylesheet" href="css/reset.css"  />
<link rel="stylesheet" href="css/mainstyle.css" />
<link rel="shortcut icon" href="images/favicon.ico"  />
<script type="text/javascript" src="js/homeslideshow.js"></script></head>

<body>
<div id="container">
  <div id="header">
    <div>
    	<a href="index.php"><img src="images/header.png" title="Home" border="0" /></a>
    </div>
  </div><!--end of header-->

  <div id="bodyholder">
          	<div id="navlinks"> 
            <ul>
            	<li><a href="index.php"> HOME </a></li>
                <li><a href="meetv.php"> ABOUT V </a></li>
                <li><a href="district.php"> DISTRICT 34 </a></li>
                <li><a href="endorsements.php"> ENDORSEMENTS </a></li>                
                <li><a href="news.php"> NEWSROOM </a></li>
                <li><a href="getinvolved.php"> GET INVOLVED </a></li>
                <li><a href="https://secure.piryx.com/donate/CDExTP50/armandovillalobos/VEC" target="_blank" style="padding-right:38px; padding-left:40px; color:#F00"> DONATE NOW! </a></li>

            </ul>
            </div>


  <div id="page_info">
<!--                  	<div style="background: url(images/newsroom.jpg) no-repeat; height:66px; padding:5px;"> </div>
-->
    <div id="left_hold">
    	<h1>Get Involved</h1>
	<p></p>
    </div><!-- end left_hold-->
    
    <div id="right_hold">
    <div style="width:260px; height: 0, auto; padding-bottom:0px; margin-left:5px; margin-bottom:-60px;">
    
        <table border="0" cols="0" width="100">
        <tr>
          <td><a href="https://secure.piryx.com/donate/CDExTP50/armandovillalobos/VEC" target="_blank"><img src="images/donatenow.jpg" title="" border="0" /></a></td>
        </tr>
        <tr>
          <td><a href="" target="_blank"><img src="images/endorsebtn.jpg" title="" border="0" /></a></td>
        </tr>
          <tr>
            <td><a href="https://webservices.sos.state.tx.us/vrapp/index.asp" target="_blank"><img src="images/registerbtn.jpg" title="" border="0" /></a></td>
            </tr>

          <tr>
            <td><a href=" https://www.facebook.com/pages/Armando-Villalobos-Exploratory-Committee-for-Congress/222593757782353" target="_blank"><img src="images/facebook.jpg" title="" border="0" /></a></td>
          </tr>
          <tr>
          	<td><iframe src="//www.facebook.com/plugins/like.php?href=www.armandovillalobos.com&send=false&layout=standard&width=260&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:80px;" allowTransparency="true"></iframe>
            </td>
           </tr>
        </table>
    </div>
    <div style="width:260px; height: 0, auto; padding-bottom: 10px; padding-top: 15px; margin-left:5px;">
      <form action="send_form_email.php" method="post">
        <table border="0" cols="0">
          <tr>
            <td colspan="2"><img src="images/emailtitle.jpg" title="" border="0" /></td>
          </tr>
          <tr>
            <td height="40">Name: </td>
            <td height="40"> <input type="text" name="Name" /></td>
          </tr>
          <tr>
            <td height="40">Email: </td>
            <td> <input type="text" name="Email" /></td>
          </tr>
          <tr>
            <td height="40">County: </td>
            <td> <input type="text" name="County" /></td>
          </tr>
          <tr>
            <td colspan="2" height="40" align="center"><input type="submit" value=" " style="background:url(images/joinnowbtn.png) no-repeat center; width:177px; height:47px; border:0px; cursor:pointer" /></td>
          </tr>
        </table>
      </form>
</div>
  </div><!-- end right_hold-->
  </div>
  </div>
  <!--end of bodyholder-->
    <?php include ('footer.php'); ?>
</div>
</body>
</html>

please someone help.... i have been at this for weeks.

[attachment deleted by admin]

ROCKINDANO · October 22, 2011

one thing i forgot to mention....

when testing on my mac in firefox, it looks fine. but when tested on safari/ie7&8 i end up with a padding on the right. also when viewed in firefox in windows.

Frank P · October 22, 2011

That is no way to ask for help. First of all, there is no reporting back on how the previous advice worked out. Secondly, you're posting a humongous code, loaded with all kinds of irrelevant stuff - about 80% of it is. Thirdly, I asked you to post the code in one code block. And finally, your code contains all kinds of URLs that code editors choke on in the preview mode.

ROCKINDANO · October 24, 2011

Sorry, but tried what you had suggested and no dice.

as far as code, you asked for full code from <html> to </html>..... so it wasn't so clear as far as what to include in the code..... to me "full" or "<html> to </html>" means all your page code.

what would you recommend in detail as of what to submit?

Frank P · October 24, 2011

I could have emphasized relevant as well, but here's what I asked: "post the whole relevant code, in one code block, from <!doctype...> to </html>."

ROCKINDANO · October 24, 2011

here you go.

<!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 name="Keywords" content="v,villalobos, congress, " />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Armando Villalobos &#8212; Get Involved</title>
<link rel="stylesheet" href="css/reset.css"  />
<link rel="stylesheet" href="css/mainstyle.css" />
<link rel="shortcut icon" href="images/favicon.ico"  />
<script type="text/javascript" src="js/homeslideshow.js"></script>

<style type="text/css">


* {margin: 0px auto; padding:0;}
html {
margin: 0 auto;
padding:0;
}
body {
font-family: Helvetica, Bdaskerville, Tahoma, Myriad;
font-size:12px;
margin-top: auto;
background: #006;
color:#666666;
background:url(../images/homebackground.jpg) center no-repeat #131e43 fixed;
}
.contactlist, ul li {
list-style:none;
list-style-image:none;
display:block;
font-size:14px;
}
#container {
margin:0, auto;
padding:0px;
width:960px;
height: 0, auto;
}

/****************HEADER ELEMENTS(*************************/
#header {
position: relative;
height: 176px;
border:0px solid #00CC00;
width: 960px;
}
/****************END HEADER ELEMENTS(*************************/

/****************NAVIGATION ELEMENTS***************************/
#navlinks {
width: 960px;
height: 38px;
background: url(../images/navbg.png) repeat-x left #900;
font-family: georgia, Tahoma, Helvetica, Myriad;
border-bottom:4px solid #CCC;

}
#navlinks ul li a:hover {
text-decoration: none;
padding-left:25px;
padding-right:25px;
padding-top:20px;
padding-bottom:16px;
border-left: 1px solid #b7b7b7;
font-size: 13px;
line-height:35px;
color: #525252;
background:url(../images/hovernavbg.jpg) repeat-x; 
}
#navlinks ul {
padding:0px;
margin-left:0px;
list-style:none;
}

#navlinks ul li {
display:inline;
}
#navlinks ul li a {
text-decoration: none;
padding-left:25px;
padding-right:25px;
padding-top:20px;
padding-bottom:16px;
border-left: 1px solid #b7b7b7;
font-size: 13px;
line-height:35px;
color: #525252;
}

/* Fix IE. Hide from IE Mac \*/
* html #navlinks  ul li { float: left; height: 1%;}
* html #navlinks ul li a { height: 1%; top:1%;}
/* End */


/******************THIS IS THE STAY CONNECTED BAR****************************/
#connected {
width:960px;  
margin-top: 150px;
/*	background:url(../images/stayconnected.png) no-repeat center; 
*/	height:15px; 
color:#FFFFFF; 
text-align:center;
padding: 0px;
}


.social ul {
margin-right: 100px;
padding:0;
list-style:none;
float: right;
}

.social ul li {
display: inline;
margin-left:20px;
position:relative;
}
.social ul li a {
text-decoration: none;
}
/*********************SLIDESHOW CONTAINERS********************************/
#slideshowbox1 {
width:960px; 
margin-top:0px;
margin-left: -10px; 
height:305px; 
color: #0C0; 
text-align:center; 
padding: 0px; 
position: relative;
background: #fff;
}
#slideshowbox2 {
width:841px;
height:287px; 
margin-top:10px; 
position:relative;
}

#bodyholder {
margin-top:0px; 
height: 0, auto;
padding:0px;
overflow:hidden;
width: 960px;
background: #FFF;
font-family: Helvetica, Bdaskerville, Tahoma, Myriad;
}
#home_page_info {
padding-left: 10px; 
padding-right:10px; 
padding-bottom: 10px;
margin-top:5px; 
height: 0, auto;
width: 940px;
overflow:hidden;
font-family: Helvetica, Bdaskerville, Tahoma, Myriad;
margin-bottom:0px;
}
#home_page_info p { 
font-family: Helvetica, Bdaskerville, Tahoma, Myriad;
font-size: 15px;
line-height:17px;
color: #666;
text-align:justify;
padding-bottom:10px;

}
#right_hold {
position: relative;
float: right; 
width: 275px;
padding:5px;
text-align:center; 
margin-right:-5px;
margin-top:20px;
}
#right_hold a {
text-decoration: none;
color: #0D2746;
}
#right_hold a:hover {color: #036;}
#left_hold {
float:left; 
width: 655px;  
padding:5px;
margin-top:20px;
margin-left:-5px;
}
h1 {
font-size:19px; 
color: #0D2746;
padding-bottom:5px; 
font-family:Georgia, "Times New Roman", Times, serif; 
font-weight:bold; 
}
h3 {
margin-top:10px;
padding-left: 10px;
font-size:17px;
color: #0D2746; 
font-family:Georgia, "Times New Roman", Times, serif; 
font-weight:bold; 
}
h4 {
margin-top:0px;
padding-left: 10px;
font-size:12px;
color: #666; 
font-family:Georgia, "Times New Roman", Times, serif; 
font-weight:bold; 
}

#left_hold p {
padding:10px;
}
#left_hold a {
text-decoration: none;
color: #0D2746;
}
#left_hold a:hover {color: #036;}
#left_hold img {margin:5px;}
.leftlinks a {color:#F00; font-size:11px;}
#page_info {
padding: 15px; 
padding-bottom: 50px;
margin-top:5px; 
height: 0, auto;
width: 940px;
overflow:hidden;
font-family:  Helvetica, Arial, Tahoma, Myriad;
background: #FFF;
margin-bottom:25px;
}
#page_info p {
font-family:  Helvetica, Arial, Tahoma, Myriad;
font-size: 13px;
line-height:17px;
color:#666;
text-align:justify;
}
#page_info ul li {
line-height:17px;
list-style:disc;
margin-left:50px;
}
/*****************************FOOTER OF PAGE *********************/
#footer {
position: absolute;
width:960px;
height:100px;
margin: 0 auto;
color: #0F5BB1;
padding-top:20px;
padding-bottom: 0px;
background:url(../images/footerbg.png) no-repeat center;
}
#footer a {
color: #7681ce;
text-decoration: none;
font-size:11px;
text-align:center;
}
#footer a:hover {color: #FFF;}
#footer ul li {
display:inline;
font-size:17px;
text-align:center;
}

#footer p {
font-family: Arial, Tahoma, Helvetica, Myriad;
color: #0F5BB1;
font-size:11px;
text-align: center;
padding-right:10px;
}
table {
border:0px solid #000; 
}
tr td {
color:#666;
font-size: 13px;
}
.subbottom {
float: left;
width: auto;
padding:10px;
border: 0px solid #999;
margin-left:25px; margin-top:0, auto;

}

.bottompart ul li {
line-height:17px; margin-left:0px;
}
.bottompart ul li a {
font-size: 13px;
color: #999999;
}

.bottompart li a:hover {
text-decoration:underline;
color:#333333;
}
.floatright
{
float: right;
clear:both;
margin:0px;
clear: right;
}
.floatleft {
float: left;
clear: both;
margin: 0;
clear: left;
}
</style>
</head>

<body>
<div id="container">
  <div id="header">
    <div>
    	<a href="index.php"><img src="images/header.png" title="Home" border="0" /></a>
    </div>
  </div><!--end of header-->

  <div id="bodyholder">
         <div id="navlinks"> 
            <ul>
            	<li><a href="index.php"> HOME </a></li>
                <li><a href="meetv.php"> ABOUT V </a></li>
                <li><a href="district.php"> DISTRICT 34 </a></li>
                <li><a href="endorsements.php"> ENDORSEMENTS </a></li>                
                <li><a href="news.php"> NEWSROOM </a></li>
                <li><a href="getinvolved.php"> GET INVOLVED </a></li>
                <li><a href="https://secure.piryx.com/donate/CDExTP50/armandovillalobos/VEC" target="_blank" style="padding-right:38px; padding-left:40px; color:#F00"> DONATE NOW! </a></li>

            </ul>
            </div>


  <div id="page_info">
    <div id="left_hold">

    </div><!-- end left_hold-->
    
    <div id="right_hold">

  </div><!-- end right_hold-->
  </div>
  </div>
  <!--end of bodyholder-->

</div>
</body>
</html>

Frank P · October 25, 2011

Next time, just put the whole lot online, because the background images don't show if I have my browser render your code. And they play an important role here.

Try giving the last <a href> (Donate Now) a padding-right:47px (inline it has another value now).

ROCKINDANO · October 25, 2011

Thank you, sorry for the miss understanding. i'll try that and let you know the outcome.

ROCKINDANO · October 26, 2011

tried that and it seemed to fix the problem cross platforms but firefox in win is giving a right padding now.

Frank P · October 27, 2011

tried that and it seemed to fix the problem cross platforms but firefox in win is giving a right padding now.

That's weird, because I came up with that through experimenting in Firefox (i.e. Firefox's plug-in Firebug). If you could put it online, things would be a lot easier for us. Just call the page index2 or something like that, while uploading an empty normal index page - otherwise no page can be reached.

ROCKINDANO · November 1, 2011

msg

Frank P · November 2, 2011

msg

Mono sodium glutaminate? Michael Schenker Group? Meteosat Second Generation?

ROCKINDANO · November 5, 2011

i didn't get any msg

Sign In

need some assistance with a nav bar

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information