Formater?

Hej

Du burde kigge på dette

http://matthewjamestaylor.com/blog/perfect-3-column.htm

Ideen er at man angiver alle sine ting i procenter, i stedet for pixels.

Mvh

Når du nævner formater, så tænker du på skærmopløsning?

Her er der kun to løsninger, den ene er konsekvent at bruge procentvise størrelser, og den anden er at målrette sit layout til en bredde på 1024px (og 768px i højden).

Hvis det er designfejl, som typisk opstår grundet IEs misfortolkninger, så start altid med at skrive din CSS efter den browser som bedst rammer plet på alle disse regler. Dd. er dette nok Chrome eller firefox.

Derefter kan du bruge div. hacks til at ramme designet ind til IE. Du kan også undvige hacks og bruge serveren til at teste om UA-strengen indeholder noget der kunne identificere webklienten som IE.

@Michael Larsen:

Man kan også bruge CSS3 media queries. Dog antager jeg at sværhedsgraden af dem er for høj at dømme ud fra Jacobs brug af fagord.

Men princippet kan ses i her, hvor et baggrundsbillede hentes alt efter ens skærms maks størrelse:

 /*Desktop 800x600, 1024x768, 1280x960, 1600x1200, 2048x1536*/
 @media screen and (max-device-width: 1023px)
 {
     body {
         background: #000000 url("../images/background800.jpg") no-repeat;
     }
 }
 
 @media screen and (min-device-width: 1280px) and (max-device-width: 1599px)
 {
     body {
         background: #000000 url("../images/background1280.jpg") no-repeat;
     }
 }
 
 @media screen and (min-device-width: 1600px) and (max-device-width: 2479px)
 {
     body {
         background: #000000 url("../images/background1600.jpg") no-repeat;
     }
 }
 
 @media screen and (min-device-width: 2480px)
 {
     body {
         background: #000000 url("../images/background2480.jpg") no-repeat;
     }
 }
 /*Put last to make default*/
 @media screen and (min-device-width: 1024px) and (max-device-width: 1279px)
 {
     body {
         background: #000000 url("../images/background1024.jpg") no-repeat;
     }
 }

Emil, har du en liste over hvilke browsere der supportere den slags? for så vidt jeg ved kan IE7 eller IE8 ikke den slags.

Michael:

Quirksmode siger Safari og Opera, dog var den side sidst opdateret for 23 måneder siden: http://www.quirksmode.org/css/mediaqueries.html

Dog er den sidste regel jeg har skrevet den opløsning jeg ser som standard, og derfor burde browsere der ikke understøtter media queries gå tilbage til den regel, mens dem der gør adlyder reglerne.

Men min erfaring siger Opera 9+, FF3.5+, Nyere Webkit browsere og sikker IE9. Dog skriver jeg personligt selv alt css som der minimum skal opfyldes og så kan man gå i gang med media queries bagefter. I det tilfælde jeg viser ovenfor er det for at spare loadetid på store billeder der bruges som baggrund, så derfor er det relativt simpelt at tilpasse

Hej

Du burde kigge på dette

http://matthewjamestaylor.com/blog/perfect-3-column.htm

Ideen er at man angiver alle sine ting i procenter, i stedet for pixels.

Mvh

Begge to, tak for svar!

Denne ide brugte jeg skam også i starten, men blev stærkt frarådet det. Det ser ud til at jeg skal gå tilbage til denne form

Jeg kan vel stadig presse min div mere centralt, selvom jeg bruger %. Fx:

 #top  {margin: 1% 10%;background:#CECEF6;height:11%px;border:1px solid silver;}

div#indhold {margin: 0% 25% 0% 25%;border-right:0px border-left:0px solid black;padding:0 1em;background-color:white;}
  #leftcol { position:absolute;left:10%;top:21%;width:14%px;border:1px solid silver;font-size:15px;padding:10px;background:white;}
  #rightcol { position:absolute;right:10%;top:21%;width:14%; border:1px solid silver;font-size:90%;padding:10px;background:white;}

Kunne det være en mulighed?

Når du nævner formater, så tænker du på skærmopløsning?

Her er der kun to løsninger, den ene er konsekvent at bruge procentvise størrelser, og den anden er at målrette sit layout til en bredde på 1024px (og 768px i højden).

Hvis det er designfejl, som typisk opstår grundet IEs misfortolkninger, så start altid med at skrive din CSS efter den browser som bedst rammer plet på alle disse regler. Dd. er dette nok Chrome eller firefox.

Derefter kan du bruge div. hacks til at ramme designet ind til IE. Du kan også undvige hacks og bruge serveren til at teste om UA-strengen indeholder noget der kunne identificere webklienten som IE.

Ja jeg mente selvfølgelig skærmopløsning.

Tror jeg vil tage fat i %.

@Michael Larsen:

Man kan også bruge CSS3 media queries. Dog antager jeg at sværhedsgraden af dem er for høj at dømme ud fra Jacobs brug af fagord.

Men princippet kan ses i her, hvor et baggrundsbillede hentes alt efter ens skærms maks størrelse:

CSS kode 

 /*Desktop 800x600, 1024x768, 1280x960, 1600x1200, 2048x1536*/
 @media screen and (max-device-width: 1023px)
 {
     body {
         background: #000000 url("../images/background800.jpg") no-repeat;
     }
 }
 
 @media screen and (min-device-width: 1280px) and (max-device-width: 1599px)
 {
     body {
         background: #000000 url("../images/background1280.jpg") no-repeat;
     }
 }
 
 @media screen and (min-device-width: 1600px) and (max-device-width: 2479px)
 {
     body {
         background: #000000 url("../images/background1600.jpg") no-repeat;
     }
 }
 
 @media screen and (min-device-width: 2480px)
 {
     body {
         background: #000000 url("../images/background2480.jpg") no-repeat;
     }
 }
 /*Put last to make default*/
 @media screen and (min-device-width: 1024px) and (max-device-width: 1279px)
 {
     body {
         background: #000000 url("../images/background1024.jpg") no-repeat;
     }
 }

Må nok indrømme at jeg ikke er den mest erfarne på feltet, men godt skal det nok blive

Hej Jacob,

Nu håber jeg ikke du tog min kommentar ilde op, men media queries er ret nye og i dit tilfælde vil det være bedre at bruge % (elastic) eller px (fixed).

Jeg bruger personligt næsten altid fixed width layout, men af og til også en blanding (som her på udvikleren hvor nogle elementer er fixed width mens teksten er elastic).

Som grid bruger jeg dog 960.gs, som jeg selv ser som det bedste grid system. Det er dog fixed width, mens det der linkes til i #2 er elastic.

Hej Jacob,

Nu håber jeg ikke du tog min kommentar ilde op, men media queries er ret nye og i dit tilfælde vil det være bedre at bruge % (elastic) eller px (fixed).

Jeg bruger personligt næsten altid fixed width layout, men af og til også en blanding (som her på udvikleren hvor nogle elementer er fixed width mens teksten er elastic).

Som grid bruger jeg dog 960.gs, som jeg selv ser som det bedste grid system. Det er dog fixed width, mens det der linkes til i #2 er elastic.

Tager skam intet ilde op. Jeg er skam ikke så erfaren, og kan ikke så meget endnu.

Jeg tror jeg vil blande det, som du siger.
Jeg vil bruge elastic for det meste, som du anbefaler

Lige et sidste spørgsmål, 960.gs regner jeg med er:

http://960.gs/demo.html

Hvad er fordelen ved at bruge sådan en opbygning?

Fordelene skal ikke kun ses i opbygningen, men også i at CSS'en genbruges. Det er også let at opbygge en struktur med sådan et layout.

Tjek evt. tutorials på Google, så er det lettere at forstå hvordan det bruges, og når du ser det i brug vil du måske også se det smarte i det.

Du behøves dog ikke bruge et grid system, du kan bare starte med at skrive al css selv, så kan du, når du bliver mere erfaren, bruge et GS

Fordelene skal ikke kun ses i opbygningen, men også i at CSS'en genbruges. Det er også let at opbygge en struktur med sådan et layout.

Tjek evt. tutorials på Google, så er det lettere at forstå hvordan det bruges, og når du ser det i brug vil du måske også se det smarte i det.

Du behøves dog ikke bruge et grid system, du kan bare starte med at skrive al css selv, så kan du, når du bliver mere erfaren, bruge et GS

Det tror jeg at jeg vil

Lige en sidst aller aller sidste ting - Er der nogen steder, hvor man kan se, hvor meget folk på nettet ca. bruger i skærm opløsning.

Altså, hvad skal jeg sigte efter, hvor min hjemmeside fungere optimalt? Er det fra 800x600 og så bare op? Er det så enkelt?