a couple layout/css questions

[Tim Gill]

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

 

[brucie]

in post: <

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/

 

[Jim Roberts]

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

 

[brucie]

in post: <

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

 

[Jim Roberts]

considering its invalid i think it very debatable


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

 

[David Dorward]

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?

 

[brucie]

in post: <

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.

 

[Jim Roberts]

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

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

 

[brucie]

in post: <

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

only with some browsers.

 

[Jukka K. Korpela]

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.

 

[Joel Shepherd]

in post: <

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