473,574 Members | 2,580 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Specifying tabular position with CSS

Hello!

I could arrange some HTML elements so that they have a sensible order
without stylesheets:

<div id="sections">
<div id="content"> The bulk of the content that people actually want to read </div>
<div id="navigation" > Some short site map </div>
<div id="gumph"> Adverts and stuff... </div>
</div>

....and then set CSS to present these in a table (with 'display:
table-cell' etc) to achieve a three-column layout, but the components
will appear in their HTML order. If I want #content in the middle, or
some other re-ordering, perhaps with extra rows (e.g. navigation on
top), it seems I need CSS3 features, still under development. Any way
to do it with CSS2?

Can the move-to property only be used to defer content, and not to send
it back up the document? I don't suppose this is a big problem, since a
move up could always be expressed as moving everything else down,
right? Also, it might help when a 'content: pending()' is associated
with a non-id selector (since there could be multiple matching
elements), right?

Is there a way to set the row- or column-span of a CSS table cell? And
to generate a pseudo-element around a group of sibling elements (which
could then be declared as a table-row)?

Thanks,

Steven

--
ss at comp dot lancs dot ac dot uk
Nov 10 '05 #1
6 1651
Steven Simpson <ss@domain.inva lid> wrote:
I could arrange some HTML elements so that they have a sensible order
without stylesheets:

<div id="sections">
<div id="content"> The bulk of the content that people actually want to read </div>
<div id="navigation" > Some short site map </div>
<div id="gumph"> Adverts and stuff... </div>
</div>

...and then set CSS to present these in a table (with 'display:
table-cell' etc) to achieve a three-column layout,
Given that IE doesn't support the CSS table model, I assume that this is
not a web site and/or that you are not supplying styling for IE?
but the components
will appear in their HTML order. If I want #content in the middle, or
some other re-ordering, perhaps with extra rows (e.g. navigation on
top), it seems I need CSS3 features, still under development. Any way
to do it with CSS2?
Floating and absolute positioning are the only CSS2 ways that allow
content to be displayed in a different order than listed in the HTML.
Needless to say that both methods deprive you of the features offered by
tables.
Can the move-to property only be used to defer content, and not to send
it back up the document?
The "move-to" property is part of the CSS3 proposals, afaik no browser
has implemented it.
Is there a way to set the row- or column-span of a CSS table cell?
The CSS2 table model does not provide for that.
And
to generate a pseudo-element around a group of sibling elements (which
could then be declared as a table-row)?


Not sure what you mean by that. If needed the CSS table model auto
generates anonymous elements to complete a CSS table as per the rules
laid out in the spec. You cannot target anonymously generated elements,
thus you cannot attach styling properties to them.

--
Spartanicus
Nov 10 '05 #2
Spartanicus wrote:
Given that IE doesn't support the CSS table model, I assume that this is
not a web site and/or that you are not supplying styling for IE?

No, I'm just looking theoretically at approaches to achieve popular
layouts while still properly separating style from content. I'm
exploring and checking my understanding of the CSS table approach.

Floating and absolute positioning are the only CSS2 ways that allow
content to be displayed in a different order than listed in the HTML.
As I thought.

The "move-to" property is part of the CSS3 proposals, afaik no browser
has implemented it.

I realise that. I should have indicated that it was a question on the
theory/intention of the property, not its current implementation.
Is there a way to set the row- or column-span of a CSS table cell?

The CSS2 table model does not provide for that.

I thought so, but also that perhaps I had missed something.

You cannot target anonymously generated elements,
thus you cannot attach styling properties to them.

In CSS3, ::outside, ::before and ::after are proposed to generate
anonymous elements, to which style can be applied, but ::outside only
goes around a single (non-generated) element. I couldn't see a way to
extend it over the original element's siblings.

Thanks,

Steven

--
ss at comp dot lancs dot ac dot uk
Nov 10 '05 #3
Steven Simpson <ss@domain.inva lid> wrote:
Given that IE doesn't support the CSS table model, I assume that this is
not a web site and/or that you are not supplying styling for IE?

No, I'm just looking theoretically at approaches to achieve popular
layouts while still properly separating style from content. I'm
exploring and checking my understanding of the CSS table approach.


Note that CSS table layouts have the same problems as HTML tables, minus
the semantic problem. Reflows and/or delayed rendering that are common
with the automatic table layout model are a big part of that. This can
be remedied by selecting the fixed table layout model, but that destroys
many of the behaviors that many people find so appealing about using
tables for layout.

Content that is supposed to be "moved", as might become possible with
the CSS3 move-to property, is only going to make reflow and/or delayed
rendering problems worse, especially when the content is external.

Perhaps the promised CSS3 "advanced layout" module will address some of
these issues, unfortunately it is not publicly known if any work has
been carried out on that module.
The "move-to" property is part of the CSS3 proposals, afaik no browser
has implemented it.

I realise that. I should have indicated that it was a question on the
theory/intention of the property, not its current implementation.


In that case I'll pass on commenting further, my interest is mostly
limited to CSS methods that have at least one implementation.

--
Spartanicus
Nov 10 '05 #4
"Steven Simpson" <ss@domain.inva lid> wrote
I could arrange some HTML elements so that they have a sensible order
without stylesheets:

<div id="sections">
<div id="content"> The bulk of the content that people actually want to read </div> <div id="navigation" > Some short site map </div>
<div id="gumph"> Adverts and stuff... </div>
</div>

...and then set CSS to present these in a table (with 'display:
table-cell' etc) to achieve a three-column layout, but the components
will appear in their HTML order. If I want #content in the middle, or
some other re-ordering, perhaps with extra rows (e.g. navigation on
top), it seems I need CSS3 features, still under development. Any way
to do it with CSS2?
SNIPPED
Is there a way to set the row- or column-span of a CSS table cell? And
to generate a pseudo-element around a group of sibling elements (which
could then be declared as a table-row)?


I would recommend the following approach

a) choose the width of the left and right columns, and which content you
want in each.
b) set up the left and right styles as follows

#left1, #left2 {width: (the width you chose); float: left}
#right1, #right2 {width: (the width you chose); float: right}

c) set up the content bits (or whatever is in the middle - nav, ads or
whatever) style as follows

#content1, #content2 {margin-left: (width you chose for the left column);
margin-right: (width you chose for the right column)}

Hopefully that should work. If not, I recomend http://www.alistapart.com/ as
that has something on 3 column layouts I think.

Martin

--
Martin Eyles
ma**********@NO SPAM.bytronic.c om
Nov 23 '05 #5
Hello!

Martin Eyles wrote:
"Steven Simpson" <ss@domain.inva lid> wrote
...and then set CSS to present these in a table (with 'display:
table-cell' etc) to achieve a three-column layout,
I would recommend the following approach

a) choose the width of the left and right columns,
I'm looking at the (CSS) table approach in order to avoid (what appears
to be) an arbitrary choice of width.
I recomend http://www.alistapart.com/ as
that has something on 3 column layouts


Hmm, I wouldn't recommend it as an example of a good web design,
however. Reduced font size for the main text; and too wide for my
browser window. Eugh!

Thanks anyway! :)

--
ss at comp dot lancs dot ac dot uk
Nov 23 '05 #6
"Steven Simpson" <ss@domain.inva lid> wrote in message
news:dl******** **@news.freedom 2surf.net...
Hello!
Hi!
Martin Eyles wrote:
"Steven Simpson" <ss@domain.inva lid> wrote
...and then set CSS to present these in a table (with 'display:
table-cell' etc) to achieve a three-column layout,
I would recommend the following approach

a) choose the width of the left and right columns,
I'm looking at the (CSS) table approach in order to avoid (what appears
to be) an arbitrary choice of width.


In that case, I think that the only ways of doing 3 columns in just css are
either the method suggested, or using absolute positioning for the lot
(involves fixing even more widths). The other methods require putting the
HTML in a specific order, and then in divs. (one for each column).

I'm not even sure if CSS3 helps much, as the columns feature is really for
flowing text in columns rather than page layout. Then again, I might have
missed some of the features, as I only fiddled with it briefly for one page
on my personal site.
I recomend http://www.alistapart.com/ as
that has something on 3 column layouts


Hmm, I wouldn't recommend it as an example of a good web design,
however. Reduced font size for the main text; and too wide for my
browser window. Eugh!


Yeah, I know what you mean, only really works at 1024x768 and up. It is a
shame they made the shift to 4 faux columns (I don't think the left column
is a proper column), as they used to have a much better (accesibility wise)
2 column layout. Still, if you can get round this (turn off the styles,
should be able to see it in a narrower window without trouble, as the
underlying HTML is OK), many of the articles are worth looking at (they're
not all written by the person who came up with the latest stylesheet of the
site).
Thanks anyway! :)
No Problem
ss at comp dot lancs dot ac dot uk


ooooooh, proper comp sci guy, are you the department webmaster?

Ciao,
Martin

--
Martin Eyles
ma**********@NO SPAM.bytronic.c om
Nov 23 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
1831
by: Terry | last post by:
I'd like to build a table-less layout for a very simple page. The layout should look a bit like this (view with fixed font) +-------------+ ID: 2984884 | | Last Name: Doe | | First Name: John | (picture) | DOB: 1999-11-11 | | City: Pasadena | | Job Desc: Manager in charge of the...
20
2789
by: Karl Smith | last post by:
I heard a rumour that Opera succeeded where none have before, and implemented the tables described in HTML4 and CSS2. So I thought I'd try it out with the well known Periodic Table. http://users.tpg.com.au/karl6740/css/table_elements_periodic.html CSS: Notice in the TRs with the lanthanides and actinides, the empty TDs at the end...
11
2918
by: Alec S. | last post by:
Hi, Is it possible to create a colored box like this? : <html> <head> <style type="text/css"> #bbb { background: #f00; position: absolute;
4
2173
by: bobdedogh | last post by:
can anyone add live hyperlinks to the sortable table made by the code supplied by Machi, or know of a simple alternative bob Machi wrote Mar 10 1999, 8:00 am >>>>>>>>>>>>>> .... Hello Harjinder!
1
2033
by: Christopher | last post by:
Hi... I would be very grateful If You could resolve my question, my question is "How do tabular a ListBox that their property DrawMode is OwnerDrawFixe?". I do know as tabular a listbox, but I don't know is as tabular a listbox in the which its DrawMode Property is OwnerDrawFixed. I thank their help.
1
1720
by: CrazeUK | last post by:
Hi, First thanks in advance. I am using the board quite frequently now. I have a DB with multiple tables. Table 1: Main details table Table 2: Notes Table 3: Files affected I want to be able to use a tabbed form to enter details onto all 3 tables. Tab 1 would have a Columnar style form for the main details. Tab 2 would have a Tabular...
38
3271
by: Sanders Kaufman | last post by:
I'm converting my table-based layouts to css-positioned divs - but the ONLY reason I'm doing it is because it's *considered* a best practice. I don't really see where anything goes hinky when tables are used - but I'm doing it anyway because the HTML and CSS specs says to reserve tables for tabular data. So as I convert my login widgit to...
5
2296
by: Lars Eighner | last post by:
Is a calendar tabular data, logically meriting table markup? -- Lars Eighner <http://larseighner.com/ <http://myspace.com/larseighner> Countdown: 465 days to go. What do you do when you're debranded?
1
3097
by: sharan | last post by:
Using the expat parser (http://expat.sourceforge.net/) i have to parse the following xml file and print it on the screen in tabular format using C language. i am getting ouput serially but not in tabular xml file is: <?xml version="1.0"?> <users> <user id="1"> <nameHari Oum </name> <age24 </age>
0
7808
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7732
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8243
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7822
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
8101
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
5302
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3742
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3754
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1347
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.