HTML question - any way to do this other than using tables?
I know HTML isn't strictly linux, but still it's related isn't it and there are lots of clever and helpful people here. I want to lay out some web pages in the following sort of fashion:- Top of Page Heading Sub-heading C1 Data C2 Data C3 Data More C1 data More C2 data More C3 data Sub-heading C1 Data C2 Data C3 Data More data More data More data and more etc etc Sub-heading Etc. Etc. Etc I want all of the columns under the sub-headings to be the same widths so they're aligned all the way down (i.e. the same column widths under all of the sub-headings). Using tables one could either set all the column widths explicitly (but very difficult to make it work at different resolutions then) or one could make the sub-headings a column span and just make the text bold (so as a result it's all one table). Is there any other way that would be less painful? I suppose using the column spanning method isn't too awful but it's a really pity that HTML has no other way of putting text in columns. Note that the columns are not all the same width as I have shown above. -- Chris Green
On 01 Nov 15:24, Chris Green wrote:
I know HTML isn't strictly linux, but still it's related isn't it and there are lots of clever and helpful people here.
I want to lay out some web pages in the following sort of fashion:-
Top of Page Heading
Sub-heading C1 Data C2 Data C3 Data More C1 data More C2 data More C3 data
Sub-heading C1 Data C2 Data C3 Data More data More data More data and more etc etc
Sub-heading Etc. Etc. Etc
I want all of the columns under the sub-headings to be the same widths so they're aligned all the way down (i.e. the same column widths under all of the sub-headings).
Using tables one could either set all the column widths explicitly (but very difficult to make it work at different resolutions then) or one could make the sub-headings a column span and just make the text bold (so as a result it's all one table).
Is there any other way that would be less painful? I suppose using the column spanning method isn't too awful but it's a really pity that HTML has no other way of putting text in columns.
Note that the columns are not all the same width as I have shown above.
So, something like: http://miranda.sommitrealweird.co.uk/~brettp/temp/chrisg-3col/ Then? -- Brett Parker
On 01-Nov-11 15:41:16, Brett Parker wrote:
On 01 Nov 15:24, Chris Green wrote:
I know HTML isn't strictly linux, but still it's related isn't it and there are lots of clever and helpful people here.
I want to lay out some web pages in the following sort of fashion:-
Top of Page Heading
Sub-heading C1 Data C2 Data C3 Data More C1 data More C2 data More C3 data
Sub-heading C1 Data C2 Data C3 Data More data More data More data and more etc etc
Sub-heading Etc. Etc. Etc
I want all of the columns under the sub-headings to be the same widths so they're aligned all the way down (i.e. the same column widths under all of the sub-headings).
Using tables one could either set all the column widths explicitly (but very difficult to make it work at different resolutions then) or one could make the sub-headings a column span and just make the text bold (so as a result it's all one table).
Is there any other way that would be less painful? I suppose using the column spanning method isn't too awful but it's a really pity that HTML has no other way of putting text in columns.
Note that the columns are not all the same width as I have shown above.
So, something like: http://miranda.sommitrealweird.co.uk/~brettp/temp/chrisg-3col/
Then?
-- Brett Parker
You must be using hidden resources there, Brett! When I view the URL above I see a beautifully paid-out document, However, if I save the page source to a local file and then open that in Firefox, I simply see: =================================================================== A Document with headings, sub headings and then 3 columns Subheading 1 The rain in spain falls mainly on the plain... Watch out the black helicopter is flying overhead The rain in spain falls mainly on the plain... Watch out the black helicopter is flying overhead The rain in spain falls mainly on the plain... Watch out the black helicopter is flying overhead Subheading 2 The rain in spain falls mainly on the plain... Watch out the black helicopter is flying overhead The rain in spain falls mainly on the plain... Watch out the black helicopter is flying overhead The rain in spain falls mainly on the plain... Watch out the black helicopter is flying overhead =================================================================== with all tabular formatting lost (also frames and colours). Ted. -------------------------------------------------------------------- E-Mail: (Ted Harding) <ted.harding@wlandres.net> Fax-to-email: +44 (0)870 094 0861 Date: 01-Nov-11 Time: 16:15:43 ------------------------------ XFMail ------------------------------
On 01 Nov 16:15, Ted Harding wrote:
On 01-Nov-11 15:41:16, Brett Parker wrote:
So, something like: http://miranda.sommitrealweird.co.uk/~brettp/temp/chrisg-3col/
Then?
-- Brett Parker
You must be using hidden resources there, Brett! When I view the URL above I see a beautifully paid-out document, However, if I save the page source to a local file and then open that in Firefox, I simply see:
Entirely not hidden, it's the stylesheet that's listed in <head> of the page, available from: http://miranda.sommitrealweird.co.uk/~brettp/temp/chrisg-3col/style.css -- Brett Parker
On Tue, Nov 01, 2011 at 04:15:46PM -0000, Ted Harding wrote:
On 01-Nov-11 15:41:16, Brett Parker wrote:
On 01 Nov 15:24, Chris Green wrote:
I know HTML isn't strictly linux, but still it's related isn't it and there are lots of clever and helpful people here.
I want to lay out some web pages in the following sort of fashion:-
Top of Page Heading
Sub-heading C1 Data C2 Data C3 Data More C1 data More C2 data More C3 data
Sub-heading C1 Data C2 Data C3 Data More data More data More data and more etc etc
Sub-heading Etc. Etc. Etc
I want all of the columns under the sub-headings to be the same widths so they're aligned all the way down (i.e. the same column widths under all of the sub-headings).
Using tables one could either set all the column widths explicitly (but very difficult to make it work at different resolutions then) or one could make the sub-headings a column span and just make the text bold (so as a result it's all one table).
Is there any other way that would be less painful? I suppose using the column spanning method isn't too awful but it's a really pity that HTML has no other way of putting text in columns.
Note that the columns are not all the same width as I have shown above.
So, something like: http://miranda.sommitrealweird.co.uk/~brettp/temp/chrisg-3col/
Then?
-- Brett Parker
You must be using hidden resources there, Brett! When I view the URL above I see a beautifully paid-out document, However, if I save the page source to a local file and then open that in Firefox, I simply see:
Brett has used different 'class=' settings for each paragraph and, presumably, the CSS has indents getting them into position.
=================================================================== A Document with headings, sub headings and then 3 columns Subheading 1
The rain in spain falls mainly on the plain...
Watch out the black helicopter is flying overhead
The rain in spain falls mainly on the plain...
Watch out the black helicopter is flying overhead
The rain in spain falls mainly on the plain...
Watch out the black helicopter is flying overhead Subheading 2
The rain in spain falls mainly on the plain...
Watch out the black helicopter is flying overhead
The rain in spain falls mainly on the plain...
Watch out the black helicopter is flying overhead
The rain in spain falls mainly on the plain...
Watch out the black helicopter is flying overhead ===================================================================
with all tabular formatting lost (also frames and colours).
Ted.
-------------------------------------------------------------------- E-Mail: (Ted Harding) <ted.harding@wlandres.net> Fax-to-email: +44 (0)870 094 0861 Date: 01-Nov-11 Time: 16:15:43 ------------------------------ XFMail ------------------------------
_______________________________________________ main@lists.alug.org.uk http://www.alug.org.uk/ http://lists.alug.org.uk/mailman/listinfo/main Unsubscribe? See message headers or the web site above!
-- Chris Green
On Tue, Nov 01, 2011 at 03:41:16PM +0000, Brett Parker wrote:
On 01 Nov 15:24, Chris Green wrote:
I know HTML isn't strictly linux, but still it's related isn't it and there are lots of clever and helpful people here.
I want to lay out some web pages in the following sort of fashion:-
Top of Page Heading
Sub-heading C1 Data C2 Data C3 Data More C1 data More C2 data More C3 data
Sub-heading C1 Data C2 Data C3 Data More data More data More data and more etc etc
Sub-heading Etc. Etc. Etc
I want all of the columns under the sub-headings to be the same widths so they're aligned all the way down (i.e. the same column widths under all of the sub-headings).
Using tables one could either set all the column widths explicitly (but very difficult to make it work at different resolutions then) or one could make the sub-headings a column span and just make the text bold (so as a result it's all one table).
Is there any other way that would be less painful? I suppose using the column spanning method isn't too awful but it's a really pity that HTML has no other way of putting text in columns.
Note that the columns are not all the same width as I have shown above.
So, something like: http://miranda.sommitrealweird.co.uk/~brettp/temp/chrisg-3col/
Then?
Yes, 'ish. I don't want boxes around things but that's presumably just some CSS. -- Chris Green
On 01 Nov 20:41, Chris Green wrote:
On Tue, Nov 01, 2011 at 03:41:16PM +0000, Brett Parker wrote:
So, something like: http://miranda.sommitrealweird.co.uk/~brettp/temp/chrisg-3col/
Then?
Yes, 'ish. I don't want boxes around things but that's presumably just some CSS.
Yeah - that's just a border that I put on those boxes to show where there edges where, is Really Easy to removed them given the css. -- Brett Parker
On 01/11/11 15:41, Brett Parker wrote:
So, something like: http://miranda.sommitrealweird.co.uk/~brettp/temp/chrisg-3col/ Then?
The problem with this approach is that "the wrong kind of" data can mess up the layout. Eg insert an image into the first cell under Subheading 1 that forces the browser to increase the width of that "column", and the data in the following rows won't follow suit (unless I've missed something clever in the CSS). That's fine as long as you know what it going into the cells in advance, but otherwise... If there is a vertical relationship between the cells in Chris's example, it may well be that using tables is "correct", but otherwise I don't know of a way to make it work elegantly in CSS. It ought to be fairly simple to be able to specify tab levels in CSS so that everything at the same tab level will be vertically aligned regardless of content, but that's not an option to my knowledge. -- Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) 21 Drakes Mews, Milton Keynes, MK8 0ER
On 02 Nov 16:20, Mark Rogers wrote:
On 01/11/11 15:41, Brett Parker wrote:
So, something like: http://miranda.sommitrealweird.co.uk/~brettp/temp/chrisg-3col/ Then?
The problem with this approach is that "the wrong kind of" data can mess up the layout. Eg insert an image into the first cell under Subheading 1 that forces the browser to increase the width of that "column", and the data in the following rows won't follow suit (unless I've missed something clever in the CSS). That's fine as long as you know what it going into the cells in advance, but otherwise...
Erm, that would still be 30% wide of the 90% wide holding div, the columns in that example were set so they don't expand/contract but are a percentage of the whole, so it wouldn't do what you suggest at all.
If there is a vertical relationship between the cells in Chris's example, it may well be that using tables is "correct", but otherwise I don't know of a way to make it work elegantly in CSS. It ought to be fairly simple to be able to specify tab levels in CSS so that everything at the same tab level will be vertically aligned regardless of content, but that's not an option to my knowledge.
-- Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) 21 Drakes Mews, Milton Keynes, MK8 0ER
_______________________________________________ main@lists.alug.org.uk http://www.alug.org.uk/ http://lists.alug.org.uk/mailman/listinfo/main Unsubscribe? See message headers or the web site above!
-- Brett Parker
On 02/11/11 16:27, Brett Parker wrote:
(unless I've missed something clever in the CSS) (which I had!)
Erm, that would still be 30% wide of the 90% wide holding div, the columns in that example were set so they don't expand/contract but are a percentage of the whole, so it wouldn't do what you suggest at all.
OK, I just tested it, inserting <img src="http://www.sommitrealweird.co.uk/media/img/background.png"> (seemed like a nice image to play with, hope you don't mind!) into the first "cell" in the first "row", and also into the second "cell" in the second "row". The result was that the image expanded outside the cells. That's probably not what would have been expected, nor what would have happened using tables. The problem with table layouts in CSS is that either you have to fix something (so it "breaks" when the content doesn't fit), or you don't fix things (in which case they don't line up). There's no way (that I know of) to make element X specifically line up with element Y, whilst letting the renderer decide where X and Y go beyond that. -- Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) 21 Drakes Mews, Milton Keynes, MK8 0ER
On Wed, Nov 02, 2011 at 04:20:05PM +0000, Mark Rogers wrote:
If there is a vertical relationship between the cells in Chris's example, it may well be that using tables is "correct", but otherwise I don't know of a way to make it work elegantly in CSS. It ought to be fairly simple to be able to specify tab levels in CSS so that everything at the same tab level will be vertically aligned regardless of content, but that's not an option to my knowledge.
I've decided to go with using tables for the pages in question, it's not quite so messy as I thought it would be. The pages are generated from a database using PHP so much of the repetitive stuff can be wrapped up in functions and/or loops. No one has to look at the resulting HTML fortunately. I agree though that there should be some sane way to specify tab positions in CSS, it would make life so much easier. -- Chris Green
participants (4)
-
Brett Parker -
Chris Green -
Mark Rogers -
ted.harding＠wlandres.net