8 svar · 809 visningar · startad av kylberg
jag gör en sida för ett konstgalleri och ska lägga upp en jädra massa bilder på en sida. de ska ligga i rader och kolumner förstås med jämna avstånd överallt. och jag undrar vad som är bäst för att lägga upp bilder på det viset. table känns jobbigt att göra flera hundra rutor med, men det kanske man får ta. om det inte finns något annat sätt?
Om du sätter float: left; och margin: 10px; på alla bilder blir det väl snyggt fördelat över sidan? En tabell känns inte riktigt rätt.
Att sitta och göra ett galleri för flera hundra bilder , låter väldigt jobbigt :)
Det finns andra sätt.
Ett sätt är att ha alla bilderna i en mapp som öppnas av ett serverscript språk och som sedan ritar upp sidan automatiskt för varje bild som användaren lägger upp. Utskriften skulle då t.ex kunna bli så här:
Eller om du kodar själv.
<h3>Galleri:</h3>
<div id="kol">
<img src="bilder/bild.jpg" alt="bildtext">
<img src="bilder/bild.jpg" alt="bildtext">
<img src="bilder/bild.jpg" alt="bildtext">
<img src="bilder/bild.jpg" alt="bildtext">
<img src="bilder/bild.jpg" alt="bildtext">
</div>
och i css filen någonting så här:
#kol img{
width:170px;
margin:0 0 5px 10px;
height:150px;
float: left;
}
Då kommer bilderna att anpassa sig till användarens bredd på fönstret.
funkar perfekt! tack!
jag har också tänkt att lägga till bildbeskrivningar under alla bilder. går det att göra på liknande sätt? så att de hänger med bilderna hela tiden?
Ja du kan t.ex göra så här
<p><img src="bilder/bild.jpg" alt="bildtext" /><br />text</p>
och i css t.ex
#kol img{
width:170px;
height:150px;
}
#kol p{
width:170px;
float:left;
margin:5px 5px 6px 0;
background-color: #eee;
height:200px;
viktigt att höjden på p sätts för den "längsta" texten så alla blir lika höga, annars kommer de inte kunna "anpassa sig" till varandra.
precis det där jag letade efter! går det att använda nån align eller något för bilderna? vill att de ska vara align bottom men det funkar inte i css.
Jag hade använt en lista för det tycker jag känns mest rätt med tanke på innehållet.
<ul>
<li>
<img src="...">
<span>[beskrivning]</span>
</li>
</ul>
Då ändrar vi lite grann igen
#kol img{
width:170px;
height:150px;
margin-top:20px;
}
#kol p{
width:170px;
float:left;
margin:5px 5px 6px 0;
background-color: #eee;
height: auto;
}
<p>text <br /><img src="bilder/bild.jpg" alt="bildtext" /></p>
Nu finns det 20px att skriva text i. anpassa margin-top efter dina behov.
nu fixade jag det, använde #kol table{ istället, varje tabell är lika stor och har två rutor, en med bild och en med text, blir lite mer kod men det är ingen fara, ser städat ut i koden ändå :) tack så mycket för hjälpen!