title image


Smiley kleine Tutorial für Websiten mit verschiedenen Auflösungen : )






Hi,



also da gibt es verschiedene möglichkeiten...

1.- z.B. in verbindung mit javascript && css

2.- mit variablen tabellen

3.- ein festes layout



wobei 3. wohl mein favorite waere :) weil dann kannst du wirklich sicher sein das das layout immer gleich aussieht auch bei leuten die eine aufloesung haben die groesser ist als 1024*768... ich zum beispiel habe eine aufloesung von 1280*1024... :D



soo ich hab hier nichts zu tun gehabt... hab deswegen mal nen kleines tutorial geschrieben.. ich hoffe das hilft dir und anderen weiter!... :)





ok zu 1.:

du brauchst hier zu ein javascript das die entscheidung trifft welches css-script geladen werden soll. Dieses Javascript muss dann auf jede Seite deiner Homepage eingebunden werden. Wenn Javascript allerdings nicht aktiviert ist, wird ein standart css geladen. :)

das könnte zum beispiel soo aussehen :..



<HEAD>

<script language="javascript">

<!--

ScreenRes = screen.width;

if(ScreenRes == "640") res = "r1";

else if (ScreenRes == "800") res = "r2";

else if (ScreenRes == "1024") res = "r3";

else if (ScreenRes == "1152") res = "r4";

else if (ScreenRes == "1280") res = "r5";

if (res == "r1") {document.writeln("<LINK REL='stylesheet' TYPE='text/css' HREF='css_fuer_640.css'>");}

else if (res == "r2") {document.writeln("<LINK REL='stylesheet' TYPE='text/css' HREF='css_fuer_800.css'>");}

else if (res == "r3") {document.writeln("<LINK REL='stylesheet' TYPE='text/css' HREF='css_fuer_1024.css'>");}

else if (res == "r4") {document.writeln("<LINK REL='stylesheet' TYPE='text/css' HREF='css_fuer_1152.css'>");}

else if (res == "r5") {document.writeln("<LINK REL='stylesheet' TYPE='text/css' HREF='css_fuer_1280.css'>");}

//-->

</script>

<noscript>

<LINK REL="stylesheet" TYPE="text/css" HREF="css_fuer_standart.css">

</noscript>

</HEAD>









ok zu 2.:

Da gibst du halt jeder Zelle einen variablen Prozentwert. So ändert sich die Tabelle bzw. dein Layout auch wenn du das Browserfenster kleiner oder größer ziehst. Wie ich finde keine gute Möglichkeit weil dann ändert sich dein Layout ständig, und man muss ziemlich viel beachten damit das Layout nicht verunstaltet wird wenn man die Seite in einer anderen Auflösung anschaut... :) naja hier noch ein kleinens

Beispiel:





<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">

<TR>

<TD WIDTH="25%">&nbsp;</TD>

<TD WIDTH="50%">&nbsp;</TD>

<TD WIDTH="25%">&nbsp;</TD>

</TR>

<TR>

<TD WIDTH="25%">&nbsp;</TD>

<TD WIDTH="50%">&nbsp;</TD>

<TD WIDTH="25%">&nbsp;</TD>

</TR>

</TABLE>









ok zu 3.:



fast genau dasselbe wie bei Punkt 2. nur das du hier feste Werte vergeben musst. (Standarteinheit bei festen Werten ist hier Pixel, wenn du mit CSS arbeitest gibts da noch ganz viele andere Einheiten die du verwenden kannst. Damit ist das Layout deiner Seite halt statisch und verändert sich nicht mehr, damit kannst du auch sicher sein das sich deine Bilder, Texte, etc. nicht verschieben... Nachteil dieses

Verfahrens: Wenn du die Seite für grosse Seite gestaltest, dann muessen alle die die eine kleinere Auflösung haben andauernd die scroll leisten benutzen... :D hey aber wenn die tabelle nur 600 Pixel breit ist muss man ja nur hoch und runterscrollen ... bei einem richtigen und strukturierten menue sollte das kein problem fuer den besucher darstellen.



<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="600">

<TR>

<TD WIDTH="100">&nbsp;</TD>

<TD WIDTH="400">&nbsp;</TD>

<TD WIDTH="100">&nbsp;</TD>

</TR>

<TR>

<TD WIDTH="100">&nbsp;</TD>

<TD WIDTH="400">&nbsp;</TD>

<TD WIDTH="100">&nbsp;</TD>

</TR>

</TABLE>





Soo das wars erstmal von mir... ich hoffe das ist soweit richtig !!!.. denkemal schon. aber fuer verbesserungsvorschlaege bin ich jederzeit dankbar... schliesslich kann man nicht alles wissen... :D "man lernt die aus..." *G*



cu

Tobi



alias iloh













geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: