Help needed with minor CSS layout problems

Discussion in 'HTML' started by Martin Clark, Mar 16, 2006.

  1. Martin Clark

    Martin Clark Guest

    I am developing a new design for a canal society website.
    The look I am attempting to achieve can be seen here:
    http://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:
    http://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
     
    Martin Clark, Mar 16, 2006
    #1
    1. Advertising

  2. Martin Clark

    Neredbojias Guest

    With neither quill nor qualm, Martin Clark quothed:

    > I am developing a new design for a canal society website.
    > The look I am attempting to achieve can be seen here:
    > http://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:
    > http://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.
     
    Neredbojias, Mar 16, 2006
    #2
    1. Advertising

  3. Martin Clark

    David Graham Guest

    "Martin Clark" <> wrote in message
    news:...
    > I am developing a new design for a canal society website.
    > The look I am attempting to achieve can be seen here:
    > http://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:
    > http://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
     
    David Graham, Mar 16, 2006
    #3
  4. Martin Clark

    Martin Clark Guest

    Neredbojias wrote...
    >With neither quill nor qualm, Martin Clark quothed:
    >>
    >> 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, Mar 16, 2006
    #4
  5. Martin Clark

    Martin Clark Guest

    David Graham wrote...
    >"Martin Clark" <> wrote in message
    >> 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
     
    Martin Clark, Mar 16, 2006
    #5
  6. On Thu, 16 Mar 2006, Martin Clark wrote:

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

    (It's particularly easy to do that if you install Chris Pederick's web
    developer toolbar for Mozilla or Firefox).
     
    Alan J. Flavell, Mar 16, 2006
    #6
  7. Martin Clark

    Martin Clark Guest

    Alan J. Flavell wrote...
    >On Thu, 16 Mar 2006, Martin Clark wrote:
    >> 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!

    >(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, Mar 16, 2006
    #7
  8. Martin Clark

    Martin Clark Guest

    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.
    --
    Martin Clark
     
    Martin Clark, Mar 17, 2006
    #8
  9. Martin Clark

    Spartanicus Guest

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


    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 &nbsp;, 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
     
    Spartanicus, Mar 17, 2006
    #9
  10. 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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 17, 2006
    #10
  11. Martin Clark

    Martin Clark Guest

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

    >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
     
    Martin Clark, Mar 17, 2006
    #11
  12. Martin Clark

    Martin Clark Guest

    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
     
    Martin Clark, Mar 17, 2006
    #12
  13. Martin Clark

    Spartanicus Guest

    Martin Clark <> 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
     
    Spartanicus, Mar 17, 2006
    #13
  14. Martin Clark

    Martin Clark Guest

    Spartanicus wrote...
    >Martin Clark <> 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
     
    Martin Clark, Mar 17, 2006
    #14
  15. Martin Clark

    Spartanicus Guest

    Martin Clark <> 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
     
    Spartanicus, Mar 18, 2006
    #15
  16. Martin Clark

    dorayme Guest

    In article
    <.
    ie>,
    Spartanicus <> 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
     
    dorayme, Mar 18, 2006
    #16
  17. Martin Clark

    David Graham Guest

    "Jonathan N. Little" <> wrote in message
    news:441af6b5$0$3688$...
    > 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
     
    David Graham, Mar 18, 2006
    #17
  18. David Graham wrote:

    > "Jonathan N. Little" <> wrote in message
    > news:441af6b5$0$3688$...
    >
    >>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
     
    Jonathan N. Little, Mar 18, 2006
    #18
  19. 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
     
    Jonathan N. Little, Mar 18, 2006
    #19
  20. Martin Clark

    Martin Clark Guest

    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
     
    Martin Clark, Mar 18, 2006
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    749
    clintonG
    Dec 24, 2004
  2. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,034
  3. Replies:
    1
    Views:
    603
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,030
    Wÿrm
    Jun 20, 2006
  5. Applebrown

    Minor table layout vs. popup menu question.

    Applebrown, Jan 28, 2004, in forum: Javascript
    Replies:
    0
    Views:
    97
    Applebrown
    Jan 28, 2004
Loading...

Share This Page