I know I've made a CSS mess :>)

Hi all

It’s been a while since I’ve been on this forum because I generally use the Lassoosoft GoLive list for my questions but it appears to be down at the moment - no posts yesterday or today other than 2 yesterday morning. Since you folks were such a big help a year ago I thought I’d ask my question here. :>)

My “boss” asked me to throw up 3 news releases on her website today and she needed them up NOW. Since I’m still learning all the ins and outs of CSS I know darn well I have WAY too many divs but I needed to do it as quickly as possible, so now I’m asking for help cleaning it all up.

The pages are linked to the home page of http://www.caninereview.ca. The first one which went up was Looking Back, then the 2 press releases on the right went up, followed by the Memorial article. I did manage to figure out the 3-column format but with different sizes of photos I had to keep making new divs and classes to position them all.

If someone could take the time to tell me how to amalgamate all the divs, I’d sure appreciate it. There MUST be a better way to do this! I did think that perhaps a separate style sheet for each page would be one solution - would it be?

Also, is there a way to “text wrap” in CSS? In other words, I would have liked to have had some of the secondary photos wider than the column width but no matter how I fiddled with floats there was no way I could get the other columns to “wrap” around the photo which wasn’t in them.

(Additional to the above - I did see the post on this forum about having the image floated and the text I want to wrap not floated but am not sure I could do that and still have a 3-column layout. Wouldn’t it be the middle column that would have to be not floated (assuming the image is in the left column) and then wouldn’t that “break” the layout?)

Then, of course, there’s IE and lists. I thought everything was fine until I spoke to a PC person who told me that part of the left-hand side of the bulleted items in the New York press release is missing. Before I go and just forget about bullets and type in paragraph numbers I thought I’d see if there’s a work-around for this.

Thanks!

Hi helen, you can indeed do with a small clean up :wink:

I only did some quick cleanup on the page called 'champion eh!

the article in the left column has a lot of br tags. Convert those sections into paragraphs and set a padding to your liking on them if needed.

The image you can float left and the text will flow around it. If you float it left, you can set a margin-right on it (e.g. 10px). Also i would remove the height on the container. That way it will grow with the content. You can apply the same stuff to the rest of the paragraphs.

Also remove the empty p tags at the end of the articles. If you want to create space there, you could use a class for that (depending how the lay out will end up with the adjustments.

I haven’t checked yet in IE.

Just had a glance in IE7 at the hotel article: that’s shoved completely to the let of the viewport and the li markers indeed don’t show up. It seems your doctype isn’t complete because when i added the full doctype, everything was centered. You can control the appearance of the li markers by adjusting that negative margin you have set on the #articlemiddle ul and #articleleft ul.

Doctype used:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Only tested locally and there should be other solutions for the marker issue but it’s the one that was the least work (i’m a bit lazy today lol). Anyway, i think you’ll be set up in the right direction now. Anything more, problems… just let us know :smiley:

the article in the left column has a lot of br tags. Convert those sections into paragraphs and set a padding to your liking on them if needed.

Oops - I thought I’d caught all of those. Thanks for seeing them.

The image you can float left and the text will flow around it. If you float it left, you can set a margin-right on it (e.g. 10px).

Yes, that works well but only within that one column. When I try to put in a pic which is wider than the column, only the text in the original column wraps; the text in the neighbouring column doesn’t. :>(

Also i would remove the height on the container. That way it will grow with the content.

If I’m remembering correctly, that is the only page which has the height on the container because for some reason setting height to 100% wouldn’t work. It works like a charm on the other pages but not that one. As I was in a hurry I just stuck in the height and uploaded. :>)

Also remove the empty p tags at the end of the articles. If you want to create space there, you could use a class for that (depending how the lay out will end up with the adjustments.

Again, I thought I’d caught all those but obviously not - thanks for spotting them.

Thanks for the suggestions, Luki-be - I appreciate you taking the time to look at the pages.

I’m still wondering, though, if there’s some way to have fewer (probably a LOT fewer) div declarations in the style sheet. Would using a separate sheet for each page be the solution, maybe? It just seems awfully clumsy to have half a dozen basically-the-same definitions to take care of only slightly differing things.

It seems your doctype isn’t complete because when i added the full doctype, everything was centered.

You’re right! The template I’m using was created in GoLive CS, which of course is pretty ancient and I didn’t notice that it only has part of the doctype. I’ve put the full info into the template and the revised files are uploading so hopefully it will work properly now.

Thanks again!

Let’s start with the easy part :wink:

The hotel page also had the height, which is normal since you used the same css sheet :wink:
Now about the cross column wrapping, we had an interesting thread about this a few days ago. There are some slutions to it, but it’s not intuitive: there’s the solution posted on A List Apart and the sandbag solution, posted by Rayzur. Me myself and i would go with Rayzurs’ solution. Both links you’ll find in the thread.
About the height, if you just remove it, the div will strech nicely with the content, unless you’re going for a an equal column height and/or sticky footer solution which is another ballpark.

About the stylesheet: maybe it could do with some cleaning but it probably will involve cleaning the html also. As an example, the hotel page:

you have article left, middle and right wrapped inside a div called hotelmain, which in itself is wrapped inside a div containerhotel. In the css you have rules for #container and #containerhotel where the only difference is the height declaration. Now i’m assuming #container is used on another page and containerhotel only on the hotelpage? in that case you can write it as:


#container, #containerhotel {same stuff;}
#containerhotel {different height declaration;}

Or just loose all those nested containers: hotelmain that wrapps all content, which in turn is wrapped in containerhotel…

You can also see what selectors, declarations you have in common and group them together.