Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dymek o zmiennej szerokosci
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
_kama
WItam,
potrzebuje pociac taki placek. To jest fruwajacy za kursorem dymek.

Zrobilam to tak

  1. <div class="hint_ok">
  2. <p class="h1"></p>
  3. <p class="h2">
  4. <span>Tu jest edytowalny tekst</span>
  5. <span class="ok">Przycisk</span>
  6. </p>
  7. <p class="h3"></p>
  8. </div>




a css

  1. div.hint_ok {height: 38px; font-size: 10px; position: absolute; color: #FFF; margin: 0; padding: 0}
  2. div.hint_ok p.h1 {background: url(ico_hint_ok1.gif) no-repeat; width:10px; height: 38px; float:left; margin: 0}
  3. div.hint_ok p.h2 {background: url(ico_hint_ok2.gif) repeat-x; height: 33px; float:left; padding: 5px 5px 0 1px; margin: 0 auto}
  4. div.hint_ok p.h2 span.ok {background:url(ico_hint_ok.gif) no-repeat center bottom; display: block; color: #FFF; height: 18px; width: 100%; font-weight: bold; line-height: 18px; cursor: pointer; text-align: center}
  5. div.hint_ok p.h3 {background: url(ico_hint_ok3.gif) no-repeat; width: 5px; height: 38px; float:left; margin: 0}


Dymek pociety jest na 3 kawalki: lewa, powtarzalny srodek i prawa. Gorny tekst rozciaga dymek. Na dole zawsze taki sam przycisk tylko ze powinien byc po srodku (zarowno napis jak i ciemny szary placek pod nim. Problem w tym, ze jezeli daje blokowameu span.ok szerookosc na 100% zeby to tlo w nim wysrodkowac to w FF jest ok, a rozjezdza sie to w IE6 (bo rozciaga sie na cala szerokosc strony). Mozecie cos doradzic? Ten szary placek pod dolnym przyciskiem nie bedzie roziagalny - zawsze taki sam ale nie moge tego wstawic jako <img /> z pewnych przyczyn. Doradzicie cos? Z gory dzieki.
drake88
Spróbuj z width: auto;
_kama
Niestety tez dziala zle bo tak samo jak z 100% tzn w FF jest ok, w IE sie rozciaga.

Jeszcze jakies pomysly? smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.