12 replies [Last post]
Richard B
Richard B's picture
Offline
Regular
Last seen: 1 year 35 weeks ago
Joined: 2005-10-02
Posts: 15
Points: 0

Hi

I'm in the process of converting a web site on second-hand disability equipment for the charity I work for. The existing site uses tables for layout and we want to move to a CSS type site to make it fully accessible.

My first attempt is going reasonably well, but I have hit a problem with displaying the adverts. This is a link to one of the existing adverts page:
http://www.askdes.org.uk/show_ads.php?area_desc=Surrey&category_id=2&category_desc=Bathroom+Equipment&org_id=3&org_name=SID%20-%20Social%20Information%20On%20Disability&des_logo=logo1.gif

And this is my first attempt at reproducing it with CSS:
http://www.askdes.org.uk/test2/show_ads.html

I have two problems (amongst many others!) at the moment. Firstly, the actual advert displays reasonably OK in IE7 but not at all well in FF2. What am I doing wrong here, and, perhaps, more importantly, am I going about it the right way? Is this a case where I should be using tables to display the adverts, bearing in mind accessibility is crucial?

Secondly, when I validate the new pages I am working on I get an error telling me I shouldn't nest an unordered list in side another unordered list in the left-hand menu. How do I create the indented sub-menu in a valid way?

I feel I've got a huge amount to learn about creating web pages, so any help would be greatly appreciated.

Best wishes
Richard

gcyrillus
Offline
Enthusiast
FR spoken
Last seen: 13 years 21 weeks ago
FR spoken
Timezone: GMT+2
Joined: 2005-11-16
Posts: 57
Points: 0

hello , look for

hello , look for informations about floating elements and their containers .

In your case you may use "overflow:

#adverts {
background-color: #DEDEDE;
clear: both;
margin-top: 1%;
padding: 2%;
width: 90%;
overflow:hidden;
}

or a display:table: and center it with margin:

#adverts {
background-color: #DEDEDE;
margin:auto;
margin-top: 1%;
padding: 2%;
width: 90%;
display:table;
}

or ....
GC

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Your ul listing is invalid

Your ul listing is invalid as you have not nested the sub ul, it needs to be a child of an actual list item i.e.

<ul>
  <li></li>
  <li>
    <ul>
      <li></li>
    </ul>
   </li>
  <li></li>
</ul>

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Richard B
Richard B's picture
Offline
Regular
Last seen: 1 year 35 weeks ago
Joined: 2005-10-02
Posts: 15
Points: 0

gcyrillus wrote:hello , look

gcyrillus wrote:
hello , look for informations about floating elements and their containers .

In your case you may use "overflow:

or a display:table: and center it with margin:

Hi gcyrillus

Thanks for your reply. Both of those work, but they're not properties I've come across before, and so I don't know why they work. I've looked in a couple of CSS books and they both seem to say this is generally an IE problem, possibly to do with "haslayout" issues. I'll have to do some more reading on this, as one of the books says overflow: hidden can, as it suggests, hide things! So, until I understand it a bit more I'll go with the display property.

But I need to learn a lot more, otherwise I keep fixing things without fully understanding why!

Best wishes
Richard

Richard B
Richard B's picture
Offline
Regular
Last seen: 1 year 35 weeks ago
Joined: 2005-10-02
Posts: 15
Points: 0

Hugo wrote:Your ul listing

Hugo wrote:
Your ul listing is invalid as you have not nested the sub ul, it needs to be a child of an actual list item i.e.

Hi Hugo

Thanks for your reply. That makes a lot more sense than the validator message I got! However, the menu now has some odd spaces appearing when you hover over it in IE. I need to go back through the code.

It's quite a steep learning curve this CSS. Quite a lot of "two steps forward one step back", I find! Smile

Best wishes
Richard

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

overflow:hidden only hides

overflow:hidden only hides things if the element has dimensions and its contents exceed those dimensions. If the element's dimensions (in particular height) are auto, then the element will expand to surround its content so there will never be any content outside its dimensions to hide.

Overflow also triggers creation of a new display context (as does float and position:absolute). The creation of a new display context forces the element to expand to surround any floated children - as floats are only floats within their display context - and this is where it gets a little complex. The element which creates the new display context, creates that context for its children. It still sits in the display context[1] of its parent (or whichever of its antecedents created that display context).

[1] Excepting if its position:absolute.

Richard B
Richard B's picture
Offline
Regular
Last seen: 1 year 35 weeks ago
Joined: 2005-10-02
Posts: 15
Points: 0

Chris..S

Chris..S wrote:
overflow:hidden only hides things if the element has dimensions and its contents exceed those dimensions. If the element's dimensions (in particular height) are auto, then the element will expand to surround its content so there will never be any content outside its dimensions to hide.

OK, that makes sense. Does that mean that in this case, and perhaps wherever you using variable height columns, it's a good idea to set height:auto? I've just tried setting height:auto in place of overflow:hidden and that fixes the problem too.

I does sound as though overflow:hidden is one to use with caution, especially if you're still learning like me!

Thank you.

Richard B
Richard B's picture
Offline
Regular
Last seen: 1 year 35 weeks ago
Joined: 2005-10-02
Posts: 15
Points: 0

Hi again Can I also go back

Hi again

Can I also go back to part of my original question. Am I going about this in the right way, trying to lay out the adverts using CSS? I've read other posts where sometimes people seem to say there are cases where a table is still valid. But, as accessibility is very important, I'd then have to get into table summaries, headers, etc.

Any comments gratefully accepted, as so much of this is new to me.

Thanks again for everyone's help.

Best wishes
Richard

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Using Semantic HTML and CSS

Using Semantic HTML and CSS for the adverts shouldn't be a problem.

I think you may be approaching this the wrong way. First forget about the appearance you want and construct the html for an advert. If it was me ...
- each advert should be in a container element - probably of class "advert".
- each advert will have a heading element that hopefully comes first
- all content within the advert needs to be contained within an element ie. there shouldn't be any text directly within the "advert" element.
- put each piece of information inside an element that uses a class name that describes the information. e.g. <span class="price">.

Once you have your html, you can take a stab at some CSS for it. You may find that to get the appearance you are after you need some extra elements or to reorder things. But try to stay as close to your original html as possible.

Richard B
Richard B's picture
Offline
Regular
Last seen: 1 year 35 weeks ago
Joined: 2005-10-02
Posts: 15
Points: 0

Chris..S wrote:Using

Chris..S wrote:
Using Semantic HTML and CSS for the adverts shouldn't be a problem.

Thank you very much for your thoughts. I have gone straight to reproducing the look of the old site, but I can see where putting the "structure" of the advert together first and then doing the styling with CSS. That makes a lot of sense.

I shall have a go!

And thank you for the links to "haslayout" and menus - lots to read.

Your help is very much appreciated.

Richard B
Richard B's picture
Offline
Regular
Last seen: 1 year 35 weeks ago
Joined: 2005-10-02
Posts: 15
Points: 0

Hi again, I'm sorry if this

Hi again,

I'm sorry if this one isn't going on too long, but I still haven't got it quite right. I've re-thought it a bit and read lots of background stuff, particularly on floats and haslayout. But I'm still not getting it completely.

My latest effort is still at:
http://www.askdes.org.uk/test2/show_ads.html
And as you can hopefully see I'm having trouble with the float in the second column of the advert. At first I just had the problem in FF2 but I rewrote to include the leftcol and rightcol divs, and now I get the problem in IE7 too. I'm not sure that's progress, though. :injured:

In the articles and examples such as in the following link I can see what's happening and how the problem is fixed, but I just can't see how to apply it to my code.
http://www.pmob.co.uk/temp/flclear1.htm

I think I must be getting to old to learn new things! Anyway, I'd really appreciate a bit more help and guidance if anyone still has the patience.

Best wishes
Richard

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Remove the padding from

Remove the padding from #leftcol and float #rightcol right. That probably isn't what you are after, but it should give you some clues as to how to fix things up the way you want.

Some other notes:
- The single item is in a div with an id #adverts. If it is possible that more than one item will be shown within #adverts, I'd wrap them each in their own container. I'd probably make #adverts a UL and then make the individual containers LIs. A DIV with a class of "item" will work just as well.
- the item name is in a P classed as a "title". Make it a heading! (you can still use the class to provide the correspondence with the backend data).
- I'd reckon "Disclaimer" is also a heading, so another Hx element.
- You're paragraphs outside of #adverts could do with some separating white-space. When you remove all the margins at the top, you still need to put them back!
- I am not sure about the "font-size:100%" in your catchall style rule. But if you do have that, you don't need the font-size:100% declarations in the html & body rules.

Richard B
Richard B's picture
Offline
Regular
Last seen: 1 year 35 weeks ago
Joined: 2005-10-02
Posts: 15
Points: 0

Hi Chris Thank you very

Hi Chris

Thank you very much, once again. That's quite a lot for me to take in. I've tried your suggestion with floating the right column and looking at the margins, but I haven't cracked it yet. I will though!

But I can see the thinking behind using an unordered list, as there are up to ten different adverts on each page. So, I have started rewriting it a bit with that thought in mind. And I agree about the general spacing and the proper use of headers. I got stuck on the advert bit and haven't looked further down the page for a few days.

I'm determined to understand all this, though, rather than just do trial and error fixing. So, I'm going to leave everyone in peace for a few days (I'm actually away on holiday for a few days the day after tomorrow). I will post back next week, though, hopefully with a success story. But more than likely with different questions! I'm finding I'm taking two steps forward and one step back a lot of the time.

Best wishes
Richard