Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Help needed with minor CSS layout problems

Reply
Thread Tools

Help needed with minor CSS layout problems

 
 
Martin Clark
Guest
Posts: n/a
 
      03-21-2006
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.
--
Martin Clark
 
Reply With Quote
 
 
 
 
Spartanicus
Guest
Posts: n/a
 
      03-22-2006
"Greg N." <> wrote:

>>>This seems to work reasonably well:
>>>http://homepage.ntlworld.ie/spartani...S/masthead.htm

>>
>> 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.


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

--
Spartanicus
 
Reply With Quote
 
 
 
 
Greg N.
Guest
Posts: n/a
 
      03-22-2006
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.


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.

--
Gregor mit dem Motorrad auf Reisen:
http://hothaus.de/greg-tour/
 
Reply With Quote
 
Alan J. Flavell
Guest
Posts: n/a
 
      03-22-2006
On Tue, 21 Mar 2006, Greg N. wrote:

> <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.
 
Reply With Quote
 
Greg N.
Guest
Posts: n/a
 
      03-22-2006
Greg N. wrote:

> ... 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.

--
Gregor mit dem Motorrad auf Reisen:
http://hothaus.de/greg-tour/
 
Reply With Quote
 
Greg N.
Guest
Posts: n/a
 
      03-22-2006
Alan J. Flavell wrote:

> On Tue, 21 Mar 2006, Greg N. wrote:
>
>
>><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!


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.

--
Gregor mit dem Motorrad auf Reisen:
http://hothaus.de/greg-tour/
 
Reply With Quote
 
Martin Clark
Guest
Posts: n/a
 
      03-22-2006
Spartanicus wrote...
>"Greg N." <> wrote:
>
>>How about this, it's even simpler:
>>

>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.
--
Martin Clark
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Css-Layout vs Table-Layout Habib HTML 15 06-20-2006 05:11 AM
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
Table-based layout to CSS layout Guybrush Threepwood HTML 20 06-11-2006 11:12 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
Minor table layout vs. popup menu question. Applebrown Javascript 0 01-28-2004 09:59 PM



Advertisments
 



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57