Basic CSS… HELP!

[lindseybaby812]

How do I bring my links together? They are too spaced out for me.

here is my code…

.horizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

.horizontal ul li a
{
text-decoration: none;
padding: .2em 1em;
color: white;
background-color: rgb(128, 0, 0);
}

.horizontal ul li:first-of-type {
text-transform: uppercase;
} /* Applying a structural pseudo-class*/

.horizontal ul li a:hover
{
color: white;
background-color: rgb(83, 142, 213);
}

[lindseybaby812]

i can e-mail you a pic of what i am talking about. i do not know how to upload a pic onto the forum. THANKS

[Senff]

You can upload images (and share them with us) on many different image-sharing services (Flickr.com is a popular one), but it would be a lot better to show us what you have by using an actual example — give us a link that shows what you have done so far, or create a reduced case (that shows the problem) on Codepen.io.

[lindseybaby812]

https://www.flickr.com/photos/131832225@N08/16720236336/

does this clear it up??

I am trying to make the whole space where the horizontal list is the same color(maroon) the same color as the vertical list

[Senff]

It’s better than nothing, but we’d still need to see the site itself, so we could inspect the code and tell you what you’d need to change.

Since you’re developing on your local machine, that’s probably not an option, so recreate the issue on Codepen and we can use that as our guide.

I can make a (very rough) guess though, and that’s to change your code into this:

.horizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
background-color: rgb(128, 0, 0); /* ADD THIS LINE */
}

.horizontal ul li a
{
text-decoration: none;
padding: .2em 1em;     /* REMOVE THIS LINE */
color: white;
background-color: rgb(128, 0, 0);
}

Just a wild guess though. Again, without seeing any live code I can’t know if it would actually work or not.

[lindseybaby812]

http://codepen.io/anon/pen/jEvwZZ

[lindseybaby812]

i dont think that worked…. how do i send you my code through codepen?

[lindseybaby812]

how would i fix that in my CSS?

[lindseybaby812]

that doesn’t exactly do what I need it too still.

[lindseybaby812]

How do I bring the links together? So that there is no white space in between.

[Shikkediel]

It’s the 5px margin in this rule that’s creating the gaps :

nav.horizontal li {
   float: left;
   list-style: none;
   padding: 0px;
   margin: 5px;
   text-align: center;
}

[lindseybaby812]

this is what i have now… and here is the code for it too

https://www.flickr.com/photos/131832225@N08/16748676965/

nav.horizontal {
width: 76%;
}

nav.horizontal ul {
padding: 0px;
margin: 0px;
}

nav.horizontal li {
float: left;
list-style: none;
padding: 0px;
margin: 0px;
width: 20%;
text-align: center;

[Shikkediel]

Okay, a slightly different question than I thought…

li a {
display: block
}

Example

[lindseybaby812]

this is what im at now….
how do i center everything on the page now?

https://www.flickr.com/photos/131832225@N08/16568719889/

nav.horizontal li {
float: left; <– this is what i deleted to bring the horizontal menu closer together
list-style: none;
padding: 0px;
margin: 0px;
width: 20%;
text-align: center;

[lindseybaby812]

i have said this multiple times now.. i have tried codepen and when i post the link it does not let other viewers see it. can you tell me how to fix this?

[Author]

Posts