Prev: Reduce distance between table columns?
Next: Anchor tags - Correct way to style it
From: jeff on 29 Jan 2010 09:19
Joshua Cranmer wrote:
> On 01/28/2010 03:54 PM, jeff wrote:
>> Joshua Cranmer wrote:
>>> :nth-child and :last-child come to mind. For that matter, there is
>>> also the :nth-last-child, and all of the s/child/of-type/ as well. The
>>> fact that selectors can only select the terminal element is well
>>> known, but it's that way primarily because other ways would be
>>> horribly inefficient (see any of the myriads of "parent" selector
>>> requests on the W3C CSS mailing list).
>>
>> Support is iffy outside FF. But you can alway find a way to set a
>> particular element, and it is easier than doing it with tables and
>> without css. Myself, I'd like to use nth child but curiously where I
>> have a real use for it is in tables (for displaying data spreadsheet
>> like).
>
> Gecko, Webkit, KHTML, and Presto all support the major CSS 3 selectors
> (*-child, *-of-type, ~), although I have heard anecdotal reports that
> Webkit (Safari's and Chrome's layout engine) doesn't handle dynamic
> updates very well. This corresponds to pretty much every major browser
> with the exception of IE. Supposedly, IE 9 will contain support for
> these features, but I haven't seen any hard evidence.
>
> <http://www.w3.org/Style/CSS/Test/CSS3/Selectors/20091025/reports/>
> lists the results of the CSS3 selectors suite for Firefox 3.5, Opera 10,
> and Konqueror 4.2. The CSS 2.1 test suite is still forthcoming, so
> overall results for major browsers will have to wait a year or so.

Thanks, I had not seen this. I had been using:

http://www.quirksmode.org/css/contents.html

In practice, I have to care about IE and Safari.

Aside from tables, I'm not sure what real use nth child would have.
For most purposes first-child works well.

FWIW, for my database driven tables, I use the row id, for the row
id, and the column header (no spaces) for the cell class. That's easy to
do and makes it possible to select rows, columns and individual cells. I
use it for ajax updates to cells, but it could style as well.

Web design is a waiting game with years involved before we can use
certain features. In practice it means we'll have to wait for IE11
before we can design mass market sites that may use whatever IE9 catches
up with. Unless we don't care!

Jeff
>
From: Kevin Scholl on 29 Jan 2010 10:20
On Jan 28, 11:16 am, Xah Lee <xah...(a)gmail.com> wrote:

>     While new additions to CSS3 provide a stronger, more robust layout
> feature-set, CSS is still very much rooted as a styling language, not
> a layout language. This problem has also meant that creating fluid
> layouts is still very much done by hand-coding CSS, and make the
> development of a standards-based WYSIWYG editor more difficult than
> expected.

There is no such thing as a true WYSIWYG editor. Inefficient and
bloated code generated by such tools is often the root of the problem.
Nothing wrong with hand-coding, fluid layouts or otherwise; in fact, I
and many others would argue that you should be able to hand code, if
for no other reason than so you truly understand what's going on.

> Also, although you can make a page's layout using CSS instead of
> Tables, but if you want more fine grained layout, such as using nested
> tables, CSS pretty much fails. You'd spend several hours trying do it
> and come out with unsatisfactory result. (see also: Tableless Layout
> with CSS) I'd say, just use tables.

I'd say the develop failed, not CSS. It is possible to create some
pretty complex layouts with CSS, and still keep it cleaner than nested
tables.

[Snip all the selector commentary, as it's been hashed already.]

>     While horizontal placement of elements is generally easy to
> control, vertical placement is frequently unintuitive, convoluted, or
> impossible. Simple tasks, such as centering an element vertically or
> getting a footer to be placed no higher than bottom of viewport,
> either require complicated and unintuitive style rules, or simple but
> widely unsupported rules.

Nah. Practice, practice, practice. It's not THAT hard. Sure, some
hacks are sometimes required (most often to support the various
versions of Internet Exploder ... er, Explorer ... but more often than
not, once you've established a methodology, it can be reused over and
over. For example, the footer issue mentioned (known as a "sticky
footer") has a number of proven solutions.
From: Xah Lee on 29 Jan 2010 17:01
thanks all for the input. Very useful.

I have a question about using css for tables.

For example, in the following very simple page:

http://xahlee.org/xx/xx_how_css_tables.html

you see 3 tables there. I have tried to use css but it's a extreme
headache, never get what i wanted. How'd you do it with css?

Basically, this i wante to use at my home page at http://xahlee.org/
There, you see that i'm not using tables, but the problem is that i
really want the images to be close to the text for each section. Right
now am using float right.

Xah
∑ http://xahlee.org/

☄

On Jan 28, 10:21 am, Joshua Cranmer <Pidgeo...(a)verizon.invalid> wrote:
> On 01/28/2010 11:16 AM, Xah Lee wrote:
>
> > Also, although you can make a page's layout using CSS instead of
> > Tables, but if you want more fine grained layout, such as using nested
> > tables, CSS pretty much fails. You'd spend several hours trying do it
> > and come out with unsatisfactory result. (see also: Tableless Layout
> > with CSS) I'd say, just use tables.
>
> Pixel-perfection is a pointless goal in the modern web.
>
> > CSS's tag matching scheme (so-called Selectors) is also pretty weak
> > and ad hoc. For example, there's “:first-child” to match the first
> > child of a tag, but you can't match second child, third, etc, or last.
> > “AAA + BBB” will match BBB only if there exist in the same level a
> > AAA, and comes before it. But, you can not specify a match where there
> > must be a CCC that comes after.
>
> :nth-child and :last-child come to mind. For that matter, there is also
> the :nth-last-child, and all of the s/child/of-type/ as well. The fact
> that selectors can only select the terminal element is well known, but
> it's that way primarily because other ways would be horribly inefficient
> (see any of the myriads of "parent" selector requests on the W3C CSS
> mailing list).
>
> > Also, the selector expression can not use parens to specify
> > precedence. This is a need i actually had a few times for my own site.
> > (it'll take some time to write explanation. Will have to add example
> > here later.)
>
> Precedence is not needed, because selectors will only allow you to go
> "down" from an element (adjacent after or descendant).
>
> All in all, it's an essay that really doesn't say anything that people
> didn't know.
>
> --
> Beware of bugs in the above code; I have only proved it correct, not
> tried it. -- Donald E. Knuth

From: Gus Richter on 29 Jan 2010 19:21
On 1/29/2010 5:01 PM, Xah Lee wrote:

[snip]
>
> Basically, this i wante to use at my home page at http://xahlee.org/
> There, you see that i'm not using tables, but the problem is that i
> really want the images to be close to the text for each section. Right
> now am using float right.

[snip]


div > img.fr {float:right; padding:1ex;position:relative;right:10%;}

or

div.bk > p {margin:1ex; width:60%;float:left;}
div > img.fr { padding:1ex}

--
Gus

From: jeff on 29 Jan 2010 19:30
Xah Lee wrote:
> thanks all for the input. Very useful.
>
> I have a question about using css for tables.
>
> For example, in the following very simple page:
>
> http://xahlee.org/xx/xx_how_css_tables.html
>
> you see 3 tables there. I have tried to use css but it's a extreme
> headache, never get what i wanted. How'd you do it with css?
>

<table border="0">
<tr><td><p>main text main text main text main text main text main text
main text main text main text main text main text main text main text
main text main text main text main text main text main text main text
main text main text main text main text main text main
text.</p></td><td><img
src="../SpecialPlaneCurves_dir/Hypotrochoid_dir/hypotrochoidGen2.png"
alt="hypotrochoidGen2" width="200" height="200"></td></tr>
</table>

Lots of ways.

<div style="overflow: hidden;zoom: 1">
<div style="width: 30%;float: left">
<div style="padding: 20px">
<p>main text main text main text main text main text main text main text
main text main text main text main text main text main text main text
main text main text main text main text main text main text main text
main text main text main text main text main text.</p>

</div>
</div>

<div style="width: 20%;float: left">
<div style="padding: 20px">
<img
src="../SpecialPlaneCurves_dir/Hypotrochoid_dir/hypotrochoidGen2.png"
alt="hypotrochoidGen2" width="200" height="200">

</div>
</div>
....
</div>

Use widths with your floats. Use an inner div to set padding if you
don't want to recalculate width. Use zoom: 1 (IE), overflow: hidden
(everyone else) if you don't want the wrapper div to collapse in height.
Use clear: right if you want following floats, to well, clear.

Use Google, if you want to see all this explained by someone else!

Jeff
First  |  Prev  |  Next  |  Last
Pages: 1 2 3
Prev: Reduce distance between table columns?
Next: Anchor tags - Correct way to style it