Autor Zpráva
Henk
Profil *
#1 · Zasláno: 16. 8. 2006, 19:07:15
Odpovědět Citovat
Ahoj, určitě je třeba si to vyzkoušet. Uvedl jsem příklad. Můj prolém je ten, že pozicovaný prvek mě v rodiči #head neposlouchá. Potřebuji, aby text byl pod obrázkem a ten obrázek bude na určitých souřadnicích. Jenže vždy mi obrázek mizí, nebo text uplave vedle, nebo se obrázek částečně skryje. To je věda... a kolikrát jsem už něco podobného dělal.

css:
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}

#head {
background: silver;
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}

p, p span {
width: 100px;
height: 105px;
font-size: 135%;
color: green;

position: absolute;
left: 100px;
top: 10px;
z-index: 1;
}

p span {
display: block;
background: green url('../images/h1.gif') no-repeat left top;
z-index: 2;
}
</style>

html:
<div id="head">
<p>Lorem ipsum...<span></span></p>
</div>


Když zadám aby text zmizel, tak zmizne obrázek, takto overflow: hidden;:

p, p span {
width: 100px;
height: 105px;
font-size: 135%;
color: green;
overflow: hidden;
position: absolute;
left: 100px;
top: 10px;
z-index: 1;
}
Henk
Profil *
#2 · Zasláno: 17. 8. 2006, 08:58:04
Odpovědět Citovat
Nikdo neví?
MZF
Profil
#3 · Zasláno: 17. 8. 2006, 09:55:14 · Upravil/a: MZF
Odpovědět Citovat
Přidej do kódu:

p {
padding: 3em 0 0 5em;
}

a odstraň green z bg p span.
Henk
Profil *
#4 · Zasláno: 17. 8. 2006, 10:15:45
Odpovědět Citovat
To jsem si moc nepomohl. :-)
MZF
Profil
#5 · Zasláno: 17. 8. 2006, 11:21:29
Odpovědět Citovat
U mně je všechno ok. A přesně podle tvého kódu.
venca163
Profil
#6 · Zasláno: 17. 8. 2006, 11:42:30
Odpovědět Citovat
a odstraň green z bg p span.
má tam být background-image:
Henk
Profil *
#7 · Zasláno: 17. 8. 2006, 15:44:49
Odpovědět Citovat
U mě bohužel ne MZF. Text mi kouká zespoda. Prostě je to celé nějaké divné. Přitom kdybych ten obrázek napozivoval doleva a nahoru

position: absolute;
left: 0;
top: 0;

tak s tim není vůbec žádný problém, ale jakmile tam dám pixeli na určité místo, tak to zlobí.

venca163: No to je úplně jedno. Backgroundu můžeš nastavit klidně jeho všechny vlastnosti najednou a nemusí to být na deseti řádcích.

background: green url('../images/h1.gif') repeat-y 20px 100px;
Je to samé jakoby si napsal:

background-image: url('../images/h1.gif');
background-position: 20px 100px;
background-color: ...........apod.
Henk
Profil *
#8 · Zasláno: 17. 8. 2006, 15:45:49
Odpovědět Citovat
vlastnosti, teda hodnoty...
MZF
Profil
#9 · Zasláno: 17. 8. 2006, 17:51:04 · Upravil/a: MZF
Odpovědět Citovat
Henk

Tak to je vážně podivný. Funguje mi to v Opeře 9, FF 1.5 i IE. Stejným stylem jsem nahrazoval obrázek textem už několikrát dříve a opět žádný problém. Dávám sem přesný kód.

CSS:

body {
margin: 0;
padding: 0;
}

#head {
background: silver;
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}

p {
padding: 3em 0 0 5em;
}

p, p span {
width: 100px;
height: 105px;
font-size: 135%;
color: green;

position: absolute;
left: 100px;
top: 10px;
z-index: 1;
}

p span {
display: block;
background: url(a.gif) no-repeat left top;
z-index: 2;
}


XHTML:

<div id="head">
<p>Lorem ipsum...<span></span></p>
</div>
Henk
Profil *
#10 · Zasláno: 17. 8. 2006, 20:30:16
Odpovědět Citovat
MZF: Bohužel, já z toho nejsem odvařenej. Koukám na to v základních prohlížečích co ty. Mé poznatky. (IE) Text vykukuje pod obrázkem - když zvětším písmo, i když nezvětěším. (FF) Tam vykukuje samozřejmě také - když zvětšuju písmo, tak se dokonce prvek/obrázek pohybuje nahoru a dolů a text kouká ještě mnohem více než v IE. No prostě takhle jsem si to rozhodně nepředstavoval.

Také mě napadlo, že textu dám třeba 1px, jenže on tam je záměrně, když bude vypnut obrázek, takže to je blbost...

Potřeboval by pevnou pozici a aby ten text nevylézal ze spod obrázku. Nevím si rady...
MZF
Profil
#11 · Zasláno: 17. 8. 2006, 21:14:46
Odpovědět Citovat
Takhle je to ošetřeno i na zvětšování písma. Text přetéká pouze ve FF až při třetím zvětšením, ale ruku na srdce, kdo tohle používá... Ve všech prohlížečích obrázek překrývá text. Jestli ti tohle nepůjde, tak bude nutně chyba mezi obrazovkou a opěradlem židle. ;)

body {
margin: 0;
padding: 0;
}

#head {
background: silver;
width: 500px;
height: 200px;
overflow: hidden;
}

p {
margin: 0;
padding: 3em 0 0 10em;
position: relative;
font-size: 135%;
}

p, p span {
width: 100px;
height: 105px;
}

p span {
background: url(a.gif) no-repeat left top;
position: absolute;
left: 200px;
top: 20px;
}
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0