Ustawianie tekstu i grafiki

Grafika z lewej, tekst z prawej strony

Takie ustawienie elementów jest bardzo często stosowane w "Opisach plików", kiedy razem z tekstem umieszczamy miniaturkę zdjęcia, np. okładkę książki którą chcemy zaprezentować.

<img style="float:left; margin:0 10px 0 0;" src="adres obrazka" alt="krótki opis obrazka" />
<span style="font-family:Tahoma; font-size:13px;">Tutaj wpisz swój tekst</span>

W miejsce "adres obrazka" należy wpisać pełny adres internetowy obrazka (w tym przykładzie będzie to:http://get.zlotemysli.pl/products/image/000/006/485/152x200.jpg?201306 .

Natomiast w miejsce "krótki opis obrazka" należy wpisać kilka słów opisujących obrazek, które pojawią się u użytkowników z wyłączonym wyświetlaniem grafiki (w tym przykładzie będzie to: Okładka książki). 

Okładka książki W tym miejscu wyświetli nam się cały napisany przez nas tekst. W tym konkretnym przykładzie ustawiliśmy grafikę po lewej stronie. Natomiast poniżej podam kilka kodów dzięki którym będziecie mogli ustawić obrazek w dowolnym miejscu.









Grafika z prawej, tekst z lewej strony

<img style="float:right; margin:0 0 0 10px;" src="adres obrazka" alt="krótki opis obrazka" />
<span style="font-family:Tahoma; font-size:13px;">Tutaj wpisz swój tekst</span> 


Grafika nad tekstem, całość z lewej strony (domyślnie)

<img src="adres obrazka" alt="krótki opis obrazka" />
<p style="font-family:Tahoma; font-size:13px;">Tutaj wpisz swój tekst</p> 


Grafika i tekst wyśrodkowane

<p style="text-align:center;"><img src="adres obrazka" alt="krótki opis obrazka" /></p>
<p style="text-align:center; font-family:Tahoma; font-size:13px;">Tutaj wpisz swój tekst</p> 

Brak komentarzy:

Prześlij komentarz