Olika design css

15 svar · 1 070 visningar · startad av Inferis 16 dec. 2006

InferisMedlem sedan sep. 2000667 inlägg

Frågan16 dec. 2006 20:15#1

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>

FuelMedlem sedan okt. 20001 285 inlägg

18 dec. 2006 12:25#2

...

InferisMedlem sedan sep. 2000667 inlägg

18 dec. 2006 13:38#3

Nu försöker jag lära mig css. Får inte installera FF på jobbdatorn.

FuelMedlem sedan okt. 20001 285 inlägg

18 dec. 2006 14:24#4

...

colioneMedlem sedan juni 20014 421 inlägg

18 dec. 2006 14:28#5

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

18 dec. 2006 15:10#6

Varför inte använda en tabell?

InferisMedlem sedan sep. 2000667 inlägg

18 dec. 2006 18:45#7

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

18 dec. 2006 19:03#8

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

18 dec. 2006 20:01#9

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.

FuelMedlem sedan okt. 20001 285 inlägg

18 dec. 2006 21:28#10

...

InferisMedlem sedan sep. 2000667 inlägg

18 dec. 2006 22:59#11

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

18 dec. 2006 23:40#12

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.

InferisMedlem sedan sep. 2000667 inlägg

19 dec. 2006 11:26#13

Vad är SVG?

zcorpanMedlem sedan dec. 20042 245 inlägg

19 dec. 2006 13:50#14

Ett vektorgrafikformat i XML. http://www.w3.org/Graphics/SVG/

InferisMedlem sedan sep. 2000667 inlägg

19 dec. 2006 14:12#15

Hade tänkt att börja med css.

zcorpanMedlem sedan dec. 20042 245 inlägg

19 dec. 2006 16:45#16

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.