You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@struts.apache.org by Rick Reumann <st...@reumann.net> on 2006/01/03 17:06:42 UTC
[OT] If you hate positioning with css raise your hand... actually
some help:)
I always end up with nothing but trouble trying to position divs with
css that is a BREEZE to do with tables. css positioning is supposed to
be the layout savior yet my experience with it always ends up with
headaches - try something, see if it works, try something else, set if
it works. Oh and then make sure it's ok in all browsers.. and make sure
it works with html strict, bla bla. Anyone else have these frustrations
as well or is it just me?
Anyway, since I started down this stupid path, maybe someone can help.
yea, I know wrong list, but I'm being lazy..
What I just want as a test is a div with a border around it and then two
divs inside that div with text = One set of text aligned in a div to the
left, the other in a div text-aligned to the right. Then below the main
div some text:
-----------------------------------
| [left] [right] |
-----------------------------------
link1
link2
My first shot was:
<body>
<div style="border:1px solid black;">
<div style="float:left;">[left]</div>
<div style="float:right;text-align:right;">[right]</div>
</div>
link1<br/>
link2<br/>
</body>
The above ends up with the next set of links aligning up next to the
right div and only a top border on the enclosing div.
Now this one sort of works. I still get only a top border on the
enclosing div. And I don't see why I need to use <br/> tags to get this
to work.
<body>
<div style="border:1px solid black;">
<div style="float:left;">[left]</div>
<div style="float:right;text-align:right;">[right]</div>
</div>
<br/><br/>
link1<br/>
link2<br/>
</body>
Any ideas how to get what I want?
I just really stink at this css stuff and the web sites all seem to use
different techniques and none of them intuitive. This site has some nice
samples http://tutorials.alsacreations.com/modeles/ but often the way
it's implemented seems crazy to me (ie having to add huge margins and
have other divs fill into those margins, etc).
If divs are the answer why are they so annoying to position?
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] If you hate positioning with css raise your hand... actually some help:)
Posted by Michael Jouravlev <jm...@gmail.com>.
On 1/3/06, Frank W. Zammetti <fz...@omnytex.com> wrote:
> I would even go so far as to ask, aside from the obvious benefit of being
> able to change the look and feel of a site by pointing to a new
> stylesheet, what is the problem with table-based layouts? Is the easy
> swapping of stylesheets the only real reason everyone is on the CSS
> bandwagon? I suppose limited browsers like cell phones probably don't do
> so well with tables, especially when they are numerous and highly nested
> and such, but is the CSS support really up-to-snuff on those devices
> enough to warrant full CSS designs?
Limited browsers should not try to interpret CSS instructions they do
not understand. In this case the structural elements will be shown one
by one, in the order.
CSS is also great for creating a different stylesheet for printing
because you usually don't want to print out a whole table with
navigation, ads and other junk.
I think that transitional design with a big table with two or three
big cells works reasonably well.
I am not a pro in CSS (yet), but I was sold on proper structural XHTML
more than a year ago. Sadly, my own pages are not as good as I want
them to be.
Michael.
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] If you hate positioning with css raise your hand...
actually some help:)
Posted by "Frank W. Zammetti" <fz...@omnytex.com>.
No, you are not alone :)
I too have found it to be, shall we say, not as straight-forward as
table-based layouts. And I am relatively conversant in CSS (no guru or
anything, but I can usually make it to do what I want in the end).
Of course, the benefits are pretty obvious (anyone as yet unconvinced just
needs to spend a few minutes a www.csszengarden.com). But, my experience
echoes yours... it takes considerably more time to do things. This, I
think, one of those areas where good tooling can help. Even if you just
get the layout right in an editor and then copy over the CSS and edit by
hand after that, it's a big help (I still open up Dreamweaver every now
and again for an especially tricky table layout).
I would even go so far as to ask, aside from the obvious benefit of being
able to change the look and feel of a site by pointing to a new
stylesheet, what is the problem with table-based layouts? Is the easy
swapping of stylesheets the only real reason everyone is on the CSS
bandwagon? I suppose limited browsers like cell phones probably don't do
so well with tables, especially when they are numerous and highly nested
and such, but is the CSS support really up-to-snuff on those devices
enough to warrant full CSS designs?
Unfortunately, I don't have an answer to your specific "how-to"
question... As is usual with CSS, I would have to go play for a while to
get it right, and you are already doing that :)
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
AIM: fzammetti
Yahoo: fzammetti
MSN: fzammetti@hotmail.com
On Tue, January 3, 2006 11:06 am, Rick Reumann said:
> I always end up with nothing but trouble trying to position divs with
> css that is a BREEZE to do with tables. css positioning is supposed to
> be the layout savior yet my experience with it always ends up with
> headaches - try something, see if it works, try something else, set if
> it works. Oh and then make sure it's ok in all browsers.. and make sure
> it works with html strict, bla bla. Anyone else have these frustrations
> as well or is it just me?
>
> Anyway, since I started down this stupid path, maybe someone can help.
> yea, I know wrong list, but I'm being lazy..
>
> What I just want as a test is a div with a border around it and then two
> divs inside that div with text = One set of text aligned in a div to the
> left, the other in a div text-aligned to the right. Then below the main
> div some text:
>
> -----------------------------------
> | [left] [right] |
> -----------------------------------
> link1
> link2
>
>
> My first shot was:
>
> <body>
> <div style="border:1px solid black;">
> <div style="float:left;">[left]</div>
> <div style="float:right;text-align:right;">[right]</div>
> </div>
>
> link1<br/>
> link2<br/>
> </body>
>
> The above ends up with the next set of links aligning up next to the
> right div and only a top border on the enclosing div.
>
> Now this one sort of works. I still get only a top border on the
> enclosing div. And I don't see why I need to use <br/> tags to get this
> to work.
>
> <body>
> <div style="border:1px solid black;">
> <div style="float:left;">[left]</div>
> <div style="float:right;text-align:right;">[right]</div>
> </div>
>
> <br/><br/>
>
> link1<br/>
> link2<br/>
> </body>
>
> Any ideas how to get what I want?
>
> I just really stink at this css stuff and the web sites all seem to use
> different techniques and none of them intuitive. This site has some nice
> samples http://tutorials.alsacreations.com/modeles/ but often the way
> it's implemented seems crazy to me (ie having to add huge margins and
> have other divs fill into those margins, etc).
>
> If divs are the answer why are they so annoying to position?
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] If you hate positioning with css raise your hand... actually
some help:)
Posted by Steve Raeburn <sr...@gmail.com>.
Here's *one* way to achieve what you're after:
<div style="float:left; border: 1px solid black;">
<div style="float: left">[left]</div>
<div style="float: right">[right]</div>
</div>
link1<br/>
link2<br/>
Courtesy of Eric Meyer
http://www.complexspiral.com/publications/containing-floats/
All that's different to your first example is the addition of an
additional 'float' on the outer div. This causes it to expand to contain
the inner (floated) divs. Depending on what else you want to add to this
layout this might be all you need.
Note that if the outer div is itself contained by another block element,
it may stick out of its container. Read the above article for the
explanation and other options. Also check out http://www.meyerweb.com/ -
Eric is your CSS best friend :-).
Steve
Rick Reumann wrote:
> I always end up with nothing but trouble trying to position divs with
> css that is a BREEZE to do with tables. css positioning is supposed to
> be the layout savior yet my experience with it always ends up with
> headaches - try something, see if it works, try something else, set if
> it works. Oh and then make sure it's ok in all browsers.. and make
> sure it works with html strict, bla bla. Anyone else have these
> frustrations as well or is it just me?
>
> Anyway, since I started down this stupid path, maybe someone can help.
> yea, I know wrong list, but I'm being lazy..
>
> What I just want as a test is a div with a border around it and then
> two divs inside that div with text = One set of text aligned in a div
> to the left, the other in a div text-aligned to the right. Then below
> the main div some text:
>
> -----------------------------------
> | [left] [right] |
> -----------------------------------
> link1
> link2
>
>
> My first shot was:
>
> <body>
> <div style="border:1px solid black;">
> <div style="float:left;">[left]</div>
> <div style="float:right;text-align:right;">[right]</div>
> </div>
>
> link1<br/>
> link2<br/>
> </body>
>
> The above ends up with the next set of links aligning up next to the
> right div and only a top border on the enclosing div.
>
> Now this one sort of works. I still get only a top border on the
> enclosing div. And I don't see why I need to use <br/> tags to get
> this to work.
>
> <body>
> <div style="border:1px solid black;">
> <div style="float:left;">[left]</div>
> <div style="float:right;text-align:right;">[right]</div>
> </div>
>
> <br/><br/>
>
> link1<br/>
> link2<br/>
> </body>
>
> Any ideas how to get what I want?
>
> I just really stink at this css stuff and the web sites all seem to
> use different techniques and none of them intuitive. This site has
> some nice samples http://tutorials.alsacreations.com/modeles/ but
> often the way it's implemented seems crazy to me (ie having to add
> huge margins and have other divs fill into those margins, etc).
>
> If divs are the answer why are they so annoying to position?
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] If you hate positioning with css raise your hand... actually some help:)
Posted by Nick Heudecker <nh...@gmail.com>.
Have you tried the table, table-row and table-cell display properties? But
if that works, I'd just go back to tables.
Re: [OT] If you hate positioning with css raise your hand... actually
some help:)
Posted by Rick Reumann <st...@reumann.net>.
Dave Newton wrote the following on 1/3/2006 1:01 PM:
> I would just have a div with a table in it to avoid all those issues.
Right that's what I typically do. I just keep hearing about how you
should use divs for layouts, so every so often, I go back to wrestling
div junk and get frustrated.
You are right, though, I'm going back to using a table. Just call me
'old skool'
--
Rick
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] If you hate positioning with css raise your hand... actually
some help:)
Posted by Dave Newton <ne...@pingsite.com>.
Rick Reumann wrote:
> What I just want as a test is a div with a border around it and then
> two divs inside that div with text = One set of text aligned in a div
> to the left, the other in a div text-aligned to the right. Then below
> the main div some text:
I would just have a div with a table in it to avoid all those issues. IE
and Firefox don't seem to handle margins/padding/etc. identically
anyway, so I generally don't bother with finer-grained positioning like
this. Generally I'll use CSS for the largest logical elements but use
tables within them when it's too irritating to deal w/ the CSS.
Dave
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org