You are here: Re: Help needed with minor CSS layout problems « HTML « IT news, forums, messages
Re: Help needed with minor CSS layout problems

Posted by Martin Clark on 03/18/06 01:08

Spartanicus wrote...
>Martin Clark <martin@spl.at> wrote:
>>>Use a Strict doctype, Transitional is for legacy documents who's code
>>>can otherwise not be updated, and what you have now triggers quirks
>>>mode.
>>
>>I have changed it to Strict. This has not produced a solution to the
>>problem I had.
>
>You may currently only be able to see one problem, more experienced
>people can see more problems. Listen if you want to learn how to spot
>these problems yourself.
>
Thanks for taking time again to spell things out for me. I will make a
few comments on what you have written but I will probably not have time
to act on them for a day or two.

>>Instead, it has created a new problem - there is a small
>>gap between the header and the navigation bar in Firefox (and an even
>>smaller gap in Opera). It doesn't seem to appear in IE6. What could be
>>causing that?
>
>Leave it for the moment, take on the other advice given and in the event
>that it's still there at the end of the track we'll deal with it then.
>
>>>Remove the presentational markup.
>>
>>If you mean the italics
>
>And the spacer images, the <br>s (address ones excepted), the &nbsp;s
>and the ]['s.
>
Okay, I've lost the ][s, the footer nav bar, the <br>s and spacers,
except those in the Nav bar, which I will work on later.

I had put &nbsp; between "Canal" and "Society" so that if the text wraps
(as I would like it to) the two words both move onto the next line.
Huddersfield
Canal Society
would look better than
Huddersfield Canal
Society

>>, this is likely to be the only page with any
>>italics at all, so it hardly seems worth creating a class for it.
>
>This is a case where semantic <em> or <strong> markup is appropriate.
>
Okay. done that. What is the difference between <i> and <em>? Is it to
do with people using text readers?

>>>Two navbars are a nuisance, one suffices.
>>
>>Why a nuisance?
>
>Navigating to the top or the bottom of a document is trivial, hence
>there is no benefit to repeating a navbar, repetition is a nuisance for
>situations where the document is rendered linearly.
>
Okay, I give in. Bottom navigation gone, along with its ][s. What about
a "Top of Page" link on longer pages? Is that good practice?

>>>Nav links should be marked up as an unordered list, not as paragraphs.
>>
>>They're not - except the links on the left which will draw attention to
>>specific features of the site. How can I use an unordered list to create
>>the blue backgrounds for headings and white backgrounds for the
>>descriptions? <p> seems to be ideal for this purpose.
>
>I mistook them for navigation links due to other mistakes you've made: 2
>consecutive links to the same target with different and poorly chosen
>link text. Hyperlinked text should preferably be the same as the header
>content of the page section that the link points to.
>
There were a lot of links to the same target because these other pages
do not exist yet so it doesn't matter what the target is for now.

>An example of how to structure side bar content assuming that the target
>header is "74 Club":
>
><h2>News</h2>
><p><b>The 74 Club</b></p>
><p>Find out whether you can join the exclusive <a href="74club.htm">74
>Club</a>!</p>
><p><b>Standedge Tunnel</b></p>

Thanks for the suggestion. I will have a play with this when I get time.

>>>Remove the spacer gifs, use CSS instead.
>>
>>The white line between the header and the nav bar does not work unless I
>>put a spacer gif there (it ends up too thick).
>
>Markup the navbar as an unordered list, use CSS to specify a bottom
>border on the masthead or a top border on the navbar.
>
I was under the impression that items in a list would appear one under
the other. I have never made them appear horizontally before. I will
need to look up how to achieve that.

>>>Fix your header structure, add one <h1> with "Huddersfield Canal
>>>Society" as it's content.
>>
>>I have reserved <h1> for the titles of each page within the site. This
>>is the home page and doesn't have one. I want Google to give greater
>>priority to picking up the subject of each page rather than picking up
>>the name of the society.
>
>The subject of the home/index page *is* the name of the society.
>
Point taken! However, I want the same style sheet to work for every page
and can't have <h1> doing different things on different pages. I will do
something about this in the next day or so.

>>>Remove the <hr> and &nbsp;, use CSS instead.
>>
>>Done.
>
>Canal&nbsp;Society</a>&nbsp; still there.
>
Not any more. I thought I had already removed the second one and I
explained above my reason for the one between the words.

>>But what is wrong with <hr>?
>
>It's used in a presentational manner.
>
Ah. Only because I wanted it to fit in with the colour scheme. I thought
that if it is given a class then the presentational details move to the
style sheet.

>>>Fix your alt text, the logo is merely decorative, use alt="".
>>
>>Surely a matter of personal preference?
>
>No, disable graphics and the "Huddersfield Canal Society" title of the
>page is repeated twice.
>
Okay. Won't it then run foul of accessibility guidelines that want
images to have alt text?

>>It does not affect the problem I
>>was asking about.
>
>I am getting tired of seeing you repeating that.
>
Yeah, sorry. Please appreciate my frustration in looking for a solution
to a problem and getting everything marked with a red pen. However, I am
here in order to learn and I appreciate the explanations you are giving
me.

[snip]
>
>>>Don't use characters ( ][ )to separate links, specify a border with CSS.
>>
>>Why not?
>
>A screen reader will read "Left square bracket Top of page Right square
>bracket Left square bracket Home Right square bracket Left square
>bracket The Society ..." a bloody nuisance.
>
Thanks - I didn't realise that. I will remove them from one of my other
sites once I have sorted this one out. What does a reader say to a "|" ?
How would I separate them with CSS - using <span>s or unordered lists
(which I need to learn about)?

>>>Don't use absolute positioning for the header, there is no need to do so
>>>and it results in the problem you are seeing.
>>>
>>Ah, at last! The problem I was asking about. The reason why I am asking
>>the question is because I am still learning how to use CSS for layout
>>and am still struggling with some aspects. Can you please explain what I
>>should be doing instead?
>
>No positioning, just leave the element in the flow.
>
Hmm. I'll need to work on that. I'll look at Jonathan's suggestion as
well and see what I can do. Thanks, both.
--
Martin Clark

 

Navigation:

[Reply to this message]


Удаленная работа для программистов  •  Как заработать на Google AdSense  •  England, UK  •  статьи на английском  •  PHP MySQL CMS Apache Oscommerce  •  Online Business Knowledge Base  •  DVD MP3 AVI MP4 players codecs conversion help
Home  •  Search  •  Site Map  •  Set as Homepage  •  Add to Favourites

Copyright © 2005-2006 Powered by Custom PHP Programming

Сайт изготовлен в Студии Валентина Петручека
изготовление и поддержка веб-сайтов, разработка программного обеспечения, поисковая оптимизация