Próbuję napisać coś, co do czego nie jestem przekonany, czy jest
wykonalne. Jest obrazek - wyśrodkowany w poziomie względem body - do
którego z lewej strony przylegać ma div o stałych wymiarach. Koncept
ilustruje "rycina":

. .
. +-----+----------------------+ .
. | div | | .
. +-----+ | .
. | img | .
. | | .
. | | .
. | | .
. +----------------------+ .
. .

Sprawa jest względnie prosta przy znanych wymiarach obrazka. Trudność
polega na tym, że styl ma działać dla różnych obrazków, o tak:

. .
. +-----+----------------------+ .
. | div | | .
. +-----+ | .
. | img | .
. | | .
. | | .
. | | .
. +----------------------+ .
. .
. +-----+----------------+ .
. | div | | .
. +-----+ | .
. | img2 | .
. | | .
. | | .
. | | .
. | | .
. +----------------+ .
. .

Próbowałem bez skutku różnych karkołomnych rozwiązań, ale możliwe,
że jestem głupi i jest na to jakiś prosty knif. Jest?

do góry

G.Suss pisze:

>
> Próbowałem bez skutku różnych karkołomnych rozwiązań, ale możliwe,
> że jestem głupi i jest na to jakiś prosty knif. Jest?
>

może:
<div style="margin: auto; position: relative;">
<div style="position: absolute; left: {szerokosc-div};">div</div>
<img />
</div>

--
Blog: http://blog.stalica.info

do góry

Daniel Stalica wrote:

> może:
> <div style="margin: auto; position: relative;">
> <div style="position: absolute; left: {szerokosc-div};">div</div>
> <img />
> </div>

Pozycjonowanie bezwzględne nie wchodzi w grę z powodu nieznanej
szerokości obrazka i okna przeglądarki.

Można by pozycjonować div wewnętrzny względem zewnętrznego
(left: -szerokość), ale nie potrafię zmusić tego ostatniego do
przyjęcia szerokości obrazka przy zachowaniu wyśrodkowania.

do góry

G.Suss pisze:
> Pozycjonowanie bezwzględne nie wchodzi w grę z powodu nieznanej
> szerokości obrazka i okna przeglądarki.
>
> Można by pozycjonować div wewnętrzny względem zewnętrznego
> (left: -szerokość), ale nie potrafię zmusić tego ostatniego do
> przyjęcia szerokości obrazka przy zachowaniu wyśrodkowania.

Faktycznie w takim razie pozostaje chyba wyciągnąć wymiary obrazka w JS
lub języku server-side i nadać szerokość dla div w którym znajduje się <img>

--
Blog: http://blog.stalica.info

do góry

G.Suss pisze:
> Próbuję napisać coś, co do czego nie jestem przekonany, czy jest
> wykonalne. Jest obrazek - wyśrodkowany w poziomie względem body - do
> którego z lewej strony przylegać ma div o stałych wymiarach. Koncept
> ilustruje "rycina":
>
> . .
> . +-----+----------------------+ .
> . | div | | .
> . +-----+ | .
> . | img | .
> . | | .
> . | | .
> . | | .
> . +----------------------+ .

A gdybyś dodał drugiego div'a z prawej?
--
pozdrawiam
Piotr Szafarczyk

http://www.netexpert.pl

do góry

G.Suss pisze:
> Próbuję napisać coś, co do czego nie jestem przekonany, czy jest
> wykonalne. Jest obrazek - wyśrodkowany w poziomie względem body - do
> którego z lewej strony przylegać ma div o stałych wymiarach. Koncept
> ilustruje "rycina":
>
> . .
> . +-----+----------------------+ .
> . | div | | .
> . +-----+ | .
> . | img | .
> . | | .
> . | | .
> . | | .
> . +----------------------+ .
> . .

HTML:
<div class="imageWrapper">
<img />
<div class="box">
tu jestem
</div>
</div>

CSS:
div.imageWrapper {
display:inline;
position:relative;
zoom:1; /* dla badzIEwia */
}

div.imageWrapper img {
vertical-align:top;
}

div.box {
position:absolute;
top:0;
right:100%;
}


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

On Thu, 09 Jul 2009 22:01:39 +0200, Paweł Piskorz wrote:

> G.Suss pisze:
>> Próbuję napisać coś, co do czego nie jestem przekonany, czy jest
>> wykonalne. Jest obrazek - wyśrodkowany w poziomie względem body - do
>> którego z lewej strony przylegać ma div o stałych wymiarach. Koncept
>> ilustruje "rycina":
>>
>> . .
>> . +-----+----------------------+ .
>> . | div | | .
>> . +-----+ | .
>> . | img | .
>> . | | .
>> . | | .
>> . | | .
>> . +----------------------+ .
>> . .
>
> HTML:
> <div class="imageWrapper">
> <img />
> <div class="box">
> tu jestem
> </div>
> </div>
>
> CSS:
> div.imageWrapper {
> display:inline;
> position:relative;
> zoom:1; /* dla badzIEwia */
> }
>
> div.imageWrapper img {
> vertical-align:top;
> }
>
> div.box {
> position:absolute;
> top:0;
> right:100%;
> }

Nie do końca, bo założenie jest takie, że img ma być wyśrodkowany. Poza
tym top absolutny też nie wchodzi w grę, bo takich elementów na stronie
ma być więcej, jeden pod drugim.

Na razie wykoncypowałem coś takiego - niezbyt eleganckiego:

HTML:

<div class="wrapper">
<div class="box">box</div>
<img />
</div>

CSS:

.wrapper {
display: table;
margin: 10px auto;
clear: both;
}

.box {
float: left;
background: red;
width: 100px;
height: 50px; /* wymiary sztywne - przykladowe */
position: relative;
left: -50px; /* polowa szerokosci dla wysrodkowania obrazka*/
}

.wrapper img {
float: left;
position: relative;
left: -50px; /* jw. */
}

W FF i Operze wygląda to tak jak chcę. IE6 (innych nie sprawdzałem) nie
chce wyśrodkować i nie mam pojęcia, jak go zmusić.

do góry

G.Suss pisze:
> Nie do końca, bo założenie jest takie, że img ma być wyśrodkowany.

text-align:center; dla rodzica .imageWrapper

> Poza
> tym top absolutny też nie wchodzi w grę, bo takich elementów na stronie
> ma być więcej, jeden pod drugim.

To je wrzuć do jednego kontenera i jego pozycjonuj.


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

On Thu, 09 Jul 2009 23:46:40 +0200, Paweł Piskorz wrote:

> text-align:center; dla rodzica .imageWrapper

Uhh, no tak, chyba mi się mózg przegrzał od kombinowania.
Wszystko działa jak należy - piękne dzięki, kłaniam się.

do góry