Pełna wersja: [html]oblanie obrazka tekstem
Witam, mam div`a i chcę umieścić w nim po lewej stronie, w połowie wysokości obrazek. W div`a chcę wprowadzić tekst który ma oblać ten obrazek, tak że, 2-3 linijki tekstu nad obrazkiem, troche obok i reszta pod spodem obrazka. Tekst chcę wyjustować aby to ładnie wyglądało. Można to zrobić dzieląc tekst na 3 div`y ale ja chcę wprowadzać ten tekst do jednego div`a. Proszę o pomoc bo nigdzie nie mogę znaleźć rozwiązania.
Zasosuj FLOAT w obrazku np style="float: left;
tekst teskt tekst teskt tekst teskt tekst teskt tekst teskt tekst teskt
<img src="grafika" alt="alteranatywa" style="float: left;" />tekst tekst
tekst tekst tekst teskt tekst teskt tekst teskt
Jeżeli o to ci chodziło
tekst teskt tekst teskt tekst teskt tekst teskt tekst teskt tekst teskt
<img src="grafika" alt="alteranatywa" style="float: left;" />tekst tekst
tekst tekst tekst teskt tekst teskt tekst teskt
Jeżeli o to ci chodziło
nie całkiem, bo ten obrazek jest dodany w tekście a ma być poza nim, ale ma się w nim wyświetlić
Nie rozumie 
na górze wyraźnie pisze OBLANY czyli tekst na przynajmniej 3 bokach obrazka. Więc o co chodzi z tym drugim postem?
Skoro chcesz ustawić obrazek "-->poza tekstem<--", to co rozumiesz poprzez
Możesz to jakoś graficznie przedstawić
na górze wyraźnie pisze OBLANY czyli tekst na przynajmniej 3 bokach obrazka. Więc o co chodzi z tym drugim postem?
Skoro chcesz ustawić obrazek "-->poza tekstem<--", to co rozumiesz poprzez
Cytat
W div`a chcę wprowadzić tekst który ma oblać ten obrazek, tak że, 2-3 linijki tekstu nad obrazkiem, troche obok i reszta pod spodem obrazka.
Możesz to jakoś graficznie przedstawić
tekst ma być na górze, z prawej i pod obrazkiem, ma on być wczytany dynamicznie i w zależności od strony ma się zmieniać a obrazek musi być zawsze w tym samym miejscu i zawsze ten sam.
Jedyne znane mi rozwiązanie, to wyświetlać tekst w częściach i obrazek umieścić w tekście.
Czyli wyświetlasz np pierwsze 100 słów, dajesz obrazek z float:left i dalej resztę słów tekstu.
Czyli wyświetlasz np pierwsze 100 słów, dajesz obrazek z float:left i dalej resztę słów tekstu.
Mi również już kombinowałem na wiele sposobów i nie da się albo dwa divy, albo pisanie tekstu z dołączonym obrazkiem (położenie obrazka zadeklarowane w css)
Można to również zrobić dynamicznie ale wtedy zawijamy tekst tylko pod obrazkiem a nad nim już nie
nawet słynne CMS rozbijają na wile div'ów bądź akapitów ze zmiennymi marginesami
lub zobacz na tą stronę
http://www.csstextwrap.com/examples.php
Można to również zrobić dynamicznie ale wtedy zawijamy tekst tylko pod obrazkiem a nad nim już nie
Kod
<style>
.left {
float: left;
}
.img {
width: 90px;
height: 90px;
margin: 0px 5px 0px 100px;
}
.txt {
margin: 0px 100px 0px 100px;
}
.ul {
margin: 0px 100px 0px 100px;
}
</style>
<div class="left">
<img class="img" src="http://www.bigchina.eu/uploaded/7/7d476f23d68fed5946b758f3c86a1740.jpg" />
</div>
<p class="txt">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
.left {
float: left;
}
.img {
width: 90px;
height: 90px;
margin: 0px 5px 0px 100px;
}
.txt {
margin: 0px 100px 0px 100px;
}
.ul {
margin: 0px 100px 0px 100px;
}
</style>
<div class="left">
<img class="img" src="http://www.bigchina.eu/uploaded/7/7d476f23d68fed5946b758f3c86a1740.jpg" />
</div>
<p class="txt">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
nawet słynne CMS rozbijają na wile div'ów bądź akapitów ze zmiennymi marginesami
lub zobacz na tą stronę
http://www.csstextwrap.com/examples.php
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.