Css: display:what, white-space:what

Permalänk

Css: display:what, white-space:what

Jag har fastnat något brutalt nu, skulle någon kunna hjälpa mig.

Har ett antal bilder som jag vill visa efter varann och om ytan på horisontellt plan tar slut skall den fortsätta på nästa rad. Vilket också sker. Men.. problemet är att jag får line break emellan raderna.
(problemet uppstår endast eftersom jag använder <!doctype html>, använder jag tex: Transitional, så är det inget problem.

Har testat allt känns det som, display:block; display:inline, white-space:nowrap etc.
med white-space:nowrap så får jag dock önskad effekt, dock så blir det ju då bara endast en bild per rad.

<!doctype html> <html> <body> <div id="content"> <span> <a href="#"><img style="width:150px;height:95px" src="http://www.tekniken.nu/uploads/634039023579397181-image001.jp..."></a> <a href="#"><img style="width:150px;height:95px" src="http://www.tekniken.nu/uploads/634039023579397181-image001.jp..."></a> <a href="#"><img style="width:150px;height:95px" src="http://www.tekniken.nu/uploads/634039023579397181-image001.jp..."></a> <a href="#"><img style="width:150px;height:95px" src="http://www.tekniken.nu/uploads/634039023579397181-image001.jp..."></a> <a href="#"><img style="width:150px;height:95px" src="http://www.tekniken.nu/uploads/634039023579397181-image001.jp..."></a> <a href="#"><img style="width:150px;height:95px" src="http://www.tekniken.nu/uploads/634039023579397181-image001.jp..."></a> </span> </div> </body> </html>

http://www.w3schools.com/css/tryit.asp?filename=trycss_displa...

Visa signatur

daytona 675 -08, iphone 4, samsung full hd, ps3 = svarta leksaker

Permalänk
Inaktiv

Vad är det som är fel? Tycker det funkar hur bra som helst.

Permalänk
Skrivet av anon150287:

Vad är det som är fel? Tycker det funkar hur bra som helst.
http://i.imgur.com/rv76N.png

Jag vill inte ha något mellanrum mellan bilderna..

Visa signatur

daytona 675 -08, iphone 4, samsung full hd, ps3 = svarta leksaker

Permalänk
Inaktiv
Skrivet av metalually:

Jag vill inte ha något mellanrum mellan bilderna..

Att sätta float: left; på a-taggarna tar bort mellanrummen.

Permalänk
Skrivet av anon150287:

Att sätta float: left; på a-taggarna tar bort mellanrummen.

Men bara i horisontellt läge, jag vill även ha bort mellanrummen vertikalt. (det som är själva problemet)

Visa signatur

daytona 675 -08, iphone 4, samsung full hd, ps3 = svarta leksaker

Permalänk
Inaktiv

Den här CSS koden fungerade för mig:

a, img { float: left; display: inline; }

Permalänk
Skrivet av anon150287:

Den här CSS koden fungerade för mig:

a, img { float: left; display: inline; }

Ah grymt! tack som fan!

Det räckte tom med:
img {
float: left;
display: inline;
}

Tackar och bockar!

Visa signatur

daytona 675 -08, iphone 4, samsung full hd, ps3 = svarta leksaker

Permalänk
Medlem
Skrivet av metalually:

<!doctype html> <html> <body> <div id="content"> <span> <a href="#"><img style="width:150px;height:95px" src="http://www.tekniken.nu/uploads/634039023579397181-image001.jp..."></a> ... </span> </div> </body> </html>

http://www.w3schools.com/css/tryit.asp?filename=trycss_displa...

Vad används span-elementet till?

Skrivet av anon150287:

Den här CSS koden fungerade för mig:

a, img { float: left; display: inline; }

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Så float innebär display:block på inline-element. Att försöka sätta tillbaka den till inline gör ingen skillnad och är onödigt.

Både horisontella och vertikala mellanrum beror på display:inline (standard för img). De vågräta mellanrummen pga. space och radbyte mellan taggar i själva källkoden, och de lodräta för att element med display:inline tar hänsyn till baseline-alignment och sålunda skapar utrymme för "hängande tecken" som g, j, y osv.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Inaktiv
Skrivet av Teknocide:

Vad används span-elementet till?

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Så float innebär display:block på inline-element. Att försöka sätta tillbaka den till inline gör ingen skillnad och är onödigt.

Både horisontella och vertikala mellanrum beror på display:inline (standard för img). De vågräta mellanrummen pga. space och radbyte mellan taggar i själva källkoden, och de lodräta för att element med display:inline tar hänsyn till baseline-alignment och sålunda skapar utrymme för "hängande tecken" som g, j, y osv.

Det räckte med float ser jag nu, mitt fel

Permalänk
Skrivet av Teknocide:

Vad används span-elementet till?

Span-elementet kommer ifrån en asp:label, exemplet var en förenkling.

Skrivet av Teknocide:

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Så float innebär display:block på inline-element. Att försöka sätta tillbaka den till inline gör ingen skillnad och är onödigt.

Så sant så sant, plockade bort inline..

Skrivet av Teknocide:

Både horisontella och vertikala mellanrum beror på display:inline (standard för img). De vågräta mellanrummen pga. space och radbyte mellan taggar i själva källkoden, och de lodräta för att element med display:inline tar hänsyn till baseline-alignment och sålunda skapar utrymme för "hängande tecken" som g, j, y osv.

Visa signatur

daytona 675 -08, iphone 4, samsung full hd, ps3 = svarta leksaker

Permalänk
Medlem

Kuriosa
Faktum är att man inte ens behöver använda float (floats missbrukas på tok för ofta som det är ändå).
Det första problemet, vågräta mellanrum, är fullöst men straight forward: man behöver plocka bort all typ av white-space mellan img-taggarna. Följande kod undviker vågräta mellanrum mellan inline-element.

<img src="pic1.png" alt="..." ><img src="pic2.png" alt="..." ><img src="pic3.png" alt="..." ><img src="pic4.png" alt="..." ><img src="pic5.png" alt="...">

Som synes stängs taggen direkt innan nästa öppnas. Detta är acceptabelt (men ser fult ut) då taggar får innehålla white-spaces. Notera att elementnamn och attributnamn/-värde inte får innehålla radbyte. Ett annat alternativ är att helt enkelt ha alla img-taggar på samma rad i källkoden.

De lodräta mellanrummen som beror på baseline-alignment är mycket enklare att trolla bort:

img { vertical-align:bottom; }

CSS-snutten gör så att img-element rättar sig efter botten på varje textrad istället för baseline.

PS: inline-elementens beteende är enligt standard. Antagligen har du fel i din Traditional-doctype vilket innebär att webbläsare (särskilt IE) faller tillbaka på quirks mode. Jag har för mig att quirks mode inte lägger till mellanrum mellan inline-element på olika rader.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Skrivet av Teknocide:

Kuriosa
Faktum är att man inte ens behöver använda float (floats missbrukas på tok för ofta som det är ändå).
Det första problemet, vågräta mellanrum, är fullöst men straight forward: man behöver plocka bort all typ av white-space mellan img-taggarna. Följande kod undviker vågräta mellanrum mellan inline-element.

<img src="pic1.png" alt="..." ><img src="pic2.png" alt="..." ><img src="pic3.png" alt="..." ><img src="pic4.png" alt="..." ><img src="pic5.png" alt="...">

Som synes stängs taggen direkt innan nästa öppnas. Detta är acceptabelt (men ser fult ut) då taggar får innehålla white-spaces. Notera att elementnamn och attributnamn/-värde inte får innehålla radbyte. Ett annat alternativ är att helt enkelt ha alla img-taggar på samma rad i källkoden.

De lodräta mellanrummen som beror på baseline-alignment är mycket enklare att trolla bort:

img { vertical-align:bottom; }

CSS-snutten gör så att img-element rättar sig efter botten på varje textrad istället för baseline.

PS: inline-elementens beteende är enligt standard. Antagligen har du fel i din Traditional-doctype vilket innebär att webbläsare (särskilt IE) faller tillbaka på quirks mode. Jag har för mig att quirks mode inte lägger till mellanrum mellan inline-element på olika rader.

Grymt! Tack så mycket!
Det blev lite problematiskt att använda float: left men vertical-align:bottom löste biffen, eller rättare sagt: Du löste biffen!

Visa signatur

daytona 675 -08, iphone 4, samsung full hd, ps3 = svarta leksaker