14 replies [Last post]
bobudesu
Offline
newbie
Last seen: 14 years 33 weeks ago
Timezone: GMT-4
Joined: 2008-06-04
Posts: 9
Points: 0

Hello,
First post here and I'm almost equally as new to css. I've been rewriting my company website over the last couple weeks and I'm stumped on an unordered list. I'm attempting to create a sitemap using an unordered list. So far the best I've been able to get is the first portion of the list displays correctly but then the rest drops to the bottom of the page.

Essentially what I'm trying to accomplish is something that will end up like this:

*Number one
*Number two
{indented}*Dogs
{indented}*Cats
{indented}{indented}*White ones
{indented}{indented}*Black ones
{indented}{indented}*Fluffy ones
*Number three
*Number four

So I essentially need 3 layers.

  • Number one
  • Number two
    • Dogs
    • Cats
      • White ones
      • Black ones
      • Fluffy ones
  • Number three
  • Number four

That's my current html. My google searches have led me to try instead of

    as well as
      instead of
        but none of that has worked.

        For css I've tried a few different things but this is my most recent...

        ul li{clear: both;} ul li a{width: 100px; float: left;} ul ul li a{width: auto; float: none;clear: both;} ul ul{padding-left: 100px} ul ul li {display: inline; }

        That was from searching the forums here. I've tried a few different css writeups but so far nothing has worked.

        Where am I going wrong?

        http://dl.getdropbox.com/u/25755/NJL/New%20Site/TestSiteMap.html

        That's where I'm testing the sitemap. Instead of using the fullblown sitemap I've "dumbed it down" to the Number One, etc and dogs and cats. Once I figure out what I'm doing wrong I can turn it into the larger sitemap I need.

        Any help is GREATLY appreciated. Thank you!!

        ifohdesigns
        ifohdesigns's picture
        Offline
        Enthusiast
        Providence, RI
        Last seen: 11 years 19 weeks ago
        Providence, RI
        Timezone: GMT-4
        Joined: 2008-02-22
        Posts: 269
        Points: 0

        In your css you have * {

        In your css you have * { margin: 0; padding: 0; }

        Which resets the padding and margin on EVERY element. You dont need all that float, width, display, etc.

        You only need padding and margin.

        mattrossidesigns.com

        bobudesu
        Offline
        newbie
        Last seen: 14 years 33 weeks ago
        Timezone: GMT-4
        Joined: 2008-06-04
        Posts: 9
        Points: 0

        When I was writing the

        When I was writing the css/html I assumed that the UL would take on the properties assigned to

        (html)

        (css)
        .content {
        position: absolute;
        width: 60%;
        top: 190px;
        font-size: 13px;
        margin: 0 0 5px 28%;
        color: #666666;
        }

        By that I mean it would place the list at the top of the center area where it currently says "This is testing the sitemap nesting css " on the link: http://dl.getdropbox.com/u/25755/NJL/New%20Site/TestSiteMap.html

        I'm sure there has to be an easy way of telling it where to be placed, but so far every attempt has failed and has ended with either half or all of the list being pinned directly below the client login box on the left side.

        What would be the best way to have the list immediately follow "This is testing the sitemap nesting css"?

        ifohdesigns
        ifohdesigns's picture
        Offline
        Enthusiast
        Providence, RI
        Last seen: 11 years 19 weeks ago
        Providence, RI
        Timezone: GMT-4
        Joined: 2008-02-22
        Posts: 269
        Points: 0

        All those links at the top

        All those links at the top are in paragraphs, which are block level elements, meaning they will take up the entire width of their container. This is why your list is being pushed down.

        You need to set up a 2 column layout and float them accordingly.

        Do a search on this forum, and google on floats. You are going to have to reformat that layout. While you are at it, you should put the top "list" in an actual list.

        Best of luck!

        mattrossidesigns.com

        bobudesu
        Offline
        newbie
        Last seen: 14 years 33 weeks ago
        Timezone: GMT-4
        Joined: 2008-06-04
        Posts: 9
        Points: 0

        I've been able to make lists

        I've been able to make lists work on other pages of the site and they've been placed right where i want them. For some reason I can't get it to work when I have multiple levels of lists though. Currently on this page: http://dl.getdropbox.com/u/25755/NJL/New%20Site/Why_Forensic_Data_Collection.html I have lists and they display just how I want them.

        Here's the html I'm using

      • Case and Project Planning and Consulting
      • Preservation of Evidence
      • Collection
      • Investigation
      • Analysis
      • Reporting
      • Expert Testimony
      • Complex Data Recovery
      • Backup Tape Restoration
      • Password Cracking
      • And here's the css

        .ul { position: relative; list-style-type: disc; list-style-position: inside; }

        I've tried to do that with a list with multiple layers and when I try inserting a second span="ul" it falls apart. However, doing it the way I have above it's showing up in the correct position on the page. If I can get it to display properly with one layer of "li" then it seems I should be able to get it to display properly with a second and third layer of "li" just by adjusting the code, without having to reformat the entire page. It seems that with the amount of control css gives you over placement on a page I should be able to make a simple adjustment somewhere to make it work??

        Any ideas? I really don't want to have to rewrite the whole page if possible. I think I'll end up just ditching the list before I rewrite the entire page and format a sitemap in some other way :-/

        Thanks for all the help so far and any further help!!

        ifohdesigns
        ifohdesigns's picture
        Offline
        Enthusiast
        Providence, RI
        Last seen: 11 years 19 weeks ago
        Providence, RI
        Timezone: GMT-4
        Joined: 2008-02-22
        Posts: 269
        Points: 0

        Whoever said to use that

        Whoever said to use that apan method should be shot.

        You are using a strict doctype yet not adhering to the specifications at all.

        Lists must be contained by either a ul, or ol

        The reason that page is working is because you have it absolutely positioned there. Look into floats, I am telling you. You will save yourself about 3 bottles of Ibuprofen.

        mattrossidesigns.com

        bobudesu
        Offline
        newbie
        Last seen: 14 years 33 weeks ago
        Timezone: GMT-4
        Joined: 2008-06-04
        Posts: 9
        Points: 0

        While googling for

        While googling for information on float and unordered lists I came across this site:

        http://www.communitymx.com/content/article.cfm?page=3&cid=27F87

        I used the following css

        .ListBox { position: absolute; top: 180px; font-size:13px; padding: 10px; background: #FFFFFF; width: 350px; min-height: 30%; margin-left: 30% } ul { margin: 0; padding-left: 10px; } li { padding: 0; line-height: 1.5em; } .col1 {margin-left: 3px;} .col2 {margin-left: 18px;} .col3 {margin-left: 33px;} .coltopper {margin-top: 0;}

        with the following html

        • Number one
        • Number two
          • Dogs
          • Cats
            • White ones
            • Black ones
            • Fluffy ones
        • Number three
        • Number four

        I'm sure it's not the most elegant code, but it worked and put it exactly where I needed it to. Thanks for everyone's help! I still haven't figured out the float usage (so far everything just relates it to images) but if I do find that it's easier/better to use then I'll plug that in. At least for now it's a functioning page.

        Thanks again! Laughing out loud

        thepineapplehead
        thepineapplehead's picture
        Offline
        Moderator
        Last seen: 39 weeks 6 days ago
        Timezone: GMT+1
        Joined: 2004-06-30
        Posts: 9683
        Points: 819

        Your problems are likely

        Your problems are likely stemming from the fact that you're removing the default indent by setting padding on every LI to 0.

        You shouldn't need to specify the left-margin for each sub-level as browsers will indent them automatically.

        What browser are you testing this in?

        Verschwindende wrote:
        • CSS doesn't make pies

        bobudesu
        Offline
        newbie
        Last seen: 14 years 33 weeks ago
        Timezone: GMT-4
        Joined: 2008-06-04
        Posts: 9
        Points: 0

        Primarily Firefox 3 on Win

        Primarily Firefox 3 on Win XP at work, but also Firefox 3 on mac 10.5 & 10.4 when at home. Most of my troubleshooting over the last few days has been on xp.

        thepineapplehead
        thepineapplehead's picture
        Offline
        Moderator
        Last seen: 39 weeks 6 days ago
        Timezone: GMT+1
        Joined: 2004-06-30
        Posts: 9683
        Points: 819

        Check it in IE as well.

        Check it in IE as well. Chances are it won't look right Smile

        Verschwindende wrote:
        • CSS doesn't make pies

        bobudesu
        Offline
        newbie
        Last seen: 14 years 33 weeks ago
        Timezone: GMT-4
        Joined: 2008-06-04
        Posts: 9
        Points: 0

        I just looked. I hate IE.

        :curse: I just looked.

        I hate IE. :curse:

        So it either eats my lists or misplaces them. Do I have any option other than rewriting the site into a multi-column layout? Isn't there any other way to place lists with accuracy? Sad

        thepineapplehead
        thepineapplehead's picture
        Offline
        Moderator
        Last seen: 39 weeks 6 days ago
        Timezone: GMT+1
        Joined: 2004-06-30
        Posts: 9683
        Points: 819

        Look at my first reply. IE

        Look at my first reply. IE uses a left-margin, Firefox uses left-padding.

        By setting the padding to 0 then re-indenting with a margin, you're effectively increasing the margin in IE.

        I'm not entirely sure why this you seem to be overcomplicating this issue. What I would suggest is taking out all the classes attached to the LIs in the HTML and deleting all the CSS relating to it, so you're left with a default menu, and check it in IE and Firefox, then go from there.

        You seem to be making a lot of work for yourself - removing the default indent then adding it back in?

        Verschwindende wrote:
        • CSS doesn't make pies

        bobudesu
        Offline
        newbie
        Last seen: 14 years 33 weeks ago
        Timezone: GMT-4
        Joined: 2008-06-04
        Posts: 9
        Points: 0

        Ok, I removed the classes

        Ok, I removed the classes along with the css and the * setting all margin/padding to 0. I even rewrote the navigation area on the page use lists. I have another question now though... On this page I have to lists. One of them needs to have bullets and the other (navigation area) can't. What's the best way to do that? I don't know of any other way if using class is bad.

        bobudesu
        Offline
        newbie
        Last seen: 14 years 33 weeks ago
        Timezone: GMT-4
        Joined: 2008-06-04
        Posts: 9
        Points: 0

        Also, I don't know what the

        Also, I don't know what the forums normal etiquette is as far as adding content to this along with another question or creating a new topic, but for now i'll err on the side of caution and keep my questions in this thread...

        I now have two questions...
        (1) If I have two lists on one page and one needs to have bullet lists and the other needs to have no bullets at all, how can I best do this?

        (2) Now that I've removed the css * removing margin/padding on everything I've found that there's a gap at the top of the page where the #wrapper doesn't connect to the top. How do I make the wrapper flush with the top of the rest of the page?

        Here's the html of a sample page

        @import "Main.css";





        And here's the css

        html, body { font-family: Helvetica, Arial, "Times New Roman", sans-serif; height: 100%; background-color: #F7F7F7; text-align: center; }

        #wrapper {
        text-align: left;
        position: relative;
        padding-left: 10px;
        padding-righ: 10px;
        background: #FFFFFF;
        width: 800px;
        min-height: 210%;
        margin: 0 auto -20px auto;
        border-left: 5px solid #E0E0E0;
        border-right: 5px solid #E0E0E0;
        }

        #footer {
        background-color: blue;
        height: 20px;
        position: relative;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 13px;
        color: white;
        text-align: center;
        font-variant: small-caps;
        width: 790px;
        margin: 0 auto;
        border-left: 5px solid #E0E0E0;
        border-right: 5px solid #E0E0E0;
        }

        .clearfooter {
        position: relative;
        height: 20px;
        clear: both;
        }

        What out of that is causing the gap at the top of the page that you can see here: http://dl.getdropbox.com/u/25755/NJL/New%20Site/TestWrapper.html

        Thanks again, I really appreciate everyone's help on this!!

        bobudesu
        Offline
        newbie
        Last seen: 14 years 33 weeks ago
        Timezone: GMT-4
        Joined: 2008-06-04
        Posts: 9
        Points: 0

        I've resolved the problem

        I've resolved the problem with the space at the top of the page but I'm still stuck on using a list for navigation without bullets and also using a list for a sitemap with bullets.

        Quote:

        (1) If I have two lists on one page and one needs to have bullet lists and the other needs to have no bullets at all, how can I best do this?

        Thanks again for any help!!