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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times

    asked before but stuck again.. centering

    making a navbar, whats the best way to center it on the page, without using position and adjusting with pixels?

    i set the body to 100%width and text-align center, but the navbar doesnt show in the center of it at all.

    i thought i would be able to set a px width in the body instead of 100%, then adjust the position of the navbar but when i did that without even adjusting the position of the navbar it was way over to the right. im totally lost

    basically what im trying to accomplish is to have the navbar show in the center on any size browser, if i do this by adjusting px left or right it wont
    Last edited by coleio; Feb 13th, 2014 at 07:45 PM.

  2.  

  3. #2
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    doubt its necessary but just in case someone asks heres the code

    html
    <!doctype html>
    <html>
    <head>
    <title> learning this **** </title>
    <link rel="stylesheet" href="../css/hers.css">

    </head>

    <body>

    <div class="button1">
    <ul>
    <li id="left"><a href="#"> BIO </a></li>
    <li><a href="#"> MEDIA </a></li>
    <li><a href="#"> CUSTOM </a></li>
    <li><a href="#"> BOOKINGS </a></li>
    <li><a href="#"> BLOG </a></li>
    <li id="right"><a href="#"> CAM </a></li>
    </ul>
    </div>

    </body>
    </html>

    css...
    html {
    background: url('../pics/her.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    body {
    margin: 0px auto;
    width: 1200px;
    text-align: center;
    }


    .button1 a {
    display: block;
    width: 100%;
    height: 100%;
    }

    a {
    text-decoration: none;
    font-family: arial;
    color: #505050;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: 0px 0px 1px #262626;
    }


    .button1 li {
    display: inline-block;
    height: 30px;
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid black;
    box-shadow: 0px 0px 2px grey;
    width: 175px;
    tet-align: center;
    line-height: 30px;
    text-align:center;
    background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(90,90,90)));
    background:-moz-linear-gradient(top,rgb(168,168,168),rgb(90,90,90));
    }

    .button1 a:hover {
    background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(255,255,255,1)),to(rgba(69,69,69, 1)));
    background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(255,255,255,1) 0%,rgba(0,28,78,1) 100%);
    }




    #left {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    }

    #right {
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    }

    and how od i make that appear in a box on the forum?
    Last edited by coleio; Feb 13th, 2014 at 07:51 PM.

  4. #3
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    sh1t..... such a stupid mistake from using code from a different page. its so stupid in fact i removed it rom the previous post hahah

    ok now another problem tho haha, when i removed float left, a small gap appears between each button, how do i remedy this without moving the whole thing?

    EDIT: upon closer inspection, its still not centering correctly :/
    Last edited by coleio; Feb 13th, 2014 at 07:56 PM.

  5. #4
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    ok seriously dont get this, i just noticed that the body isnt centered on the page, whats going on here??? anyone have a good tutorial for this?

  6. #5
    Member djitsz's Avatar
    Join Date
    Jan 2014
    Posts
    67
    Member #
    38199
    Liked
    17 times
    Code:
    <body>
      <div class="navbar">
        <ul>
          <li>item 1</li>
          <li>item 2</li>
        </ul>
      </div>
    </body>
    Code:
    .navbar {
      margin:0 auto;
      width: 1200px;
    }

  7. #6
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    jenno what, im tempted to just give it all up, web design, cars, women, go live in some mountain in uzbeckistan.

    ok, so just say i do this...

    body {
    margin: 0px auto;
    width: 100%;
    text-align: center;
    }

    my understanding is that this bit of code detirmines the width of the browser screen from the 100% part, then text-align sets any children to the center of the page, right??? well obviously im wrong here, so is there any way of doing that?

  8. #7
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    f**k me this doesnt wanna work for me, what in this code would prevent me from floating a second navbar in a wrapper to the bottom of the page. float: bottom;
    right?

  9. #8
    Member djitsz's Avatar
    Join Date
    Jan 2014
    Posts
    67
    Member #
    38199
    Liked
    17 times
    "margin: 0 auto" on the body has no effect if the body width is 100%. To center content it needs to be in a container with a fixed width and "margin: 0 auto".

    "Text-align: center" only affects inline elements (such as text) inside the container to which it is applied, it does not center other child-elements.

    "Float:bottom" does not exist, only "float: left" and "float: right". To force something to the bottom of the page, use "position: absolute; bottom: 0;".
    Last edited by djitsz; Feb 14th, 2014 at 06:06 AM.

  10. #9
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    thanks, so how do i center the navbar and any other child content.

    because for the navbar, the width is say 175px for each tab, i have it set to margin 0 auto but its still not centering. also, how do i remove the gap between the tabs witout using float?

  11. #10
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    i have a second navbar in a wrap, the wrap is 200px high and the nav is 80px high, before setting position absolute bottom, wit the line-height selector, the navbar appeared in the middle of the wrapper, when i set pos absoulte, it overrides the line height and the navbar actually sits about 5px below the wrapper. huh???


Page 1 of 2 1 2 LastLast

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 01:44 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com