handdator

Visa fullständig version : Html och css.



dis58959
2022-02-21, 15:50
Hej
när jag gör en html presentation/dela släktdata, kommer bilderna under levnadsbeskrivning, vertikalt en ovh en bild under varandra. Istället skulle jag vilja ha att bilderna flyter automatiskt flera stycken per rad och flera rader under varandra till sista bild. Också att det "flyter automatiskt" antal bilder per rad beroende på storlek på dem. Hur gör jag detta? Vilken kod ska jag lägga in och under vilket element i css? Under .bild? .biografi? eller var?

Jag har kikat html koden både för html-filer och även css filerna screen och print. Jag antar det är i css screen, under antingen .bild och eller .notis; .biografi som editering ska göras? Jag har suttit och meddelst trial and error ändrat i css screen - filen, med detta, men får inte till det. Jag är inte särdeles kod-kunning. Men vet ju att float, position osv, finns många varianter, kan användas för att justera bilder på en html-sida. Tacksam för hjälp av kod-kunnig i forumet! Mvh /Johnny
2273

dis58959
2022-02-21, 23:50
På ett mycket grovt och primitivt sätt har jag fått det att fungera att få bilderna att flyta och radera upp sig rad efter rad men hoppas någon skicklig html-programmerare kan bistå med ett snyggare och enklare sätt. i CSS-filen är det endast en rad som ska in. Se bild nedan.

I ccs-filen screen lägger jag till en rad i .bild float: left;, såhär:

.bild {
padding: 10px 0 10px 0;
float: left;
}


Men, det fungerar om jag ändrar i en av (mina 307) personers html-fil genom att lägga alla bilder i en enda tabell enligt nedan. DÅ flyter bilderna fint. Men det måste finnas ett enklare sätt, så man inte måste manuellt ändra i samtliga 307 html-filer. Tur jag inte har 10.000 filer!:
=================================================
Pensionär
<BR>
<TABLE>
<TR>
<TD CLASS="bild" WIDTH=229>
<IMG SRC="../../pictures/img_1631.jpg" HEIGHT=200 WIDTH=229 TITLE="" ALT="img_1631.jpg">
<TD CLASS="bild" WIDTH=212>
<IMG SRC="../../pictures/img_2156.jpg" HEIGHT=200 WIDTH=212 TITLE="" ALT="img_2156.jpg">
<TD CLASS="bild" WIDTH=151>
<IMG SRC="../../pictures/img_2494.jpg" HEIGHT=200 WIDTH=151 TITLE="" ALT="img_2494.jpg">
<TD CLASS="bild" WIDTH=180>
<IMG SRC="../../pictures/img_2690.jpg" HEIGHT=200 WIDTH=180 TITLE="" ALT="img_2690.jpg">
<TD CLASS="bild" WIDTH=200>
<IMG SRC="../../pictures/img_2750.jpg" HEIGHT=200 WIDTH=200 TITLE="" ALT="img_2750.jpg">
<TD CLASS="bild" WIDTH=282>
<IMG SRC="../../pictures/img_2776.jpg" HEIGHT=200 WIDTH=282 TITLE="" ALT="img_2776.jpg">
<TD CLASS="bild" WIDTH=239>
<IMG SRC="../../pictures/img_2911.jpg" HEIGHT=200 WIDTH=239 TITLE="" ALT="img_2911.jpg">
<TD CLASS="bild" WIDTH=155>
<IMG SRC="../../pictures/img_3269_(2).jpg" HEIGHT=200 WIDTH=155 TITLE="" ALT="img_3269_(2).jpg">
<TD CLASS="bild" WIDTH=231>
<IMG SRC="../../pictures/img_3275_(2).jpg" HEIGHT=200 WIDTH=231 TITLE="" ALT="img_3275_(2).jpg">
<TD CLASS="bild" WIDTH=144>
<IMG SRC="../../pictures/johnny_4-5_aringr_nr3.png" HEIGHT=200 WIDTH=144 TITLE="" ALT="johnny_4-5_aringr_nr3.png">
<TD CLASS="bild" WIDTH=154>
<IMG SRC="../../pictures/johnny_13-14_aringr.jpg" HEIGHT=200 WIDTH=154 TITLE="" ALT="johnny_13-14_aringr.jpg">
<TD CLASS="bild" WIDTH=197>
<IMG SRC="../../pictures/johnny-goumlran_med_flera.jpg" HEIGHT=200 WIDTH=197 TITLE="" ALT="johnny-goumlran_med_flera.jpg">
<TD CLASS="bild" WIDTH=266>
<IMG SRC="../../pictures/kopia_av_thailand_2006_333.jpg" HEIGHT=200 WIDTH=266 TITLE="" ALT="kopia_av_thailand_2006_333.jpg">
<TD CLASS="bild" WIDTH=285>
<IMG SRC="../../pictures/loumlvskataskolan.jpg" HEIGHT=200 WIDTH=285 TITLE="" ALT="loumlvskataskolan.jpg">
<TD CLASS="bild" WIDTH=194>
<IMG SRC="../../pictures/img_2692.jpg" HEIGHT=200 WIDTH=194 TITLE="" ALT="img_2692.jpg">
<TD CLASS="bild" WIDTH=229>
<IMG SRC="../../pictures/img_3292.jpg" HEIGHT=200 WIDTH=229 TITLE="" ALT="img_3292.jpg">
<TD CLASS="bild" WIDTH=262>
<IMG SRC="../../pictures/img_3285.jpg" HEIGHT=200 WIDTH=262 TITLE="" ALT="img_3285.jpg">
<TD CLASS="bild" WIDTH=170>
<IMG SRC="../../pictures/img_3287.jpg" HEIGHT=200 WIDTH=170 TITLE="" ALT="img_3287.jpg">
<TD CLASS="bild" WIDTH=261>
<IMG SRC="../../pictures/img_3291.jpg" HEIGHT=200 WIDTH=261 TITLE="" ALT="img_3291.jpg">
<TD CLASS="bild" WIDTH=179>
<IMG SRC="../../pictures/img_3257.jpg" HEIGHT=200 WIDTH=179 TITLE="" ALT="img_3257.jpg">
</BR>
</TABLE>
</TR>
</DIV>
===============================================
<H4>
Relationer och barn

2274