Archiv verlassen und diese Seite im Standarddesign anzeigen : Universal Design by Dadie nur 5Kb
Hi
Also ich habe ein Design gebaut jedoch kein Normales.
Ich wollte folgendes Verwirklichen :
1,In jedem Brwoser soll es gleich aussehn sogar in textbasierten Brewsern.
2,Es soll die standert HTML Normen einhalten
3,Es soll so klein sein das sogar 33Kbs user es in 1 sekunde geladen haben.
4,Es soll für möglichst viele auflösungen gut lesbar sein.
Was kamm dabei raus ?
Das kamm raus :
http://dlcc.funpic.de/HP-03/HP-03.html
Das witzige ist die .html datei ist grösser als ALLE
bilder zusammen.Alle bilder zusammen sind genau 2,13KB
und die HTML datei 2,33 KB *gg*
Was sagt ihr ? Könnte man die HP noch kleiner machen ?
Wichitg ist auch das ich testes von Textbasierten browser brauche.Ich habe bsiher nur einen von meiner Schule getestet Ka wie der hiess.Bitte test mit allen Brwoser die ihr habt und sagt mir bei welchen es BUGs gibt.
achja bitte bewertet mal das Design (beachtet dabei alle Pic sind 2,13 KB gross *gg*)
Noch was Download bar ist es unter folgender adresse :
http://dlcc.funpic.de/HP-03/hp-03.rar
einfach ein neues fenster oder tab öffnen udnd en link reinkopieren udn ENTER drücken.
Ich hätte die .html datei NOCH kleiner machen können leider häte darunter dann die Ordnung gelitten und das ist sehr
wichitg bei Templets.
MFG
Dadie
Sry dich enttäuschen zu müssen, aber für dieses Design hast du noch seeehr viele Bilder drinnen ;)
Als ich das Design sah rechnete ich persönlich mit 3 Bildern, dass es dann 10 wurden hat mich doch ziemlich verwundert. Denn die Balken und Co. lassen sich mit ein wenig CSS besser nachbilden.
Ob es danach im Endeffekt kleiner wird weiß ich nicht, aber ich gehe davon aus.
Zum Design selber sag ich jetzt nicht viel :rolleyes:
ja das problem ist nur das ich kein css kann.
Aber ist schon geil was in 5kb reinpassen oder ?
*hust* (http://validator.w3.org/check?verbose=1&uri=http://dlcc.funpic.de/HP-03/HP-03.html)
CSS ist aber heute Notwendig, v.a. wenn du dich an die "HTML Normen" halten willst. SelfHTML (http://de.selfhtml.org/) bietet dir einen großen Umfang an Beispielen zur CSS Verwendung.
Da du Bilder im PNG Format verwendest kannst du diese mit dem Programm OptiPNG eventuell noch verkleinern, der Link dazu befindet sich im gepinnten Thread (http://forum.rpg-ring.com/forum/showthread.php?s=&threadid=38132).
Jesus_666
25.07.2004, 20:23
Was bitte soll das "" am Anfang, noch vor dem <html>-Tag bedeuten? Und was hat "text-decoration: glow;" in einer echten Website zu suchen? Glow wird nur vom IE unterstützt.
BTW, warum verschwendest du so viel Platz an den Seiten? Links und rechts sehe ich große, leere Flächen.
Ich habe in vier Browsern getestet: Mozilla Firefox 0.9, Konqueror 3.2.3-01 Red Hat, Lynx Version 2.8.5dev.16 und Amaya 8.6.
Der Firefox zeigte mir eine grellblaue, ansonsten eher schlichte Seite, die abgesehen vom Fehlen gewisser Informationen (Doctype, Encoding) und ein paar merkwürdigen Zeichen am Anfang in Ordnung zu sein schien.
Der Konqueror brachte das selbe Resultat.
Unter Lynx war die Seite bedienbar, hatte aber einen Fehler bei der Darstellung der Links. (Screenshot (http://rpgmaker.info/temp/dUD_lynx.png))
Amaya hatte wie erwartet extreme Schwierigkeiten mit der Seite (Screenshot (http://rpgmaker.info/temp/dUD_amaya.png)), was nicht weiter verwunderlich ist, da Amaya der W3C-Browser ist und nur Seiten verarbeiten kann, die absolut korrektes HTML und CSS verwenden. Das tut diese Seite nicht mal ansatzweise (http://validator.w3.org/check?uri=http://dlcc.funpic.de/HP-03/HP-03.html).
sag mir doch einer das  im lynx der fehler ist bei glow udn ich suche den fehkler warum das bei lynx dargestellt wird.
Jesus_666
25.07.2004, 21:06
Das  wird bei mir überall angezeigt, das steht so im Code.
nein da steht nicht im code da bin ich mir sicher.
Ne frage :
Dieser W3C standert stinkt er sagt :
...td style="background-image: url(./img/01.png);" width="187" height="112">
in diesem text sei ein fehler.Wenn ich fragen darf wo ?
Ich ahbe schon den alten html nackground code ersätz wo ist da ein fehler ? die zahlen sind in "" alles ist klein geschreiben
sama wo soll da ien fehler dirn sein ?
Original geschrieben von dadie
...td style="background-image: url(./img/01.png);" width="187" height="112">
...td style="background-image:url(../img/01.png); width:187px; height:112px">
So ist es am schönsten und saubersten ;)
Noch besser wäre es allerdings wenn du den Code in eine externe CSS Datei auslagerst ;)
<td> darf keines der Attribute "width" oder "height" enthalten, da beides mit Stylesheets realisierbar ist (so wie es Latency schrieb).
Da funpic.de am Ende ein <script> Tag hinzufügt, wird es unmöglich ein valides Dokument zu erstellen (obwohl du versuchen kannst am Ende des Quelltextes einen Kommentar zu beginnen, damit die Zeilen am Ende nicht mehr gewertet werden).
Es fehlt dir außerdem diese meta-Angabe:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
Sorry das mit dem  war ein BUG in meinem editor fertrau nie einen Noname bilich editor >:(
nun ist die seite ohne bugs bis halt auf das sciprt von funpic
Maisaffe
27.07.2004, 16:52
Original geschrieben von dadie
Sorry das mit dem  war ein BUG in meinem editor fertrau nie einen Noname bilich editor >:(
nun ist die seite ohne bugs bis halt auf das sciprt von funpic
sieht mal garnicht so schlecht aus (für fast nix an inhalt :D)
Dennis
@ Dadie: Boah, du spammst ja überall :D
Jesus_666
27.07.2004, 18:49
Amaya kriegt es immer noch nicht richtig hin, aber ich weiß nicht genau, wieso. Immerhin ist es etwas besser geworden.
Lynx hat immer doch dasselbe Problem; der letzte Link wird eingerückt. Die Fehlerursache ist ein <br>-Tag:
<!-- So sieht's aus -->
<A href="./HP-03.html">Link</A><br>
<A href="./HP-03.html">Link</A><br>
<A href="./HP-03.html">Link</A><br>
<A href="./HP-03.html">Link</A><br>
<!-- So mag's Lynx lieber -->
<A href="./HP-03.html">Link</A><br>
<A href="./HP-03.html">Link</A><br>
<A href="./HP-03.html">Link</A><br>
<A href="./HP-03.html">Link</A>
wrtlprnft
27.07.2004, 21:12
Wegen der enormen Grafiklast und der schlechten resizibality hab ich mal versucht, das Ganze umzuschreiben. Das (http://www.wrtlprnft.de/testlayaut/layout2/index.htm) ist dabei rausgekommen.
Das einzige Problem besteht darin, dass der I€ (••••••teil) bei den Ecken oben nicht mitmachen will. Gibt es da irgenteine Möglichkeit, den Rand da wegzubekommen?
Jesus_666
27.07.2004, 21:22
Versuch's mal mit dieser Methode (http://www.meyerweb.com/eric/css/edge/boxpunch/demo.html). (Anmerkung: Für IE-Kompatibilität muß man einen häßlichen Hack (http://www.meyerweb.com/eric/css/edge/boxpunch/demo-ie.html) benutzen.)
wrtlprnft
27.07.2004, 23:42
http://www.multimediaxis.de/images/smilies/old/smilie_06.gif>_<http://www.multimediaxis.de/images/smilies/old/smilie_06.gif
Naja, um ehrlich zu sein: Ich hab befürchtet, dass der Hack noch komplizierter wird...
Fehlt bloß noch der Amaya... Wieso macht der die Tabellenzelle einfach zu kurz?
Edit: So, ich hab deine Seite noch in Dillo und ELinks getestet. Das Ergebnis (http://www.wrtlprnft.de/Bildschirmphoto11.png) (unten Dillo, oben ELinks, links deine, rechts meine Version, beide Browser sind auf Standarteinstellungen)
Da kann man jetzt geteilter Meinung sein, welche Variante man jetzt bevorzugt. Mir gefällts besser, wenn sämtliche Links in einer Zeile sind.
sehr interesand.
THX ich werde auch mal mein glück in css suchen.
Habe das <br> das zuviel war weggemacht und einbsichen den Code besser sichtbar gemacht.
wrtlprnft
28.07.2004, 01:52
Für nicht-css-kenntnisse schauts auch ganz gut aus.
Das einzige große Problem in deinem Code ist, dass du im Hauptteil vor jeder Zeile zwei Leerzeichen positionieren musst. Das ist bei mehrzeiligen Texten unmöglich, was deinen Code praktisch unbrauchbar macht. Wenn du statt
<td style="background-image: url(./img/04.png);
width:516px;" align="left">
<td style="background-image: url(./img/04.png);
width:516px; padding-left:10px; text-align:left">schreinst ist alles in Ordnung.
Falls du wirklich noch nix von CSS weißt: Das ist bereits CSS;)
ich kann zwar css noch nciht lange aber das muss
nicht
<td style="background-image: url(./img/04.png);
width:516px; padding-left=10px; text-align:left">
heissen das = ist html ne das heist so
<td style="background-image: url(./img/04.png);
width:516px; padding-left:10px; text-align:left">
:D :D jeha ich kann was in css
wrtlprnft
28.07.2004, 02:11
>_<
Tippfehler... Das merkst du spätestens dann, wenn du es ausprobierst.
nur mir ist ein problem aufgefallen.
Beim IE ist nach dem letzten link kein br mehr
und es kommt diereckt das abschluss bild des navigator.
sihe URL :
http://dlcc.funpic.de/HP-03/1.jpg
Jedoch beim Mozilla ist oben und unten ein BR warum ?
sihe URL :
http://dlcc.funpic.de/HP-03/2.jpg
WICHTIG
Link kopieren und in den Brwoser einfügen.
Powered by vBulletin® Version 4.2.3 Copyright ©2024 Adduco Digital e.K. und vBulletin Solutions, Inc. Alle Rechte vorbehalten.