Chciałbym żeby zawsze był z boku obrazka, a pod nim puste pole.
Jak to zrobić ?
Pełna wersja: marginesy obrazka
Jak zrobić żeby tekst obok obrazka nie wchodził pod niego ?
Chciałbym żeby zawsze był z boku obrazka, a pod nim puste pole.
Jak to zrobić ?
Chciałbym żeby zawsze był z boku obrazka, a pod nim puste pole.
Jak to zrobić ?
- Nie ten dział -
Ustawia się to w stylach atrybut float + margin
np http://www.tizag.com/cssT/float.php
http://www.w3.org/TR/CSS2/visuren.html
W lewym oknie na stronie do stestowania wstaw ten kod
Ustawia się to w stylach atrybut float + margin
np http://www.tizag.com/cssT/float.php
http://www.w3.org/TR/CSS2/visuren.html
W lewym oknie na stronie do stestowania wstaw ten kod
KOD
<html>
<head>
<style type="text/css">
img
{
float:left;
margin: 10px 20px 10px 0px;
}
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
i możesz testować online http://www.w3schools.com/css/tryit.asp?filename=trycss_float
<head>
<style type="text/css">
img
{
float:left;
margin: 10px 20px 10px 0px;
}
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Mion, raczej nie zrozumiałeś pytania które zadał amstrad.
Amstrad, to co musisz zrobić, to wstawić tekst w osobnego diva. Idea jest taka, że jeden blok to obrazek, a drugi blok zawiera tekst. Wtedy tekst nie będzie oblewał obrazka, ale zawsze będzie obok, jako osobny blok.
Podam na przykładzie, css inline ale chodzi tylko o przykład:
<img src="..." style="float:left;" />
<div style="float: right: width: 200px;">
<p>This is some text. This is some text. This is some text.</p>
<p>This is some text. This is some text. This is some text.</p>
<p>This is some text. This is some text. This is some text.</p>
</div>
dla diva dobrze jest ustawic stałą szerokość - ja ustawiłem na 200px - wtedy masz pewnosc ze nawet bardzo niesforny tekst nie zepsuje Ci layoutu.
Amstrad, to co musisz zrobić, to wstawić tekst w osobnego diva. Idea jest taka, że jeden blok to obrazek, a drugi blok zawiera tekst. Wtedy tekst nie będzie oblewał obrazka, ale zawsze będzie obok, jako osobny blok.
Podam na przykładzie, css inline ale chodzi tylko o przykład:
<img src="..." style="float:left;" />
<div style="float: right: width: 200px;">
<p>This is some text. This is some text. This is some text.</p>
<p>This is some text. This is some text. This is some text.</p>
<p>This is some text. This is some text. This is some text.</p>
</div>
dla diva dobrze jest ustawic stałą szerokość - ja ustawiłem na 200px - wtedy masz pewnosc ze nawet bardzo niesforny tekst nie zepsuje Ci layoutu.
@Mion, raczej nie zrozumiałeś pytania które zadał amstrad.
Faktycznie, bo sugerowałem się przykładem z obrazka gdzie tekst oblewa obrazek;
Faktycznie, bo sugerowałem się przykładem z obrazka gdzie tekst oblewa obrazek;
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.