31 lipca 2010

14. Ustawienia obrazka

Napewno już niejednokrotnie denerwowałeś się lub denerwowałaś z powodu nie tak układającego się tekstu wraz z obrazkiem po wklejeniu kodu w chomikowe rozmowy lub w edycji swojego profilu... O co mi chodzi obrazuję na przykładach poniżej.

Problem w Chomikowych Rozmowach: 



Rozwiązanie: 
Prostym sposobem na uniknięcie takiego efektu jest dodanie znacznika akapitu <p> pomiędzy kodem obrazka a wpisanym tekstem. Prawda, że proste?

Ciekawostka:
Przygotowałeś/aś reklamę, ale nie wiesz czy będzie dobrze wyglądać w chomikowych rozmowach i chciałbyś obejrzeć wynik?
Wklej ją na swoim profilu w chomikowe rozmowy. Na Twoim chomiku w CHR jest opcja umożliwiająca usunięcie takiego nieudanego wpisu.

No dobrze kolejny problem już z głowy. 
Ale co zrobić żeby obrazek zmienił swoje położenie np. z lewej strony na prawą lub odwrotnie a tekst ładnie go otaczał? Wykonamy to za pomocą tak zwanych styli, które zdefiniują ustawienia obrazka względem otaczającego go tekstu. wystarczy, że do kodu za pomocą którego wstawiamy obrazek dopiszemy: 
 - wyrównanie do lewej style="float:left;"
 - wyrównanie do prawej style="float:right;"

Przykładowy kod z wyrównaniem do lewej: 
<img src="URL obrazka" alt="tekst alternatywny" style="float:left;" /> 
E-book tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst teksttekst tekst test tekst tekst tekst  tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tetekst tekst test tekst tekst tekst kst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst  tekst tetekst tekst test tekst tekst tekst test tekst tekst tekst  tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst tekst test tekst tekst tekstst tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tektekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst test tekst tekst tekst tekst tekst tekst test tekst tekst test tekst tekst tekst tekst tekst tekst test tekst tekst test  test tekst tekst tekst tekst test tekst tekst test  test tekst tekst tekst tekst test tekst tekst test  test


Przykładowy kod z wyrównaniem do prawej: 
<img src="URL obrazka" alt="tekst alternatywny" style="float:right;" /> 
E-book tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst teksttekst tekst test tekst tekst tekst  tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tetekst tekst test tekst tekst tekst kst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst  tekst tetekst tekst test tekst tekst tekst test tekst tekst tekst  tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst tekst test tekst tekst tekstst tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tektekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst tekst test tekst tekst tekst tekst test tekst tekst tekst tekst tekst tekst test tekst tekst test tekst tekst tekst tekst tekst tekst test tekst tekst test tekst tekst tekst tekst tekst tekst test tekst tekst test tekst tekst tekst  tekst test tekst tekst tekst 

Przyznasz mi rację, że tak ustawiony tekst, który mocno przytula się do obrazka nie wygląda estetycznie... :-) Poprawimy to w kolejnym wątku!

0 komentarze:

Prześlij komentarz

Komentarze z obraźliwymi słowami nie będę zatwierdzane. Nie klnij i nie podawaj samych linków. Te na pewno nie będą zatwierdzane.