[HTML/CSS] Wyrównanie obrazka i tekstu


(GL1zdA) #1

Chcę uzyskać następujący efekt:

+-----------------------+

| . News 1 +-------+|

| . News 2 | ||

| . News 3 | IMG ||

| . News 4 +-------+|

+-----------------------+

To na zewnątrz to div. W środku jest lista ul i obrazek img. Chodzi o to, żeby obrazek był jak najbardziej po prawej wewnątrz div'a i jednocześnie, żeby lista była po lewej i zajmowała jak najwięcej miejsca (jeśli jest wąsko to będzie zawijać wiersze). Kombinowałem z float i clear, ale niestety nie uzyskałem odpowiedniego efektu. Jeśli ktoś ma pomysł to będę wdzięczny.


(mario@) #2

Może tak

Sytyle

i kodzik

  • News 1 News 1 News 1 News 1 News 1 News 1 News 1 News 1
  • News 2
  • News 3
  • News 4
  • News 5
  • News 6
  • News 7 News 7 News 7 News 7 News 7 News 7 News 7 News 7
  • News 8
  • News 9
    obrazek.png[/code]

(GL1zdA) #3

Prawie idealnie - da się to może zrobić bez narzucania szerokości listy? (obrazek raz może być szerszy, raz węższy i chciałbym żeby szerokość listy się dopasowywała.)


(mario@) #4

Najłatwiej to chyba da się tylko na tabelkach - jeżeli chodzi o połączenie z Javascript (czyli dynamicznie zmieniać obrazki np. po najechaniu kursorem na link).

Style

kod

|
-
- News 1 News 1 News 1 News 1 News 1 News 1 News 1 News 1
- News 2
- News 3
- News 4
- News 5
- News 6
- News 7 News 7 News 7 News 7 News 7 News 7 News 7 News 7
- News 8
- News 9
| obrazek.png |

[/code]


(GL1zdA) #5

Nie miałem czasu się tym zając - działa - czasem jak widać rozwiązania najprostsze są najskuteczniejsze. Dzięki.

Mam jeszcze takie pytanie: chciałem używac jako loga pliku w .png jednak efekt jest taki, ze mimo identycznego koloru jak tło wyraźnie się od niego odcina w IE7. Ponoć to problem automatycznego dostosowywania gammy. Czy ktoś wie jak sobie dać z tym rady.


(Fingerboarding) #6

Jest sposób pngfix się zwie.

Ściągnij pngfix.js z http://www.yousendit.com/transfer.php?a ... D7576A9228

A na stronę wstaw :

(w sekcji head)