a couple layout/css questions

Discussion in 'HTML' started by Tim Gill, Apr 11, 2004.

  1. Tim Gill

    Tim Gill Guest

    Hi all,
    well, I finally decided to chuck FrontPage and start coding by hand in
    NotePad to teach myself some real html/css; it has been mentioned that the
    syntax that FP will insert of its own accord will not help. So far I am
    getting along ok, except for a couple issues:

    First off: I have my navigation arranged in a series of lists that I want to
    put headers on. So far the code is something like this (imagine that the
    links have urls anchored to them):

    <div id="navbar">
    <p>Section One</p>
    <ul>
    <li>The first link</li>
    <li>The second link</li>
    </ul>
    <p>Section Two</p>
    <ul>
    <li>The third link</li>
    <ul>
    <li>The third link's subset</li>
    </ul>
    <li>The fourth link</li>
    </ul>
    </div>
    etc. etc.

    My problem is I get a full line space between the headings and the lists of
    links, which I don't want. What can I do in the stylesheet to get rid of
    this? Should the headings be <h1><h2> etc. elements (though this does not
    seem to fix the problem) or id'd with a class I can specify in the
    stylesheet (i.e. <p class="blah")?

    Secondly, is there any advice/and or links to sites that give a helpful
    tutorial on how to create a simple two column layout with a header and
    footer on top? I don't want to use a template, I want to write the CSS
    myself.

    Thanks for your time
    -TG
    Tim Gill, Apr 11, 2004
    #1
    1. Advertising

  2. Tim Gill

    brucie Guest

    in post: <news:gg6ec.20738$>
    "Tim Gill" <0m> said:

    > well, I finally decided to chuck FrontPage


    YAY!

    > and start coding by hand in NotePad


    BOOO!

    at least use an editor with syntax highlighting

    free:
    jedit: http://www.jedit.org/
    nedit: http://www.nedit.org/
    netpadd: http://www.netpadd.com/
    araneae: http://www.araneae.com/
    1st page: http://www.evrsoft.com/
    crimson: http://crimsoneditor.com/
    ezpad: http://www.mmedia.is/ezpad/
    acehtml: http://freeware.acehtml.com/
    notetab light: http://www.notetab.com/
    tswebeditor: http://tswebeditor.net.tc/
    html-kit: http://www.chami.com/html-kit/
    pspad: http://www.pspad.com/index_en.html
    websmill: http://www.xtreeme.com/websmill/
    metapad: http://www.liquidninja.com/metapad/
    quanta (linux): http://quanta.sourceforge.net/
    dirt&stick: http://bruciesusenetshit.info/editor/
    notespad: http://www.newbie.net/NotesPad/index.html
    grey matter pro: http://www.pagetutor.com/misc/grey.html
    editpad lite: http://www.editpadlite.com/editpadlite.html
    stones webwrite: http://www.webwriter.dk/english/index.htm
    matizha sublime: http://www.matizha.com/en/products/sublime/

    not free:
    textpad: http://www.textpad.com/
    notetab: http://www.notetab.com/
    editplus: http://www.editplus.com/
    ultraedit: http://www.idmcomp.com/
    editpad: http://www.editpadpro.com/
    hypertext studio: http://www.olsonsoft.com/
    namo: http://www.namo.com/products/webeditor/
    acehtml pro: http://www.visicommedia.com/acehtml/
    ibm websphere: http://www-3.ibm.com/software/webservers/hpbuilder/
    spider writer: http://www.actiprosoftware.com/Products/SpiderWriter/

    > First off: I have my navigation arranged in a series of lists that I want to
    > put headers on. So far the code is something like this (imagine that the
    > links have urls anchored to them):


    my imagination is limited to porn and food. it makes it much easier for
    people to help you when you supply a link to the document.

    > <p>Section One</p>


    should be a heading

    > <p>Section Two</p>


    same again

    > My problem is I get a full line space between the headings and the lists of
    > links, which I don't want.


    use css margins and padding to adjust the <ul>, <li> and <p>s (which
    should be <Hx>s)

    for example: ul,li{margin:0 1em;padding:0 1em;}p{margin:0;} on your
    above markup squishes everything up.

    > Should the headings be <h1><h2> etc.


    gowd damnit, i just wasted all that ink saying so above.

    > Secondly, is there any advice/and or links to sites that give a helpful
    > tutorial on how to create a simple two column layout with a header and
    > footer on top?


    layout examples:
    http://www.glish.com/css/
    http://www.csszengarden.com/
    http://www.wannabegirl.org/css/
    http://tantek.com/CSS/Examples/
    http://www.saila.com/usage/layouts/
    http://www.bluerobot.com/web/layouts/
    http://www.benmeadowcroft.com/webdev/
    http://nemesis1.f2o.org/templates.php
    http://www.xs4all.nl/~apple77/columns/
    http://www.meyerweb.com/eric/css/edge/
    http://www.htmler.org/tutorials/3/1.html
    http://css.nu/articles/floating-boxes.html
    http://webhost.bridgew.edu/etribou/layouts/
    http://www.roguelibrarian.com/lj/index.html
    http://css-discuss.incutio.com/?page=CssLayouts
    http://ecoculture.com/styleguide/r/rollovers.html
    http://thenoodleincident.com/tutorials/box_lesson/index.html
    http://www.webreference.com/authoring/style/sheets/layout/advanced/


    --
    b r u c i e
    brucie, Apr 11, 2004
    #2
    1. Advertising

  3. Tim Gill

    Jim Roberts Guest

    "Tim Gill" <0m> wrote...

    > First off: I have my navigation arranged in a series of lists that I want

    to
    > put headers on. So far the code is something like this (imagine that the
    > links have urls anchored to them):


    > My problem is I get a full line space between the headings and the lists

    of
    > links, which I don't want. What can I do in the stylesheet to get rid of
    > this? Should the headings be <h1><h2> etc. elements (though this does not
    > seem to fix the problem) or id'd with a class I can specify in the
    > stylesheet (i.e. <p class="blah")?


    By default, the <p> element will have a margin. In your style sheet you
    could put:

    p {
    margin: 0
    }

    This would work for h1,h2, etc.

    I'd recommend that you put your list title after the <ul> tag:

    <ul>Section one
    <li>The first link</li>
    <li>The second link</li>
    </ul>

    I believe that would be the most correct markup , although I suppose that's
    debatable. You shouldn't have to worry about the margin on the ul element.

    Regards,
    Jim
    Jim Roberts, Apr 11, 2004
    #3
  4. Tim Gill

    brucie Guest

    in post: <news:c5atjm$2pvplk$-berlin.de>
    "Jim Roberts" <> said:

    > <ul>Section one
    > <li>The first link</li>
    > <li>The second link</li>
    > </ul>
    >
    > I believe that would be the most correct markup,although I suppose that's
    > debatable.


    considering its invalid i think it very debatable

    > You shouldn't have to worry about the margin on the ul element.


    browsers are inconsistent with their margins and paddings on lists. i've
    always found it easiest to remove everything and then put back the bits
    i want to get a consistent look across browsers.

    --
    b r u c i e
    brucie, Apr 11, 2004
    #4
  5. Tim Gill

    Jim Roberts Guest

    "brucie" wrote:
    > >Jim wrote:
    > > <ul>Section one
    > > <li>The first link</li>
    > > <li>The second link</li>
    > > </ul>
    > >
    > > I believe that would be the most correct markup,although I suppose

    that's
    > > debatable.

    >
    > considering its invalid i think it very debatable
    >
    > > You shouldn't have to worry about the margin on the ul element.

    >
    > browsers are inconsistent with their margins and paddings on lists. i've
    > always found it easiest to remove everything and then put back the bits
    > i want to get a consistent look across browsers.
    >

    Damn, my mistake. I didn't realize that was invalid. Just checked and sure
    enough. Thanks Brucie.

    Actually, I usually set everything to zero myself.

    * {margin: 0; padding: 0}

    Regards,
    Jim Roberts
    Jim Roberts, Apr 11, 2004
    #5
  6. Editors (was Re: a couple layout/css questions)

    brucie wrote:

    > gowd damnit, i just wasted all that ink saying so above.


    Do you have really good handwriting, or excellent OCR software? How does
    your OCR software cope with pointy stick & dirt?

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    David Dorward, Apr 11, 2004
    #6
  7. Tim Gill

    brucie Guest

    Re: Editors (was Re: a couple layout/css questions)

    in post: <news:c5augu$bv0$1$>
    David Dorward <> said:

    >> gowd damnit, i just wasted all that ink saying so above.


    > Do you have really good handwriting, or excellent OCR software?


    OCR (IRIS)

    > How does your OCR software cope with pointy stick & dirt?


    i've never had a problem. the only disadvantage is having to replace the
    glass in the scanner after dragging it across the dirt a few dozen
    times. but glass is cheap and if you ever run short you can just pop out
    a window.

    --
    b r u c i e
    brucie, Apr 11, 2004
    #7
  8. Tim Gill

    Jim Roberts Guest

    "brucie" wrote...

    > browsers are inconsistent with their margins and paddings on lists. i've
    > always found it easiest to remove everything and then put back the bits
    > i want to get a consistent look across browsers.


    I just discovered that when setting the ul margin to zero, the list item
    markers disappear
    Jim Roberts, Apr 11, 2004
    #8
  9. Tim Gill

    Jim Roberts Guest

    "brucie" wrote:

    > browsers are inconsistent with their margins and paddings on lists. i've
    > always found it easiest to remove everything and then put back the bits
    > i want to get a consistent look across browsers.


    God dammit. My last post got truncated...

    As I was saying, the list item markers disappear in IE6 but remain when
    using gecko rendering. Well, anyway, thanks for the info Brucie.

    Regards,
    Jim Roberts...
    Jim Roberts, Apr 11, 2004
    #9
  10. Tim Gill

    brucie Guest

    in post: <news:c5av9j$2qd5kl$-berlin.de>
    "Jim Roberts" <> said:

    >> browsers are inconsistent with their margins and paddings on lists. i've
    >> always found it easiest to remove everything and then put back the bits
    >> i want to get a consistent look across browsers.


    > I just discovered that when setting the ul margin to zero, the list item
    > markers disappear


    only with some browsers.


    --
    b r u c i e
    brucie, Apr 11, 2004
    #10
  11. "Tim Gill" <0m> wrote:

    > well, I finally decided to chuck FrontPage and start coding by hand
    > in NotePad to teach myself some real html/css;


    Why don't you use HTML and CSS _in_ FrontPage? It is quite possible to
    produce good code in FrontPage. It lets you switch between wysiwyg and
    HTML mode and work with HTML tags in many ways - though surely _some_ of
    the markup it generates in wysiwyg mode is almost impossible to deal with
    in HTML mode. But you can learn to avoid features that do so.

    > First off: I have my navigation arranged in a series of lists that I
    > want to put headers on.


    Then use headers, e.g. those that you can create using FrontPage menus
    (though it does not save much typing).

    > <p>Section One</p>


    That's not a paragraph, is it? Make it a heading, like <h2>. You will
    have font size and weight issues and margin issues to deal with, but you
    can add a little bit of CSS, like
    #navbar h2 { font-size: 100%;
    margin: 0.3em 0 0 0; }
    Sufficiently new versions of FrontPage have various tools for styling
    elements without actually writing any CSS, but they are in fact so
    complicated that writing CSS directly might be a better option. You
    can simply switch to HTML mode and add a <style> element with the desired
    content - and then switch to wysiwyg mode to see that it has roughly the
    desired effect.

    > My problem is I get a full line space between the headings and the
    > lists of links, which I don't want.


    Paragraphs have default top and bottom margins, too.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Apr 11, 2004
    #11
  12. Re: Editors (was Re: a couple layout/css questions)

    In article <c5av3m$2qq887$-berlin.de>,
    brucie <> wrote:

    > in post: <news:c5augu$bv0$1$>
    > David Dorward <> said:
    >
    > > How does your OCR software cope with pointy stick & dirt?

    >
    > i've never had a problem. the only disadvantage is having to replace the
    > glass in the scanner after dragging it across the dirt a few dozen
    > times. but glass is cheap and if you ever run short you can just pop out
    > a window.


    This is why I pile the dirt on _top_ of the scanner, and then scritch
    away with the pointy stick. Just enough light comes through the places
    where the dirt has been pushed away to get a good scan of the text.

    Also tried rolling the scanner along on top of little round stones, to
    keep it up from the dirt, but around here the only stones we have are
    bricks, so that didn't work too well.

    --
    Joel.

    http://www.cv6.org/
    "May she also say with just pride:
    I have done the State some service."
    Joel Shepherd, Apr 11, 2004
    #12
    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:
    708
    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,000
  3. Replies:
    1
    Views:
    571
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,006
    W├┐rm
    Jun 20, 2006
  5. Ali Syed
    Replies:
    3
    Views:
    551
    Mark McIntyre
    Oct 13, 2004
Loading...

Share This Page