Help needed with minor CSS layout problems

[Jonathan N. Little]

Jonathan N. Little wrote...

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.

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.

Any decent image editor can do it, Paint Shop Pro still out there? If
not your can do it in MSPaint (free) make the transparent part one off
color then convert to GIF with transparent color with (freeware)
IrfanView. Honestly I think the texted as an image with blue border
would look best.

 

[Mark Parnell]

Deciding to do something for the good of humanity, Spartanicus

<h2>News</h2>
<p><b>The 74 Club</b></p>

<h3>The 74 Club</h3>, surely?

 

[Spartanicus]

<h3>The 74 Club</h3>, surely?

The text only very briefly refers and links to the actual "The 74 club"
content which is located on another page. If marked up as a header then
for example generating a TOC for the home/index page would list "The 74
club" in the document outline, not helpful.

Sidebar content such as used by the OP can't be properly coded with
HTML4 which only really lends itself to marking up simple scientific
type documents (the W3C specs are an example of that type of document).

Since sidebar type content is part of many web pages, the rules need to
be bent in order to retain a useful document outline.

Sidebar content is best marked up using markup that has the same weight
as regular body text without using headers.

 

[Martin Clark]

Spartanicus wrote...

The text only very briefly refers and links to the actual "The 74 club"
content which is located on another page. If marked up as a header then
for example generating a TOC for the home/index page would list "The 74
club" in the document outline, not helpful.

Sidebar content such as used by the OP can't be properly coded with
HTML4 which only really lends itself to marking up simple scientific
type documents (the W3C specs are an example of that type of document).

Since sidebar type content is part of many web pages, the rules need to
be bent in order to retain a useful document outline.

Sidebar content is best marked up using markup that has the same weight
as regular body text without using headers.

I thought the use of <b> was frowned upon?
Would it not be preferable to give the <p> a class?

 

[Spartanicus]

I thought the use of <b> was frowned upon?

It is when semantic markup should be used instead.

Would it not be preferable to give the <p> a class?

CSS is an optional technology, a document should lose none of it's
functionality when it's rendered sans CSS. That said, <strong> markup is
probably slightly preferable in this case.

 

[Martin Clark]

Martin Clark wrote...

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.

I got around the problem quoted above by creating a new .gif with both
the logo and the society name.

I have now had time to try out all the suggestions that were made. I
have incorporated many of them into my revised code. Even those I have
tried but not used have helped me in my learning process. I am pleased
with how much I have picked up over the last week - many thanks to those
who responded.

My latest version is here:
http://www.tamevalley.freeserve.co.uk/hcs/index.htm

The html and css validate.

The only problem I can now see with it is that, in Firefox only, there
is a small gap between the header container and the navigation
container. I can't work out what is causing this

 

[Spartanicus]

I got around the problem quoted above by creating a new .gif with both
the logo and the society name.

Pity, you should have fixed the problem instead of badly working around
it.

My latest version is here:
http://www.tamevalley.freeserve.co.uk/hcs/index.htm

The html and css validate.

The only problem I can now see with it is that, in Firefox only, there
is a small gap between the header container and the navigation
container. I can't work out what is causing this

I don't see this:
FF: http://homepage.ntlworld.ie/spartanicus/temp1.png
IE: http://homepage.ntlworld.ie/spartanicus/temp2.png

 

[Mark Parnell]

Deciding to do something for the good of humanity, Martin Clark

The only problem I can now see with it is that, in Firefox only, there
is a small gap between the header container and the navigation
container. I can't work out what is causing this

The DOM Inspector is very handy for things like this. In this case, it's
because .banner is taller than .header, so it is pushing everything
below it down.

Add height: 79px; to .banner to make it the same height.

 

[Martin Clark]

Mark Parnell wrote...

The DOM Inspector is very handy for things like this. In this case, it's
because .banner is taller than .header, so it is pushing everything
below it down.

Add height: 79px; to .banner to make it the same height.

Thanks! That's done it. The header was 1px taller than the right-hand
image because I wanted to have a thin dark blue line visible between the
picture and the white border-bottom. It didn't look right without it.

 

[Martin Clark]

Spartanicus wrote...

Pity, you should have fixed the problem instead of badly working around
it.

I agree - I would have liked to have fixed it but I was unable to after
many days of trying. There were several solutions offered here but many
had their own problems. The idea of using an image for the text was
suggested and I find it does the job. It seems unfair to call that badly
working around it.

 

[Spartanicus]

I agree - I would have liked to have fixed it but I was unable to after
many days of trying.

As I told you before, there is no need to use absolute positioning for
the masthead, it caused the original problem.

The idea of using an image for the text was
suggested and I find it does the job.

It was a poor suggestion.

It seems unfair to call that badly
working around it.

You've worked around the original issue and introduced several others,
seems fair to call that a bad workaround.

 

[Martin Clark]

Spartanicus wrote...

As I told you before, there is no need to use absolute positioning for
the masthead, it caused the original problem.

Yes, I know you told me that. I didn't ignore it. However, if I replaced
the position:absolute with position:relative, the photo banner jumped
down and refused to be alongside the logo image:
http://www.tamevalley.freeserve.co.uk/hcs/images/sample1.jpg

If I changed it to float:left, it looked alright to begin with but the
photo jumped down as soon as the window was a fraction under 800px wide:
http://www.tamevalley.freeserve.co.uk/hcs/images/sample2.jpg

The original problem was that if I used text for the society's name, it
overlapped the photo when in an 800px window. The text would not wrap
and start a second line. One suggestion resulted in the whole of the
text moving down below the logo. There didn't seem to be any way to keep
the text to the right of the logo but get it to wrap word by word and
not overlap the photo banner.

What would be your suggestion for replacing position: absolute?

It was a poor suggestion.

But it works. Why is it so poor if it works?
Sometimes a compromise is needed, surely?

You've worked around the original issue and introduced several others,
seems fair to call that a bad workaround.

You've mentioned to absolute positioning. What other issues are there?

 

[Spartanicus]

Yes, I know you told me that. I didn't ignore it. However, if I replaced
the position:absolute with position:relative, the photo banner jumped
down and refused to be alongside the logo image:
http://www.tamevalley.freeserve.co.uk/hcs/images/sample1.jpg

The banner.jpg is filtered out by my add filter software, you might want
to change it's name.

You've designed something of a monster with that masthead, it's
difficult to get that layout to work in varying viewport widths. This
seems to work reasonably well:
http://homepage.ntlworld.ie/spartanicus/HCS/masthead.htm

You've mentioned to absolute positioning. What other issues are there?

The logo image is decorative, it should not have alt content or title
content. The presence of "Website of the" in the <h1> content is wrong,
and you've wrecked the document outline by using <h5>'s in the sidebar
content.

 

[Martin Clark]

Spartanicus wrote...

The banner.jpg is filtered out by my add filter software, you might want
to change it's name.

Good idea - I hadn't though of that possibility.

You've designed something of a monster with that masthead, it's
difficult to get that layout to work in varying viewport widths.

Exactly. But that is how I was asked to do it. When something is
designed by a committee you end up with a monster.

This seems to work reasonably well:
http://homepage.ntlworld.ie/spartanicus/HCS/masthead.htm

It does indeed. A completely different approach - thanks!
I think the only way to make it less of a monster would be to reduce the
width of the banner photo a little, then the text will not go onto three
lines at 800px.

The logo image is decorative, it should not have alt content or title
content.

But in the latest version,
<http://www.tamevalley.freeserve.co.uk/hcs/index.htm> it also included
the society's name and replaced the text of the society's name - so more
than decorative, I should have thought.

The presence of "Website of the" in the <h1> content is wrong,

and you've wrecked the document outline by using <h5>'s in the sidebar
content.

I was saving <h3> and <h4> for other pages within the site. The <h5>s
are links to other pages rather than headings for content on that page,
so I didn't think they needed to be any higher in the ascendancy. Does
it create problems if some headings are not present on a page?

 

[Spartanicus]

But in the latest version,
<http://www.tamevalley.freeserve.co.uk/hcs/index.htm> it also included
the society's name and replaced the text of the society's name - so more
than decorative, I should have thought.

I was saving <h3> and <h4> for other pages within the site. The <h5>s
are links to other pages rather than headings for content on that page,
so I didn't think they needed to be any higher in the ascendancy. Does
it create problems if some headings are not present on a page?

The level doesn't matter, any header used in sidebar content is wrong.
Look at the FF screen shot I uploaded earlier in the thread, it shows
the document outline in it's panel, does that look like a correct Table
Of Contents for the index page?

 

[Martin Clark]

Spartanicus wrote...

The level doesn't matter, any header used in sidebar content is wrong.
Look at the FF screen shot I uploaded earlier in the thread, it shows
the document outline in it's panel, does that look like a correct Table
Of Contents for the index page?

Sorry - I must have misunderstood your suggestion on 17th March (21:50)
in which I thought you were suggesting using <h2> here.

 

[Spartanicus]

Sorry - I must have misunderstood your suggestion on 17th March (21:50)
in which I thought you were suggesting using <h2> here.

The <h2> I used was to denote the sidebar itself (as a whole), this is
needed because otherwise the sidebar content would be listed under the
wrong header. The sidebar content (the items) should not use any
headers.

 

[Martin Clark]

Spartanicus wrote...

This seems to work reasonably well:
http://homepage.ntlworld.ie/spartanicus/HCS/masthead.htm

What does font:0\0 do, please?

 

[Spartanicus]

What does font:0\0 do, please?

It's a hack that causes IE to collapse the empty div as it's supposed
to, it's invalid CSS that will be ignored by proper browsers.

 

[Greg N.]

Spartanicus wrote...

It does indeed. A completely different approach - thanks!

How about this, it's even simpler:

#masthead {color:#fff;background:#281870 url(bar.jpg) no-repeat right;}
#masthead div {margin:0; padding:6px 0 7px; }
#masthead div h1 {margin:0;}
#masthead img {float:left; padding:0; margin:0 0 10px}
....
....
<div id="masthead">
<img src=hcs.gif>
<div>
<h1>Huddersfield</h1>
<h1>Canal Society</h1>
</div>
</div

The logo, hcs.gif, is not perfect because of its ragged edges. What I
think it should look like is this: http://coolhaus.de/misc/hcs.jpg

It's not perfect, I have not spent great efforts to find the same font,.
but you get the idea.