Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > a couple layout/css questions

Reply
Thread Tools

a couple layout/css questions

 
 
Tim Gill
Guest
Posts: n/a
 
      04-11-2004
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



 
Reply With Quote
 
 
 
 
brucie
Guest
Posts: n/a
 
      04-11-2004
in post: <news:gg6ec.20738$(E-Mail Removed) .com>
"Tim Gill" <(E-Mail Removed)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


 
Reply With Quote
 
 
 
 
Jim Roberts
Guest
Posts: n/a
 
      04-11-2004

"Tim Gill" <(E-Mail Removed)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


 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      04-11-2004
in post: <news:c5atjm$2pvplk$(E-Mail Removed)-berlin.de>
"Jim Roberts" <(E-Mail Removed)> 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


 
Reply With Quote
 
Jim Roberts
Guest
Posts: n/a
 
      04-11-2004

"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





 
Reply With Quote
 
David Dorward
Guest
Posts: n/a
 
      04-11-2004
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/>
 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      04-11-2004
in post: <news:c5augu$bv0$1$(E-Mail Removed)>
David Dorward <(E-Mail Removed)> 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


 
Reply With Quote
 
Jim Roberts
Guest
Posts: n/a
 
      04-11-2004

"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


 
Reply With Quote
 
Jim Roberts
Guest
Posts: n/a
 
      04-11-2004

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


 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      04-11-2004
in post: <news:c5av9j$2qd5kl$(E-Mail Removed)-berlin.de>
"Jim Roberts" <(E-Mail Removed)> 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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
A couple of questions regarding IOS software Andrew Hodgson Cisco 4 02-06-2006 04:49 PM
A couple of T-Bird questions Dale Brisket Firefox 2 10-02-2005 10:25 PM
Newbie questions - Couple of VC++ questions regarding dlls and VB6 Ali Syed C Programming 3 10-13-2004 10:15 PM
1721 ADLS - a couple of questions ? Thomas Cisco 0 01-30-2004 04:42 PM
A Couple of Questions Wayne Wengert ASP .Net 1 01-22-2004 11:06 PM



Advertisments