More CSS woes :(

Discussion in 'HTML' started by somebody, Jan 11, 2004.

  1. somebody

    somebody Guest

    http://www.hostforge.net/~bjg/alt.html/

    I am trying to design a simple layout with an army feel. So far it's ok, but
    i've spent far too long on it already and want to finish it.

    The main problem is the gap between the #header and the #content / #navbar.
    As soon as I get it aligned up without a gap i'll be happy.

    Can someone please help? The code is such a messy hack. Does anyone know of
    any good manuals that explain the theory of CSS and "CSS block model" as
    someone has pointed out to me before. I still have the <table> layout idea
    in my head it seems.

    Thanks in advance.
    somebody, Jan 11, 2004
    #1
    1. Advertising

  2. somebody

    David Graham Guest

    somebody wrote:
    > http://www.hostforge.net/~bjg/alt.html/
    >
    > I am trying to design a simple layout with an army feel. So far it's ok,
    > but i've spent far too long on it already and want to finish it.
    >
    > The main problem is the gap between the #header and the #content /
    > #navbar. As soon as I get it aligned up without a gap i'll be happy.
    >
    > Can someone please help? The code is such a messy hack. Does anyone know
    > of any good manuals that explain the theory of CSS and "CSS block model"
    > as someone has pointed out to me before. I still have the <table> layout
    > idea in my head it seems.
    >
    > Thanks in advance.


    Is the css below creating the gap?

    #header {

    padding-bottom: 1px;
    }

    If not try margin-bottom: 0; on the header div a bit like you have
    margin-top: 0 for the footer div

    HTH
    David
    David Graham, Jan 11, 2004
    #2
    1. Advertising

  3. somebody

    somebody Guest

    "David Graham" <> wrote in message
    news:RL8Mb.3155$...
    > somebody wrote:
    > > http://www.hostforge.net/~bjg/alt.html/
    > >
    > > I am trying to design a simple layout with an army feel. So far it's ok,
    > > but i've spent far too long on it already and want to finish it.
    > >
    > > The main problem is the gap between the #header and the #content /
    > > #navbar. As soon as I get it aligned up without a gap i'll be happy.
    > >
    > > Can someone please help? The code is such a messy hack. Does anyone know
    > > of any good manuals that explain the theory of CSS and "CSS block model"
    > > as someone has pointed out to me before. I still have the <table> layout
    > > idea in my head it seems.
    > >
    > > Thanks in advance.

    >
    > Is the css below creating the gap?
    >
    > #header {
    >
    > padding-bottom: 1px;
    > }
    >
    > If not try margin-bottom: 0; on the header div a bit like you have
    > margin-top: 0 for the footer div


    Nup, still there :/
    somebody, Jan 11, 2004
    #3
  4. Toby A Inkster, Jan 11, 2004
    #4
  5. In article Toby A Inkster wrote:
    > somebody wrote:
    >
    > > http://www.hostforge.net/~bjg/alt.html/
    > >
    > > The main problem is the gap between the #header and the #content / #navbar.
    > > As soon as I get it aligned up without a gap i'll be happy.

    >
    > I can't see any gap. (Opera 7.23)


    I can with O7.5p1.

    img {display:block}

    or

    img {vertical-align:bottom;}

    will cure that. The reason there is cap is that image is inline element,
    and so positioned to baseline of line-box.


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
    tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
    Lauri Raittila, Jan 11, 2004
    #5
  6. "somebody" <> wrote in message
    news:400104de$...
    > http://www.hostforge.net/~bjg/alt.html/


    > The code is such a messy hack.

    Yes, you do have a code problem. The biggest is that you have combined
    doctypes 4.01 and xhtml. Because of that you cannot validate your document.
    (i.e., 4.01=<br>, xhtml=<br />. The header changes with each, too. Decide
    which you will be using and a reference is:
    http://www.alistapart.com/articles/doctype/.

    >Does anyone know of any good manuals that explain the theory of CSS and

    "CSS block model" as
    Perhaps http://www.brainjar.com/css/positioning/ this might help with
    positioning. Or, Google your way. There are so many online tutorials for CSS
    and block models. Eric Meyer http://www.meyerweb.com/eric/css/ is my
    favorite since he wrote the book and offers classes.

    Clean up your html and you'll be in a lot better shape. Before you clean it
    up, you have to establish correct doctype (don't forget spelling, i.e.,
    "lucinda"), then run it through a validator and you should be on your way to
    seeing your errors. If you need more help, please ask.

    Good luck.
    Kathy
    kathy painter, Jan 11, 2004
    #6
  7. >>kathy wrote: (don't forget spelling, i.e.,"lucinda"),

    ooooops. looks like i'm a dufus. i spelled the lucinda wrong. i apologize!
    kathy
    kathy painter, Jan 11, 2004
    #7
    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. Lloyd Sheen

    More woes ResolveUrl

    Lloyd Sheen, Jan 24, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    822
    Natty Gur
    Jan 26, 2004
  2. bjg

    More CSS woes

    bjg, Dec 10, 2003, in forum: HTML
    Replies:
    9
    Views:
    463
    kchayka
    Dec 11, 2003
  3. William Buchanan

    More master page woes!

    William Buchanan, Apr 26, 2006, in forum: ASP .Net
    Replies:
    8
    Views:
    560
    William Buchanan
    Apr 26, 2006
  4. Michael
    Replies:
    4
    Views:
    395
    Matt Hammond
    Jun 26, 2006
  5. Robert Klemme

    With a Ruby Yell: more, more more!

    Robert Klemme, Sep 28, 2005, in forum: Ruby
    Replies:
    5
    Views:
    201
    Jeff Wood
    Sep 29, 2005
Loading...

Share This Page