My CSS works fine except on 1 page. Nav bar is way to right please help.

Naughty240 · 05-05-2010, 06:24 PM

Id like to have a nice horizontal nav bar on the page and not way off to the left like it is on the contact page. I used the "#links" CSS from another project so I know it needs some work. To be honest my head is spinning and Im lost please help. Plus my damn radio buttons wont work right! Ugh..

I have two screen shots to show you the pages in question.

Here is the html http://www.pastie.org/947047

Code:

<!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>Contact</title>
<style type="text/css">

</style>
<link href="myG35.css" rel="stylesheet" type="text/css" />
</head>
<body background="Images/infiniti_logo.png">


   <div id="banner"><img src="Images/Banner.jpg" width="800" height="200" alt="banner" /></div>
   <div id="links">
      <ul>
         <li><a href="MyG35.html">Home</a></li>
         <li><a href="G35 Mod Table.html">Mods</a></li>
         <li><a href="Contact.html">Contact</a></li>
         <li><a href="links.html">Links</a></li>
         <li><a href="media.html">Media</a></li>       
      </ul>
   </div>
  <div id="wrapper">   
  <div id="form">
   <form name="contactForm" id="contactForm"
               action="http://www.browng35.com/contact"
               method="post">

           <input type="hidden" name="eMail" id="eMail"
                  value="kilday111@gmail.com" />

            <fieldset id="contact">
              <legend>Contact Information</legend>                   


             <label class="blockLabel">
                First Name   
                  <input type="text" id="firstName" name="firstName" />
            </label>
            <label class="blockLabel"> 
                <br />
                Last Name
                <input type="text" id="lastName" name="lastName" />
            </label>
            <label class="blockLabel">
                <br />
                Phone
            <input type="text" id="phone" name="phone" />
            <br />
            </label>
            <label class="blockLabel">
                Street Address
            <input type="text" id="street" name="street" />
            </label>
            <label class="blockLabel">
                <br />
              City
            <input type="text" id="city" name="city" />
            </label>
            <label>
                State
              <input type="text" id="state" name="state" maxlength="2" />
              <br />
            </label>
            <label>
                Zip
              <input type="text" id="zip" name="zip" maxlength="10" />
            </label>    


            </fieldset>

             <fieldset id="foundMe">
              <legend>Just a few questions</legend>

              <label class="blockLabel">
                Did you enjoy my site? 
                <input type="radio"  id="yes" name="yes" />
                <option value="secret">Yes</option>
                <input type="radio"  id="No" name="No" /> 
                <option value="other">No</option>
                <br />
              </label>

              <label class="blockLabel">
               How did you find my site?
               <select id="website" name="website">
                 <option value="G35">G35driver.com</option>
                 <option value="350Z">My350Z.com</option>
                 <option value="Google">Google</option>
                 <option value="fb">Facebook</option>                 
                 <option value="secret">Its a Secret</option>
                 <option value="other">Other</option>


               </select>
              </label> 



              <label class="blockLabel">
                 <br />
                What do you drive?
                <select id="yourCar" name="yourCar">
                <option>G35 sedan</option>
                   <option>G35 coupe</option>
                   <option>G37 sedan</option>
                   <option>G37 coupe</option>
                   <option>M35</option>
                   <option>M45</option>
                   <option>300zx</option>
                   <option>350Z</option>
                   <option>370Z</option>
                   <option>240sx</option>
                   <option>other </option>

                </select>

               </label>    

            </fieldset>  

            <fieldset id="feedback">
              <legend>Feedback</legend>

              <label>
                 <input type="checkbox" id="signUp" name="signUp" />
                 I'm very interested in keeping up with your site and car.
              </label>
              
              <label for="comments" class="blockLabel"><br />
              Comments</label>
              <textarea id="comments" name="comments" rows="5" cols="50"></textarea>   
            
            
            
            
            </fieldset>
    
           
         
            <input type="submit" value="Send my info and comments" />
            <input type="reset" value="Your car is ugly! please send me to google!" />


</form> 
</div> 
          
         
         
         
         






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

Here is the html http://www.pastie.org/947053

CSS

Code:

	

@charset "utf-8";
/* CSS Document */

#background  {
  background-repeat:repeat;
  background-image: url(Images/infiniti_logo.png);
}



#wrapper {
  background-color:#096;  
  width: 800px;
  margin-right: auto;
  margin-left: auto;

}
#banner {
  height: 200px;
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}

#content  {background-color: #096}

#table {
  background-color: #69Fs;
  display:block; 
  margin:0 auto; 
  text-align:center; 
  border: thick double #000;  
}



#form  {background-color:#096;  
  width: 800px;
  margin-right: auto;
  margin-left: auto}

#links                 {margin:0 auto;}

#links ul              {list-style-type: none; padding: 0px; margin: 0px}
#links li              {display: block;  font-size: 14px;                     
                        width: 100px; height: 33px; text-align: center; margin-right: 2px}
#links a               {display: block; color: white; text-decoration: none; margin-top: 5px}
#links a:hover         {color: black}

#input buttons        {margin:0 auto;
                       float:left}





p         {
  padding-right: 15px;
  padding-left: 15px;
}

img {
       display:block; /*allows the element to take auto margins*/
       margin:0 auto; /*centers in compliant browsers*/
       text-align:center; /*centers in old versions of IE*/
} 

h1  { text-align:center}

.home{
   float:left;
   display:inline;

}

.mods {
   float:left;
   display:inline;

}

.contact  {
   float:left;
   display:inline;

}

Scriptet · 05-05-2010, 11:08 PM

You mean your navbar is way to the left, your title says way to right !

Anyway did you want the navbar in the center of the page? You was correct in adding margin:0 auto;, as this centers block elements but only those which have a set width. So in this case because your links are 100px wide, you'd add width:100px; to your #links.

If you wanted it to the left but alongside everything else, then you must put everything in a page wrapper, or move your exisiting wrapper above the links DIV.

Also don't use:

Code:

<body background="Images/infiniti_logo.png">

This is depreceated, instead state the body background in your CSS like this:

Code:

body{
background:url('Images/infiniti_logo.png');
}

Lastly not sure what you mean when you say your radio buttons don't work, they seem to be clickable..

Naughty240 · 05-06-2010, 01:39 AM

Haha my head is spinning so bad I don't even know my right from my left.

I would like the nav bar to run from left to right under the banner. Not the vertical layout it is now.

I went back and redid my background image and also moved the div and everything is good now thanks.

The radio buttons seem to be stuck on on yes and no so I got some new code that worked and that's resolved too.

Now I just need to make my nav bar horizontal and figure out why Firefox wont play my quicktime mp3 song on my media page.

Scriptet · 05-06-2010, 07:07 PM

Quote:

Originally Posted by Naughty240

Haha my head is spinning so bad I don't even know my right from my left.

I would like the nav bar to run from left to right under the banner. Not the vertical layout it is now.

So you want a horizontal navbar as opposed to a vertical navbar. To do this you want to float the li a's next to each other. So your CSS for the menu would become:

Code:

#links{
	width:510px; /*Total width of all links*/
	margin:0 auto; /*Centers the menu*/
	overflow:auto; /*Contains the floats*/
}
#links ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
}
#links li{
	display:inline;
	margin:0;
	padding:0;
}
#links a{
	float:left; /*This also automatically triggers display:block;*/
	width:100px; /*Dimensions of each button*/
	height:33px; /*Dimensions of each button*/
	line-height:33px; /*Vertically centers the text in each button*/
	margin-top:5px; 
	margin-right:2px;
	text-align:center;
	text-decoration:none;
	color:white;
	font-size:14px;                     
}
#links a:hover{
	color:black;
}

Note it's best to style the a's rather than the li's so treat the a's as each individal button and apply your styling there.