Board index » html » Help needed with minor CSS layout problems

Martin Clark

Registered User

Help needed with minor CSS layout problems

2006-03-16 08:11:00 PM
I am developing a new design for a canal society website.
The look I am attempting to achieve can be seen here:
www.tamevalley.freeserve.co.uk/hcs/index.htm
This has been achieved easily using tables for layout.
However, I am mindful of the current thinking that CSS should be used
for layout rather than tables.
I have managed to get as far as this using CSS for layout:
www.tamevalley.freeserve.co.uk/hcs/index2.htm
There are four problems I would appreciate help with:
1) The society's name in the header section appears at the bottom of the
dark blue header box, whereas I want it to be vertically central. I have
used vertical-align: middle; but I think this only affects images rather
than text.
In IE6, the text sits on the white line at the bottom of the box. In
Firefox it partly disappears behind the navigation bar. In Opera it
partly overlaps the navigation bar.
How can I get the text to appear half-way up the dark blue header box?
2)How can I get that same text in the header box to wrap onto a second
line in smaller windows (such as 800 pixels width), rather than overlap
the photo on the right? I would like to keep the white text in the dark
blue area only (as happens in the tables version).
3) In Firefox, the white area for the page's content overflows from the
"container" and covers the background colour to the right of the page.
This does not happen in Opera or IE6. How can I avoid this happening?
4) I only want the background colour to be visible to the left and
right, as happens with the table layout. Using CSS, the background is
also visible at the top and bottom.
I have set .container {margin: 0 3% 0 3%;} but this doesn't achieve what
I want. Any suggestions, please?
The pages have been validated and show no errors.
Most of the links on the page do not yet work.
Any assistance or pointers will be gratefully received.
--
Martin Clark
-
 
Neredbojias

Registered User

2006-03-17 12:24:00 AM

Re:Help needed with minor CSS layout problems

With neither quill nor qualm, Martin Clark quothed:
Quote
I am developing a new design for a canal society website.
The look I am attempting to achieve can be seen here:
www.tamevalley.freeserve.co.uk/hcs/index.htm
This has been achieved easily using tables for layout.

However, I am mindful of the current thinking that CSS should be used
for layout rather than tables.
I have managed to get as far as this using CSS for layout:
www.tamevalley.freeserve.co.uk/hcs/index2.htm

There are four problems I would appreciate help with:

1) The society's name in the header section appears at the bottom of the
dark blue header box, whereas I want it to be vertically central. I have
used vertical-align: middle; but I think this only affects images rather
than text.
In IE6, the text sits on the white line at the bottom of the box. In
Firefox it partly disappears behind the navigation bar. In Opera it
partly overlaps the navigation bar.
How can I get the text to appear half-way up the dark blue header box?
It appears to be next to an image, so when you use vertical-align,
assign a value in pixels (which will be _roughly_ half the image
height.)
--
Neredbojias
Contrary to popular belief, it is believable.
-
David Graham

Registered User

2006-03-17 02:29:00 AM

Re:Help needed with minor CSS layout problems

"Martin Clark" <martin@spl.at>wrote in message
Quote
I am developing a new design for a canal society website.
The look I am attempting to achieve can be seen here:
www.tamevalley.freeserve.co.uk/hcs/index.htm
This has been achieved easily using tables for layout.

However, I am mindful of the current thinking that CSS should be used
for layout rather than tables.
I have managed to get as far as this using CSS for layout:
www.tamevalley.freeserve.co.uk/hcs/index2.htm

There are four problems I would appreciate help with:

1) The society's name in the header section appears at the bottom of the
dark blue header box, whereas I want it to be vertically central. I have
used vertical-align: middle; but I think this only affects images rather
than text.
In IE6, the text sits on the white line at the bottom of the box. In
Firefox it partly disappears behind the navigation bar. In Opera it
partly overlaps the navigation bar.
How can I get the text to appear half-way up the dark blue header box?

Hi
Does it help if you put a unit in the height (px) - anything other than 0
needs a unit
.header {background-color:#281870; width: 100%; height: 79;}
HTH
David
-
Martin Clark

Registered User

2006-03-17 02:36:00 AM

Re:Help needed with minor CSS layout problems

Neredbojias wrote...
Quote
With neither quill nor qualm, Martin Clark quothed:
Quote

1) The society's name in the header section appears at the bottom of the
dark blue header box, whereas I want it to be vertically central. I have
used vertical-align: middle; but I think this only affects images rather
than text.
In IE6, the text sits on the white line at the bottom of the box. In
Firefox it partly disappears behind the navigation bar. In Opera it
partly overlaps the navigation bar.
How can I get the text to appear half-way up the dark blue header box?

It appears to be next to an image, so when you use vertical-align,
assign a value in pixels (which will be _roughly_ half the image
height.)

Thanks. I've tried that and it now does what I need in IE6, but the text
has only moved a little higher in Firefox and Opera.
--
Martin Clark
-
Martin Clark

Registered User

2006-03-17 05:36:00 AM

Re:Help needed with minor CSS layout problems

David Graham wrote...
Quote
"Martin Clark" <martin@spl.at>wrote in message
Quote
1) The society's name in the header section appears at the bottom of the
dark blue header box, whereas I want it to be vertically central. I have
used vertical-align: middle; but I think this only affects images rather
than text.
In IE6, the text sits on the white line at the bottom of the box. In
Firefox it partly disappears behind the navigation bar. In Opera it
partly overlaps the navigation bar.
How can I get the text to appear half-way up the dark blue header box?
Does it help if you put a unit in the height (px) - anything other than 0
needs a unit
.header {background-color:#281870; width: 100%; height: 79;}
Thanks for pointing that out, David. I have now changed it.
Sadly, it does not solve the problem.
--
Martin Clark
-
Alan J. Flavell

Registered User

2006-03-17 05:46:00 AM

Re:Help needed with minor CSS layout problems

On Thu, 16 Mar 2006, Martin Clark wrote:
Quote
David Graham wrote...
Quote
Does it help if you put a unit in the height (px) - anything other
than 0 needs a unit .header {background-color:#281870; width: 100%;
height: 79;}

Thanks for pointing that out, David.
What might have also been pointed out is that it's a courtesy to other
usenauts to feed one's CSS (and HTML too) to the appropriate checkers
first, and to iron out these trivia before seeking help. It's
demeaning to ask humans to carry our trivial mechanical checks that
are so easily done by computer.
(It's particularly easy to do that if you install Chris Pederick's web
developer toolbar for Mozilla or Firefox).
-
Martin Clark

Registered User

2006-03-17 06:27:00 AM

Re:Help needed with minor CSS layout problems

Alan J. Flavell wrote...
Quote
On Thu, 16 Mar 2006, Martin Clark wrote:
Quote
David Graham wrote...
>Does it help if you put a unit in the height (px) - anything other
>than 0 needs a unit .header {background-color:#281870; width: 100%;
>height: 79;}

Thanks for pointing that out, David.

What might have also been pointed out is that it's a courtesy to other
usenauts to feed one's CSS (and HTML too) to the appropriate checkers
first, and to iron out these trivia before seeking help. It's
demeaning to ask humans to carry our trivial mechanical checks that
are so easily done by computer.

Sorry to have so demeaned you. I'm afraid I made the error of thinking
that if the style sheet is embedded in the page and I ran the page
through a validator then it would validate the CSS as well as the HTML.
However, as you have so courteously pointed out my error, I have run the
page through a separate CSS checker and corrected the faults.
The white text now appears in the correct position. Thank you, both.
Now, perhaps someone is able to offer some suggestions for the other 3
problems I mentioned? They are still there even with the corrected CSS!
Quote
(It's particularly easy to do that if you install Chris Pederick's web
developer toolbar for Mozilla or Firefox).
I should be delighted to add it to my Firefox. Thank you for the
suggestion.
--
Martin Clark
-
Martin Clark

Registered User

2006-03-17 11:04:00 PM

Re:Help needed with minor CSS layout problems

I wrote...
Quote
Now, perhaps someone is able to offer some suggestions for the other 3
problems I mentioned? They are still there even with the corrected CSS!
I have now solved two of these problems by removing the ".container" div
and setting margin and padding properties for "body".
I am still trying to find a way to make the white text in the header
area wrap in a 800 px window, rather than overflow across the photo.
Newest version: www.tamevalley.freeserve.co.uk/hcs/index2.htm
Any suggestions as to which properties I should be looking at would be
appreciated.
--
Martin Clark
-
Spartanicus

Registered User

2006-03-17 11:44:00 PM

Re:Help needed with minor CSS layout problems

Martin Clark <martin@spl.at>wrote:
Quote
Now, perhaps someone is able to offer some suggestions for the other 3
problems I mentioned? They are still there even with the corrected CSS!

I have now solved two of these problems by removing the ".container" div
and setting margin and padding properties for "body".

I am still trying to find a way to make the white text in the header
area wrap in a 800 px window, rather than overflow across the photo.
Newest version: www.tamevalley.freeserve.co.uk/hcs/index2.htm

Any suggestions as to which properties I should be looking at would be
appreciated.
You should fix these issues:
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.
Move the CSS to an external stylesheet.
Remove the presentational markup.
Two navbars are a nuisance, one suffices.
Nav links should be marked up as an unordered list, not as paragraphs.
Remove the spacer gifs, use CSS instead.
Fix your header structure, add one <h1>with "Huddersfield Canal
Society" as it's content.
Remove the <hr>and  , use CSS instead.
Your body text size is uncomfortably small for me, there's little point
in specifying text-size:100% if you then reduce it to 90% for
.maincolumn
Fix your alt text, the logo is merely decorative, use alt="".
You've used far to many classes.
Don't use <br>to create spacings, use CSS.
Don't use characters ( ][ )to separate links, specify a border with CSS.
Don't use absolute positioning for the header, there is no need to do so
and it results in the problem you are seeing.
--
Spartanicus
-
Jonathan N. Little

Registered User

2006-03-18 01:52:00 AM

Re:Help needed with minor CSS layout problems

Martin Clark wrote:
Quote
I wrote...

Quote
Now, perhaps someone is able to offer some suggestions for the other 3
problems I mentioned? They are still there even with the corrected CSS!


I have now solved two of these problems by removing the ".container" div
and setting margin and padding properties for "body".

I am still trying to find a way to make the white text in the header
area wrap in a 800 px window, rather than overflow across the photo.
Newest version: www.tamevalley.freeserve.co.uk/hcs/index2.htm

Any suggestions as to which properties I should be looking at would be
appreciated.
Try this...a little simpler
REPLACE your header, huddersfield , banner class defs with:
.header {background-color:#281870; color:#ffffff; width: 100%; }
.header {
font-family: Times New Roman, serif;
font-size: 1.75em; /* don't use Points on web */
font-weight: 700;
color: #ffffff;
background-color: #281870;
width: 100%;
margin: 0;
padding: 0;
}
.header .huddersfield { vertical-align: middle; }
.header .banner { float: right; }
.header A { color: #ffffff; white-space: nowrap; }
.line { clear: left; }
REPLACE HTML
<div class="header">
<!-- banner now first as it is floated and dumped unneeded SPANs -->
<img class="banner" src="images/banner01.jpg" width="420" height="78"
alt="Huddersfield Narrow canal">
<img class="huddersfield" src="images/translogo04.gif" width="125"
height="78" alt="Huddersfield Canal Society logo"
title="Huddersfield Canal Society logo">
<a href="index.htm" class="society">Huddersfield Canal Society</a>
</div>
for>800 windows 'Huddersfield Canal Society' slides under logo
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
www.LittleWorksStudio.com
-
Martin Clark

Registered User

2006-03-18 03:01:00 AM

Re:Help needed with minor CSS layout problems

Spartanicus wrote...
Quote
Martin Clark <martin@spl.at>wrote:
Quote

I am still trying to find a way to make the white text in the header
area wrap in a 800 px window, rather than overflow across the photo.
Newest version: www.tamevalley.freeserve.co.uk/hcs/index2.htm

You should fix these issues:

Hello Spartanicus. Thank you for taking the trouble to look through my
code.
Quote
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. 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?
Quote
Move the CSS to an external stylesheet.
The CSS is only internal while I am working on the page. I always
normally use external style sheets. This does not affect the problem I
was asking about.
Quote
Remove the presentational markup.
If you mean the italics, this is likely to be the only page with any
italics at all, so it hardly seems worth creating a class for it.
Quote
Two navbars are a nuisance, one suffices.
Why a nuisance? Surely a matter of personal preference? Some of the
pages will be much longer, so links in the footer could be helpful.
Quote
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.
Quote
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). I will look at this
later. It does not affect the problem I was asking about.
Quote
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.
Quote
Remove the <hr>and  , use CSS instead.
Done. But what is wrong with <hr>?
Quote
Your body text size is uncomfortably small for me, there's little point
in specifying text-size:100% if you then reduce it to 90% for
.maincolumn
Yes, sorry. Changed.
Quote
Fix your alt text, the logo is merely decorative, use alt="".
Surely a matter of personal preference? It does not affect the problem I
was asking about.
Quote
You've used far to many classes.
Am I? I didn't realise there was a maximum permitted.
Quote
Don't use <br>to create spacings, use CSS.
I have not used <br>anywhere on this page to create spacings.
Quote
Don't use characters ( ][ )to separate links, specify a border with CSS.
Why not? Surely a matter of personal preference? I may change this once
I have sorted out the layout. It does not affect the problem I was
asking about.
Quote
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?
I replaced .huddersfield{position: absolute;} with
.huddersfield{position: relative;) and the result was that the banner
photo on the right moved down so that its top was level with the bottom
of the logo. Am I misunderstanding what you are saying?
I have spent many hours trying to sort this out. If you can see an
obvious solution I would be glad to hear it. I really want to learn.
--
Martin Clark
-
Martin Clark

Registered User

2006-03-18 03:21:00 AM

Re:Help needed with minor CSS layout problems

Jonathan N. Little wrote...
Quote
Martin Clark wrote:
Quote
I am still trying to find a way to make the white text in the header
area wrap in a 800 px window, rather than overflow across the photo.
Newest version: www.tamevalley.freeserve.co.uk/hcs/index2.htm
Any suggestions as to which properties I should be looking at would
be
appreciated.

Try this...a little simpler

[snip]
Thanks for that, Jonathan. The result is at
www.tamevalley.freeserve.co.uk/hcs/index3.htm
I will think about that an alternative although I would prefer to keep
the header the same height whatever the window width.
The reason I had a height of 79 px for the header was to end up with a
thin dark blue line between the banner photo and the white line.
Is there anyway at all to get the text to wrap, as in my original tables
layout version? www.tamevalley.freeserve.co.uk/hcs/index.htm
I have also tried to get the white writing to appear on two lines, as
Huddersfield
Canal Society
whatever the width of the screen but I can't seem to manage it. "Canal
Society" just disappears.
--
Martin Clark
-
Spartanicus

Registered User

2006-03-18 05:50:00 AM

Re:Help needed with minor CSS layout problems

Martin Clark <martin@spl.at>wrote:
Quote
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.
Quote
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.
Quote
Remove the presentational markup.

If you mean the italics
And the spacer images, the <br>s (address ones excepted), the  s
and the ]['s.
Quote
, 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.
Quote
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.
Quote
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.
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>
...
etc.
Quote
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.
Quote
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.
Quote
Remove the <hr>and  , use CSS instead.

Done.
Canal Society</a>  still there.
Quote
But what is wrong with <hr>?
It's used in a presentational manner.
Quote
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.
Quote
It does not affect the problem I
was asking about.
I am getting tired of seeing you repeating that.
Quote
You've used far to many classes.

Am I? I didn't realise there was a maximum permitted.
Quality coding includes using the minimal amount of code needed to do
the job, no more.
Quote
Don't use <br>to create spacings, use CSS.

I have not used <br>anywhere on this page to create spacings.
All the <br>s except those used for the address are used to create
spacing.
Quote
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.
Quote
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.
--
Spartanicus
-
Martin Clark

Registered User

2006-03-18 07:08:00 AM

Re:Help needed with minor CSS layout problems

Spartanicus wrote...
Quote
Martin Clark <martin@spl.at>wrote:
Quote
>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.
Quote
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.

Quote
>Remove the presentational markup.

If you mean the italics

And the spacer images, the <br>s (address ones excepted), the  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   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
Quote
, 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?
Quote
>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?
Quote
>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.
Quote
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.
Quote
>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.
Quote
>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.
Quote
>Remove the <hr>and  , use CSS instead.

Done.

Canal Society</a>  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.
Quote
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.
Quote
>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?
Quote
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]
Quote

Quote
>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)?
Quote
>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
-
Spartanicus

Registered User

2006-03-18 09:02:00 AM

Re:Help needed with minor CSS layout problems

Martin Clark <martin@spl.at>wrote:
Quote
This is a case where semantic <em>or <strong>markup is appropriate.

Okay. done that. What is the difference between <i>and <em>?
<i>tells a browser to render text in italics, it's presentational, not
semantic. <em>marks up text as having emphasis which is typically
italicized by browsers, it's semantic.
Quote
What about
a "Top of Page" link on longer pages? Is that good practice?
Replicating common browser controls such as the back function or the
start or end of document controls into the document itself is not good
practice.
Quote
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.
ul li{display:inline}
To then center the links as your current page has done:
ul{text-align:center}
More info www.alistapart.com/articles/taminglists/
Quote
>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.
There you have an example where classes and id's are necessary.
Quote
>>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?
Not if the image is decorative as is the case here. Had the text not
been there, *then* the image should have alt="Huddersfield Canal
Society" and wrapped in a level one header for the home/index page.
Quote
What does a reader say to a "|" ?
"Bar", or "Pipe". Although less annoying, it should also be avoided. The
fact that it's marked up as a list should result in the items being
rendered by aural browsers with sufficient distinction (pauses),
possibly the start and end of the list will also be spoken.
Quote
How would I separate them with CSS - using <span>s or unordered lists
(which I need to learn about)?
ul li{border-left:1px solid white}
You then add a class to the left most <li>so that you can suppress the
border so that it only appears in between navbar links.
ul li.first{border:none}
--
Spartanicus
-
dorayme

Registered User

2006-03-18 09:06:00 AM

Re:Help needed with minor CSS layout problems

In article
<osim12963c0q7j4ni99pk56or1kg8hhpl9@news.spartanicus.utvinternet.
ie>,
Spartanicus <invalid@invalid.invalid>wrote:
Quote
What about
a "Top of Page" link on longer pages? Is that good practice?

Replicating common browser controls such as the back function or the
start or end of document controls into the document itself is not good
practice.
The home button on the keyboard will take folk to the top of the
page. At some point, many website makers decide it is easier (and
simpler in effect) to assume some basic competency on the part of
the user.
--
dorayme
-
David Graham

Registered User

2006-03-18 07:12:00 PM

Re:Help needed with minor CSS layout problems

"Jonathan N. Little" <lws4art@centralva.net>wrote in message
Quote
Martin Clark wrote:

Quote
I wrote...

>Now, perhaps someone is able to offer some suggestions for the other 3
>problems I mentioned? They are still there even with the corrected CSS!


I have now solved two of these problems by removing the ".container" div
and setting margin and padding properties for "body".

I am still trying to find a way to make the white text in the header
area wrap in a 800 px window, rather than overflow across the photo.
Newest version: www.tamevalley.freeserve.co.uk/hcs/index2.htm

Any suggestions as to which properties I should be looking at would be
appreciated.

Try this...a little simpler

REPLACE your header, huddersfield , banner class defs with:

.header {background-color:#281870; color:#ffffff; width: 100%; }
.header {
font-family: Times New Roman, serif;
font-size: 1.75em; /* don't use Points on web */
font-weight: 700;
color: #ffffff;
background-color: #281870;
width: 100%;
margin: 0;
padding: 0;
}
.header .huddersfield { vertical-align: middle; }
.header .banner { float: right; }
.header A { color: #ffffff; white-space: nowrap; }
.line { clear: left; }

REPLACE HTML

<div class="header">
<!-- banner now first as it is floated and dumped unneeded SPANs -->
<img class="banner" src="images/banner01.jpg" width="420" height="78"
alt="Huddersfield Narrow canal">

<img class="huddersfield" src="images/translogo04.gif" width="125"
height="78" alt="Huddersfield Canal Society logo"
title="Huddersfield Canal Society logo">

<a href="index.htm" class="society">Huddersfield Canal Society</a>
</div>

for>800 windows 'Huddersfield Canal Society' slides under logo

Hi Jonathan
You apply the vertical-align to the logo on the left and not to the text
that the OP wanted alined vertically in the middle, is this the best way to
achieve text in the middle of the header? I guess I'm asking do you always
go about it like that, concentrate on the image and then the text behaves as
desired.
David Graham
-
Jonathan N. Little

Registered User

2006-03-18 10:38:00 PM

Re:Help needed with minor CSS layout problems

David Graham wrote:
Quote
"Jonathan N. Little" <lws4art@centralva.net>wrote in message
news:441af6b5$0$3688$cb0e7fc6@news.centralva.net...

Quote
Martin Clark wrote:


>I wrote...
>
>
>>Now, perhaps someone is able to offer some suggestions for the other 3
>>problems I mentioned? They are still there even with the corrected CSS!
>
>
>I have now solved two of these problems by removing the ".container" div
>and setting margin and padding properties for "body".
>
>I am still trying to find a way to make the white text in the header
>area wrap in a 800 px window, rather than overflow across the photo.
>Newest version: www.tamevalley.freeserve.co.uk/hcs/index2.htm
>
>Any suggestions as to which properties I should be looking at would be
>appreciated.

Try this...a little simpler

REPLACE your header, huddersfield , banner class defs with:

.header {background-color:#281870; color:#ffffff; width: 100%; }
.header {
font-family: Times New Roman, serif;
font-size: 1.75em; /* don't use Points on web */
font-weight: 700;
color: #ffffff;
background-color: #281870;
width: 100%;
margin: 0;
padding: 0;
}
.header .huddersfield { vertical-align: middle; }
.header .banner { float: right; }
.header A { color: #ffffff; white-space: nowrap; }
.line { clear: left; }

REPLACE HTML

<div class="header">
<!-- banner now first as it is floated and dumped unneeded SPANs -->
<img class="banner" src="images/banner01.jpg" width="420" height="78"
alt="Huddersfield Narrow canal">

<img class="huddersfield" src="images/translogo04.gif" width="125"
height="78" alt="Huddersfield Canal Society logo"
title="Huddersfield Canal Society logo">

<a href="index.htm" class="society">Huddersfield Canal Society</a>
</div>

for>800 windows 'Huddersfield Canal Society' slides under logo


Hi Jonathan
You apply the vertical-align to the logo on the left and not to the text
that the OP wanted alined vertically in the middle, is this the best way to
achieve text in the middle of the header? I guess I'm asking do you always
go about it like that, concentrate on the image and then the text behaves as
desired.
The non-positioned image on the left sets the min height of the
containing DIV 'header', by setting vertical-align: middle to that
element means that the follow text will vertical aligned with that image
regardless of the size of the text and with respect to the DIV
'header' unless a wrap occurs. If you tried to align the text with
padding-top and padding-bottom of the text then as your scaled your text
(CTRL + and CTRL - in Firefox et al.) the test would move with respect
to the logo and the DIV 'header'.
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
www.LittleWorksStudio.com
-
Jonathan N. Little

Registered User

2006-03-19 12:06:00 AM

Re:Help needed with minor CSS layout problems

Martin Clark wrote:
Quote
Jonathan N. Little wrote...

Quote
Martin Clark wrote:

>I am still trying to find a way to make the white text in the header
>area wrap in a 800 px window, rather than overflow across the photo.
>Newest version: www.tamevalley.freeserve.co.uk/hcs/index2.htm
>Any suggestions as to which properties I should be looking at would
>be
>appreciated.

Try this...a little simpler


[snip]

Thanks for that, Jonathan. The result is at
www.tamevalley.freeserve.co.uk/hcs/index3.htm
I will think about that an alternative although I would prefer to keep
the header the same height whatever the window width.
The reason I had a height of 79 px for the header was to end up with a
thin dark blue line between the banner photo and the white line.

Is there anyway at all to get the text to wrap, as in my original tables
layout version? www.tamevalley.freeserve.co.uk/hcs/index.htm
Only what to simulate it is
CSS:
.header {background-color:#281870; color:#ffffff; width: 100%; }
.header {
font-family: Times New Roman, serif;
font-size: 1.75em; /* don't use Points on web */
font-weight: 700;
color: #ffffff;
background: #281870 url(images/banner01.jpg) no-repeat top right;
width: 100%;
margin: 0;
padding: 0;
}
.header .huddersfield { position: absolute; }
.header A {
color: #ffffff;
background-color: transparent;
display: block;
min-height: 70px;
margin-left: 120px;
margin-right: 420px;
}
HTML:
<div class="header">
<img class="huddersfield" src="images/translogo04.gif" width="125"
height="78" alt="Huddersfield Canal Society logo"
title="Huddersfield Canal Society logo">
<a href="index.htm" class="society">Huddersfield Canal Society</a>
</div>
NOTE: Will break in IE because no support for 'min-height' Would have to
futz with some hack for IE, all are not very pretty.
You might try
CSS:
.header {
font-family: Times New Roman, serif;
font-size: 1.75em; /* don't use Points on web */
font-weight: 700;
color: #ffffff;
background: #281870 url(images/banner01.jpg) no-repeat top right;
width: 100%;
height: 70px;
margin: 0;
padding: 0;
}
.header .huddersfield { vertical-align: middle; }
.header A {
color: #ffffff;
white-space: nowrap;
background-image: url(images/50percent.gif);
}
HTML:
<div class="header">
<img class="huddersfield" src="images/translogo04.gif" width="125"
height="78" alt="Huddersfield Canal Society logo"
title="Huddersfield Canal Society logo">
<a href="index.htm" class="society">Huddersfield Canal Society</a>
</div>
Make a GIF 50percent.gif that is a grid of alternating dark blue and
transparent pixels and then when 'Huddersfield Canal Society' overrides
the canal image it darkens it a bit with a dark screen.
Or make 'Huddersfield Canal Society' a GIF with transparent background
and a blue border that would contrast when overriding the canal.
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
www.LittleWorksStudio.com
-
Martin Clark

Registered User

2006-03-19 01:06:00 AM

Re:Help needed with minor CSS layout problems

Jonathan N. Little wrote...
Quote
Martin Clark wrote:
Quote
Is there anyway at all to get the text to wrap, as in my original
tables layout version?
Only what to simulate it is

[snip CSS suggestions]
Thanks. I won't be able to try these out over the weekend, but I will
have a go as soon as I can.
Quote

Make a GIF 50percent.gif that is a grid of alternating dark blue and
transparent pixels and then when 'Huddersfield Canal Society' overrides
the canal image it darkens it a bit with a dark screen.

I don't know how to do that but I will see whether any of the programs I
have can do it.
Quote
Or make 'Huddersfield Canal Society' a GIF with transparent background
and a blue border that would contrast when overriding the canal.

Yes, that's a good idea. I was trying to avoid using an image for text
if at all possible, but it might be an answer. I would have to find a
way to get some <h1>text somewhere else on the page with the society's
name. I have also been considering making a .gif with the text on two
lines so that it would always remain in the blue area.
It'll be a day or two until I have a chance to try anything though.
--
Martin Clark
-