Help needed with minor CSS layout problems

[Martin Clark]

Greg N. wrote...

How about this, it's even simpler:

[snip]

Yes - that works as well. With a couple of tweaks, the result is here:
http://www.tamevalley.freeserve.co.uk/hcs/index2.htm

Spartanicus - your masthead has been incorporated into this version:
http://www.tamevalley.freeserve.co.uk/hcs/index.htm

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

Thanks for that. I have used it in the first version above.
The image was ragged because it was a poor quality transparent gif (in
case anyone wanted to change the background colour at a later date).
Somebody was going to make a better one for me when they had time.

Thanks, both, for your suggestions.

 

[Spartanicus]

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.

I don't know why I bother to create proper code only to have it
butchered like this, I'm out of this thread.

 

[Greg N.]

I don't know why I bother to create proper code only to have it
butchered like this, I'm out of this thread.

Hey, rather than acting like a prima donna, you could tell me what's
wrong with my suggestion. I'm the first one to admit I'm new to this
game, and I'm eager to learn. Thank you.

 

[Alan J. Flavell]

<div id="masthead">
<img src=hcs.gif>
<div>
<h1>Huddersfield</h1>
<h1>Canal Society</h1>
</div>
</div

That looks an awfully clumsy way to offer logical markup!

Modern[1] practice says that the presentation ought to be done by the
stylesheet. The HTML should mark-up the content for what it is.

I'd have to rate your offering as "div salad", with only a nod towards
a real <h1> level-1 heading.

regards

[1] Actually, that was also the original plan. It was only the middle
bit that wasted our time trying to turn HTML into DTP, and (I think by
now it's fair to say, thank goodness) finally failed.

 

[Greg N.]

... you could tell me what's wrong with my suggestion.

I can tell you what thought what could be improved about yours.

You put the logo in the background, and the photographic image in the
foreground. When the viewport got very narrow, this resulted in

1. the photo overlaying the logo
2. the heading text getting pushed down

I thought it would make sense to sacrifice the photo in favor of the
logo and the title, and avoid (to some degree) pushing down the heading
text.

 

[Greg N.]

That looks an awfully clumsy way to offer logical markup!

It's not clumsy at all. I can see how it violates the markup vs. style
separation gospel, but clumsy? It's actually very simple - much simpler
than other solutions that have been proposed here.

Modern[1] practice says that the presentation ought to be done by the
stylesheet. The HTML should mark-up the content for what it is.

I understand.

 

[Martin Clark]

Spartanicus wrote...

I don't know why I bother to create proper code only to have it
butchered like this, I'm out of this thread.

Well, I'm very sorry to hear that. I have learnt a lot from you in this
thread. Many thanks for that.

I have tried out all of the suggestions offered by contributors in this
thread and tried to understand what they do. I want my final code to be
as "proper" as possible but there may eventually be a need for a
compromise to keep those for whom I am creating the site happy.