Få siden til å passe til flere oppløsninger

[Goebbels]

Heisann.

Har en side som er bygd opp omtrentelig som dette:

 

 

Med div'ene top, menu og main styrt av dette:

 

/* Class */
.top 
{ 
top: 10; 
width: 800;
height: 30;
left: 100;
position: absolute;
z-index: 0;
padding: 0px;
background-color: #808080;
text-align: center;
border-style: double
}

.menu 
{  
top: 50;
width: 200;
height: 500;
left: 100;
position: absolute;
z-index: 0;
overflow:none;
background-color: #808080;
text-align: center;
border-style: double;
overflow:auto
}

.main 
{  
top: 50;
width: 590;
height: 500;
left: 310;
position: absolute;
z-index: 0;
padding: 10px;
overflow: auto;
background-color: #808080;
text-align: center;
border-style: double
}

 

Dette fungerte veldig greit til en oppløsning på 1024*768, men nå som jeg selv har gått opp til 1280*1024 så blir det en stusselig affære å åpne siden, da den bare bli en liten firkant oppe til venstre..

så mitt spørsmål er da: hvordan endre denne css filen slik at den passer til "alle oppløsninger".. prøvde å erstatte tallene med prosenter men det fungerte ikke helt av en eller annen grunn..

noen ideer?

 

Mvh K

Endret 14. januar 2004 av Ktulu

[haugsand]

Du får noen problemer når du skal angi dynamiske størrelser på element som er posisjonert. De(t) dynamiske elementene bør derfor istedet plasseres på siden ved hjelp av å angi margin. (Som på "the holy grail"-eksemplet på glish.com/css)

[haugsand]

Edit: Dobbelpost. Skolenettet har aldri vært kjent for å være stabilt.

Endret 14. januar 2004 av satyrium

[Goebbels]

Hmm. takker. men det er tilsynelatende vanskelig (for meg ihvertfall) å få det til å ta seg bra ut. får se hvor mye jeg orker å stresse med det.

[FuLu]

En løsning kan jo være å midtstille siden, da får man ikke helt den følelsen av at den er klemt oppi et hjørne

 

Ellers er det vel ikke så lett å gjøre en side dynamisk tilpasset hvilken som helst oppløsning. Problemer jeg forbinder med dynamisk bredde er:

• font-size ikke vokser seg dynamisk etter oppløsningen
  
• har du bilde i header eller andre steder, så vil disse bli mindre i 1280x1024 enn i 800x600.
  
• bruker man dynamisk bredde og oppløsningen begynner å bli så høyt som 1024x768 og høyere, begynner linjene å bli så lange at øynene må jobbe mer frem og tilbake, som igjen gjør siden stygg og slitsom (link til emnet: http://www.webstyleguide.com/type/lines.html ). Dette er også litt avhengig av font-size.
  

 

Skulle hatt en funksjon i CSS'en eller når man har <link rel="stylesheet"... at man kunne hatt media="screen@800x600" eller noe Så kunne man lastet inn stylesheet hvor man bytter ut diverse attributer og andre bilder så det matcher oppløsningen.

[haugsand]

Se hvor fint dynamisk bredde funker på http://www.stopdesign.com/ og http://www.themaninblue.com/.

[FuLu]

Heh, damn, var ikke dumme de Likte den The Man in Blue Var ikke dum den stopdesign heller. Så heller ikke så ille ut i 1280x1024, men font-size bør helst ikke bli for liten her.

[Goebbels]

Lekkert som pokker, men kan ikke se meg til hvordan de har fått det til.. siden (themaninblue) er jo like pen om jeg åpner den på min (1280*1024) som på fatter's (1024*768)..

Er liksom akkurat det jeg er på jakt etter.. men kan ikke se hvordan det har blitt gjort, så det ligger vel ann til at folk kan velge om de kjører en annen oppløsning manuelt..

[msolberg]

Hvis du vil tilpasse stylesheet'et etter oppløsningen kan en løsning være:

 

- Lag 2 stylesheets

- Hent først oppløsningen fra brukerens maskin

- Lagre oppløsningen i en session cookie

- Så kjører du en test mot session cookie og sier da f.eks:

 

if(session cookie har oppløsning 1024*768)

{

bruk stylesheet 1;

}

[Goebbels]

Hmm. ja om det lar seg gjøre, så virker det som en kjekk løsning..

Er bare å sette seg inn i hvordan dette skal gjøres da.. Noen som har linker relatert til noe slikt?

[haugsand]

Lekkert som pokker, men kan ikke se meg til hvordan de har fått det til.. siden (themaninblue) er jo like pen om jeg åpner den på min (1280*1024) som på fatter's (1024*768)..

Er liksom akkurat det jeg er på jakt etter.. men kan ikke se hvordan det har blitt gjort, så det ligger vel ann til at folk kan velge om de kjører en annen oppløsning manuelt..

Tvilsomt at det ligger noe scripting bak dette. Dynamiske verdier på enkelte bokser er nok

[FuLu]

Hvis du vil tilpasse stylesheet'et etter oppløsningen kan en løsning være:

 

- Lag 2 stylesheets

- Hent først oppløsningen fra brukerens maskin

- Lagre oppløsningen i en session cookie

- Så kjører du en test mot session cookie og sier da f.eks:

 

if(session cookie har oppløsning 1024*768)

{

bruk stylesheet 1;

}

Jo, det går selvfølgelig Men nå var jeg ute etter en metode som kunne fungert i selve CSS'en da Men dette blir mer dream-feature, for den funksjonen jeg tenker på, finnes vel ikke.

[Goebbels]

Gav opp automatisk korreigering av css-fil.

Men gikk heller for en neddrops liste, med 1024x768 som default, og med kookie for de som velger en annen oppløsning..

Men takker for alle innspill som satte meg på sporet.

Mvh

Ktulu