Skærmopløsning med CSS.

Ovennævnte virker svjv. kun i Internet Explorer...

Og nej, du kan ikke vælge CSS efter skærmopløsning. Du kan dog med JavaScript finde brugeresn skærmopløsning og derefter vælge det CSS-ark der skal vises.

Iøvrigt er selve skærmens opløsning fløjtende ligegyldig, det er vinduets størrelse der er spændende!

---> "Iøvrigt er selve skærmens opløsning fløjtende ligegyldig, det er vinduets størrelse der er spændende!"

prøv at læse denne
http://www.thepattysite.com/window_sizes1.cfm

Var det til mig?

Jeg er godt klar over at et site ikke kan se ens ud i alle browsere, men vinduets størrelse er vel relevant hvis du skal have et baggrundsbillede, eller gerne vil positionere elementer ud fra vinduets bredde.

Den artikel er iøvrigt temmelig gammel og forældet, især det omkring udskrift på http://www.thepattysite.com/window_sizes4.cfm er noget sludder med de CSS muligheder der er for medievalg.

Alle sider kan tilpasses med CSS så de kan udskrives på printer.

Nej...den var til frank :-) ...
til at underbygge din udtalelse...

Ja... den er ældre og nogle af tingene bæger præg deraf....men meget af det er stadigt meget sandt....
Bla det med at opløsninge er ligyldig ...(Mine vinduer er feks. næsten aldrig fuldskærm)
og feks det med folk med meget lille opløsning nok alligevel er vant til at scrole hrizontalt..osv.
og så er der nogle næsten evigt gyldige sandheder som folk ofte glemmer...

oki :)

Denne artikel er endnu ældre, men ser man bort fra statistikken fortæller den ca. samme historie:

http://html.dk/artikler/00025/

Undskyld men er ret nybegynder på dette område... Hvis jeg går ind på www.bookinghuset.dk, højreklikker og vælger "vis kilde" får jeg bl.a. følgende:
-----------------------------------------------------------
<link rel="stylesheet" href="/includes/bookinghuset_blue.css" media="screen" title="Bookinghuset" type="text/css">
<link rel="stylesheet" href="/includes/udskrift.css"  id="print_all" media="print" type="text/css">
<link rel="stylesheet" href="/includes/udskrift_repertoire.css" disabled id="print_rep" media="print" type="text/css">
<link rel="stylesheet" href="/includes/800x600.css" media="screen" id="smallcss" disabled type="text/css">
-----------------------------------------------------------
Jeg aner ikke hvordan det virker... Om det er lavet med script eller hvad, men siden er i hvert fald meget anderledes hvis jeg laver mit vindue mindre...
Mit spørgsmål er bare... Hvordan er det lavet???

Kig på http://www.bookinghuset.dk/includes/bookinghuset.js

Der disabler/enabler de forskellige stylesheets alt efter vinduestørrelse. Jeg ville dog lave et tjek på avalWidth og availHeight i stedet. Der tages nemlig højde for den tilgængelige plads.

Du kunne også lave en document.write('stor.css'); direkte i JavaScript.

avalWidth = availWidth

<ole>

Du vil med garanti ikke lære noget af www.bookinghuset.dk - da det er skrevet af en inkompetent koder. Vedkommende har f.eks. disabled de væsentligste dele af CSS i dokumenterne ... så han har i hvert fald ikke en viden om CSS, der er værd at udbrede  :)

/mvh
</bole>

Øhhh jo, jeg tror egentligt godt at jeg vil lære noget af bookinghuset... Har prøvet at lege lidt med det, men kan ikke få det til at virke...
Kunne godt tænke mig at vide præcis hvor mit script og min HTML kode skal se ud...
Nogen der kan hjælpe mig??

Nu har jeg fået det til at virke...
Men hvis der er nogen der kan lave følgende script om så det passer til 3 størrelser ville det være rigtigt godt...
-----------------------------------------------------------
function checkSize() {
    var h = document.body.clientHeight;
    var w = document.body.clientHeight;
    if (h < 465) {
        document.getElementById('smallcss').disabled = false;
    } else {
        document.getElementById('smallcss').disabled = true;
    }
}
-----------------------------------------------------------
Altså hvis vinduet er mindre end f.eks. 465 pixels skal smallcss køres. Hvis det er mellem 465 og 800 pixels skal mediumcss køres og hvis vinduet er større end 800 pixels skal largecss køres...

1. hvorfor sætter du både 'w' og 'h' lig med body'ens højde?
2. hvad det faktisk er, du måler på (og dermed resultatet), afhænger af browser og din øvrige kode.

Det er ikke til at sige, hvad du skal skrive. Det kræver, du fortæller, om det er body-højden eller viewport-højden, du vil måle - hvilken DTD du bruger - samt om du eksplicit sætter højde på body-elementet

Øhh ok Ole... Kan jeg få oversat det til dansk?? Har vist sagt at jeg er ret nybegynder på dette område. *GG*
Det overstående script er tyv stjålet fra bookinghuset og er det eneste mit script består af.
Starten af min HTML kode ser sådan ud:
-----------------------------------------------------------
<link rel="stylesheet" href="STYLE/large.css" media="screen" type="text/css">
<link rel="stylesheet" href="STYLE/small.css" media="screen" id="smallcss" disabled type="text/css">
<script type="text/javascript" src="STYLE/script.js"></script>
</head>

<body  onload="checkSize()" onresize="checkSize()">
-----------------------------------------------------------
Det er så dette jeg vil have lavet om så den tjekker 3 vindue størrelser... Håber at nogen kan/vil hjælpe mig. ;-)

I øvrigt virker det ikke alligevel. Af en eller anden grund bliver begge CSS filer kørt. Først den der hedder large.css og så small.css ovenpå... Øvøv...

tak olebole ;)
hehe...

Det er så mig der er den inkompetente koder bag bookinghuset.dk

det med w er clientheight, har jeg bare glemt at fjerne, den slags sker jo...

Og så er siden faktisk udemærket kodet...

Men tak for de bevingede ord.

frank74
Du skal huske at disable det stylesheet du ikke skal bruge.

mit 800x600 stylesheet ligger sig ovenpå, og fikser nogle detaljer på siden hvis det er nødvendigt.

Incorrect key file for table: 'bookinghuset_sessions'. Try to repair it

bobslaede> Der er ikke nogen <DOCTYPE> på siden. Dette er en meget graverende fejl. Måske det er det Ole hentyder til?

el_barto:
Jeg har lige lidt problemer med serveren..

Jeg ved godt det med DTD'n, og går også ud fra det er det ole hentyder til... har haft den diskussion med ham før. :)

bobslaede -> Så ku' du være der. ;-) Jeg har ingen anelse om du har gjort noget forkert med Bookinghusets hjemmeside. Men jeg synes at det virker rigtigt godt og det ser også fedt ud. Håber ikke at det gør noget at jeg tyv stjæler lidt fra den. :-)
Men som du kan se kan jeg ikke rigtigt få det til at virke... Min side er bygget op på nogenlunde samme måde som din. Men min venstre side køre bare hele vejen ned og så er der en fast bundlinie også. Håber du forstår hvad jeg mener. :-)
Jeg vil gerne have det sådan at hvis vindue størrelsen er for lille, forsvinder bundlinien. Men det sker bare ikke da siden "husker" at den skal være der fra min "large.css" stylesheet...

Så skal du lave en onResize="opdaterCSS()" eller noget i den stil på <body> elementet.

Jeg mener at kunne huske nogle bugs med at browseren husker den foregående css...
Du kan evt. gøre at det at du fjerne linket til dit stylesheet helt, og se om det hjælper.
tjek nogle dom funktioner, f.eks. createElement, removeNode, appendNode og lidt der omkring.
Jeg har ikke selv testet om det evt. kunne løse det, men jeg kunne forestille mig at fjerne stylesheetet helt, og indsætte det igen, måske kunne gøre tricket.

bobslaede >> hvornår har det dog været god kode at disable CSS' box-model i IE? Desuden er der først tale om et HTML-dokument, når det begyndes med en DTD. God 1997-kode ... men vi skriver altså 2005  ;o)

Derudover bruger du skift af CSS-klasser, der jo som bekendt er noget af det mest elendigt performende, man kan foretage i en browserklient.
Når du skifetr en CSS-klasse, skal browseren starte helt forfra med at beregne hele sidens CSS - og rendere derefter. Ved et lidt mere komplekst dokument, kan det tage flere sekunder.
I stedet bør man altid skifte de aktuelle style-properties på elementet.

Hvorfor i øvrigt target'e alle html-tags, der ligger under et hvilket somhelst tag:

* html    {
    overflow:hidden;
    z-index:1;
}

- hvad er det for et tag, du mener, html-tag'et kan ligge under? For der er vel en grund til, du skriver, som du gør?

Nej, den er absolut ikke kodet udmærket ... uanset, hvem den inkompetente koder bag, måtte være  :)

Jeg tror bare at jeg lukker mit spørgsmål her... Jeg får jo nok ikke svar alligevel... Tak for jeres forsøg, men jeg skal altså have noget jeg kan "copy-paste". ;-)
I er velkomne til at fortsætte jeres diskution...

tsk tsk tsk olebole...
* html element {} er et IE hack..
der er nemlig ikke noget over html, så derfor virker dette ikke... lige med undtagelse af i IE, for den tror nemlig at dette fiktive "øverste" element findes...

Skift af CSS-klasser???

Som i at jeg skifter stylesheet? Jeg skifter dem jo ikke rigtigt, jeg lægger bare et over, og fjerner det igen så det er nødvendigt...

Der er først tale om et html dokument, når <html> tagget er der, hahah ;)

Stopper vi nu? Du har intet at holde det der pjat i... Jeg gider egentligt heller ikke at høre på dine DTD'er mere, hvis det virker, som det jo gør, må jeg jo have gjort noget rigtigt?
Jeg vil fortsætte med at lave sider i quirksmode, og mega hacke mit css, indtil IE fatter hvad det handler om.

tak...