Whats wrong with my code NavBar align to center

  • (2 Pages)
  • +
  • 1
  • 2

16 Replies - 922 Views - Last Post: 08 February 2014 - 02:59 AM

#1 Wolverine89  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 68
  • Joined: 14-January 14

Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 11:53 AM

Hi guys,

Why is my navbar aligning to the right while i want it align to the center or left

<nav>
  <ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Products</a>
    </li>
    <li>
        <a href="#">Shopping Cart</a>
    </li>
    <li>
        <a href="#">About</a>
    </li>
    <li>
        <a href="#">Contact</a>
    </li>
  </ul>
</nav>



CSS
//Navigation bar

nav {
  width: 1024px;
  margin: 20px 0;
  float:center;}
  
nav ul {
  list-style: none;
  overflow: hidden; }
nav ul li {
  float: left;
  width: 20%; }
nav ul li a {
  text-align: center;
  padding: 8px 0;
  display: block;
  width: 100%;
  background: #cdeb8e; /* Old browsers */
  background: -moz-linear-gradient(top,  
    #cdeb8e 0%, #b0ca34 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#cdeb8e), 
    color-stop(100%,#b0ca34)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  
    #cdeb8e 0%,#b0ca34 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  
    #cdeb8e 0%,#b0ca34 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,  
    #cdeb8e 0%,#b0ca34 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#cdeb8e', 
    endColorstr='#b0ca34',GradientType=0 ); /* IE6-9 */
  }
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
  color: #000;
  text-decoration: none; }
nav ul li a:hover,
nav ul li a:active {
  background: #b0ca34; /* Old browsers */
  background: -moz-linear-gradient(top,  
    #b0ca34 0%, #96c40d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#b0ca34), 
    color-stop(100%,#96c40d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  
    #b0ca34 0%,#96c40d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  
    #b0ca34 0%,#96c40d 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,  
    #b0ca34 0%,#96c40d 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#b0ca34', 
    endColorstr='#96c40d',GradientType=0 ); /* IE6-9 */
  }
nav ul li:first-child a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px; }
nav ul li:last-child a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px; }



thanks in advance

Is This A Good Question/Topic? 0
  • +

Replies To: Whats wrong with my code NavBar align to center

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3742
  • View blog
  • Posts: 13,103
  • Joined: 12-December 12

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 12:12 PM

There is no such thing as float: center.

In Google Chrome (probably others, I haven't checked) ULs have a default left-padding of 40px. You could add
ul {
    padding: 0;
}

to first remove all padding.
Was This Post Helpful? 0
  • +
  • -

#3 Wolverine89  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 68
  • Joined: 14-January 14

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 12:45 PM

Removed the float left but the padding: 0; in nav didnt work..

nav {
width: 1024px;
margin: 20px 0;
padding: 0;}
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3742
  • View blog
  • Posts: 13,103
  • Joined: 12-December 12

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 01:17 PM

Yeah, the padding applies to the UL
Was This Post Helpful? 0
  • +
  • -

#5 Wolverine89  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 68
  • Joined: 14-January 14

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 01:42 PM

but this is not working
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3742
  • View blog
  • Posts: 13,103
  • Joined: 12-December 12

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 01:47 PM

What does "this is not working" mean? What is it doing, or not doing that you want it to do?
Was This Post Helpful? 0
  • +
  • -

#7 Wolverine89  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 68
  • Joined: 14-January 14

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 02:03 PM

In the annex you find a picture. I want the green navigationbar align in the center or better i want it to fill my containter no black space on the left

http://puu.sh/6NxJ7.jpg
http://puu.sh/6NxJ7.jpg
http://puu.sh/6NxJ7.jpg
http://puu.sh/6NxJ7.jpg
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3742
  • View blog
  • Posts: 13,103
  • Joined: 12-December 12

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 02:06 PM

I do not know what you mean by 'annex', there are no pictures mentioned anywhere in your posted code, and when I test your code (without the padding I mentioned) there is no black space on the left.

Remember, we have no other information to go on other than what you have supplied above.
Added: Okay, you have supplied some screenshots. But using your code above I don't have the black space.

This post has been edited by andrewsw: 07 February 2014 - 02:12 PM

Was This Post Helpful? 0
  • +
  • -

#9 Wolverine89  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 68
  • Joined: 14-January 14

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 02:16 PM

but do you see the problem? in the screens? i have that black space on the left of the navbar and that is not what i want
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3742
  • View blog
  • Posts: 13,103
  • Joined: 12-December 12

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 02:18 PM

Yeah I know. You have not supplied enough information for someone to help you. Look at the information and code you have supplied above. It does not reproduce your problem. No one is standing next to you - we only have the information you post here.
Was This Post Helpful? 0
  • +
  • -

#11 Wolverine89  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 68
  • Joined: 14-January 14

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 02:23 PM

ask me what do you wanna know so maybe you can help me?
Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3742
  • View blog
  • Posts: 13,103
  • Joined: 12-December 12

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 02:30 PM

Post enough code to reproduce the problem you are having. A link to your live site (that also demonstrates the problem) would also be useful.
Was This Post Helpful? 0
  • +
  • -

#13 Wolverine89  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 68
  • Joined: 14-January 14

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 02:40 PM

CSS
@CHARSET "ISO-8859-1";
html, body {
    padding:0;
    margin:0;
    height:100%;
    background-color:#383838;
}
#container{
	width:1024px;
	margin-left:auto;
	margin-right:auto;
}
#page {
    min-height:100%;
    position:relative;
    height:100%;
}
#header {
    background-color:#9966FF;
    height:100px;
    width:1024px;
}
#header img {
    float:left;
    display:inline;   
}
#header h2 {
    text-align:center;
    font-size:44px;
    color:#FFFFFF;
    left:0px;
    top:20px;
    font-weight:bold;
    font-family: Sans-serif;
    float:left;
    margin-top:20px;
    margin-left:20px;
    text-decoration:none;
}
#main {
    width:1024px;
    margin-left:auto;
    margin-right:auto;
    background-color:white;
    min-height:90%;
    height:auto;
    height:89%;
    margin:0 auto -50px;
    vertical-align:top;
}
#footer {
    width:1024px;
    bottom:0;
    height:35px;
    background-color: #E0E0E0;
}

//Navigation bar

nav {
  width: 1024px;}
  
nav ul {
  list-style: none;
  overflow: hidden; 
  margin: 0;
}
nav ul li {
  float: left;
  width: 20%; }
nav ul li a {
  text-align: center;
  padding: 5px 0;
  margin: 0;
  display: block;
  width: 100%;
  background: #cdeb8e; /* Old browsers */
  background: -moz-linear-gradient(top,  
    #cdeb8e 0%, #b0ca34 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#cdeb8e), 
    color-stop(100%,#b0ca34)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  
    #cdeb8e 0%,#b0ca34 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  
    #cdeb8e 0%,#b0ca34 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,  
    #cdeb8e 0%,#b0ca34 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#cdeb8e', 
    endColorstr='#b0ca34',GradientType=0 ); /* IE6-9 */
  }
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
  color: #000;
  text-decoration: none; }
nav ul li a:hover,
nav ul li a:active {
  background: #b0ca34; /* Old browsers */
  background: -moz-linear-gradient(top,  
    #b0ca34 0%, #96c40d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#b0ca34), 
    color-stop(100%,#96c40d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  
    #b0ca34 0%,#96c40d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  
    #b0ca34 0%,#96c40d 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,  
    #b0ca34 0%,#96c40d 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#b0ca34', 
    endColorstr='#96c40d',GradientType=0 ); /* IE6-9 */
  }
nav ul li:first-child a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px; }
nav ul li:last-child a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px; }



And my navigation bar is posted above
Was This Post Helpful? 0
  • +
  • -

#14 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3742
  • View blog
  • Posts: 13,103
  • Joined: 12-December 12

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 03:07 PM

Yes, that reproduces the problem because there is a black space on the left.

But this space is caused by the padding of the UL that I have already advised you of, and I have already provided advice, and code, that fixes it. You haven't removed the padding from the UL, so you still have the same problem from your original post.
Was This Post Helpful? 0
  • +
  • -

#15 Wolverine89  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 68
  • Joined: 14-January 14

Re: Whats wrong with my code NavBar align to center

Posted 07 February 2014 - 03:12 PM

didnt fix the problem

@CHARSET "ISO-8859-1";
html, body {
    padding:0;
    margin:0;
    height:100%;
    background-color:#383838;
}
#container{
	width:1024px;
	margin-left:auto;
	margin-right:auto;
}
#page {
    min-height:100%;
    position:relative;
    height:100%;
}
#header {
    background-color:#9966FF;
    height:100px;
    width:1024px;
}
#header img {
    float:left;
    display:inline;   
}
#header h2 {
    text-align:center;
    font-size:44px;
    color:#FFFFFF;
    left:0px;
    top:20px;
    font-weight:bold;
    font-family: Sans-serif;
    float:left;
    margin-top:20px;
    margin-left:20px;
    text-decoration:none;
}
#main {
    width:1024px;
    margin-left:auto;
    margin-right:auto;
    background-color:white;
    min-height:90%;
    height:auto;
    height:89%;
    margin:0 auto -50px;
    vertical-align:top;
}
#footer {
    width:1024px;
    bottom:0;
    height:35px;
    background-color: #E0E0E0;
}

//Navigation bar

nav {
  width: 1024px;
margin: 20px 0;
padding: 0;}
  
nav ul {
  list-style: none;
  overflow: hidden; 
  margin: 0;
}
nav ul li {
  float: left;
  width: 20%; }
nav ul li a {
  text-align: center;
  padding: 5px 0;
  margin: 0;
  display: block;
  width: 100%;
  background: #cdeb8e; /* Old browsers */
  background: -moz-linear-gradient(top,  
    #cdeb8e 0%, #b0ca34 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#cdeb8e), 
    color-stop(100%,#b0ca34)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  
    #cdeb8e 0%,#b0ca34 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  
    #cdeb8e 0%,#b0ca34 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,  
    #cdeb8e 0%,#b0ca34 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#cdeb8e', 
    endColorstr='#b0ca34',GradientType=0 ); /* IE6-9 */
  }
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
  color: #000;
  text-decoration: none; }
nav ul li a:hover,
nav ul li a:active {
  background: #b0ca34; /* Old browsers */
  background: -moz-linear-gradient(top,  
    #b0ca34 0%, #96c40d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#b0ca34), 
    color-stop(100%,#96c40d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  
    #b0ca34 0%,#96c40d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  
    #b0ca34 0%,#96c40d 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,  
    #b0ca34 0%,#96c40d 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#b0ca34', 
    endColorstr='#96c40d',GradientType=0 ); /* IE6-9 */
  }
nav ul li:first-child a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px; }
nav ul li:last-child a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px; }



Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2