newbie needs a bit of help

Discussion in 'HTML' started by John, Feb 25, 2006.

  1. John

    John Guest

    Hi all - wonder if you can help? I have put together avery simple site at
    www.johndouglas.demon.co.uk. I have used css. 1 problem - as I go from page
    to page the "banner" at the top of the page changes height by a small
    amount - annoying but not catastrophic I know. Can't see what I'm doing
    wrong - can anyone help?

    Thanks John

    ps the CSS is as below:
    H1{font-family: "Arial";color:black;font-size:18pt;}
    H5{font-family: "Arial";color:black;font-size:10pt;font-weight:normal}
    P {color:"#000099"}
    A:link{color:white;text-decoration:none}
    A:visited{color:white;text-decoration:none}
    A:hover {color:#9999FF;text-decoration:none}
    A:active {color:white;text-decoration:none}

    #main {
    width:82%;
    height:600px;
    margin:auto;
    }

    #content {
    background:#fff;
    vertical-align:top;
    padding:10px;height:300px;width:600px;
    }

    #banner {
    font:color:#fff;

    background:#9999FF;
    height:60px;
    vertical-align:top;
    }

    #side {vertical-align:top;
    background: #000099;height 300px;
    width:20%
    }
     
    John, Feb 25, 2006
    #1
    1. Advertising

  2. John

    windandwaves Guest

    John wrote:
    > Hi all - wonder if you can help? I have put together avery simple
    > site at www.johndouglas.demon.co.uk. I have used css. 1 problem - as
    > I go from page to page the "banner" at the top of the page changes
    > height by a small amount - annoying but not catastrophic I know.
    > Can't see what I'm doing wrong - can anyone help?
    >
    > Thanks John
    >
    > ps the CSS is as below:
    > H1{font-family: "Arial";color:black;font-size:18pt;}


    consider doing this:

    body {font-family: arial, verdana, tahoma, helvetical, sans-serif;}
    stipulating alternatives and making it the same all the way through

    > H5{font-family: "Arial";color:black;font-size:10pt;font-weight:normal}
    > P {color:"#000099"}
    > A:link{color:white;text-decoration:none}
    > A:visited{color:white;text-decoration:none}


    if you want you can rewrite as:
    A:link, A:visisted{color:white;text-decoration:none}

    > A:hover {color:#9999FF;text-decoration:none}
    > A:active {color:white;text-decoration:none}
    >
    > #main {
    > width:82%;
    > height:600px;
    > margin:auto;
    > }
    >
    > #content {
    > background:#fff;
    > vertical-align:top;
    > padding:10px;height:300px;width:600px;
    > }
    >
    > #banner {
    > font:color:#fff;
    >
    > background:#9999FF;
    > height:60px;
    > vertical-align:top;
    > }
    >
    > #side {vertical-align:top;
    > background: #000099;height 300px;
    > width:20%
    > }


    I could not replicate your problem, but I am impressed with your css. Great
    for someone who is new to this. Now all you need to do is throw out the
    frontpage editor (i use notepad2 and I love it). Strictly speaking you also
    do not need to use a table. Consider a structure like this

    <div id="contentholder">
    <div id="banner>....</div>
    <div id="menu" style="float: left; width: 100px;">menu here</div>
    <div id="content" style="margin-left: 105px;">content here</div>
    </div>

    of course you can move the css to your css file.

    also, you should change your characterset to
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
    />Well, anyway, just some of my input. Good on ya for the organic garden,
    we need more of that real soon!>nicolaas
     
    windandwaves, Feb 26, 2006
    #2
    1. Advertising

  3. John

    Chris Beall Guest

    John wrote:

    > Hi all - wonder if you can help? I have put together avery simple site at
    > www.johndouglas.demon.co.uk. I have used css. 1 problem - as I go from page
    > to page the "banner" at the top of the page changes height by a small
    > amount - annoying but not catastrophic I know. Can't see what I'm doing
    > wrong - can anyone help?
    >
    > Thanks John

    (snip CSS, available online)

    John,

    Hmmm. Some odd behavior here.

    I think you've tried to control things a bit too much here. The web is
    a flexible place and you are giving things very precise dimensions.

    Try removing the 'height:600px;' from '#main' in the CSS. No guarantees.

    There are also some errors in both your HTML and CSS. If you add a
    DOCTYPE and then run the pages through validation, you will likely get
    much better results.

    See http://pages.prodigy.net/chris_beall/TC/index.html for some more
    stuff that will be useful to you.

    Chris Beall
     
    Chris Beall, Feb 26, 2006
    #3
  4. John

    Andy Dingley Guest

    On Sat, 25 Feb 2006 23:03:04 -0000, "John"
    <> wrote:

    >Hi all - wonder if you can help? I have put together avery simple site at
    >www.johndouglas.demon.co.uk. I have used css.


    Mainly you've mis-used a table to control layout. This is a bad thing
    generally, and you're actually getting caught by one of the specific bad
    instances about it.

    Tables are dynamic content-driven things, not rigidly sized. So when you
    then tried to control their sizes by setting the _overall_ size, they
    still jiggle about internally. It's trying to take its overall fixed
    height and partitiion it according to how the content fills it.

    I suggest you abandon this table-based layout and use a proper CSS-based
    one. This is harder to write, but you can download one from glish.com
    bluerobot.com and others.

    If you insist on using tables, then set the height of the top row (which
    you care about) and let the overall height float free, according to what
    the content needs to fill it.

    Also replace font-family: "Arial"; with
    font-family: "Arial", sans-serif;
    and font-size:18pt; with font-size:180%;

    Oh, and throw away FrontPlague. It's awful.
     
    Andy Dingley, Feb 26, 2006
    #4
  5. John

    John Guest

    Thanks to all who have got back to me on this.

    I'm going to have a go at using the "DIV" tag stuff as suggested. I'm also
    going to look the websites mentioned- I've also changed a few other things
    as suggested.

    Many thanks

    John
    "Andy Dingley" <> wrote in message
    news:...
    > On Sat, 25 Feb 2006 23:03:04 -0000, "John"
    > <> wrote:
    >
    >>Hi all - wonder if you can help? I have put together avery simple site at
    >>www.johndouglas.demon.co.uk. I have used css.

    >
    > Mainly you've mis-used a table to control layout. This is a bad thing
    > generally, and you're actually getting caught by one of the specific bad
    > instances about it.
    >
    > Tables are dynamic content-driven things, not rigidly sized. So when you
    > then tried to control their sizes by setting the _overall_ size, they
    > still jiggle about internally. It's trying to take its overall fixed
    > height and partitiion it according to how the content fills it.
    >
    > I suggest you abandon this table-based layout and use a proper CSS-based
    > one. This is harder to write, but you can download one from glish.com
    > bluerobot.com and others.
    >
    > If you insist on using tables, then set the height of the top row (which
    > you care about) and let the overall height float free, according to what
    > the content needs to fill it.
    >
    > Also replace font-family: "Arial"; with
    > font-family: "Arial", sans-serif;
    > and font-size:18pt; with font-size:180%;
    >
    > Oh, and throw away FrontPlague. It's awful.
     
    John, Feb 26, 2006
    #5
    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. Replies:
    3
    Views:
    1,860
    Timothy Bendfelt
    Jan 19, 2007
  2. Replies:
    1
    Views:
    351
    Tom Hawtin
    Jan 24, 2007
  3. Replies:
    9
    Views:
    1,056
    Juha Nieminen
    Aug 22, 2007
  4. WindAndWaves

    newbie needs a bit more help

    WindAndWaves, Oct 31, 2004, in forum: Javascript
    Replies:
    1
    Views:
    91
    Dr John Stockton
    Oct 31, 2004
  5. WindAndWaves
    Replies:
    31
    Views:
    322
    Dr John Stockton
    Dec 19, 2004
Loading...

Share This Page