webForumDet fria alternativet
Logga in / Bli medlem

produktvisning

HTML & CSSur HTML, XHTML & CSS

19 svar · 911 visningar · startad av eriks

eriksMedlem sedan apr. 20011 418 inlägg
Frågan#1

Hej,

Jag ska visa ett gäng produkter från en databas. Det blir en bild med en ram runt och en beskrivande text under. Jag tänkte för div och började genom att lägga ramen som en bakgrundsbild (no-repeat), bilden på denna och sedan texten under. Problemet blir height då texten kan vara olika lång. Min-height fungerade inte heller så bra, då blev det ibland trubbel med att en produkt kunde skymma en produkt som låg under.

Är det bättre att använda tables för detta? Då blir ju automatiskt hela raden så hög som den högsta produkten. Känns bra, men det blir lite klurigt. Produkt och produkttext läggs fördelaktigast i var sin ruta, för då kan man centrera bilden mot bakgrunden (om man har text i samma ruta vet vi ju inte riktigt vad centrum kommer). Men när man då ska loopa upp produkterna från databsen så måste vi ju först ladda fem bilder, sen deras fem texter osv osv. Dett är väl ganska lätt löst, men det hade varit mycket lättare om man kunde ladda bild och text tillsammans.

Eller finns det bättre förslag?

Mvh Erik

doggelitoMedlem sedan juni 20003 076 inlägg
#2

Flytande divvar är snyggt tycker jag.
Det kräver dock lite mer av tekniken bakom.
För att det ska bli snyggt så måste bilderna vara någorlunda lika stora samt att textmassan bör vara ungefär lika långa till varje produkt.
Bildstorleken kan man styra via streaming och texterna går att kapa vid x antal tecken, alt. att man har ett extra fält när man skapar produkterna som bara får innehålla x antal.

Om du kollar på min sida, http://www.krambutiken.se så ser du hur jag menar.
På startsidan så ligger det tre erbjudanden som flyter brevid varandra.

eriksMedlem sedan apr. 20011 418 inlägg
#3

Ja det ser snygg ut, fungerar dock dåligt om man har textstorlek störst. Då överlappar saker varandra och allt syns inte.

eriksMedlem sedan apr. 20011 418 inlägg
#4

Bumpar upp tråden lite. Detta är ju ett ganska vanligt fenomen, så här måste väl finnas många åsikter?

Gjorde en liten jämförelsestudie:

Cdon.com har både en div och 3 tabeller för varje produkt. Verkar så krångligt att jag inte sätter mig in i detta närmre.

Åhlens har ett system som jag tycker ser väldigt bra ut. Designen är en tabell per rad. Jag förstår dock inte varför de inte har flera rader i varje tabell...

Finns det egentligen något stort motargument till att använda tables här? Annars tycker jag det verkar ganska passande.

bossseMedlem sedan juni 2003771 inlägg
#5

Du kan faktiskt spärra storleksändring av texten med css
Kanske inte så bra för dem med dålig syn, som VILL ha större text, men en lösning finns alltså.
(På Cdon.com kan man ju inte ändra textstorlek, orkar dock inte kolla igenom deras kod)
Har gjort ett exempel nedan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title>CSS-test</title> 
<style type="text/css"> 
body 
{background-color:lightgreen; font-family:Arial, Helvetica, sans-serif; font-size: 16px; color:red;} 
table 
{width:400; height:200; background-color:lightblue; border:2px solid black; color:blue;} 
</style> 
</head> 
<body> 
Denna text går ej att ändra med hjälp av "Visa, Textstorlek" 
<BR> 
<BR> 
<table> 
<td> 
Textstorleken i tabellen går däremot att ändra 
</td> 
</table> 
</body> 
</html>
zcorpanMedlem sedan dec. 20042 245 inlägg
#6

bossse, det verkar som din värld kretsar kring IE6 och quirks mode...

eriksMedlem sedan apr. 20011 418 inlägg
#7

Tackar vänligast för tipset, men problemet är inte bara storleksändring utan även att det kan bli mer eller mindre produkttext på olika produkter, och därav olika höjd. Så även om man stänger av textstorlek kvarstår problemet.

bossseMedlem sedan juni 2003771 inlägg
#8

Vad jag kan se så har både Åhlens och Cdon.com samma DOCTYPE som jag!
Nu var det dock inte till någon hjälp för Eriks.

doggelitoMedlem sedan juni 20003 076 inlägg
#9

Till Åhlensvarianten med tre produkter per rad så behövs 4 divvar, ingen tabell! :)

.box {
     clear:both;
}
.box div {
     float:left;
     width:100px;
     margin:0 10px 10px 0;
}
.box div img {
     display:block;
}

...

<div class="box">
     <div><img .../>text1 text1 text1</div>
     <div><img .../>text2 text2 text2</div>
     <div><img .../>text3 text3 text3</div>
</div>

Bara att loopa ut och modda efter var tredje produkt med ny box! :)

eriksMedlem sedan apr. 20011 418 inlägg
#10

Det fungerar dessvärre dåligt när de blir olika höga. Se nedan exempel, där jag förusätter att jag har satt width för box så att det blir tre produkter i bredd. 1an kommer bli så hög så att 4an, som egentligen borde ligga till vänster under 1an, istället floatar på högra sidan.

<div class="box">
     <div><img .../>Produkt 1 . Denna har jättelång text så den kommer att fylla en massa länst ute till vänster.</div>
     <div><img .../>Produkt 2 - Kort text</div>
     <div><img .../>Produkt 3 - Kort text</div>
     <div><img .../>Produkt 4 - Kort text</div>
     <div><img .../>Produkt 5 - Kort text</div>
</div>

Krånglar inte css till det? Är det inte bättre att använda tabeller? en tr blir ju alltid så hög som dess högsta td.

JAreMANNENs avatarJAreMANNENMedlem sedan aug. 20002 272 inlägg
#11

Då kontrar jag helt enkelt med att säga att du inte ska ha produkttexten på "produktöversikten" som kan påverka dess höjd.
Sådär, nu är ditt "problem" löst :)

eriksMedlem sedan apr. 20011 418 inlägg
#12

JAreMANNEN skrev:

Då kontrar jag helt enkelt med att säga att du inte ska ha produkttexten på "produktöversikten" som kan påverka dess höjd.
Sådär, nu är ditt "problem" löst :)

Hmm, jag är rädd att jag inte förstår riktigt. Men om du menar att jag inte ska ha produkttexter som är olika långa så går det tyvärr inte, då texterna är användargenererade (och jag vill inte bryta av dom mitt i, har hellre olika höjd.)

JAreMANNENs avatarJAreMANNENMedlem sedan aug. 20002 272 inlägg
#13

eriks skrev:

Hmm, jag är rädd att jag inte förstår riktigt. Men om du menar att jag inte ska ha produkttexter som är olika långa så går det tyvärr inte, då texterna är användargenererade (och jag vill inte bryta av dom mitt i, har hellre olika höjd.)

Nej jag menar inte att du måste ha lika långa produkttexter.
Det jag menar är att på sida 1 visar du alla produkter med bild, namn, pris och kanske en köp-knapp vad vet jag :)
Sen på sida 2 (informationssida om produkten) har du hela produkttexten.

Det blir inte snyggt (helt personlig åsikt) om man listar massa produkter med olika höjd på själva "produktblocken".

dAEks avatardAEkMedlem sedan feb. 20041 816 inlägg
#14

Jag undrar också hur en lösning skulle kunna se ut. Har hittills haft turen att slippa varierande textlängd däremot har det funnits krav på att bilderna ska kunna vara olika höga, dock med maxhöjd så det var inga problem.

Som sagt, finns det en lösning som även funkar i IE 6 vore det jäkligt intressant att se en sådan.

Förtydligande: Det gäller alltså då man inte vill ange hur många poster som skall visas per rad, så dogges exempel går inte att applicera.
Jag tänker mig en lista där li är satt till float: left och automatiskt hoppar ned till raden under om de inte får plats.

eriksMedlem sedan apr. 20011 418 inlägg
#15

Jag har ju ett eget förslag på att använda tabeller. Är det inte just detta tabeller ska användas till egentligen? Eller är det värt att trixa för att få en lösning med divar?

doggelitoMedlem sedan juni 20003 076 inlägg
#16

eriks skrev:

Se nedan exempel, där jag förusätter att jag har satt width för box så att det blir tre produkter i bredd. 1an kommer bli så hög så att 4an, som egentligen borde ligga till vänster under 1an, istället floatar på högra sidan.

Du missförstod min kod.
Du ska ha en box på varje rad, ex:

<div class="box">
     <div><img .../>Produkt 1 . Denna har jättelång text så den kommer att fylla en massa länst ute till vänster.</div>
     <div><img .../>Produkt 2 - Kort text</div>
     <div><img .../>Produkt 3 - Kort text</div>
</div>
<div class="box">
     <div><img .../>Produkt 4 - Kort text</div>
     <div><img .../>Produkt 5 - Kort text</div>
</div>

eriks skrev:

Jag har ju ett eget förslag på att använda tabeller. Är det inte just detta tabeller ska användas till egentligen? Eller är det värt att trixa för att få en lösning med divar?

Självklart får du använda tabeller om du vill! :) Det är ju din sida!
Men i detta fall behövs det ej.

eriksMedlem sedan apr. 20011 418 inlägg
#17

Jamen se det där fungerade ju bra!

doggelitoMedlem sedan juni 20003 076 inlägg
#18

Weeii, skål för det! :bire
Själv har man börjat smuttat på en Speyburn, 10 årig. Ganska okey faktiskt! Och rätt billig! :)

eriksMedlem sedan apr. 20011 418 inlägg
#19

Det är du värd :) Jag sätter med istället med en cola och börjar lägga in koden!

eriksMedlem sedan apr. 20011 418 inlägg
#20

Tillägg: Jag hade problem att jag inte fick radbryt efter sista diven (när jag ville börja med annat material) i IE, det löste jag med <br clear="all">

132 ms totalt · 3 externa anrop · v20260731065814-full.4bcf49fe
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)