J.N.Medlem sedan apr. 20031 660 inlägg HEJ!
I en bildbank med bilder i tre kolumner önskar jag att respektive bild-div:ar ska ligga med placering i bottenlinjen med övriga på samma rad.
Alla tre "Low resolution" på en rad ska alltså ligga i rad, bildöverkant ska INTE ligga i linje.
Hur löser man det? Jag har provat med div runt hela raden, men hur pressar man ned inneslutna div:ar mot botten?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style>
#content .imgbank_row_12{float:left; width:150px; padding:20px 29px 0 0;}
#content .imgbank_row_3{float:left; width:150px; padding-top:20px;}
body{font:68.75%/1.5 Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<div id="content">
<div class="imgbank_row_12">
<img src="ib_1.png" width="100" height="66" alt="on" /><br />
<h3>Bild</h3>
<a href="pic2.zip" rel="external" title="Download">High resolution (1255 kb)</a><br />
<a href="pi1c.jpg" rel="external" title="Preview">Low resolution (65 kb)</a>
</div>
<div class="imgbank_row_12">
<img src="ib_2.png" width="150" height="100" alt="sson" /><br />
<h3>Bild</h3>
<a href="pi4c.zip" rel="external" title="Download">High resolution (1445 kb)</a><br />
<a href="piac.jpg" rel="external" title="Preview">Low resolution (73 kb)</a>
</div>
<div class="imgbank_row_3">
<img src="pack.jpg" width="150" height="50" alt="Rfinibus" /><br />
<h3>Bild</h3>
<a href="picc.zip" rel="external" title="Download">High resolution (1623 kb)</a><br />
<a href="pizc.jpg" rel="external" title="Preview">Low resolution (52 kb)</a>
</div>
<br style="clear:both" />
<div class="imgbank_row_12">
<img src="ib_1.png" width="100" height="66" alt="on" /><br />
<h3>Bild</h3>
<a href="pic2.zip" rel="external" title="Download">High resolution (1255 kb)</a><br />
<a href="pi1c.jpg" rel="external" title="Preview">Low resolution (65 kb)</a>
</div>
<div class="imgbank_row_12">
<img src="ib_2.png" width="150" height="100" alt="sson" /><br />
<h3>Bild</h3>
<a href="pi4c.zip" rel="external" title="Download">High resolution (1445 kb)</a><br />
<a href="piac.jpg" rel="external" title="Preview">Low resolution (73 kb)</a>
</div>
</div>
</body>
</html>
tantenMedlem sedan nov. 20051 596 inlägg Nu vet jag inte hur mycket jag är ute i hack-världen ... vi får se om du klarar dig utan.
Det är ju lite knepigt att få till det som du vill.
Men så här är en lösning:
Sätt innehållet i varje div i ett <p>, vilket gör att du får ta bort din <h3> och sätta class på den i stället.
Bestäm en height och min-height på dina #content .imgbank_row
sedan
p{ position: absolute; bottom: 0px; }
För att inte divarna ska springa ner till botten på fönstret så får du lägga dem 3 och 3 i var sin till div.
Tror detta ska fungera som du vill.
tantenMedlem sedan nov. 20051 596 inlägg Jag testade nu två bilder på en rad med
#rad{ height: 150px; top:30px; position: absolute; }
#content .imgbank_row_12{float:left; width:150px; padding:20px 29px 0 0; min-height: 150px; height: 150px;}
p{ position: absolute; bottom: 0px; }
och
<body>
<div id="rad">
<div id="content">
<div class="imgbank_row_12">
och det fungerade i IE utan hack :L
J.N.Medlem sedan apr. 20031 660 inlägg Fungerar hos mig också, använde även imgbank_row_3.
Men, om man önskar bilder i flera rader; jag kan ju inte skriva flera divar med id:t rad?
Lägger man alla i samma rad med <br clear="both" /> kommer texten längst ned ovanpå vartannat.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style>
#rad{ height: 150px; top:30px; position: absolute;}
#content .imgbank_row_12{float:left; width:150px; padding:20px 29px 0 0; min-height: 150px; height: 150px;}
#content .imgbank_row_3{float:left; width:150px; padding-top:20px; min-height: 150px; height: 150px;}
p{ position: absolute; bottom: 0px; }
body{font:68.75%/1.5 Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<div id="rad">
<div id="content">
<div class="imgbank_row_12">
<img src="ib_1.png" width="100" height="66" alt="on" /><br />
<p>Bild<br />
<a href="pic2.zip" rel="external" title="Download">High resolution (1255 kb)</a><br />
<a href="pi1c.jpg" rel="external" title="Preview">Low resolution (65 kb)</a></p>
</div>
<div class="imgbank_row_12">
<img src="ib_2.png" width="150" height="100" alt="sson" /><br />
<p>Bild<br />
<a href="pi4c.zip" rel="external" title="Download">High resolution (1445 kb)</a><br />
<a href="piac.jpg" rel="external" title="Preview">Low resolution (73 kb)</a></p>
</div>
<div class="imgbank_row_3">
<img src="pack.jpg" width="150" height="50" alt="Rfinibus" /><br />
<p>Bild<br />
<a href="picc.zip" rel="external" title="Download">High resolution (1623 kb)</a><br />
<a href="pizc.jpg" rel="external" title="Preview">Low resolution (52 kb)</a></p>
</div>
<br clear="all" />
<div class="imgbank_row_12">
<img src="ib_1.png" width="100" height="66" alt="owyen" /><br />
<p>Bild<br />
<a href="pic2.zip" rel="external" title="Download">High resolution (125 kb)</a><br />
<a href="pi1c.jpg" rel="external" title="Preview">Low resolution (45 kb)</a></p>
</div>
<div class="imgbank_row_12">
<img src="ib_2.png" width="150" height="100" alt="ssn" /><br />
<p>Bild<br />
<a href="pi4c.zip" rel="external" title="Download">High resolution (145 kb)</a><br />
<a href="piac.jpg" rel="external" title="Preview">Low resolution (83 kb)</a></p>
</div>
<div class="imgbank_row_3">
<img src="pack.jpg" width="150" height="50" alt="Rfinis" /><br />
<p>Bild<br />
<a href="picc.zip" rel="external" title="Download">High resolution (623 kb)</a><br />
<a href="pizc.jpg" rel="external" title="Preview">Low resolution (32 kb)</a></p>
</div>
</div>
</div>
</body>
</html>
tantenMedlem sedan nov. 20051 596 inlägg Nej du ska ha en rad för varje rad, förslagsvis rad 1,2,3 och ange olika top på dem.
Rad 2 måste ha minst värdet den tidigare raden har + lite till. Rad tre de tidigare raderna + lite till osv.
Du har ju absolut position så de räknar ut sin placering från samma punkt.
Observera att din padding kommer att räknas ut olika i webläsarna. Så i IE finns inte innehållet i botten på diven även om det ser ut så.
tantenMedlem sedan nov. 20051 596 inlägg Har glömt nämna left positionen kom jag på nu.
Med flera rad så ska du nog ha med det också på på dina rad1,2,3... left:0px; t.ex...
sorry!
tantenMedlem sedan nov. 20051 596 inlägg Nu tittade jag närmare på din kod och måste fråga... Fungerar det verkligen om du inte har bilden inne i <p> också...???
<br clear="all" /> ska du inte behöva...
J.N.Medlem sedan apr. 20031 660 inlägg Svar på dina frågor:
Olika topposition på rad1/2/3/n:
Okej, förstår hur koden fungerar nu.
Left-position:
Nej, det tror jag inte, #content har ju en position (inte visad här), räcker inte det?
Fungerar utan <p> runt bilden:
Nej! Det glömde jag fråga tidigare; då kommer nämligen bilden i topp. Trodde du missförstått mig, men det var tvärtom. Med innehåll trodde jag du menade endast texten.
Användade av <br clear="all" />:
Jo, det behövs i mitt exempel, men det är ju fel. Gör man som du menar, behövs det inte.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style>
#rad{ height: 150px; top:30px; position: absolute;}
#rad2{ height: 150px; top:200px; position: absolute;}
#content .imgbank_row_12{float:left; width:150px; padding:20px 29px 0 0; min-height: 150px; height: 150px;}
#content .imgbank_row_3{float:left; width:150px; padding-top:20px; min-height: 150px; height: 150px;}
p{ position: absolute; bottom: 0px; }
body{font:68.75%/1.5 Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<div id="content">
<div id="rad">
<div class="imgbank_row_12">
<p><img src="ib_1.png" width="100" height="66" alt="on" /><br />
Bild<br />
<a href="pic2.zip" rel="external" title="Download">High resolution (1255 kb)</a><br />
<a href="pi1c.jpg" rel="external" title="Preview">Low resolution (65 kb)</a></p>
</div>
<div class="imgbank_row_12">
<p><img src="ib_2.png" width="150" height="100" alt="sson" /><br />
Bild<br />
<a href="pi4c.zip" rel="external" title="Download">High resolution (1445 kb)</a><br />
<a href="piac.jpg" rel="external" title="Preview">Low resolution (73 kb)</a></p>
</div>
<div class="imgbank_row_3">
<p><img src="pack.jpg" width="150" height="50" alt="Rfinibus" /><br />
Bild<br />
<a href="picc.zip" rel="external" title="Download">High resolution (1623 kb)</a><br />
<a href="pizc.jpg" rel="external" title="Preview">Low resolution (52 kb)</a></p>
</div>
</div>
<div id="rad2">
<div class="imgbank_row_12">
<p><img src="ib_1.png" width="100" height="66" alt="owyen" /><br />
Bild<br />
<a href="pic2.zip" rel="external" title="Download">High resolution (125 kb)</a><br />
<a href="pi1c.jpg" rel="external" title="Preview">Low resolution (45 kb)</a></p>
</div>
<div class="imgbank_row_12">
<p><img src="ib_2.png" width="150" height="100" alt="ssn" /><br />
Bild<br />
<a href="pi4c.zip" rel="external" title="Download">High resolution (145 kb)</a><br />
<a href="piac.jpg" rel="external" title="Preview">Low resolution (83 kb)</a></p>
</div>
<div class="imgbank_row_3">
<p><img src="pack.jpg" width="150" height="50" alt="Rfinis" /><br />
Bild<br />
<a href="picc.zip" rel="external" title="Download">High resolution (623 kb)</a><br />
<a href="pizc.jpg" rel="external" title="Preview">Low resolution (32 kb)</a></p>
</div>
</div>
</div>
</body>
</html>
tantenMedlem sedan nov. 20051 596 inlägg OK fungerar det som du vill nu då?
Skickar med en bild på hur IE och FF tolkar divvarna. Skulle du få problem med placeringen någon gång så finns kanske svaret där...
rödblå är FF grön är IE...
I Opera är dina länktexter svarta utan understrykning. Ska det se ut som de gör i de andra så ska du nog ange det i din css. Nu är det svårt att se att de skalle kunna vara länkar.
J.N.Medlem sedan apr. 20031 660 inlägg Jodå, det är perfekt, förutom vad du hade för tankar om left-positionen.
Jag skrev inte att det fungerade som jag vill, men det hade ju varit en bra upplysning!
tantenMedlem sedan nov. 20051 596 inlägg Egentligen hade jag ingen annan fundering än att rader som kommer under den första kan fastna i paddingen ...
Lite svårt att förklara om du inte har upplevt att någon rad börjat en bit in på sidan, utan att förstå varför. Det var därför jag skickade upp bilden.
Men det är ju också så att du egentligen inte behöver padding. Själv upplever jag det enklare att bestämma storlek på div i stället. ändrar du den till 160px så blir det ju samma sak som padding 20px... och padding top29px kan man ju lägga till i placeringen av raden...
Nåja huvudsaken är att du blivit nöjd:-)
J.N.Medlem sedan apr. 20031 660 inlägg Jo, padding etc ligger kvar, det kan man ju ta bort.
Får se hur det blir när det används.
Tack för hjälpen!
