Bild med text "runt" i HTML5/CSS3

Permalänk

Bild med text "runt" i HTML5/CSS3

Hur gör jag det som står här nedanför så enkelt som möjligt?

______________
.......................| TEXT TEXT TEXT
.........bild..........| TEXT TEXT TEXT
.......................| TEXT TEXT TEXT
_____________| TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT

Permalänk
Medlem

Sätter man inte float: left på bilden bara?

Permalänk
Medlem

Sätt en float: left; på bildelementet.

<div> <p> <img style="float:left;"> Din text här kommer att lägga sig efter bilden och fortsätta under bilden </p> </div>

Exempel
http://jsfiddle.net/9mc93/2/

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Skrivet av FlorrpaN:

Sätt en float: left; på bildelementet.

<div> <p> <img style="float:left;"> Din text här kommer att lägga sig efter bilden och fortsätta under bilden </p> </div>

Exempel
http://jsfiddle.net/9mc93/

Tackar!

Permalänk
Skrivet av FlorrpaN:

Sätt en float: left; på bildelementet.

<div> <p> <img style="float:left;"> Din text här kommer att lägga sig efter bilden och fortsätta under bilden </p> </div>

Exempel
http://jsfiddle.net/9mc93/2/

Det ända jag inte fattar är vart jag sätter koden?

Permalänk
Medlem
Skrivet av supersneel:

Det ända jag inte fattar är vart jag sätter koden?

Hur menar du?
CSS koden?

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Skrivet av FlorrpaN:

Hur menar du?
CSS koden?

Såg ut som att det var lite css och lite html kod.

<div> <p> <img style="float:left;"> Din text här kommer att lägga sig efter bilden och fortsätta under bilden </p> </div>

den koden.

Permalänk
Inaktiv
Skrivet av supersneel:

Det ända jag inte fattar är vart jag sätter koden?

Det bästa är att undvika inline CSS. Skapa en fil som heter style.css, i din html/php/whatnot-fil lägger du in denna kod headtaggen:

<link rel="stylesheet" type="text/css" href="style.css" />

sedan i stlyle.css lägger du till:

img.leftoftext{ float: left; }

Och till slut, tillämpar du stilklassen vi just skrev vårat css-dokument rätt på bilden du vill ha till vänster:

<img src="varmkorv.jpg" class="leftoftext" /><span class="breadtext">Varmkorv (finlandssvenska: hot dog)[1], är en kokt eller grillad smal korv, 10-20 centimeter lång. Den serveras vanligen i skuret korvbröd med tillbehör som ketchup, senap, bostongurka, (rostad) lök med mera, På "franska varmkorvar" går brödet runt korven och är inte skuret. Varmkorv med bröd har blivit en klassiker i Norden.</span>

Permalänk

Om du vill ha lite mera kontroll kan detta kanske vara något: http://www.html5rocks.com/en/tutorials/regions/adobe/

Dock verkar det bara finnas stöd i Chrome, så det är inte precis något att förlita sig på.

Permalänk

Nu funkar det. Men texten är alldeles för nära bilden. Hur fixar man det?

Permalänk
Medlem
Skrivet av supersneel:

Nu funkar det. Men texten är alldeles för nära bilden. Hur fixar man det?

Kolla på padding i CSS.

https://developer.mozilla.org/en-US/docs/CSS/padding

Permalänk
Medlem
Skrivet av anon214934:

Det bästa är att undvika inline CSS. Skapa en fil som heter style.css, i din html/php/whatnot-fil lägger du in denna kod headtaggen:

<link rel="stylesheet" type="text/css" href="style.css" />

sedan i stlyle.css lägger du till:

img.leftoftext{ float: left; }

Och till slut, tillämpar du stilklassen vi just skrev vårat css-dokument rätt på bilden du vill ha till vänster:

<img src="varmkorv.jpg" class="leftoftext" /><span class="breadtext">Varmkorv (finlandssvenska: hot dog)[1], är en kokt eller grillad smal korv, 10-20 centimeter lång. Den serveras vanligen i skuret korvbröd med tillbehör som ketchup, senap, bostongurka, (rostad) lök med mera, På "franska varmkorvar" går brödet runt korven och är inte skuret. Varmkorv med bröd har blivit en klassiker i Norden.</span>

Just detta exemplet är inte bra; att döpa klassen till "leftoftext" innebär att du semantiskt binder klassen till en viss form. Det är lika illa som att sätta style-attributet direkt på elementet.

Om du/kund/någons mamma skulle vilja ha bilden till höger om texten skulle du behöva byta namn på klassen, på alla ställen där den används i din HTML, och dessutom ändra CSS-regeln.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Inaktiv
Skrivet av Teknocide:

Just detta exemplet är inte bra; att döpa klassen till "leftoftext" innebär att du semantiskt binder klassen till en viss form. Det är lika illa som att sätta style-attributet direkt på elementet.

Om du/kund/någons mamma skulle vilja ha bilden till höger om texten skulle du behöva byta namn på klassen, på alla ställen där den används i din HTML, och dessutom ändra CSS-regeln.

Det var ett exempel bara, själv hade jag tagit bort "img" i cssen samt döpt den till float-left om det BARA är float left på den. Däremot så kanske personen vill ha mer cssattribut på alla bilder som är till vänster (tex en border-right eller något), då är detta helt okej.

För ditt andra argument; Rätt puckat du tänker nu, vill han sen ha bilden till höger så skapar han såklart en ny css-klass som heter rightoftext och ändrar tex float till right och kanske border-right till border-left.

Permalänk
Medlem
Skrivet av anon214934:

Det var ett exempel bara, själv hade jag tagit bort "img" i cssen samt döpt den till float-left om det BARA är float left på den. Däremot så kanske personen vill ha mer cssattribut på alla bilder som är till vänster (tex en border-right eller något), då är detta helt okej.

För ditt andra argument; Rätt puckat du tänker nu, vill han sen ha bilden till höger så skapar han såklart en ny css-klass som heter rightoftext och ändrar tex float till right och kanske border-right till border-left.

Varför tycker du det är puckat? Tanken med CSS är att separera på presentation och markup (HTML). Om du döper alla dina klasser till vad de gör så separerar du ingenting, du flyttar "bara" definitionen till en annan plats.

Döp klasser till vad de representerar istället för hur de påverkar det grafiska utseendet så slipper du i större utsträckning skriva om i din HTML när du vill göra en grafisk ändring.

Klassen kan till exempel heta 'article-image' istället, vilket inte har någon grafisk men ändå tydligt anger vad det rör sig om.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

Varför tycker du det är puckat? Tanken med CSS är att separera på presentation och markup (HTML). Om du döper alla dina klasser till vad de gör så separerar du ingenting, du flyttar "bara" definitionen till en annan plats.

Nja, det är kanske lite halvt onödigt att endast ha ett CSS-property på ett klassnamn, men det är fortfarande väldigt mycket mer smidigt än att skriva det inline. Bara att lätt kunna lägga till något i framtiden och att kunna ta bort floatsen helt är tillräckligt.

Sedan behövs inget klassnamn till bilden ö.h.t., det är ofta smidigare att skriva en generell selector för bilder som ligger i <p> istället, t.ex.:

.article p img { display: block; float: left; margin: 0 1em 1em 0; }

Här markeras bilder som ligger inuti en <p> som är barn till elementet .article. Bilder som ligger fritt utanför <p> är helt opåverkade. Ganska logiskt, eftersom man sällan lägger in bild inuti en <p> förutom när man vill ha texten flytande kring den.

Visa signatur
Permalänk
Medlem
Skrivet av supersneel:

Nu funkar det. Men texten är alldeles för nära bilden. Hur fixar man det?

Kolla hur jag gjorde:
http://jsfiddle.net/9mc93/8/

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Medlem
Skrivet av Mest:

Nja, det är kanske lite halvt onödigt att endast ha ett CSS-property på ett klassnamn, men det är fortfarande väldigt mycket mer smidigt än att skriva det inline. Bara att lätt kunna lägga till något i framtiden och att kunna ta bort floatsen helt är tillräckligt.

Sedan behövs inget klassnamn till bilden ö.h.t., det är ofta smidigare att skriva en generell selector för bilder som ligger i <p> istället, t.ex.:

.article p img { display: block; float: left; margin: 0 1em 1em 0; }

Här markeras bilder som ligger inuti en <p> som är barn till elementet .article. Bilder som ligger fritt utanför <p> är helt opåverkade. Ganska logiskt, eftersom man sällan lägger in bild inuti en <p> förutom när man vill ha texten flytande kring den.

Jag tror du missförstår mig. Tar du bort float: left på en klass som heter "leftoftext" så är den inte längre till vänster om texten, alltså har du nu ett klassnamn som heter något det inte representerar. För att fixa det måste du in på varje ställe i HTML:en där klassen finns och byta den mot en "rightoftext" eller whatever. Ungefär lika mycket jobb som med inline styling.

Skickades från m.sweclockers.com

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

Jag tror du missförstår mig. Tar du bort float: left på en klass som heter "leftoftext" så är den inte längre till vänster om texten, alltså har du nu ett klassnamn som heter något det inte representerar. För att fixa det måste du in på varje ställe i HTML:en där klassen finns och byta den mot en "rightoftext" eller whatever. Ungefär lika mycket jobb som med inline styling.

Ja, självklart, klassnamn är definitivt bäst att beskriva med funktion snarare än utseende, men jag tolkade ditt inlägg som att du även ansåg att single-property klassnamn var poänglöst. Jag ber om ursäkt för missförståndet.

Visa signatur
Permalänk
Inaktiv
Skrivet av Teknocide:

Jag tror du missförstår mig. Tar du bort float: left på en klass som heter "leftoftext" så är den inte längre till vänster om texten, alltså har du nu ett klassnamn som heter något det inte representerar. För att fixa det måste du in på varje ställe i HTML:en där klassen finns och byta den mot en "rightoftext" eller whatever. Ungefär lika mycket jobb som med inline styling.

Skickades från m.sweclockers.com

Håller redan med dig om att namnet är småpuckat, articleimage-left och -right hade varit bättre. Läs mitt inlägg helt och hållet för förklaring.

Permalänk
Medlem
Skrivet av anon214934:

Håller redan med dig om att namnet är småpuckat, articleimage-left och -right hade varit bättre. Läs mitt inlägg helt och hållet för förklaring.

Nej det hade inte varit bättre.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Inaktiv
Skrivet av Teknocide:

Nej det hade inte varit bättre.

Förklara varför. visst hade man kunnat kombinera article-image med typ float-left och float-right istället, men oftast vill man ha andra attribut än float som skillnad på höger och vänster, precis som jag beskrivit. Detta börjar dock spåra ur och bli ganska offtopic, så jag tänker lämna det vid detta, gett mina 5 cent ändå

Hade gött gubbar!

Permalänk
Medlem
Skrivet av anon214934:

Förklara varför. visst hade man kunnat kombinera article-image med typ float-left och float-right istället, men oftast vill man ha andra attribut än float som skillnad på höger och vänster, precis som jag beskrivit. Detta börjar dock spåra ur och bli ganska offtopic, så jag tänker lämna det vid detta, gett mina 5 cent ändå

Hade gött gubbar!

Säg att du bygger en webbplats åt ett stort företag och lägger bl.a. in stilregler för att skapa gröna informationsfält och döper dem till "green-box" eller något åt det hållet. Sidan byggs på och får hundratals sidor över åren, sedan plötsligt beslutar företaget för att byta företagsprofil och vill ha blå färg på sin sida istället för grön.

Att byta färg i CSS-dokumentet är en smal sak, men plötsligt så skriver man "green-box" för att skapa ett blått fält. Sense makes none. Självklart kan du gräva dig igenom databaser och markup och byta ut alla förekomster av "green-box" till "blue-box", men med den inställningen så kan man likväl skriva den CSSen inline för det blir samma jobb i slutändan.

Det är både smidigare och långt mycket mer semantiskt att använda ett klassnamn som beskriver fältets funktion snarare än utseende. Om informationsfältet t.ex. innehåller en summering av informationen som återfinns på sidan den ligger på kanske en passande namn kan vara "summarized-info" eller kanske bara "info-box".

Visa signatur
Permalänk
Medlem
Skrivet av anon214934:

Förklara varför. visst hade man kunnat kombinera article-image med typ float-left och float-right istället, men oftast vill man ha andra attribut än float som skillnad på höger och vänster, precis som jag beskrivit. Detta börjar dock spåra ur och bli ganska offtopic, så jag tänker lämna det vid detta, gett mina 5 cent ändå

Hade gött gubbar!

Jag menar inte att vara otrevlig, men jag har har redan förklarat varför: En klass vars namn säger hur något ser ut eller var det är placerat blir problematisk så fort det klassen gör inte längre stämmer överens med dess namn.

Med exemplet 'articleimage-left' har du indirekt sagt att alla element som har den klassen ligger till vänster. Om du senare bestämmer dig för att ändra placering på bilden så måste du även ändra i dina HTML-filer överallt där 'articleimage-left' förekommer; om du inte gör det kommer klassnamnet att "ljuga". Och om du måste ändra dina HTML-filer när du ändrar din CSS så har du inte lyckats separera presentation från innehåll.

Att ha en klass som heter 'float-left' är totalt poänglöst då namnet i princip antyder att klassens enda effekt är att elementet får float: left. Det är så gott som 0 skillnad mellan detta och att ha inline style-attribut.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Jag har gjort så att jag från början har gjort en class .left och en class .right i css, med float och lagom padding. Sen har jag angett img class right där bilden ska floata höger i html, eller div class right, om det är något annat som ska floatas. Vill jag flytta just den bilden byter jag class på den. Kanske inte heller är korrekt, men smidigt.

Visa signatur
Permalänk
Inaktiv
Skrivet av Teknocide:

Jag menar inte att vara otrevlig, men jag har har redan förklarat varför: En klass vars namn säger hur något ser ut eller var det är placerat blir problematisk så fort det klassen gör inte längre stämmer överens med dess namn.

Med exemplet 'articleimage-left' har du indirekt sagt att alla element som har den klassen ligger till vänster. Om du senare bestämmer dig för att ändra placering på bilden så måste du även ändra i dina HTML-filer överallt där 'articleimage-left' förekommer; om du inte gör det kommer klassnamnet att "ljuga". Och om du måste ändra dina HTML-filer när du ändrar din CSS så har du inte lyckats separera presentation från innehåll.

Att ha en klass som heter 'float-left' är totalt poänglöst då namnet i princip antyder att klassens enda effekt är att elementet får float: left. Det är så gott som 0 skillnad mellan detta och att ha inline style-attribut.

Jag håller med dig, men vad Haikarainen löser är om man vill kunna ha både bilder på höger och vänster sida om texten (alternerat eller något i texten), då blir det lite klurigare.

Permalänk
Medlem
Skrivet av anon150287:

Jag håller med dig, men vad Haikarainen löser är om man vill kunna ha både bilder på höger och vänster sida om texten (alternerat eller något i texten), då blir det lite klurigare.

Om det rör sig om alternerande vänster- och högerställda element så går det att styla med

p > .article-image:nth-child(odd) { float: left; } p > .article-image:nth-child(even) { float: right; }

(exempel 1)

Vill man ha mer komplexa växlingar kan man använda :nth-child(Xn): exempel 2

Är man ute efter en helt osymmetrisk lösning eller har IE8- som målgrupp måste man ändra sin HTML, men det blir ju inte plötsligt en bättre idé att namnge klasser efter grafisk effekt; en simpel alt-klass kan räcka:
ex 3
ex 4

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

Är man ute efter en helt osymmetrisk lösning eller har IE8- som målgrupp måste man ändra sin HTML [...]

Selectivizr är en schysst polyfill för pseudo-selectors till IE6-8.

Skrivet av havsmonstret:

Jag håller med dig, men vad Haikarainen löser är om man vill kunna ha både bilder på höger och vänster sida om texten (alternerat eller något i texten), då blir det lite klurigare.

Inte nödvändigtvis. Exakt hur man lägger upp sina selectors smidigast beror självklart på det specifika ändamålet, men det finns inga konstigheter med att alterera efter antal barn eller att ha ett alternativt klassnamn. Använder man "article-image" för att floata en bild till vänster så är det inte alls orimligt att använda "article-image-alt" för att floata till höger. Det är bra mycket mer rimligt än att börja beskriva utseende i sina klassnamn.

Visa signatur
Permalänk
Medlem

Hur kan ni argumentera mot Teknocide när det han säger är så uppenbart rätt? Klasser ska ju vara beskrivande och INTE specificerande.

Jag har såklart också använt osemantiska klassnamn ibland – men det är absolut inget jag skulle argumentera för, eller än mindre rekommendera andra, att använda.