Omatanje teksta oko slike - pozicija slike npr. dolje-desno

Pozdrav, trudim se postati nekakav Web dizajner pa sam naišao na sljedeći problem…

Kad je slika pozicionirana s “floatom” gore-desno(lijevo) to funkcionira bez pol frke… ali kad želim sliku pozicioniranu npr. dole desno onda dobijem ovo:
[attachment=1]tekst-slika.jpg[/attachment]

znači tekst ne prepoznaje da gore-desno ima slobodnog prostora i da bi se trebao uvući… probao sam s “margin-top” i “padding-top” pomaknuti sliku prema dolje ali u oba slučaja ne dobivam željeni rezultat
Vjerojatno bi trebalo biti moguće obaviti obje stvari, pozicionirati sliku dolje i omotati tekst oko nje…pa bi zamolio da mi pomognete ako znate rješenje
Hvala!! :slight_smile:

Stavi sliku unutar drugog, ili trećeg paragrafa, i floataj je desno.

U kojem paragrafu ti se nalazi slika? Ako se ne nalazi niti u jednom onda stavi u jedan i stavi float: right svojstvo te slike.

prvo sam sav tekst stavio unutar jednog paragrafa i odlomke formirao s
sad sam podijelio svaki odlomak u posebni paragraf kako mi je savjetovao “maydayy”…i stavio sam sliku u drugi paragraf… ali nisam do kraja zadovoljan s rješenjem jer mi slika nije skroz dolje desno kako sam želio nego ima dva reda teksta ispod nje…

a ako stavim sliku u zadnji paragraf onda je slika skroz dolje-desno…ali mi fali teksta da pokrije sliku po cijeloj njenoj visini…

Tu po meni fali u css-u definirana neka uputa koja bi to riješila…jer izgleda da se zapravo ne može dobiti onaj jednostavni efekt iz worda di možeš sliku pozicionirati bilo gdje i da ju tekst omata… nadam se da sam u krivu i da je to ipak moguće… pa pomagajte

onda stavi sliku izvan paragrafa, ali iza njega, dakle

[quote=“maydayy”]onda stavi sliku izvan paragrafa, ali iza njega, dakle

[/quote]

ako stavim sliku izvan paragrafa dobijem ju pozicioniranu ispod teksta desno…znači da to nije rješenje

izgleda da se to ipak neda jednostavno napraviti… a najbole rješenje bi onda bilo staviti sliku u zadni paragraf pa ju smanjiti tako da bude tekst lijevo od nje po cijeloj njenoj visini…ili izmisliti još toliko redova teksta kolko fali

ali uglavnom bilo bi dobro da ovi koji su osmislili CSS da ga dopune s nekom uputom koja bi to jednostavno riješila :slight_smile:

Ja ipak mislim da nije stvar u CSS nego u tebi. Daj pokaži live stranicu pa ćemo više znati.

Isto to mislim, želiš sliku stavit točno gdje ti hoćeš, a da se tekst oko nje omota.

Nije ti css word :slight_smile:

nebrem vam pokazat stranicu jer ju nemam objavljenu nigdje, nego ju pokrećem na lokalnom xampp-u…uostalom stranica nije ni bitna nego samo taj dio di je problem…a to sam vam prikazao na slici…mogu vam prikazati kako se (u slučaju da stavim sliku iza zadnjeg paragrafa) slika pozicionira ispod teksta dolje desno… ali mislim da nema potrebe jer pretpostavljam da si možete to zamisliti

znam da css nije word ali ne vidim nikakav problem kad bi se ova stvar mogla riješiti kao u wordu… uostalom jedna od ideja css-a je ta da element možeš smjestiti kamo želiš

tako da mislim da se ni vi ne bi bunili da css ovu stvar rješava na malo efikasniji način :slight_smile:

Fakat ne razumijem u čem je kod tebe problem evo pogledaj: Screenshot by Lightshot
CSS
[HTML]
.test {
width: 500px;
font-size: 14pt;
}
.test p {
margin-bottom: 10px;
text-align: justify;
}
.test img {
float: right;
margin: 5px 0px 5px 10px;
}
[/HTML]

Tekst
[HTML]

We suggest the following:

<p>
    ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
    enables a clean separation of concerns and that gives you full control over markup
    for enjoyable, agile development. ASP.NET MVC includes many features that enable
    fast, TDD-friendly development for creating sophisticated applications that use
    the latest web standards.
    NuGet makes it easy to install and update free libraries and tools.
    You can easily find a web hosting company that offers the right mix of features
    and price for your applications.
    ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
    enables a clean separation of concerns and that gives you full control over markup
    for enjoyable, agile development. ASP.NET MVC includes many features that enable
    fast, TDD-friendly development for creating sophisticated applications that use
    the latest web standards.
    NuGet makes it easy to install and update free libraries and tools.
    You can easily find a web hosting company that offers the right mix of features
    and price for your applications.
    ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
    enables a clean separation of concerns and that gives you full control over markup
    for enjoyable, agile development. ASP.NET MVC includes many features that enable
    fast, TDD-friendly development for creating sophisticated applications that use
    the latest web standards.<img src="~/Images/orderedList0.png" width="64" />
    NuGet makes it easy to install and update free libraries and tools.
    You can easily find a web hosting company that offers the right mix of features
    and price for your applications.
</p>
[/HTML]

Jes da sam si radio ovoga razjebao cijeli page sad, ali nema veze. Dakle CSS radi sasvim normalno, i zato kažem biće da je problem u tvome kodu, a ne u CSSu. Ovo čak radi i u IEu

hvala ti na ovome…sad sam pozicionirao sliku točno di sam htio… znači problem je bio u tome da sam ja sliku postavio na početak predzadnjeg paragrafa (pa nisam sliku dobio skroz dole nego su ispod bila još 2 reda teksta)…a nisam znao da se može postaviti bilo gdje između teksta…

daj mi molim te reci samo još jednu stvar…nisam naišao na ovaj tag do sad… da li on ima zapravo istu svrhu ko i

?

[quote=“Dagi900”]hvala ti na ovome…sad sam pozicionirao sliku točno di sam htio… znači problem je bio u tome da sam ja sliku postavio na početak predzadnjeg paragrafa (pa nisam sliku dobio skroz dole nego su ispod bila još 2 reda teksta)…a nisam znao da se može postaviti bilo gdje između teksta…

daj mi molim te reci samo još jednu stvar…nisam naišao na ovaj tag do sad… da li on ima zapravo istu svrhu ko i

?[/quote]

Da, to je u novi tag koji se koristi u HTML5, ali isto ti je za div.

aha… do HTML5 i CSS3 još nisam došao…idem prvo ovo staro proći pa se onda prebaciti na nove stvari
tnx na informacijama :slight_smile:


Copyright © 2022 WM Forum - AboutContact