[Solved] Can someone help me with this problem in css?

[jeremaniak]

it doenst let me get those boxes in the right place.. someone has an idea?

http://gyazo.com/30c719f14283f160b7011cf1a9e8dd25

[Paulie_D]

it doenst let me get those boxes in the right place.. someone has an idea?

Can you be more precise…what boxes..and what right place?

[jeremaniak]

well i have fixed it but now its not centered,

`
nav ul li{
float:left;
padding:0px 30px 0px 80px;
list-style-type:none;

}

nav ul li a{
font-size:20pt;
font-weight: bold;
color: rgb(0, 0, 0);
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,0.70);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}

nav ul li a:hover,
nav ul li a:focus
{
color: #FFFFFF;
background-color: rgb(0,0,0);

}

`

[Paulie_D]

Can you be more precise…what boxes..and what right place?

[Mikko Laine]

Like this?

http://codepen.io/mikkolaine/pen/uIdnA

How about you give us the css you’re working on instead of a video… easier to point out what’s wrong (you learn more)

*EDIT
20pt
… please… just don’t. that’s like using cm.

[jeremaniak]

[IMG]http://i62.tinypic.com/2yuwrgo.png[/IMG]

the black box around the text but that is fixed, but it isnt centering them

[jeremaniak]

html{height: 98%;}
body{height:98%}
#content{
    width:825px;
    height:98%;
    margin:0px auto;
    padding-top:0px;
    padding-left:15px;
    padding-right:15px;
    -webkit-box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
    box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
}

#logo{
    padding-top: 190px;

}

nav ul {
    text-align:center;
}

nav ul li{
    float:left;
    padding:0px 30px 0px 80px;

    list-style-type:none;
}

nav ul li a{
    font-size:20pt;
    font-weight: bold;
    color: rgb(0, 0, 0);
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0,0,0,0.70);
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -o-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;
}

nav ul li a:hover,
nav ul li a:focus
{
    color: #FFFFFF;
    background-color: rgb(0,0,0);
    
}

[Mikko Laine]

remove that float from the li.
use display: inline-block; instead.

[jeremaniak]

i did, still not centered tho..

[Mikko Laine]

you mean that its off by … 50 px?
that would be because: padding:0px 30px 0px 80px;
padding: [top] [right] [bottom] [left];
or
padding: [top/bottom] [right/left];
or
padding: [top/bottom/right/left] ;
..

[Paulie_D]

I don’t get it…it’s an image at the link given. Where’s this frikkin menu?

[jeremaniak]

so it should be:

padding: 0px 30px 0px 0px ??

[Mikko Laine]

if that’s what you want?

but that would be 0 to left and 30 to right.

padding: 0 30px;

that. if you want left and right to have 30px padding.

[jeremaniak]

thanks, but how do get it centered like perfectly centered?

[Mikko Laine]

i have no idea what you have centered and what you mean with perfectly centered.

if you add that “0 30px;” the padding is equal. if you have text-align center, display: inline-block and no other paddings or margins or widths… It is centered.

everything you need to fix the problem is already posted on this topic.
or you haven’t been clear about the thing you’re having problems with.

[Author]

Posts