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-17-2006
Spartanicus wrote...
>Martin Clark <(E-Mail Removed)> 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: http://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.

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

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

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

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

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

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

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

>Remove the <hr> and &nbsp;, use CSS instead.


Done. But what is wrong with <hr>?

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

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

>You've used far to many classes.


Am I? I didn't realise there was a maximum permitted.

>Don't use <br> to create spacings, use CSS.


I have not used <br> anywhere on this page to create spacings.

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

>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
 
Reply With Quote
 
 
 
 
Martin Clark
Guest
Posts: n/a
 
      03-17-2006
Jonathan N. Little wrote...
>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: http://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
http://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? http://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
 
Reply With Quote
 
 
 
 
Spartanicus
Guest
Posts: n/a
 
      03-17-2006
Martin Clark <(E-Mail Removed)> 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.

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

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

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

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

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

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

>>Remove the <hr> and &nbsp;, use CSS instead.

>
>Done.


Canal&nbsp;Society</a>&nbsp; still there.

>But what is wrong with <hr>?


It's used in a presentational manner.

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

>It does not affect the problem I
>was asking about.


I am getting tired of seeing you repeating that.

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

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

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

>>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
 
Reply With Quote
 
Martin Clark
Guest
Posts: n/a
 
      03-17-2006
Spartanicus wrote...
>Martin Clark <(E-Mail Removed)> 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
 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      03-18-2006
Martin Clark <(E-Mail Removed)> wrote:

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

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

>>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 http://www.alistapart.com/articles/taminglists/

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

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

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

>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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      03-18-2006
In article
<(E-Mail Removed) us.utvinternet.
ie>,
Spartanicus <(E-Mail Removed)> wrote:

> > 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
 
Reply With Quote
 
David Graham
Guest
Posts: n/a
 
      03-18-2006

"Jonathan N. Little" <(E-Mail Removed)> wrote in message
news:441af6b5$0$3688$(E-Mail Removed).. .
> 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: http://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


 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-18-2006
David Graham wrote:

> "Jonathan N. Little" <(E-Mail Removed)> wrote in message
> news:441af6b5$0$3688$(E-Mail Removed).. .
>
>>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: http://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
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-18-2006
Martin Clark wrote:

> Jonathan N. Little wrote...
>
>>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: http://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
> http://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? http://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
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Martin Clark
Guest
Posts: n/a
 
      03-18-2006
Jonathan N. Little wrote...
>Martin Clark wrote:
>> 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.
>
>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.

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