Forum PHP.pl > [css] Problem z background-image i color

Jarod

19.08.2006, 15:32:03

Mam stopke długości 775px i wysokosci 20px. Stopka to element blokowy. W tej stopce chcę nanieść napis odsunięty od górny stopki o 5px.

Oto kod
HTML:

Kod

<div id="stopka"><p class="stopkaopis">aaaaaaaaaaaaa bbbbbbbbbbbbb ccccccccccccccc dddddddddddddd EEEEEEEEEE</p></div>

CSS:

Kod

#stopka {
          width: 775px;
              height: 20px;
              background-image: url(../img/stopka.gif);
              clear: both;
}
.stopkaopis {
                   margin: 3px 0 0 180px;
                   color: #FFFFFF;
                   font-size: 11px;
                   clear: both;
}

1. Margin dla .stopkaopis nie działa
2. W #stopka mam tło rozciągnięte za pomocą background-image a w .stopkaopis mam zdefiniowany kolor. Jeśli nie zdefiniuję koloru tła to walidator wywala ostrzeżenia. Jeśli zdefiniuję to background-image zostanie zamazany.

Wiecie jak sobie z tym poradzić?

revyag

19.08.2006, 20:34:49

@Zajec kiedyś o tym pisał, pod firefoxem następuje przesunięcie rodzica w którym się znajduje element który chcemy przesunąć. U Ciebie tak się dzieje, nie zauważyłeś tego bo to tylko 3 px. Ale daj więcej a zobaczysz. Rozwiązania tego nie znalazłem nigdzie, ale jeśli w .stopkaopis nie masz tła, ani koloru tła, to daj tej klasie zamiast margin padding i będzie tak jak chcesz. Pod ie natomiast jest dobrze.
Zastanawiam się tylko po co Ci clear w stopkaopis ?
Jeśli chodzi o kolor tła, ustaw go taki jaki ma obrazek w stopce. W kodzie umieść definicję koloru tła przed obrazkiem tła i będzie ok. Wrzuć też do #stopka kolor czcionki. Właśnie o to chodzi, kolor czcionki i kolor tła muszą występować parami

Kod

#stopka {
    width: 775px;
    height: 20px;
    background-color: /*kolor stopki*/
    color:#ffffff;
    background-image: url(../img/stopka.gif);
    clear: both;
}
.stopkaopis {
    padding-top:3px;
    margin-left: 180px;
    font-size: 11px;
}

Jarod

19.08.2006, 20:45:09

Cytat(revyag @ 19.08.2006, 19:34 )

@Zajec kiedyś o tym pisał, pod firefoxem następuje przesunięcie rodzica w którym się znajduje element który chcemy przesunąć. U Ciebie tak się dzieje, nie zauważyłeś tego bo to tylko 3 px. Ale daj więcej a zobaczysz. Rozwiązania tego nie znalazłem nigdzie, ale jeśli w .stopkaopis nie masz tła, ani koloru tła, to daj tej klasie zamiast margin padding i będzie tak jak chcesz. Pod ie natomiast jest dobrze.

Wiem, że padding załatwi sprawe.

Cytat(revyag @ 19.08.2006, 19:34 )

Zastanawiam się tylko po co Ci clear w stopkaopis ?

Masz racje - teraz już nie potrzebne. Ale wcześniej bez tego uciekała mi do prawej strony. Zachowywała się tak jakby pływała

Cytat(revyag @ 19.08.2006, 19:34 )

Jeśli chodzi o kolor tła, ustaw go taki jaki ma obrazek w stopce. W kodzie umieść definicję koloru tła przed obrazkiem tła i będzie ok. Wrzuć też do #stopka kolor czcionki. Właśnie o to chodzi, kolor czcionki i kolor tła muszą występować parami

Kod

#stopka {
    width: 775px;
    height: 20px;
    background-color: /*kolor stopki*/
    color:#ffffff;
    background-image: url(../img/stopka.gif);
    clear: both;
}
.stopkaopis {
    padding-top:3px;
    margin-left: 180px;
    font-size: 11px;
}

Uzyskałem pomoc: background-color: transparent;