Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times

    stuck on something simple again :/

    theres so much stuff to remember. i would be fine if my notes didnt get deleted but here i am.

    with another silly question :/

    ok, so im doing another navbar

    Code:
    <div class="nav">
    		<ul>
    		    <li class="home"> <a href="#"> Home </a> </li>
    		    <li class="about"> <a href="#"> About us </a> </li>
    		    <li class="service"> <a href="#"> Service center </a> </li>
    		    <li class="parts"> <a href="#"> Parts </a> </li>
    		    <li class="awards"> <a href="#"> Awards </a> </li>
    		    <li class="contact"> <a href="#"> Contact </a> </li>
    		</ul>
    	</div>
    i know having the class in the li is pretty irrellivant, but shouldnt effect anything if theyre not specified.

    i jut cant remember what way to compile the css. all i want is the navbox with an inset shadow, easy and done. within the nav i just want the links to show evenly spaced out with a width of 45px, text-align left. no fancy gradients or anything.

    heres the mess of a cs file i have for this bit

    Code:
    .nav a {
    display: block;
    width: 100%;
    height: 100%;
    }
    
    
    .nav {
    position: relative;
    margin: 0 auto;
    top: 28px;
    width: 850px;
    height: 45px;
    border-radius: 8px;
    box-shadow: 0px 0px 8px rgb(200,200,200) inset;
    z-index: 1;
    }
    
    .nav li {
    display: inline-block;
    hieght: 45px;
    line-height: 45px;
    width: 45px;
    }
    
    li a {
    color: rgb(255,170,170);
    display: block;
    text-align: center;
    font-family: helvetica;
    font-weight: 700;
    font-size: 14px;
    }
    ive just gotten so confused with the right order of things, and without my notes im lost. the main problem im having is specifying the width, right now with it specified where it is, for some reason the two first links are on the top line, the rest are beneath

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,772
    Member #
    5580
    Liked
    723 times
    One thing ...


    hieght: 45px;

    height is spelled wrong.

    Having the <li> items horizontal, you should take out the display:block properties and use inline.

    Your nav width is 285.
    You have 6 buttons, 45 pixels each, so that's 270 pixels.

    There must be something that is overflowing ... putting the 270 over the 285 limit.

    What happens if you change 285 to 300 or wider?


  4. #3
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    have it fixed kinda, new css bit

    Code:
    a {
    font-size: 14px;
    text-decoration: none;
    font-family: helvetica;
    color: rgb(255,170,170);
    font-weight: 600;
    text-transform: uppercase;
    }
    
    
    .nav a {
    display: block;
    width: 100%;
    height: 100%;
    }
    
    .nav li {
    position: relative;
    margin: 0 auto;
    top: 25px;
    width: 125px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    }
    looking at this Mlsiem, would you say that it should line up in the center of the page? because surprise surprise its not :/

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,772
    Member #
    5580
    Liked
    723 times
    What happens if you do this ...


    Code:
    <div style="text-align:center;">
    
    <div class="nav">         
    <ul>          
       <li class="home"> <a href="#"> Home </a> </li>          
       <li class="about"> <a href="#"> About us </a> </li>          
       <li class="service"> <a href="#"> Service center </a> </li>          
       <li class="parts"> <a href="#"> Parts </a> </li>          
       <li class="awards"> <a href="#"> Awards </a> </li>          
       <li class="contact"> <a href="#"> Contact </a> </li>         
    </ul>     
    </div>
    
    </div>


  6. #5
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    i forgot thebrowserreset...again haha


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:25 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com