layout prob

[Wilhelm Kutting]

Hi i want to use the following layout:

----------------- |
| | | Text line 1
| | | Text line 2
| image.jpg | | ...
| | |
| | |
----------------- |
----------------------------------------------
Mr. Kutting
Nice Street 3.


The whole layout is inside a div element.
How can i obtain such a layout?

[Lauri Raittila]

Wilhelm Kutting wrote;

Hi i want to use the following layout:

----------------- |
| | | Text line 1
| | | Text line 2
| image.jpg | | ...
| | |
| | |
----------------- |
----------------------------------------------
Mr. Kutting
Nice Street 3.
The whole layout is inside a div element.
URL?
How can i obtain such a layout?

img {float:left;}
..text {margin-left:XXpx;borde r-left dashed thin black}
div {border-bottom:thin dashed black.}

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[brucie]

In comp.infosystem s.www.authoring.stylesheets Wilhelm Kutting said:

----------------- |
| | | Text line 1
| | | Text line 2
| image.jpg | | ...
| | |
| | |
----------------- |
----------------------------------------------

http://moreshit.usenetshit.info/div-...ft-thingy.shit
--
brucie{display: nude;voice-family:'many little';speech-rate:x-fast;}

[Daniel Déchelotte]

brucie <sh**@usenetshi t.info> a écrit :

| http://moreshit.usenetshit.info/div-...ft-thingy.shit

Hi,

Please let me intervene in this thread for a quite similar layout issue.
The subject line describes what I would like to achieve, and you can find
several attempts here:

http://yo.dan.free.fr/testing/vertically-centered.html

I would like to obtain a similar layout as attempt 3 (using a table!).
Attempts 1 (floating the icon) and 2 (vertical-align: middle) both have
their drawbacks. Attempt 4 (using display: inline-stg) doesn't work and
would not be reliable, and I even had to comment code for attempt 5
(floating inline-blocks) because it brought both opera and mozilla to their
knees (havocking the way the previous attempts are rendered!! Anyway...).

My data could almost be said to be tabular (fixed width pixmap in the first
column, some description in the second column :), but it is really a list
and I would like to be able to group the items in a <UL>. I remembered
trying to use the pixmap as the bullet of the item, but without satisfying
results (IIRC, would look like attempt 2, but far less reliable). Can
someone clue me please ?

--
Daniel Déchelotte
http://yo.dan.free.fr/

[Steve Pugh]

On Tue, 26 Oct 2004 15:28:03 +0200, Daniel Déchelotte
<ma**********@f r.club-internet.invali d> wrote:

The subject line describes what I would like to achieve,
It's always best to put the query in the body of the message as well as
the subject.
http://yo.dan.free.fr/testing/vertically-centered.html

I would like to obtain a similar layout as attempt 3 (using a table!).

Sadly, the best way to emulate the details of table layouts is with CSS
tables (display: table and so on) but IE doesn't support CSS tables.

It's also not clear from your example whether the image will always be the
same or not. If they will always be the same then background images may be
helpful.

Here's a demo using background images and display: table
* works well for long pieces of text in all browsers
* works well for short pieces of text in modern browsers
* degrades to top aligned text for short pieces of text in IE.

http://steve.pugh.net/test/test86.html

This was knocked together rather quickly and I'm sure other people will be
able to improve on it.

Steve

[Daniel Déchelotte]

"Steve Pugh" <st***@pugh.net > a écrit :

| It's always best to put the query in the body of the message as well as
| the subject.

True. So I would like two, vertically centered, blocks on one line: first
block is a fixed-width pixmap, second block is some text of varying length.

| > http://yo.dan.free.fr/testing/vertically-centered.html
| >
| > I would like to obtain a similar layout as attempt 3 (using a table!).
| [...]
| Here's a demo using background images and display: table

I added your solution to my page (link above) and it looks great! Thanks.
[Well, not uploaded yet at posting time because my web hoster seems down
right now. For one day long now...]

| This was knocked together rather quickly and I'm sure other people will
| be able to improve on it.

So far, pros are:
* simple markup, easy to embed in a <UL>
* seems to work perfectly in modern browsers, and I don't mind if it
is slightly degraded in IE (just enough to say "Aah, should you use
a browser that deserves that name, blah-blah-blah")
Cons are:
* Mozilla 1.7.3 doesn't display short items properly (doesn't honor
min-height!?). That is only a problem if FF also has this problem,
for the advocacy thingy mentionned above ;-).
Neutral:
* Each item has a different icon. What is best practice:

In CSS: LI#topic1 { background-image: url(...) }
In HTML: <LI id="topic1">
- or -
In HTML: <LI style="backgrou nd-image: ...">

Since I feel the icons are more content than presentation/style, I am about
to mix style inside the HTML code, unless you tell me not to do so (I will
abide by anything sprung from ciwas, you see. :o) (for CSS-related questions)

Cheers,
--
Daniel Déchelotte
http://yo.dan.free.fr/