Autor Zpráva
Numero1990
Profil
Zdravím,
mám následující kód (jedná se jen o ukázku)

<div style="position: absolute; top: 100px; left: 50%; width: 200px; height: 100px; margin-left: -101px; border: 2px solid #f00; overflow: auto; background-color: #fff;">
    <div style="white-space: pre; height: 14px; line-height: 14px; color: #000; font-size: 13px; background-color: #f00;">Tohle je jeden hrozně moc dlouhej řádek, kterej se prostě nevejde do rodičovského elementu.</div>
</div>

Vypadá to takhle:


Já bych potřeboval, aby když zascrolluju, aby i ten zbytek byl podbarven. Lze to nějak udělat?
jenikkozak
Profil
Numero1990:
Jednou z možností je nastavení vnitřnímu divu float: left.
Nebo můžeš IE nechat v quirku a přidat vnitřnímu divu position: absolute.
(Možností je jistě víc.)
Keeehi
Profil
Nebo to obarvovat jako řádkový element. Text obal spanem a tomu nastavuj pozadí.
Numero1990
Profil
Tohle ( jenikkozak ) bohužel způsobí toto:
jenikkozak
Profil
Numero1990:
A co jsi chtěl ty? Pokud to chceš mít červené celé, obarvi ten vnější div.
Pokud chceš, aby byly obarvené jen ty dva řádky, dej je do téhož divu - toho vnitřního a řádek zalom třeba pomocí <br>. (Tedy nevkládej ten vnitřní div dvakrát.) Ještě doplním, že v takovém případě nesmíš zapomenout vnitřnímu divu vzít nastavenou výšku.
Numero1990
Profil
jenikkozak:
Já bych potřeboval, aby pokud je to kratší než je ta délka, aby to bylo vybarvené až do konce, a pokud to je delší, aby to bylo vybarvené celé.


Co mě napadlo, tak to nechat tak, jak to bylo, dovnitř hodit ještě span, který bude mít stejnou barvu pozadí jako ten div. Problém je v tom, že spanu nejde nastavit výška, takže ten pruh je pak menší. :/

Edit// Tak pomohl padding. :)
jenikkozak
Profil
Numero1990:
Já bych potřeboval, aby pokud je to kratší než je ta délka, aby to bylo vybarvené až do konce, a pokud to je delší, aby to bylo vybarvené celé
V jakém prohlížeči jsi zkoušel třeba tento kód?
<!DOCTYPE html>
<div style="position: absolute; top: 100px; left: 50%; width: 200px; height: 100px; margin-left: -101px; border: 2px solid #f00; overflow: auto; background-color: #fff;">
    <div style="white-space: pre; line-height: 14px; color: #000; font-size: 13px; background-color: #f00;float:left">Tohle je jeden hrozně moc dlouhej řádek, kterej se prostě nevejde do rodičovského elementu.<br>Tohle je ale zase krátký řádek</div>
</div>
Numero1990
Profil
jenikkozak:
Tohle by mi taky nevyhovovalo, protože mezi těmi řádky může být řádek, který nebude obarvený, ale to jsem do zadání nenapsal, tak jsi to nemohl vědět.
Každopádně moc děkuji, nakopl jsi mě tím správným směrem.

Přidal jsem dovnitř okolo toho textu span a tomu nastavit stejné pozadí a padding-top/bottom tak, aby to byla stejná výška řádku.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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