Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Basic CSS… HELP!

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #197565
    lindseybaby812
    Participant

    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);
    }

    #197566
    lindseybaby812
    Participant

    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

    #197569
    Senff
    Participant

    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.

    #197571
    lindseybaby812
    Participant

    https://www.flickr.com/photos/[email protected]/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

    #197573
    Senff
    Participant

    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.

    #197575
    lindseybaby812
    Participant
    #197576
    lindseybaby812
    Participant

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

    #197580
    lindseybaby812
    Participant

    how would i fix that in my CSS?

    #197590
    lindseybaby812
    Participant

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

    #197591
    lindseybaby812
    Participant

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

    #197599
    Shikkediel
    Participant

    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;
    }
    
    #197600
    lindseybaby812
    Participant

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

    https://www.flickr.com/photos/[email protected]/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;

    #197602
    Shikkediel
    Participant

    Okay, a slightly different question than I thought…

    li a {
    display: block
    }
    

    Example

    #197638
    lindseybaby812
    Participant

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

    https://www.flickr.com/photos/[email protected]/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;

    #197641
    lindseybaby812
    Participant

    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?

Viewing 15 posts - 1 through 15 (of 18 total)
  • The forum ‘CSS’ is closed to new topics and replies.