/    Sign up×
Community /Pin to ProfileBookmark

CSS issue with bullet list

Copy linkTweet thisAlerts:
Feb 04.2007

Here’s the problem URL: [url]http://andrewsontheweb.com/HealthyFoodsChart.html[/url]

Questions:
?

I have searched and read several posts, but can’t find anything to address my issues clearly enough for me:

  • 1.

    How do I get the h1 “Healthy Foods Chart” with a 16px font in the top td of the table and make the td a 33px height? I put a padding above the text, but the td is too deep.

  • 2.

    How do I get rid of the space below the bullet lists?

  • 3.

    What would be the quickest way to convert the individual tds under the fruits or veggies tds, such as apricots, cauliflower, honey, etc. to bulleted lists like the tds above?

  • 4.

    Where/how can I best learn how to format using CSS instead of tables? I am a newbie to CSS and can do a little, but I find tables MUCH faster and more reliable at this point. For example, I tried to format the div at the top of the page with CSS, but I couldn’t get it to center over the table without putting it into a table of its own.

    • Thanks!

    to post a comment
    CSS

    3 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @JackAndrewsauthorFeb 04.2007 — One down, 3 to go: I think I fixed the Header issue by specifying a 0 padding and 0 margin in the h1 pseudo. Not sure that's the best solution, but it works in IE 6.
    Copy linkTweet thisAlerts:
    @CentauriFeb 05.2007 — At the start of your css, add the following : [CODE]* {
    margin:0;
    padding:0;
    }[/CODE]     this zeroes out the default browser margins and paddings (which is different in different browsers) - you can then get rid of all other margin and padding declarations that are set to zero. This fixes up the extra spaces around the ul. To fix the bullet spacing and indent change [CODE]ul li {
    margin-left: 10px;
    text-indent: 0;
    }[/CODE]

    As far as the top div goes, this can be a styled <h2> tag like: [CODE]<h2>This list of healthy, natural foods is provided for the good of all. You may print this page, email the link to family and friends, include it on your web site or just link to this page from another site. Whatever you choose, we ask that you preserve the credit at the lower right, the formatting and the content. Eat well, live longer.</h2>[/CODE] replacing the entire top table, with css: [CODE]h2 {
    font-size: 12px;
    font-weight: 700;
    width: 527px;
    margin: 0 auto 10px;
    }[/CODE]

    Cheers

    Graeme
    Copy linkTweet thisAlerts:
    @JackAndrewsauthorFeb 05.2007 — Thanks Graeme. It works. I guess I'll have to learn this CSS stuff in bits and pieces.

    Jack
    ×

    Success!

    Help @JackAndrews spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.25,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...