InferisMedlem sedan sep. 2000670 inlägg På bilden ser ni hur det ser ut i Internet Explorer 6 o 7.
Där ser det bra ut, förutom att texten är för långt ifrån grafen på båda hållen.
Men hur gör man för att Firefox och Opera ska visa det ordentligt?
Som det är på bilden längst ner vill jag ha det.
<style>
dl {
margin: 0;
padding: 0;
}
dt {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: right;
}
.dt2 {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: right;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: left;
}
dd {
position: relative; /* IE is dumb */
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background: url("grafik/g_colorbar.jpg");
}
* html dd { float: none; }
/* IE is dumb; Quick IE hack, apply favorite filter methods for
wider browser compatibility */
dd div {
position: relative;
background: url("grafik/g_colorbar2.jpg");
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url("grafik/g_marker.gif");
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}
</style>
<dl>
<dt>Max</dt><dt class=dt2>McDonalds</dt>
<dd>
<div style="width:25%;"><strong>25%</strong></div>
</dd>
</dl>
<dl>
<dt>Malmö</dt><dt class=dt2>Köpenhamn</dt>
<dd>
<div style="width:50%;"><strong>50%</strong></div>
</dd>
</dl>
<dl>
<dt>Hund</dt><dt class=dt2>Katt</dt>
<dd>
<div style="width:75%;"><strong>75%</strong></div>
</dd>
</dl>
InferisMedlem sedan sep. 2000670 inlägg Nu försöker jag lära mig css. Får inte installera FF på jobbdatorn.
colioneMedlem sedan juni 20014 421 inlägg Som vanligt ger Fuel inte mycket konstruktivt i sina inlägg, killen bad om hjälp om hur han får det att se bra ut i FF och Opera. Inte en guide till hur du installerar FF på jobbdatorn. Nu kan jag tyvärr hjälpa dig lika lite som Fuel har gjort, då det var längesen jag pillade med CSS. Men det hade varit trevligt att se folk som faktiskt kan detta ge svar.
zcorpanMedlem sedan dec. 20042 245 inlägg Varför inte använda en tabell?
InferisMedlem sedan sep. 2000670 inlägg
zcorpan skrev:
Varför inte använda en tabell?
För att jag vill lära mig att göra en sida utan tabeller.
Det kanske går bättra att använda <div> istället för <dl>?
zcorpanMedlem sedan dec. 20042 245 inlägg Men det handlar inte om att banna tabeller. Det handlar om att använda rätt element för rätt tillfälle. Nu är det inte säkert jag har förstått exakt vad det är för information du försöker framhäva men <dl> verkar inte rätt i det här fallet.
Menar du "Jag gillar Max mer än McDonalds, är likgiltig mellan Malmö och Köpenhamn, och gillar katt mer än hund."?
Om det är en graf kanske du borde använda en bild istället (PNG eller SVG) och använda förståelig alternativtext som fallback.
Det jag vill komma till är att man använder inte CSS för att använda CSS eller för att undvika tabeller utan man använder det för att separera presentation från innehållet så att man får möjlighet att använda HTML på rätt sätt.
CompusaMedlem sedan jan. 20023 327 inlägg
zcorpan skrev:
Det jag vill komma till är att man använder inte CSS för att använda CSS eller för att undvika tabeller utan man använder det för att separera presentation från innehållet så att man får möjlighet att använda HTML på rätt sätt.
Exakt. För tabulärdata är det helt okej att använda tabeller.
InferisMedlem sedan sep. 2000670 inlägg Tack ändå. Jag ville bara lära mig hur man gör det där utan tabeller, för tabeller kan jag redan.
Datan hade jag tänkt skulle vara dynamisk, därför kan man inte använda bilder. Grafen visar vad man gillar bäst av tex Malmö - Köpenhamn.
zcorpanMedlem sedan dec. 20042 245 inlägg
Inferis skrev:
Datan hade jag tänkt skulle vara dynamisk, därför kan man inte använda bilder.
Varför inte? SVG har samma "dynamik" som HTML.
zcorpanMedlem sedan dec. 20042 245 inlägg InferisMedlem sedan sep. 2000670 inlägg Hade tänkt att börja med css.
zcorpanMedlem sedan dec. 20042 245 inlägg Låter klokt. :)
Även om jag förmodligen skulle använt en tabell i det här fallet kan jag ändå visa hur det kan gå till "med divar".
För varje rad har du en div, vari du har den vänstra texten i en egen div, grafen i en bild, och den högra texten i en div. Sen anger du rätt bredd för de inre divarna (förslagsvis med "em", eller åt minstone för textdivarna), samt float:left.
Grafen i sig själv har du redan klarat så det är bara göra på motsvarande sätt. (y) Det du kan tänka på dock är att också ange bakgrundsfärg så det funkar även utan bilder.
