«

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

in post: <news:gg6ec.20738$ .com>
"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/tutoria...son/index.html
http://www.webreference.com/authorin...yout/advanced/


--
b r u c i e

"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

in post: <news:c5atjm$2pvplk$>
"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" 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

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

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

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

in post: <news:c5av9j$2qd5kl$>
"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