[Solved] CSS and UL Problems

[marvin_1]

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!

[marvin_1]

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:

McAdoo Catholic Elementary School

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

&#169 2009 McAdoo Catholic &#8224 35 N. Cleveland St. McAdoo, PA 18237 &#8224 (570) 929-1442 &#8224 Web Design

by Laura Kennedy

Thanks again.

-Laura

[marvin_1]

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

[Indubitable Turtle]

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:

McAdoo Catholic Elementary School

• 
• 
• 
• 
• 
• 
• 
• 

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

© 2009 McAdoo Catholic &#8224 35 N. Cleveland St. McAdoo, PA 18237 &#8224 (570) 929-1442 &#8224 Web Design by Laura Kennedy

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. ;)

[marvin_1]

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

[Indubitable Turtle]

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

[Author]

Posts