Chciałbym aby mój obraz wyrównany do lewej strony miał delikatną ramkę taką jak np miniatury na interii i był oblany tekstem przy czym był odstępn tekstu od obrazka. Próbowałem już z css'em float:left ale oblewa go i nie ma żadnego odstępu tekstu od obrazka ;/
______
| | ---------
| | ---------
| | ---------
| | ---------
_____ | ---------
--------------------
--------------------
Chciałbym żeby to tak wyglądało.
Ustaw margines.
Problem w tym że obrazek jest w akapicie i jak ustawie margines to będzie to margines razem z obrazkiem i obrazek będzie wysunięty a tekst tak samo jak wczesniej
Z której strony chcesz mieć ten odstęp? Po prawej i na dole od obrazka? To dodaj do obrazka takie właśnie marginesy.
img {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
to nic nie daje, tekst przenosi mi pod obrazek ;/
Znajdź:
margin
Zmień na:
padding
@Demonical Monk:
Stosowanie marginesów ("zamiast" dopełnień) jest tutaj w pełni dopuszczalne i nie powinno w niczym przeszkadzać.
@maslaczek1994:
Dawaj tu swój kod HTML i CSS. Zobaczymy, co jest nie tak. (Może masz za mało miejsca w poziomie? Może gdzieś masz clear lub jakieś inne "czyszczenie"?)
Problem rozwiązałem w inny sposób ;p zrobiłem obramowanie obrazka na 15px w tym samym kolorze co tło i tekst się ładnie przesunął ;-)
a tu jest kod jak coś:
<!DOCTYPE HTML PUBLIC "-//W3C3//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="content-type" content="text/html; charset=Windows-1250">
<title>Artykuły - podgląd</title></head><body bgcolor="#AEB1AE">
<div align="center" style="width: 600px; border: 5px solid black;">
<p style="text-align: justify;"><img style="float: left;" src="http://galeria-brama.art.pl/skaluj_obraz_html.php?plik=okladki/r2007KrzysztofIwinBeztytulu1314a.jpg&szerokosc=61" width="130" height="260" />
Przykładowa treść,
u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest
tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej
więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej
zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa
treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym
miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst
pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej
więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej
zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa
treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym
miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst
pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej
więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej
</p>
</div>
</body>
</html>
@maslaczek1994:
U mnie ten kod działa w Firefoxie 3.5, IE 8 i Operze 10. Dodałem do stylów obrazka po prostu margin: 15px, czyli tak, jak Ci mówiłem. Czy poniższy kod u Ciebie nie działa? (w jakiej przeglądarce sprawdzasz?):
<!DOCTYPE HTML PUBLIC "-//W3C3//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="content-type" content="text/html; charset=Windows-1250">
<title>Artykuły - podgląd</title></head><body bgcolor="#AEB1AE">
<div align="center" style="width: 600px; border: 5px solid black;">
<p style="text-align: justify;"><img style="float: left; margin: 15px;" src="http://galeria-brama.art.pl/skaluj_obraz_html.php?plik=okladki/r2007KrzysztofIwinBeztytulu1314a.jpg&szerokosc=61" width="130" height="260" />
Przykładowa treść,
u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest
tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej
więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej
zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa
treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym
miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst
pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej
więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej
zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa
treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym
miejscu jest tekst pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst
pochodzi ze zmiennej więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej
więc jest od niej zależnyPrzykładowa treść, u mnie w tym miejscu jest tekst pochodzi ze zmiennej więc jest od niej
</p>
</div>
</body>
</html>
No właśnie u mnie nie działa, ale ten Twój juz tak. Sprawdzałem w Firefox 3.5