hvorfor ikke CSS på hjemmesider ?

Hvis man ønsker at folk med browserversion ældre end Internet Explorer 4 eller Netscape 4 skal kunne se siden korrekt. I dag er det vist en ret teoretisk begrundelse. Ellers er der ingen grund til ikke at bruge CSS.

Ok men der findes vel tilfælde ( ud over support af antikke browsere ) hvor tables, iframes eller frameset er at foretrække - eller kan noget CSS ikke kan ?

Du kan sagtens bruge CSS sammen med tables, iframes og frameset.

Det du tænker på er nok det, der kaldes "tableless design", hvor folk sværger til at man skal bruge <div> til sit layout i stedet for den gode gamle layout-via-<table>. CSS er imidlertid så meget mere end og andet end bare det.

Har lavet hjemmesider siden jeg var 15 og siden CSS kom frem og populært, kan jeg ikke finde nogen grund til ikke at bruge det - det skulle da lige være hvis man kun vil gøre det mere besværligt for sig selv (eller som schwarz84 skriver, laver hjemmesider til ældre browsere)

<ole>

Som jeg i det andet spm. nævnte - med hensyn til f.eks. admin-moduler - er der ting, som frames er uovertrufne til.
Ligeledes er der situationer, hvor det ville være tåbeligt at skrive alenlange CSS- og JS-koder ... blot for at undgå at bruge en enkelt tabel.

Bevidst at undgå CSS, vil jeg dog mene, svarer til at insistere på at undgå el - og i stedet bruge petroleums lamper og hente sit vand i en brønd  :)

/mvh
</bole>

Der findes overhovedet ingen grund til i dag at skrive html-kode uden at bruge css ...

-- men det er dog nødvendigt at være opmærksom på, at styles kun kan sættes på html-elementer, hvorfor enhver grundlæggende struktur på ens website skal udføres med html-elementer ...

-- dem findes der en mylliard af, som har vidt forskellige grundegenskaber, hvoraf nogen kan modificeres via f.eks. css i en eller flere browsere, nogle endda i alle nutidige browsere !-)

-- men nogle ting kan ikke modificeres i alle nutidige browsere, og de fleste af den slags findes i den mest udbredte browser, hvor ikke engang næste generation overhovedet overvejes at implementere disse muligheder ...

Eksemplet tables er en rigtig god mulighed, for man kan med css i alle browsere sørge for at den slags (block-level) elementer centreres horisontalt i browsere, man kan erstatte alle de gamle (og deprecatede !-) cell-properties med andre css-properties for f.eks. padding og border m.m.m.

-- men du kan _ikke_ f.eks. centrere vertikalt, hvis ikke en ting ligger i en tabel-celle, ligesom det kun er tabelrækker, der har den egenskab at alle børn (tabelceller i rækken !-) har lige stor højde ...

-- altså kan man skrive langt enklere tabelkode ved at bruge css, men man kan ikke opnå det samme ved at skrive kode uden tabeller, uanset hvor mange hundrede linjer, man tilføjer i sin css-kode !o]

Det var lige den salgs ting jeg ledte efter.. :-) Som jeg skrev i mit første indlæg kom denne tråd i forlængelse af en tidligere hvor jeg spørger til råd om framesets.. Det har jeg gjort her og andre steder og omend jeg er meget enig i at CSS er at foretrække når det er muligt undre det mig lidt at alle per definition siger at det skal jeg bare lave i CSS når nu alt tyder på det ikke kan lade sig gøre ( og ingen kan vise mig fungerende eksempler på det ) - Synes også det er sjovt at se at store og respekterede sider som f.ks. gmail bruger framesets til deres side, eller at Aplle.com bruger tables til deres design... Hvordan kan det være.... Har de ansat inkompetente kodere eller ER CSS ikke lige fantastisk til alt !? - Jeg har haft en konkret problem hvor jeg ikke har kunnet få det til at virke med CSS og derfor har valgt et frameset. Ingen har kunnet vise mig en skitse hvor det fungere med CSS eller et link til en side der fungere på samme måde med CSS, alligevel fraråder alle mig at bruge framesets og siger jeg skal bruge CSS - Det er da underligt :-) - Jeg er ikke ude på at pege fingre af nogle eller noget, prøver simpelthen bare som amatør at lære og forstå :-)

Jeg har i øvrigt en gang fundet på en måde hvormed man kan positionere ting vertikalt med ren CSS :-)

Vil da lige tilføje at  flere herinde har kommet med meget gode og hjælpsomme svar - tak for det :-)

Jepz, men det er vist også en tur rundt om Pluto: http://www.wpdfd.com/editorial/thebox/deadcentre4.html !-)

Ja, men den metode har den ulempe at indholdet forsvinder ud af venstre side og toppen hvis browseren bliver for lille :-) - DEt gør min ikke.. - Der er dog sikkert en masse andet der er usmart ved den måde jeg fandt frem til... Om ikke andet er det en anelse besværligt og så er jeg usikker på om det virker ordentlig i IE da den vist ikke forstår min-width/height ( og så er man jo lige vidt - og sikkert også derfor jeg aldrig har set det brugt nogle steder :-) ) - Men kan da lige prøve at poste koden :


<html>

<head>
<style type="text/css">
body        { background-color: #000000;
              margin: 0px 0px 0px 0px;
              padding: 0px 0px 0px 0px;
              overflow: auto;
              text-align: center
              }

#buffer1    { width: 100%;
              height: 50%;
              min-height: 246px;
              background-color: black;
              position: absolute;
              top: 0px;
              left: 0;
              margin: 0px 0px 0px 0px;
              overflow: visible;
              z-index: 2
              }
             
#buffer2    { width: 100%;
              min-width: 852px;
              height: 246px;
              background-color: black;
              position: absolute;
              bottom: 0px;
              margin: 0px 0px 0px 0px;
              overflow: visible
              }
             
#buffer3    { width: 50%;
              height: 492px;
              position: absolute;
              top: 0px;
              right: 0px;
              margin: 0px 0px 0px 0px
              } 
             
#content      { width: 852px;
                height: 492px;
                margin: 0px 0px 0px -426px;
                background-color: red;
              }                           
             
</style>

</head>

<body>


<div id="buffer1">
  <div id="buffer2">
      <div id="buffer3">
        <div id="content">
        </div>
      </div>
  </div>
</div>



</body></html>

Faldt i øvrigt lige over dette spænende link - Nogle kommentarer ? - Kan ikke helt overskue det selv nemlig, men ser da lidt spænende du :-)

http://dean.edwards.name/IE7/intro/

Den slags libs passer ikke til mine kodevaner - men det er en helt personlig betragtning  :)

Libs ? :-D

Kode-biblioteker (code-libraries !-)

Ahh ok :-) - Ja synes måske heller ikke det lader til at være den bedste løsning, men kan ikke helt overskue det, så var lige interesseret i en kommentar :-)

Hvad med mit CSS centrerings eksempel.. Er det hel hen i vejret ?

-- det kan gøres meget enklere (og så forsvinder det ikke ud over venstrekanten !-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{width:852px;height:492px;margin:0 auto;border:1px solid red;}
</style>
<title>Centreret site</title>
</head>
<body>
<div id="site">
  &nbsp;
</div>
</body>
</html>

Hmm.. Mit eksempel forsvinder heller ikke ud over venstre kanten da !? - Måske i IE men ikke i FF på mac i hvert fald... Men ok, hvis det både kan gøres enklere og ikke virker i IE er det nok ikke så smart :-D - Vil lige prøve dit eksempel :-)

-- bemærk, at IE/Mac ikke på ret mange måder kan sammenlignes med IE/Win, så den kan du ikke bruge som sandhedsvidne til andet end at M$ lavede en elendig browser til det styresystem !-)

He he - Nej taler ikke om IE til mac - den regner jeg slet ikke for en browser ! :-D - Det jeg mente er at jeg forventer at mit eksempel oven over ikke vil virke ordentligt i IE til PC da den så vidt jeg ved ikke forstår min-width/height - Da det netop er min-width/height der forhindre content div'en i at forsvinde ud af vestre side eller toppen på skærmen troede jeg måske at du havde set mit eksempel i IE til PC når du skriver at den forsvinder - det gør den nemlig ikke i FF/mac eller Safari på min maskine :-)

Men altså... Det er jo tydeligt at se bare ved at kigge på koden at dit eksempel er simplere :-D

Hmm.. Nu har jeg så lige prøvet dit eksempel og den centrere jo kun horisontalt hvor mit gør det både vertikalt og horisontalt ! - Desuden kan jeg se at du centrere ved at bruge en auto margin - dette fungere så vidt jeg ved heller ikke i IE/PC - gør det ?

-- margin:auto; fungerer glimrende i ie6+, _hvis_ man medtager en fuld doctype ...

-- hvis du også vil centrere lodret, skal du nok rundt om det link, jeg lagde @24/01-2006 02:20:29 ...

-- dog er der ikke det fjerneste til hinder for, at du lægger det egentlige indhold ind i en tabelcelle, der jo så vil kunne centrere det !-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{width:852px;height:100%;margin:0 auto;}
#site div{height:492px;color:red;text-align:center;border:1px solid black;}
</style>
<title>Centreret site</title>
</head>
<body>
  <table id="site">
    <tr>
      <td>
        <div>
          Her er så det centrerede indhold
        </div></td>
    </tr>
  </table>
</body>
</html>

Ok, var ikke klar over at margin:auto fungerede i IE6+ - Dejligt at vide.. Med hensyn til resten så kender jeg godt metoden med at centrere vertikalt enten med en tabel eller på den måde det forklares i dit link @24/01-2006 02:20:29

Pointen med mit lille eksempel var en alternativ måde at gøre det på hvor man ikke behøver en tabel, og hvor indholdet ikke forsvinder ud af venstre side eller toppen hvis browseren bliver for lille, som det gør i eksemplet du linker til @24/01-2006 02:20:29 :-)

Da jeg samtidig er nybegynder ville jeg bare gerne lige have en kommentar til mit eksempel - er det en smart måde, en dum måde ? - Virker det i IE f.eks. ( eller kan det komme til det osv. ) :-)