[CSS] Wyrownywanie obrazka w divie

[Cvaniak]

Witam, mam diva na szerokosc 100% i wysokosc ok. 100px. Umiescilem w nim obrazek, ale chce go nieco obnizyc i odsunac od lewej strony, wiec pisze:

Kod: Zaznacz cały

.logo {
 display: block;
 margin-left: 20px;
 vertical-align: -30%;
 border: 0;
}

Obrazek faktycznie odsuwa sie od lewej krawedzi, ale nadal jest przyciagany do gory DIVa

Bardzo prosze o pomoc - jak regulowac polozenia obrazka w DIVie?

[Hawk]

Kod: Zaznacz cały

.logo { 
  display: block; /* powinno dzialac rowniez bez tego */
  margin-left: 20px; 
  margin-top: 30%; 
  border: 0; 
}

[Cvaniak]

No niestety nie dziala tak jak powinno, probowalem juz tak, ale efekt tego nie jest zadowalajacy - div ma ustawiony parametr background i po wstawieniu tego obrazka z parametrem margin-top: 30% te 30% jest biale, tak jakby caly div sie obnizyl do dolu.

[Hawk]

.logo to jest nazwa div'a czy obrazka

[Stig]

Możesz skorzystać z atrybutu padding. Przykład:

Kod: Zaznacz cały

.logo { 
  display: block; 
  margin-left: 20px; 
  padding-top: 30%; 
  border: 0; 
}

[Cvaniak]

dziala, ale tylko w firefoxie
prosze pomozcie bo nie chce uzywac tabeli

[Stig]

Oczywiście, w celu lepszej interpretacji tego rozwiązania w przeglądarkach, można do kodu wprowadzić kilka poprawek. Przede wszystkim w przypadku, gdy dany element ma podaną bezwględną wysokość to nie widzę sensu stosowania wartości względnej do określania wertkalnych odstępów. W takim przypadku należałoby też skorzytać z tzw. star-hack'ów, aby uzyskać zamierzony efekt w badzIEwiastej przeglądarce. Oto przykład kodu:

Kod: Zaznacz cały

div.logo {
padding: 30px 0 0 20px; /* można zastosować margin-left*/
border: 0; 
width: 100%; 
height: 70px;
background-image: url(obraz.png);
}
* html * div.logo {
he\ight: 100px;
}

Jeśli nie jest to efekt, którego oczekujesz, to radziłbym umieścić pełny kod strony i plik graficzny z prezentacją planowanego wyglądu.