Li’s added padding

  • Resolved music_man

    (@music_man)


    18 years, 9 months 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)

  • 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>

    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.

    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.

    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.

    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.

    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.

    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