Autor Zpráva
pete
Profil
#1 · Zasláno: 25. 6. 2005, 20:14:03
Odpovědět Citovat
zdravim,

potřebuju udělat proužek z obrázky pomocí css. problém je v tom, že proužek má být ohraničen a má mít pružnou šířku - podle obsahu; pokud má být proužek širší než rodičovský prvek, dojde k zalomení řádku. s tímhle si umím poradit. horší ale je že ten proužek má být vodorovně vycentrovaný - s tím nedokažu hnout...

protože se to špatně popisuje, hodím zjednodušený kód: 

<html>

<head>

<style>

* {padding:0px; margin:0px;}

body {margin: 30px;}

.box {float:left; border:3px solid green; padding:5px 5px 1px 5px;}

.box img {border-bottom:2px solid gray; border-top:2px solid gray;}

</style>

</head>

<body>

<div class="box">

<img src="test.jpg" alt="test" width="136px" height="90px">

<img src="test.jpg" alt="test" width="136px" height="90px">

<img src="test.jpg" alt="test" width="136px" height="90px">

</div>

</body>

</html>

problém je v tom, že pokud chci, aby šířka boxu byla určená obsahem, musím boxu přiřadit float (nebo to jde přes display, ale to nkterý prohlížeče neumí). jenže pak nemůžu tenhle plovoucí box dostat na střed. nebo můžu?
Leo
Profil
#2 · Zasláno: 25. 6. 2005, 20:28:50 · Upravil/a: Leo
Odpovědět Citovat
Sirka je urcena obsahem u radkovych prvku (jako je napr. span), ty maji tendenci se na sirku zmrsknout na nulu, naopak u blokovych elementu je sirka normalne dana nadrazenym blokem - ty se roztahuji kam az muzou. Radkovy element je na stredu pokud bloku ve kterem je nastavite text-align: center; blokovy element se (podle CSS specifikace) centruje pres margin-right a -left na auto.

Takze jestli jsem pochopil vas problem tak proste nastavte pro ten div s obrazky text-align na center. Leo
pete
Profil
#3 · Zasláno: 25. 6. 2005, 20:49:20
Odpovědět Citovat
to jsem zkoušel: různý kombinace margin/display/text-align/float. výsledkem bylo buď že box měnil šířku, ale byl vlevo/vpravo, nebo byly obrázky na středu ale blok byl široký 100%... možná mi nějaká kombinace unikla.

zkuste si ten kód zkopírovat vzít nějaký obrázek test.jpg a pustit to v prohlížečí - ten zeleně ohraničený blok potřebuju "jenom" dostat na střed (díky float se pružně mění svojí šířku podle toho kolik je uvnitř obrázků) a konstrukce je hotová (pak to ještě ostylovat a dostat do stránky).
Leo
Profil
#4 · Zasláno: 25. 6. 2005, 20:56:07
Odpovědět Citovat
U float musite zadat sirku, Leo
Fred
Profil
#5 · Zasláno: 25. 6. 2005, 21:03:47 · Upravil/a: Fred
Odpovědět Citovat
pete No takhle potřebuješ ještě jeden div, když to plave vlevo nemůže se to zároveň na něco zarovnávat, když nadřazené je jenom body. Update: Tohle je blbost, pardon.
Fred
Profil
#6 · Zasláno: 25. 6. 2005, 21:05:08
Odpovědět Citovat
Když zadá šířku, přestane se ten border zobrazovat těch 5px nebo kolik od obrázků, ale bude to nechávat vpravo prázdný prostor.
Leo
Profil
#7 · Zasláno: 25. 6. 2005, 21:13:50
Odpovědět Citovat
Je mi lito, ale podle specifikace se u prvku s floatem sirka zadat musi. Vyjimkou je (jeden, samostatny) obrazek. Rekl bych, ze to, ceho chce dosahnout jde jenom pres inline-block, a to prohlizece zrovna nepodporuji. Nastavte tomu divu sirku a vycentrujte ho, bez floatu. Leo
Fred
Profil
#8 · Zasláno: 25. 6. 2005, 21:19:09
Odpovědět Citovat
Taky mi to jinak nešlo, zkoušel jsem to.
Leo
Profil
#9 · Zasláno: 25. 6. 2005, 21:21:27
Odpovědět Citovat
Proste to musi byt inline (aby se zmrsknul na sirku podle obrazku) ale zaroven block, aby vypadal jako block :-) Na to je v CSS vymysleny display: inline-block, ale mam pocit, ze ho prohlizece dvakrat nemiluji :-) Leo
pete
Profil
#10 · Zasláno: 25. 6. 2005, 22:10:50
Odpovědět Citovat
díky za odpovědi. myslel jsem si, že to nepůjde. asi to budu dělat tak že u boxu zruším float a vždy, když ho budu chtít použít zadám šířku přímo jako <div class="box" style="width:#px"> inline-block jsem zkoušel, ale to bohužel neumí gecko browsery (překvapilo mně, že stará herka msie 5.5 tohle umí).

fred: obalit o divu už mně taky napadlo, ale nefunguje to; ten kód jsem zjednudušil aby bylo vidět, čeho chci dosáhnout. chtěl jsem to pak použít v dvousloupcouvém layoutu mezi odstavce jako "klikací" obrázky, ale pak jsem vyzkoušel dávat je střídavě k odstavcům s obtékáním vlevo a vpravo a nevypadá to špatně...
arcadosi
Profil
#11 · Zasláno: 26. 6. 2005, 01:19:42
Odpovědět Citovat
More shak takto:
<html>
<head>
<style>
body {margin: 30px;}
.box {border:3px solid green; padding:5px 5px 1px 5px;}
.box img {border-bottom:2px solid gray; border-top:2px solid gray;}
.stranka {position:absolute; top:xxx; left:xxx;}
</style>
</head>
<body>
<div class="stranka">
<div class="box">
<img src="test.jpg" alt="test" width="136px" height="90px">
<img src="test.jpg" alt="test" width="136px" height="90px">
<img src="test.jpg" alt="test" width="136px" height="90px">
</div>
</div>
</body>
</html>
Nepochopil som, ze co tam ma akoze odtekat :)
Moze byt, ze som napisal daco co nepojde, abo nieje to co si chcel ;)
Časová prodleva: 19 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0