Previous Message
Next Message

Bullets/ Centering in tables

Sent by Zoe M. Gillenwater on 28 September 2005 15:03


Peter Frederiksen wrote:

> I apologize. It's been less than a month since I read my first line of 
> html (or, for that matter, any other code).


Just FYI -- HTML is not code.  It's markup.  You wrap tags about pieces 
of content to mark them up as headings or paragraphs or lists, etc.  
This may seem like a trivial wording issue, but I find that thinking 
about HTML as a way to tell the browser what a piece of content is helps 
me write cleaner, more semantic HTML.  It's a mind shift thing. :-)

> So I'm still new at this, including presenting problems.


This page in our wiki may give you a better idea of how to best get help 
on this list.
http://css-discuss.incutio.com/?page=PostingGuidelines

> Presented in the 'framebox' in this link: 
> http://pefco.dk/testing/test.htm
>
> The box is going to contain two kinds of data:
> 1. Actual tabular data (items 1-3).
>         The items may consist of several lines and the links (html and 
> pdf) only of 1. There's most likely a better design, but I'll worry 
> about that later - unless
>        someone has some input to share
> 2. Non-tabular data (items 4-6)
>        To make the design consistent this data needs to be put in 
> tables too.


No it doesn't.  It's a list, so mark it up as a list.  Suppress the 
default bullets using "list-style: none" on the ul element.  Then, give 
the li's background images that look like bullets and are set to not 
repeat.  Pad the li's on the left so their text doesn't overlap their 
backgrounds.  Then, just apply this same background image to the first 
table cell in the top three rows.

> The problem:
> Aligning the bullets with crossbrowser compatibility - vertically, 
> marginwize- and sizewize. 


Since you'll be using background images, you can use the 
background-position property to position the bullet where you want it in 
respect to the text.

The first Listutorial covers using background images for bullets.  I 
suggest you work through it from start to finish:
http://css.maxdesign.com.au/listutorial/

Lots of good, easy to follow tutorials at this site:
http://css.maxdesign.com.au/index.htm

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: