Avatar billede Masi99 Nybegynder
13. august 2011 - 14:22 Der er 19 kommentarer

Opløsning på hjemmesider

Hej
Jeg har siddet og kodet lidt på et projekt, det skulle være en simpel siden uden så meget grafik m.m.

Da jeg var færdig og jeg var tilfreds med mit arbejde, skulle jeg åbne det på en ældre pc, hvor skærmopløsningen ikke var særlig høj, og man skulle scrolle hele tiden for at se det hele.

Hvordan laver jeg det om, så det også virker nogen lunde optimalt på ældre computere?

Ps link til siden kommer her: http://kulturcafe-assens.webatu.com/

Håber i kan hjælpe :)
Avatar billede claes57 Ekspert
13. august 2011 - 16:56 #1
lav en version som fx ekspertens ca 1065 bredde, og hvis brugers skærm er smallere, så kør over på en 'mobil' version på den halve bredde. Så kan også ældre smartphones være med.
Avatar billede Masi99 Nybegynder
13. august 2011 - 18:39 #2
Ja, men hvordan hvilken kode/tag/script skal jeg bruge og hvor i dokumentet skal det skrives?
Avatar billede Slettet bruger
13. august 2011 - 21:06 #3
Du resizer bare dit browservindue - det er gratis : )

Jeg har et baggrundsbillede på mit skrivebord, med "rammer" der angiveer de forskellige skærmstørrelser - så er det let at lyn-teste.

"Ideelt set" skal dit site bare flyde ud og fylde den plads der er til rådighed.

Det kaldes ofte "liquid layout", og er ikke helt let, men meget tilfredsstillende når det spiller : )

I dit tilfælde, kunne du angive bredden af #sideboks som: width:100%; i stedet for fast 1450px

Du skal bare tilføje denne CSS: html,body {width:100%;}
- Så de andre/indre elementer (her sideboks) har noget at relatere sin bredde % til.
Avatar billede Masi99 Nybegynder
14. august 2011 - 11:14 #4
Hej tak for hjælpen
Hvad betyder "reizer"

Eller skal jeg bare angive det i procent i stedet for px.
Avatar billede Masi99 Nybegynder
14. august 2011 - 11:21 #5
Tak for hjælpen Tom og Claes. Har fundet ud af det nu.

Tak for de hurtige tilbagemeldninger. :)
Avatar billede Slettet bruger
14. august 2011 - 16:29 #6
Resize ~ dårligt dansk, sorry. Ku' ikke lige finde et dansk ord for det : (
= Træk browservinduet større/mindre, og se hvordan det (ca.) vil se ud på en større/mindre skærm.

Meget bedre nu - gode fontvalg og navnlig farver - "friskt" : )

MEN !

Har du set siden i en Firefox-browser ?
- ser knap så fedt ud : (

Det skyldes at du ikke fortæller browseren hvilken variant af HTML siden er skrevet i.
- Så den må gætte. Og Firefox gætter altså lidt anderledes end de andre..


3 forslag til forbedring:

1. Vigtigst: Giv den en doctype (fortæller hvilken variant af HTML du bruger)
Indsæt som allerførste linje i HTML-filen (over <html>):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http;//www.w3.org/TR/html4/strict.dtd">
- men ret http;//www.w3... til et kolon.
(jeg har brugt ; fordi eksperten.dk "forkorter" alle url'er til ulæselighed..)

2. Minumum bredde - gør at de 3 kolonner ikke vælter ud af #sidekoks hvis vinduet er meget smalt.
.sideboks {     
  width: 85%;
  min-width:1000px;
  background-color: #000000;
  ...
  ..
  }

3. Fjern linjen float: left; fra CSS'en til td.box
- dén ødelægger tabellens padding (luft mellem ramme og tekst)
(float bruges til placere "frit svævende" elementer)
Avatar billede claes57 Ekspert
14. august 2011 - 17:35 #7
og så lige en ting til smalle skærme - i den nuværende side kører du dette lige efter <body>
<SCRIPT LANGUAGE="JavaScript">
if (document.body.clientWidth < 1000){window.location = "enkolonne.html";}
</SCRIPT>

... her følger så din alm kode til siden i 3 kolonner

så vil alle med mindre bredde end 1000 blive sendt til siden enkolonne.html, og der har du samme data, bare i et layout med 1-2 kolonner, så det kan ses/læses ned til fx 500px bredde uden andre problemer end at der skal scrolles en del. Så har du en løsning til gamle maskiner og smartphones.
Avatar billede Slettet bruger
14. august 2011 - 18:36 #8
Det samme kunne opnås (script-frit) hvis de tre bokse var floats i stedet for tabel-celler.
Avatar billede claes57 Ekspert
14. august 2011 - 19:22 #9
>#8
kom med et lille design - 3 kolonner ned til 1 - vi vil alle gerne blive klogere på css i stedet for at lave dobbelt-sider.
Venstre og højre kolonne min 300px, og midten på resten.
Avatar billede Slettet bruger
14. august 2011 - 19:50 #10
I princippet:
<box1 style="width:300;float:left">bla bla</box1>
<box2 style="width:300;float:left">snik snak</box2>
<box3 style="width:300;float:left">lirum larum</box3>
Avatar billede Slettet bruger
14. august 2011 - 20:08 #11
Hov, overså dit sidste "krav".. hm.. liiige et øjeblik..
Avatar billede Slettet bruger
14. august 2011 - 20:27 #12
Shit..
Er det lovligt at bruge script ?
Avatar billede Slettet bruger
14. august 2011 - 22:17 #13
Jeg tvivler på at det kan lade sig gøre uden script. MED kan det - tadaa!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML</title><style type="text/css">

html {width:100%;height:100%;}
body {width:100%;height:100%; margin:0; padding:0; overflow:auto;}

</style><script>
window.onresize=function(){reFit()}
function reFit()
    {
    if (document.body.clientWidth > 899)
        {
        document.getElementById("bl").style.position = "absolute"
        document.getElementById("bl").style.width = "300px"
        document.getElementById("bl").style.height = ""
        document.getElementById("bl").style.minHeight = "100%"

        document.getElementById("bc").style.position = "absolute"
        document.getElementById("bc").style.left = "300px"
        document.getElementById("bc").style.right = "300px"
        document.getElementById("bc").style.width = ""
        document.getElementById("bc").style.height = ""
        document.getElementById("bc").style.minHeight = "100%"
       
        document.getElementById("br").style.position = "absolute"
        document.getElementById("br").style.right = "0px"
        document.getElementById("br").style.width = "300px"
        document.getElementById("br").style.height = ""
        document.getElementById("br").style.minHeight = "100%"
       
        var h = Math.max(document.getElementById("bl").offsetHeight
                ,document.getElementById("bc").offsetHeight
                ,document.getElementById("br").offsetHeight)
        document.getElementById("bl").style.height = h+"px"
        document.getElementById("bc").style.height = h+"px"
        document.getElementById("br").style.height = h+"px"
        }
    else
        {
        document.getElementById("bl").style.position = "static"
        document.getElementById("bl").style.width = "100%"
        document.getElementById("bl").style.minHeight = ""
        document.getElementById("bl").style.height = ""

        document.getElementById("bc").style.position = "static"
        document.getElementById("bc").style.width = "100%"
        document.getElementById("bc").style.minHeight = ""
        document.getElementById("bc").style.height = ""

        document.getElementById("br").style.position = "static"
        document.getElementById("br").style.width = "100%"
        document.getElementById("br").style.minHeight = ""
        document.getElementById("br").style.height = ""

        setTimeout(function() // kender ikke footer/headers offsetHeight før rendering, vent 10 tix
            {
            var h = document.body.clientHeight
                - document.getElementById("bl").offsetHeight
                - document.getElementById("br").offsetHeight
            if (h > 0)
                document.getElementById("bc").style.minHeight = h+"px"
            }
        ,10)
        }
    }

</script></head><body onload="reFit();document.getElementById('splash').style.display='none'" bgcolor="#000000">

<div id="splash" style="position:fixed; top:0px;left:0px;right:0px;bottom:0px; z-index:2; background-color:#FEB;">
    Liige et øjeblik...
</div>

<div id="bl" style="background-color:#6C6; position:absolute; left: 0px; top:0px; text-align:center;">
    Venstre eller header
</div>

<div id="bc" style="background-color:#FEB; position:absolute; left: 0px; top:0px; text-align:center;">
    Midt
    <table border="3" height="400px" width="200px" align="center"><tr><td>fyld</td></tr></table>
</div>

<div id="br" style="background-color:#C66; position:absolute; right:0px; top:0px; text-align:center;">
    Højre<br>eller<br>footer
</div>

</body>
Avatar billede claes57 Ekspert
15. august 2011 - 10:21 #14
>T0M
glimrende eksempel - håber Masi99 kan bruge det - jeg er i hvert fald imponeret. Bukker & takker...
Avatar billede Slettet bruger
15. august 2011 - 17:58 #15
Ja, meget fedt, ikk :)
- selvom den strittede imod til det sidste (og krævede en setTimeout!)
Avatar billede claes57 Ekspert
15. august 2011 - 18:54 #16
Det er så lige i Timeout, at du viser dine kvaliteter...
Få, men afgørende linjers kode, og man slipper for at lave to udgaver af en side.
Avatar billede Masi99 Nybegynder
28. august 2011 - 17:40 #17
Tak For hjælpen!

Arbejder stadig på siden og der kommer sikkert flere problemer, så jeg ville høre om jeg kunne få jeres e-mails til spørgsmål, så jeg ikke behøves at lave et indlæg hver gang. Er sikker på i kan hjælpe mig med de fleste af de problemer der måske skulle komme hen ad vejen.
Endnu engang TAK!
Avatar billede claes57 Ekspert
28. august 2011 - 20:04 #18
du kan fx sende interne beskeder - bare klik på brugernavn og gå ned til "Send en intern besked til brugeren"
Avatar billede Slettet bruger
28. august 2011 - 22:43 #19
Der er ikke noget galt i at oprette nye spørgsmål.
- eller at lukke de gamle ; )
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester