Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-05-2010, 06:24 PM   PM User | #1
Naughty240
New to the CF scene

 
Join Date: May 2010
Location: RI
Posts: 3
Thanks: 1
Thanked 0 Times in 0 Posts
Naughty240 is an unknown quantity at this point
My CSS works fine except on 1 page. Nav bar is way to right please help.

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;

}
Attached Thumbnails
Click image for larger version

Name:	FireShot capture #010 - 'My G35' - file____E__MyG35_MyG35_html.jpg
Views:	33
Size:	48.7 KB
ID:	8533   Click image for larger version

Name:	FireShot capture #011 - 'Contact' - file____E__MyG35_Contact_html.jpg
Views:	30
Size:	48.7 KB
ID:	8534  
Naughty240 is offline   Reply With Quote
Old 05-05-2010, 11:08 PM   PM User | #2
Scriptet
Regular Coder

 
Join Date: Apr 2008
Posts: 685
Thanks: 15
Thanked 105 Times in 104 Posts
Scriptet is on a distinguished road
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..
Scriptet is offline   Reply With Quote
Users who have thanked Scriptet for this post:
Naughty240 (05-06-2010)
Old 05-06-2010, 01:39 AM   PM User | #3
Naughty240
New to the CF scene

 
Join Date: May 2010
Location: RI
Posts: 3
Thanks: 1
Thanked 0 Times in 0 Posts
Naughty240 is an unknown quantity at this point
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.
Naughty240 is offline   Reply With Quote
Old 05-06-2010, 07:07 PM   PM User | #4
Scriptet
Regular Coder

 
Join Date: Apr 2008
Posts: 685
Thanks: 15
Thanked 105 Times in 104 Posts
Scriptet is on a distinguished road
Quote:
Originally Posted by Naughty240 View Post
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.
Scriptet is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 07:39 PM.


Advertisement
Log in to turn off these ads.