Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: css center

  1. #1
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts

    css center

    hey guys...iuv made a nice menu with css

    Code:
    d.nav, a.nav:link, a.nav:visited { align:center; display:block; width:250px; height:25px; float:left}a.nav, a.nav:link, a.nav:visited { display:block; width:80px; height:20px; background:#e4ebeb; border:1px solid #616D7E; margin-top:1px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000; line-height:20px; overflow:hidden;}
    a.nav:hover {color:#fff; background:#99b3b4;}
    but i cant seem to center it on page ???

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    { align:center;
    is not valid CSS

    Code:
    { text-align:center;
    this is probably what you are looking for.

    Also if you want something to center dont float it to the left, it wont work.

    If thats not working create a div such as

    Code:
    .center {
    width:100%;
    text-align:center;
    }
    then wrap that around the nav if none of the others worked.

  • #3
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    ok it worked but i have my menu like this

    page 1
    page 2
    Page 3
    Page 4
    Page 5

    and i need it to go

    page 1 page 2 Page 3 Page 4 Page 5

    thats why i used float left :P

    Code:
    d.nav, a.nav:link, a.nav:visited { text-align:center; display:block; width:250px; height:25px; }a.nav, a.nav:link, a.nav:visited { display:block; width:80px; height:20px; background:#e4ebeb; border:1px solid #616D7E; margin-top:1px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000; line-height:20px; overflow:hidden;}
    a.nav:hover {color:#fff; background:#99b3b4;}

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    try this

    Code:
    d.nav, a.nav:link, a.nav:visited { text-align:center; display:inline; width:250px; height:25px; }

  • #5
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    no that didnt work sadly... but then wen i add it like this

    Code:
    }a.nav, a.nav:link, a.nav:visited { display:inline; width:200px; height:20px;line-height:20px; background:#e4ebeb; border:1px solid #616D7E; margin-top:5px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000; line-height:20px; overflow:hidden;}
    it makes it in aline but diregards the sizes ect it shoult be :S

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    i know you did alot of work on it but here is a basic example that might work and you could just edit it to what u need

    HTML

    Code:
    <div id="navbar2">
    <ul>
    <li><a href="link1.html">Button 1</a></li>
    <li><a href="link2.html&#37;20">Button 2</a></li>
    <li><a href="link3.html%20">Button 3</a></li>
    </ul>
    </div>
    CSS:

    Code:
    div#navbar2 {
    	height: 30px;
    	width: 100%;
    	border-top: solid #000 1px;
    	border-bottom: solid #000 1px;
    	background-color: #336699;
    text-align:center;
    }
    div#navbar2 ul {
    	margin: 0px;
    	padding: 0px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: small;
    	color: #FFF;
    	line-height: 30px;
    	white-space: nowrap;
    }
    div#navbar2 li {
    	list-style-type: none;
    	display: inline;
    
    }
    div#navbar2 li a {
    	text-decoration: none;
    	padding: 7px 10px;
    	color: #FFF;
    }
    div#navbar2 li a:link {
        color: #FFF:
    }
    div#navbar2 li a:visited {
        color: #CCC;
    }
    div#navbar2 li a:hover {
        font-weight: bold;
        color: #FFF;
        background-color: #3366FF;
    }
    Hope some of it helps.

  • #7
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    thanks for yours but are you sure there is no way i can make mine work??? even adding white blocks at either side maybe?

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Please post your html. Also for you to center your floated links you need to set a width to them and add the widths of each one together and set the containing element to the total width and use margin:auto;
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Please post your html. Also for you to center your floated links you need to set a width to them and add the widths of each one together and set the containing element to the total width and use margin:auto;
    Thats what i was trying to remember, i need to pay more attention.

  • #10
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Code:
    <a href="index.php?page=update" title="Basic" class="nav style7"><strong>Basic</strong></a>
                    <a class="nav" href="page2.html" title="??">??</a>
                    <a class="nav" href="page3.html" title="page 3">Page 3</a>
                    <a class="nav" href="page4.html" title="page 4">Page 4</a>
                    <a class="nav" href="page5.html" title="page 5">Page 5</a>

    set widths to them??? how

  • #11
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    According to my eyes, you have no class called 'nav style7'.
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #12
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    sorry its just nav typo error....

    still would be nice to center it lol


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •