Forum Mjukvara Programmering och digitalt skapande Tråd

Css: display:what, white-space:what

1
Skriv svar
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av anon150287:

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

Gå till inlägget

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

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Inaktiv
●
Skrivet av metalually:

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

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av anon150287:

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

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

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

a, img {
	float: left;
	display: inline;
}
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av anon150287:

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

a, img {
	float: left;
	display: inline;
}
Gå till inlägget

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

Redigera
Citera flera Citera
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...

Gå till inlägget

Vad används span-elementet till?

Skrivet av anon150287:

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

a, img {
	float: left;
	display: inline;
}
Gå till inlägget

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.

Senast redigerat
Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
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.

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Teknocide:

Vad används span-elementet till?

Gå till inlägget

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.

Gå till inlägget

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.

Gå till inlägget
Visa signatur

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

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Gå till inlägget

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

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara