using CSS instead of tables <dd246223-1b98-48fb-af28-2b329ab9ccdd@k13g2000hse.googlegroups.com><1a0c$487284e1$cef88ba3$6097@TEKSAVVY.COM> <VXVck.171777$8k.127138@newsfe18.ams2>
in [CSS]
|
Prev: using CSS instead of tables <dd246223-1b98-48fb-af28-2b329ab9ccdd@k13g2000hse.googlegroups.com> <1a0c$487284e1$cef88ba3$6097@TEKSAVVY.COM> <VXVck.171777$8k.127138@newsfe18.ams2>
Next: Help needed getting IE to behave
From: Denis McMahon on 10 Jul 2008 05:14 Chris F.A. Johnson wrote: > On 2008-07-09, Denis McMahon wrote: >> Chris F.A. Johnson wrote: >> >>> What effect are you looking for? Something like >>> <http://cfaj.freeshell.org/testing/xx2.html>, perhaps? >> That was useful, I have a similar but not quite the same problem. >> >> Old style markup, set the table width to 100%, set the left column to >> 200 pixels, > > If the left-hand column contains any text, use em rather than > px to size it. > >> set the right column to 100%, right column is expanded to >> take the available space. >> >> How do I do this in CSS? > > In CSS, less is more. Most problems are caused by specifying too > much rather than too little. The default width of a block > element is 100%; you don't need to specify it. OK, here's my old style table: [logo][ title ] [menu][content] Top row is 100 px high, left column is 200 px wide, table width is 100% of body, so the right column expands to use all the remaining window width automatically. My first problem is that I'm unsure whether to create two "column" divs and put two "row" divs in each "column", or to create two "row" divs each containing two "column" divs, or just create four separate divs corresponding to each of the 4 table cells. Using the "less is more" theory, I define 4 divs: #logo { position: absolute; top: 0px; left: 0px; width: 200px; height: 100px; background-color: blue; } #title { position: absolute; top: 0px; left: 200px; height: 100px; background-color: blue; } #menu { position: absolute; top: 100px; left: 0px; width: 200px; background-color: blue; } #content { position: absolute; top: 100px; left: 200px; background-color: yellow; } body { background-color: blue; } With these definitions, the top left corner of each div is now in the right place, the width of the menu / logo and height of the title / logo are correct, but the "title" div doesn't expand across the full width of the "content" div, and the "menu" div doesn't expand to the full length of the "content" div. This means, for example, that I can't center a short title in the title div relative to the content div, because the width of the title div (containing h1 with text) is determined by the width of the text inside the h1, if the text is less than enough to wrap the div simply doesn't expand all the way. I can "kludge" the background colours issue by setting the body colour to the same as the menu / logo / title colour if I use the same colours in those three divs, but I also get a problem on eg my "site map" page because the site map content is a nested list and the content isn't wide enough to cause the div to expand to the full width, so the body colour then appears on the right of the div. I guess I should restate my problem as one of making the divs expand to the limits of the container even when their content is minimal (or empty) Ideas? Suggestions? Denis
From: Denis McMahon on 10 Jul 2008 19:50 dorayme wrote: > In article <tpkdk.175906$8k.123754(a)newsfe18.ams2>, > Denis McMahon <denis.mcmahon(a)ntlworld.com> wrote: > >> OK, here's my old style table: >> >> [logo][ title ] >> [menu][content] >> >> Top row is 100 px high, left column is 200 px wide, table width is 100% >> of body, so the right column expands to use all the remaining window >> width automatically. >> >> My first problem is that I'm unsure whether to create two "column" divs >> and put two "row" divs in each "column", or to create two "row" divs >> each containing two "column" divs, or just create four separate divs >> corresponding to each of the 4 table cells. >> >> Using the "less is more" theory, I define 4 divs: >> >> #logo { >> position: absolute; >> top: 0px; >> left: 0px; >> width: 200px; >> height: 100px; > > You forgot to put in the HTML. Why not supply a url? http://sined.servebeer.com:81/denis/css/ css1.htm with full width text in the "content" div css2.htm with a list (so partial width) in the "content" div css3.htm with very little in the "content" div tab1.htm, tab2.htm and tab3.htm show the layout I want, made with tables The css is all in css.css In css1.htm, you can see that the title and menu divs are not automatically expanding to match the size of the adjacent content div. css2.htm makes it clear that the only reason the content div in css1.htm expands to the width of the viewing window is that the text is wider and wraps. css3.htm shows that with a really short content, it's possible for title and menu divs to expand past content in width and height respectively. note that tab3 shows a problem that doesn't occur in practice, as the "content" is usually longer than the page length. Denis McMahon
From: Denis McMahon on 11 Jul 2008 03:31 dorayme wrote: > In article <Cfxdk.288133$1B6.250867(a)newsfe21.ams2>, > Denis McMahon <denis.mcmahon(a)ntlworld.com> wrote: > >> dorayme wrote: > >>> You forgot to put in the HTML. Why not supply a url? >> http://sined.servebeer.com:81/denis/css/ >> > > I am not sure quite what you want, there are so many aspects you refer > to. http://sined.servebeer.com:81/denis/css/ I want to try and emulate the 4 cell table layout in tab1.htm, tab2.htm under the above dir in css, but all I can seem to manage is css1.htm, css2.htm Basically, with a table, each cell in a row has the same height as all other cells in the row, and each cell in a column has the same width as all other cells in the column. Also, setting a table cell width to 100% makes it use the maximum width that is available in the container of that cell. css1.htm demonstrates 2 problems: #title div not expanding to the full width of the #content div. #menu div not expanding to full height of #content div css2.htm demonstrates another problem: #content div not expanding to right hand edge of window How do I force a div (or any block display element) to expand itself not according to the size of its content, but according to the size of its container? > Do you want to know how to have a left column with some links, and a > right column taking up the rest of the horiz space. And with a matching > but not so high two cols above to fit, respectively a pic and a title > header without using tables? I want the right columns to take up the rest of the horizontal space, yes. I also want the lower row to use up all the available vertical space. > Why is the Subject of this thread as absurdly long and cryptic? What is > wrong with simply: Re: using CSS instead of tables? I have no idea, I didn't start the thread. Denis McMahon
From: John Hosking on 11 Jul 2008 12:54 dorayme wrote: > > Why is the Subject of this thread as absurdly long and cryptic? What is > wrong with simply: Re: using CSS instead of tables? > It's a newsreader bug, from which we shouldn't still all be suffering. A David Schwartz started the thread, but in typical GoogleGroups drive-by fashion, he merely asked for help once, then ignored a request (by Chris F.A. Johnson, using slrn/0.9.8.1 (Linux)) for more info. David hasn't been back since, but the rest of the thread has been about Denis McMahon's "similar problem". [sig-1] In his second contribution to the thread, Chris F.A. Johnson used slrn/0.9.8.1pl2 (Linux), which seems to have a problem with very long Message-IDs in the References header. His newsreader mangles the header in that case, so the Subject line gets corrupted by an appended (and very long) References line. Chris knows about the problem, but appears unwilling or unable to permanently fix it. Maybe he's just forgetful, but how could he not notice? In Thunderbird, BTW, a different Subject line causes a new thread to appear. Apparently, TB isn't bright enough to use References for anything more than tree-arrangement within a Subject-grouped thread. I guess your MT-NewsWatcher is the same way. -- John Pondering the value of the UIP: http://improve-usenet.org/ [1] Does it count as thread-hijacking if the original poster is a drive-by GoogleGrouper?
From: Denis McMahon on 12 Jul 2008 06:46
dorayme wrote: > As I mentioned in a previous question to you, you seem to be wanting 4 > blocks, 2 side by side at the top and 2 side by side underneath. There > are lots of ways to skin this cat. I will give you one way and you tell > me just one or two more things you want from it, not more and no more > urls please, I am easily confused. > > Here is one way that seems pleasant enough in all my browsers: > > <http://dorayme.890m.com/alt/twoBytwo.html> > > No, it might not be everything you want, but it maight be an exercise > for you to see how stuff works or along what lines you might think > along. No, it will not be how others tackle this, and probably not the > very simplest or best but it is a shot, take a look and nothing is set > in stone. OK, the only thing that thios doesn't seem to always do is extend the bottom of #nav or #content to the bottom of #main I can fix this when #nav is too short (which is most of the time) by making the background colour of #main the same as the background colour of #nav, but that means that on the rare occasions that #content is shorter than #nav, I end up with a #nav / #main coloured block under the bottom of #content that I'd prefer was the same colour as #content. Denis McMahon |