Li’s added padding

  • Resolved music_man

    (@music_man)


    19 years ago

    Hi

    On this site: https://www.lynsscrapbooking.co.nz I am trying to make the list so there is no padding.

    I have tried:

    #navigation ul
    {
    list-style: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    }

    #navigation li {display: inline; padding: 0; margin: 0;}

    to no avail.

    And also I have no idea why I have to add 10px to the list td to make it inline with the images.

    I was thinking of giving this theme out but I don’t think people would find it that compatible.

Viewing 15 replies - 1 through 15 (of 28 total)
  • lohnunternehmen

    (@lohnunternehmen)

    Look at this:
    validator.w3.org/check?uri=http%3A%2F%2Fwww.lynsscrapbooking.co.nz
    It says you don’t even have a ul-tag before the li tags. I don’t actually know what you really want but you should fix that.

    By the way, your code is horrifying. Don’t put everything into headline-tags and use the p-tag instead of a lot of br’s.
    You might also try to put the images before and behind the list into the background of an element so you don’t need a table. Unfortunately I’m not quite sure how to do that.

    Thread Starter music_man

    (@music_man)

    Thank you for bringing the omission of ul to my attention. I use h1 etc tags because of a SEO tutorial I read, I also think that using <br /> rather than <p> </p> is better. I am sure I didn’t use that many <br />‘s.

    I have tried having the images as a background image but it proves exceedingly difficult and it makes the png’s non transparent.

    Thread Starter music_man

    (@music_man)

    I have corrected the code for the index page and it is now valid XHTML strict 1.0. There is still the problem with the gaps in the
    <li>‘s though.</li>

    vkaryl

    (@vkaryl)

    As to h1 tags: you should only have ONE per page. SEO articles tend to lead the unwary completely astray.

    As to the padding: try a “default” 0 at the very start of your css.

    * {
    border:0;
    margin:0;
    padding:0;
    }

    Thread Starter music_man

    (@music_man)

    Hi

    Thanks for your replies. I have got rid of the h1’s etc and replaced them with divs and p’s.

    I tried adding your CSS suggestion but it affected the rest of the page, just not the navigation.

    vkaryl

    (@vkaryl)

    Yeah. It defaults everything to 0. That’s the point. Then you go back into the areas where you want margin and/or padding (keeping in mind IE’s broken box model) and make it the way YOU want it.

    You might like to start with the plethora of wonderful informative articles at https://positioniseverything.net and https://meyerweb.com. As far as css goes, those are probably “definitive” sites.

    Thread Starter music_man

    (@music_man)

    Thank you for the links.

    The lists have no padding or margins anyway. I just cannot figure out why there is that gap when there is absolutely no padding in the list (except fot the a tags which have a 10px padding, but that is 10px all over and shouldn’t affect it).

    I would very much like to not use a table but I cannot find any viable alternative (as I use png’s with transparency and IE doesn’t like that). I also find that positioning them very difficult.

    niziol

    (@niziol)

    I’m quite confused, I’m not sure I understand exactly what you want to do. Are you wanting to remove the spaces between the navigation buttons?

    Thread Starter music_man

    (@music_man)

    I was just looking through the source code and I saw the ending </li> and starting <li> of the next list item had a gap in between them. I am calling <?php wp_list_pages('title_li='); ?> and <?php wp_list_cats('exclude=1'); ?> is there a way of formatting it so there is no space?

    Thread Starter music_man

    (@music_man)

    Yes I would like to remove the space inbetween the navigation links.

    vkaryl

    (@vkaryl)

    Well, I can’t help you much more, I don’t DO tables, and have no idea further about your nav table. At this point were this me, I would remove the table structure, go with a plain div set margin:0 auto; to center it and include a file with the ul/li substructure. And you might just try in the css img {padding:0;}, see if that helps.

    The a tag padding with 10px “all over” would affect the interstitial padding perhaps.

    moshu

    (@moshu)

    I don’t see the reason why… but you have 2 set of styles for your navigation: one in the head of the file and one in the stylesheet.
    Of course (what else would you expect in a situation like this?) they contradict each other. And knowing the hierarchy of styles the one in the <head> over-writes the stylesheet. Should I tell there is a 10px ‘padding’…?

    Thread Starter music_man

    (@music_man)

    I would indeed prefer to not use a table. Perhaps you could point me in the direction of a tutorial which deals with having two images either side of a horizontal list. As it is, I find that very difficult to do.

    I have tried removing the link padding but the gaps are still there.

    img
    {
    padding:0;
    }

    Didn’t affect it.

    Thread Starter music_man

    (@music_man)

    I am not sure they contradict each other.

    I need to have CSS in the header.php file because it uses php and I cannot use php tags in a stylesheet.

    For instance:

    background-image: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/bgyellow.jpg”);

    Is in the header.php file.

    moshu

    (@moshu)

    M-man, can you read? Did I mention the “original” (=kubrick-clone) style from the head? I said navigation & co.

    body
    {
    margin: 75px 0px;
    padding: 0px;
    text-align: center;
    background-image: url("https://lynsscrapbooking.co.nz/wp-content/themes/scrapbooking/images/bgyellow.jpg");
    }

    #navigation a
    {
    background-image: url("https://lynsscrapbooking.co.nz/wp-content/themes/scrapbooking/images/navbgmid.png");
    color: white;
    padding: 10px;
    font-family: arial, Sans-Serif;
    font-size: medium;
    text-decoration: none;
    }

    #navigation a:hover
    { background-image: url("https://lynsscrapbooking.co.nz/wp-content/themes/scrapbooking/images/navbgmidselectover.png");
    color: #000;
    }

    #container
    {
    width: 90%;
    margin: 0px auto;
    text-align: left;
    background-color: #fff;
    border: 1px dashed #000;
    color: #000;
    background-image: url('https://lynsscrapbooking.co.nz/wp-content/themes/scrapbooking/images/topleft.jpg');
    background-position: top left;
    background-repeat: no-repeat;
    }

    No php in the code above and totally meaningless to have it in the head.

Viewing 15 replies - 1 through 15 (of 28 total)
  • The topic ‘Li’s added padding’ is closed to new replies.

Tags