Autor Zpráva
Marsikus
Profil
#1 · Zasláno: 6. 4. 2012, 10:01:05
Odpovědět Citovat
Zdravím,

chci se zeptat, jak umístím jeden obrázek na přesně danou pozici tak,
aby od horní lišty prohlížeče byl odsazen 200px a na řádku vycentrován?

Zkoušel jsem: 

   <div align="center"><img src="images/viewer.gif" alt="Orientační běh Žamberk"  width="325" height="305"></div>
(tady je to na řádku ok, ovšem ne na výšku) 

   <span style="position: absolute; top:200px"><img src="images/viewer.gif"></span>
(a tady přesně obráceně)

Prostě nevím, jak to zkombit.
Děkuji.
Fisir
Profil
#2 · Zasláno: 6. 4. 2012, 10:05:03 · Upravil/a: Fisir o 13 minut později
Odpovědět Citovat
Reaguji na Marsika [#1]: 
<img src="images/viewer.gif" style="position: relative; top: 200px; margin-left: auto; margin-right: auto; display: block; width: 150px;">
Someone [#3] ↓: Aha, nebyla definovaná šířka a vadilo position: absolute, co?
Someone
Profil
#3 · Zasláno: 6. 4. 2012, 10:10:09 · Upravil/a: Someone o minutu později
Odpovědět Citovat
[#2] Fisir
Toto fungovat nebude.
Marsikus:
Je šířka obrázku pevně daná?
Marsikus
Profil
#4 · Zasláno: 6. 4. 2012, 10:15:43 · Upravil/a: Marsikus o 3 minuty později
Odpovědět Citovat
Myslíte jako velikost obrázku? Tak to ano..
..325px
Someone
Profil
#5 · Zasláno: 6. 4. 2012, 10:17:49
Odpovědět Citovat
V tom případě:
<img src="obrazek.png" style="position:absolute; top: 200px; left: 50%; margin: 0px 0px 0px -Xpx;" />
Za X si dosaďtě polovinu šířky obrázku... Pokud bude obrázek široký 200px, margin bude vypadat takto: 
margin: 0px 0px 0px -100px;
Marsikus
Profil
#6 · Zasláno: 6. 4. 2012, 10:28:24
Odpovědět Citovat
Tak to mi funguje,
jen jakožto začátečník nechápu, co mi v této chvíli margin říká.
Ty nuly a poslední hodnota, co to znamená?
Someone
Profil
#7 · Zasláno: 6. 4. 2012, 10:31:39
Odpovědět Citovat 
margin: 0px 0px 0px -Xpx;
je stejné jako toto: 
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -Xpx;
Takže se to dá zapsat jen takto: 
<img src="obrazek.png" style="position:absolute; top: 200px; left: 50%; margin-left: -Xpx;" />
Marsikus
Profil
#8 · Zasláno: 6. 4. 2012, 10:34:12
Odpovědět Citovat
Ach tak.
Děkuji.
Časová prodleva: 12 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0