Grow your CSS skills. Land your dream job.

[Solved] CSS and UL Problems

  • # August 22, 2009 at 4:41 pm

    I am new to this forum. I have dabbled in the world of HTML since 1997 with my own little hobby site. I did have one class in HTML, CSS, and JavaScript in 2004.

    I offered to help a friend out by creating a little website for their Catholic school. I decided to use CSS to keep things clean and simple. Since the people at the school don’t quite understand anything about webdesign, we have no way to post the site online, so I have no active site to show my problem.

    Problem is that all text is flush to the left. The bullets in the list are to the left of this left text margin cutting into my vertical navigation bar. It seems to be doing the exact opposite thing I want it to. The LI needs to be indented to the right.

    Everything seems to be working out except for the UL list. I tried defining margins for LI in CSS, I tried using some HTML tricks, and transparent gifs.

    CSS

    Code:
    #container {
    width:800px;
    height:auot;
    margin: 5px auto 5px auto;
    }

    #header {
    width:800px;
    height:60px;
    text-align:top;
    background-color:#084c8d;
    }
    #footer {
    margin:0 0 0 0;
    background: #b38471;
    }

    #vertinav {
    background-color:#6682b5;
    width:170px;
    height:590px;
    float:left;
    }

    #vertinavcontent {
    margin-left:5px;
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    }

    #content {
    background-color:#d5d5e5;
    text-align: left;
    width: 800px;
    height: 590px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    }

    HTML

    Code:
      Registration is traditionally held during Catholic Schools’ Week but students may be
      registered by appointment at any time. The following are the requirements for registration at
      McAdoo Catholic School:

    • Children registering for Kindergarten must be 5 years old by October 15th following the
      September of entrance to the school. All first-grade students must be 6 years old by October
      15th following the September of entrance to the school.
    • State birth certificate, Baptismal certificate (if Catholic or Christian), and immunization
      records must be presented at time of registration.
    • Parents of students transferring from another school will be requested to complete the
      following forms: a transfer of records form, a request for bus service, and a request for the use
      of textbooks provided by the State of Pennsylvania.
    • Students transferring from another school may be tested in reading and mathematics for placement.

    Any suggestions or fixes would be greatly appreciated.

    Thanks in advance!

    # August 22, 2009 at 8:43 pm

    If i follow the problem correctly, giving the LI a margin-left should bring the bullets in from the side..

    but you say this isn’t working? Could you provide a full example of the code and is this browser specific?

    adding left margin to the li works for me, so im guessing some other part of the layout is preventing it from working?

    Trying pasting the full code so I can get a better idea of the issue + play with it. If needs be, you could even just zip it and stick it on some free share site like yousendit or otherwise.

    # August 23, 2009 at 6:56 pm

    Thanks for the reply. It doesn’t seem to be browser specific. The page looks pretty much the same in all browsers (though it’s quite a mess in IE6). That’s an issue for later, though, I suppose.

    Here is my full CSS and HTML for the page with the ul problem.

    I’m sure my code is riddled with bugs. As I said earlier, I’m mostly a self-taught hobbiest. I never really did a whole site with a seperate CSS file before. I always use tables for layout, but I wanted this site done "right". Thinking back, this was probably not the time or place for me to be experimenting…but here I am!

    Code:
    body {
    background-color:#ebebeb;
    font-family: impact, sans-serif;
    }

    a {
    color:#084c8d;
    text-decoration:none;
    }
    img {
    border-style: none;
    }

    #container {
    width:800px;
    height:auot;
    margin: 5px auto 5px auto;
    }

    #header {
    width:800px;
    height:60px;
    text-align:top;
    background-color:#084c8d;
    }

    h1 {
    font-size:44px;
    color:#ffffff;
    margin: 15px 0 0 20px;
    font-family: Arial, Helvetica, sans-serif;
    }

    h2 {
    font-size:26px;
    color:#ffffff;
    margin: 0 0 0 20px;
    font-family:Arial, Helvetica, sans-serif;
    }

    h3 {
    font-size:16px;
    color:#000000;
    margin: 0 0 0 20px;
    font-family:Arial, Helvetica, sans-serif;
    }

    h4 {
    font-size:14px;
    color:#ffffff;
    margin: 0 0 0 5px;
    font-family:Arial, Helvetica, sans-serif;
    }

    #footer {
    margin:0 0 0 0;
    background: #b38471;
    }

    #vertinav {
    background-color:#6682b5;
    width:170px;
    height:590px;
    float:left;
    }

    #vertinavcontent {
    margin-left:5px;
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    }

    #content {
    background-color:#d5d5e5;
    text-align: left;
    width: 800px;
    height: 590px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    }

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">








    McAdoo Catholics admits students of any race, color, national or ethnic origin to all of the
    rights, privileges, program and activities generally accorded or made available to its students.
    The school does not discriminate on the basis of race, color, national or ethnic origin in the
    administration of its education policies, its admission policy, or in any school-administered
    program.

    McAdoo Catholic offers students a strong academic program that prepares them for success in high
    school; however, the primary purpose of the school is religious. Non-Catholic students may be
    admitted to our school under the following conditions:

    The parents/guardians agree to having their children attend religion classes and religious
    functions that are offered as part of the school program.

    Registration is traditionally held during Catholic Schools’ Week but students may be
    registered by appointment at any time. The following are the requirements for registration at
    McAdoo Catholic School:

    • Children registering for Kindergarten must be 5 years old by October 15th following the
      September of entrance to the school. All first-grade students must be 6 years old by October
      15th following the September of entrance to the school.
    • State birth certificate, Baptismal certificate (if Catholic or Christian), and immunization
      records must be presented at time of registration.
    • Parents of students transferring from another school will be requested to complete the
      following forms: a transfer of records form, a request for bus service, and a request for the use
      of textbooks provided by the State of Pennsylvania.
    • Students transferring from another school may be tested in reading and mathematics for placement.

    Thank you for your interest in McAdoo Catholic. Please call us at (570) 929-1442 for additional
    information or to schedule a visit to the school.

    Our school presently serves the following parishes/areas:

    All Saints Parish, McAdoo
    St. Nicholas Parish, Weatherly
    St. Richard Parish, Barnesville
    Hazleton Area


    Thanks again.

    -Laura

    # September 10, 2009 at 9:48 pm

    I guess no one can help me…?

    That’s alright. I’ll mess around with it some more, and see if I can fix my problem myself.

    Thanks all who looked at my issue.

    Laura

    # September 10, 2009 at 11:55 pm

    Hi Laura! :)

    I went through your code and pinpointed the problem. You have the sidebar floated left, but not the main content, which is causing margin not to take. To be completely honest, I’m not sure why this is. I made some edits to both the HTML and CSS to help you out a bit. Note that this is just the result of a few quick edits, though there are some additions.

    Most notably, I added a very succint CSS reset (really just gave *, html and body elements a margin and padding of zero), put the navigation in an unordered list for you, added title attributes to links and alt attributes to images (must keep accessibility in mind!), added closing tags where needed, and changed the footer text to a paragraph instead of a heading, as appropriate.

    More importantly, of course, I fixed the margin issues for you. :P I commented the CSS so you can see what I did and why.

    Code:
    /*Reset for html and body elements, the asterisk is for IE6. This ensures no funky browser default margins or padding exist to mess up layout!*/

    *, html, body {
    margin:0;
    padding:0;
    }

    body {
    background-color:#ebebeb;
    font-family: impact, sans-serif;
    }

    a {
    color:#084c8d;
    text-decoration:none;
    }

    img {
    border-style: none;
    }

    h1 {
    font-size:44px;
    color:#ffffff;
    margin: 15px 0 0 20px;
    font-family: Arial, Helvetica, sans-serif;
    }

    h2 {
    font-size:26px;
    color:#ffffff;
    margin: 0 0 0 20px;
    font-family:Arial, Helvetica, sans-serif;
    }

    h3 {
    font-size:16px;
    color:#000000;
    margin: 0 0 0 20px;
    font-family:Arial, Helvetica, sans-serif;
    }

    /*Basic paragraph styling for content text, unorder list styles including margins and spacing.*/

    p {
    font-size: 14px;
    padding: 15px 0 0 0;
    margin: 0 15px;
    line-height: 1.2em;
    }

    ul {
    font-size: 14px;
    margin: 25px 15px 15px 40px;
    }

    li {
    margin-top: 1em;
    }

    #container {
    width:800px;
    height:auto; /*Corrected typo here!*/
    margin: 5px auto 5px auto;
    background-color: #6682b5; /*Set background color for sidebar here instead of in sidebar styles, due to the way the sidebar functions. Basically this is behind all of the main content, but only visible beneath the sidebar.*/
    }

    #header {
    width:800px;
    height:60px;
    background-color:#084c8d;
    }

    #header a {
    color: #fff; /*So you can see the header link.*/
    }

    #vertinav {
    width: 170px;
    height: auto; /*No need for a set height anymore. This allows content to expand indefinitely without needing to re-set height of sidebar!*/
    float: left;
    }

    /*Sidebar navigation list styles. Just declaring that we don’t want bullet points and a bit of a margin. Edit to your liking, of course.*/

    #vertinav ul {
    list-style: none;
    margin: 10px 0 0 15px;
    }

    #content {
    position: relative; /*Important for the float to work. Tells the browser to position this element RELATIVE to others in the markup.*/
    float: left; /*Lets the content snug up to the sidebar all nice and neat.*/
    background-color:#d5d5e5;
    text-align: left;
    width: 630px; /*Width should be width of container div MINUS width of sidebar. Any margins or padding on #content or #vertinav divs will affect width.*/
    height: auto; /*Again, lets the content expand indefinitely without needing anything edited in the CSS to adjust height.*/
    font-family:Arial, Helvetica, sans-serif;
    }

    #footer {
    margin:0 0 0 0;
    background: #b38471;
    }

    /*Clears the floated elements above, so no funky content overflow happens.*/

    .clear {
    clear: both;
    }

    /*Basically just the previous h4 styles.*/

    #footer p {
    font-size:14px;
    color:#ffffff;
    margin: 0;
    font-family:Arial, Helvetica, sans-serif;
    padding: 3px 0 3px 5px;
    }

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

    • Calendar
    • Handbook
    • Registration
    • Newsletters
    • Transportation
    • Faculty Staff
    • Lunch
    • Tuition

    McAdoo Catholics admits students of any race, color, national or ethnic origin to all of the
    rights, privileges, program and activities generally accorded or made available to its students.
    The school does not discriminate on the basis of race, color, national or ethnic origin in the
    administration of its education policies, its admission policy, or in any school-administered
    program.

    McAdoo Catholic offers students a strong academic program that prepares them for success in high
    school; however, the primary purpose of the school is religious. Non-Catholic students may be
    admitted to our school under the following conditions:

    The parents/guardians agree to having their children attend religion classes and religious
    functions that are offered as part of the school program.

    Registration is traditionally held during Catholic Schools’ Week but students may be
    registered by appointment at any time. The following are the requirements for registration at
    McAdoo Catholic School:

    • Children registering for Kindergarten must be 5 years old by October 15th following the
      September of entrance to the school. All first-grade students must be 6 years old by October
      15th following the September of entrance to the school.
    • State birth certificate, Baptismal certificate (if Catholic or Christian), and immunization
      records must be presented at time of registration.
    • Parents of students transferring from another school will be requested to complete the
      following forms: a transfer of records form, a request for bus service, and a request for the use
      of textbooks provided by the State of Pennsylvania.
    • Students transferring from another school may be tested in reading and mathematics for placement.

    Thank you for your interest in McAdoo Catholic. Please call us at (570) 929-1442 for additional information or to schedule a visit to the school.

    Our school presently serves the following parishes/areas:

    • All Saints Parish, McAdoo
    • St. Nicholas Parish, Weatherly
    • St. Richard Parish, Barnesville
    • Hazleton Area


    Hope this helps you out, Laura! I well remember my early days of CSS—figuring out floats and margins and positioning…it’ll get a lot easier as you go, though! You’ve made a good start, just in casting off tables. I know it can be a big leap going from table-based design to solely CSS-based design with divs, but it is certainly worth it in time saved later on down the road and, obviously, semantics and doing things "the right way."

    If you have any further problems, or have any questions, feel free to ask. I’m sure someone around here can help. ;)

    # September 13, 2009 at 2:18 pm

    You are awesome! Thank you so much. I’m certinly learning by doing, but it does feel good doing things the right way. I always used some CSS in my work, but most was pure HTML and tables. I do like the way this is turning out, though. Once again, I really appreciate it!

    - Laura

    # September 15, 2009 at 12:47 pm

    No problem, I’m glad to be able to help. Again, if you need help with anything else, feel free to ask away!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".