nicht angemeldet Felix Riesterer
Felix Riesterer
Felix Riesterer
Felix Riesterer
Felix Riesterer
Felix Riesterer
Felix Riesterer
Detlef G.
Hallo!
Ich habe ein kleines/größeres Problem mit einer Website die ich gerade gestalte, und zwar:
............................................................
Habe ich einen Bildbereich indem ich jeweils ein Bild angezeige, dieser Bereich befindet sich in einer größeren Tabelle. An anderen Orten in der Tabelle befinden sich zwei Pfeilbilder (Links/Rechts).
:::Frage:::
Wie bekomme ich es jetzt hin das ich mit diesen Pfeilen (vor-zurück) zwischen beliebig vielen Bildern hin und herschalten kann? Ich habe einiges an Tutorials versucht, allerdings bieten diese immer nur Möglichkeiten für "fancy" blend-effects oder zeitliche Übergänge. Ich hingegen möchte einfach immer ein Bild weiterschalten ohne das die Seite neu lädt
Giebt es da eine Möglichkeit? vielleicht mit Javascript?
............................................................
:::Frage2:::
Auf der gleichen Seite ist ein Textbereich, unter dem habe ich 3 Bildschalter angelegt, wie kann ich einen anderen Text je nach schalter (1,2,3) anzeigen lassen?
Ich würde mich freuen wenn mir da jemand weiterhelfen könnte, die Seite ist echt schön :)
Schöne Grüße,
Simon
Lieber Simon,
vielleicht suchst Du etwas wie mein jsPopup?
Liebe Grüße,
Felix Riesterer.
Vielen Dank für den Link,
aber war leider nicht das was ich gesucht habe...
P.S. Ich habe mal einen Screenshot der Seite angehängt!
Schöne Grüße,
Simon
Hi MA-Simon
:::Frage:::
Wie bekomme ich es jetzt hin das ich mit diesen Pfeilen (vor-zurück) zwischen beliebig vielen Bildern hin und herschalten kann? Ich habe einiges an Tutorials versucht, allerdings bieten diese immer nur Möglichkeiten für "fancy" blend-effects oder zeitliche Übergänge. Ich hingegen möchte einfach immer ein Bild weiterschalten ohne das die Seite neu lädtGiebt es da eine Möglichkeit? vielleicht mit Javascript?
Du suchst bsp. Preload.
Hier werden ein paar einfache methoden erklärt.
Gruß
Gary
Hallo Gary,
Vielen Dank für den Link,
aber leider auch nicht ganz das was ich gesucht habe :)
Die Seite erklärt zwar wie ich Bilder vorlade, aber nicht wie ich sie austausche (ich benutze schon die ganze Zeit vorgeladene Grafiken für Mousover etc.)
Schöne Grüße,
Simon
Hier mal ein screenshot der Seite:
(Der gesamte schwarze Kasten ist der Bildbereich)
Hi MA Simons
Hier mal ein screenshot der Seite:
(Der gesamte schwarze Kasten ist der Bildbereich)
Gut, was zum sehen *g*...
Soll sich das Bild über dem Text ändern, oder die gesammte Designbox?
(Weil du schreibst gesamtzer schwarzer Kasten)
Zusatzfrage: Die gesamte "Designbox" ist eine Tabelle? (seh leider keinen Quelltext)
Gruß Gary
Hi,
Ok, also bleien wir am besten erstmal bei der Ersten Frage mit dem Bildwechsel.
Ja, die gesamte Designbox ist eine Tabelle mit ca 94 einzelbildern.
Was ich erreichen möchte ist ein einfaches Weiterklicken der Bildgrafik (Der schwarze Bereich zwischen den Pfeilen) Ich benötige auch keinen "Slide" effeckt" oder sonstiges, es soll einfach das jeweils nächste Bild angezeigt werden. Man muss sich das so vorstellen: Ich habe den Menuepunkt Illustration, dort klicke ich dann z.b. auf den Bereich "Skizzenbuch XYZ" daraufhin öffnet sich diese Seite (Screenshot). Der Besucher soll dann einfach durch die einzelnen Seiten des Skizzenbuchs blättern können.
Der gesamte Bildbereich oben (Die Seite bestet aus den Zwei boxen Text und Bild) funktioniert unabhängig vom Textbereich, soll heißen, oben kann man blättern wie man will der text unten soll sich dadurch nicht verändern sodern eigene Schalter haben (hier 1,2,3).
Ich hoffe es war so einigermaßen verständlich :)
Wenn nicht muss ich doch die Seite hochladen... wollte es eben nur ungern einfachso "public" ins Netzt stellen solange die Seite nicht fertig ist...
Würde es dir was nützden wenn ich die Seite schonmal hoste und dir dann einfach den Link poste?
lg Simon
So, hier ist die Beispielseite (die Links sind noch nicht gesetzt etc. das CSS Dokument kann man noch ignorieren, muss ich erst noch aufräumen, da sind noch Überreste früherer Experimente drin)
http://www.simon-autenrieth.de/masimontestseitev3.html
Hoffe das hilft :)
lg Simon
Hi Simon
Ne sau arbeit hast du dir da gemacht. Schön ist es ja fürs Auge. Ich weis, Tabellen sind in der Hinsicht gut, das sie in jedem Browser zu einem Einwandfreiem Ergebnis führen. Wärend bei CSS schon mal was verrutschen kann. Habe früher auch immer Tabellen zum Positionieren genutzt. Hier sind aber ein paar Leute dagegen *duck*
Zu deinem Bildtausch-Problem:
Wenn ich mich richtig errinnere, ging das über backgroundimage/CSS und JS.
Man kann mit JS das Styling ändern. Das Problem wird aber sein, das du eine Zälervariable oder Cokies brauchst, da du die Bilder vor und zurück klicken möchtest. JS muß ja wissen, wo/bei welchem Bild du gerade bist, um das richtige Backgroundimage einzufügen.
Hier muß ich dir aber sagen, daß ich mich mit JavaSkript nicht besonders gut auskenne - gelinde gesagt.
Ich persönlich würde sowas serverseitig über Perl lösen. Ist für einen der kein Perl kann sicherlich Hardcore - für mich aber eher einfacher.
Gruß
Gary
Hi,
Hm... das hört sich jetzt so beschrieben sehr-sehr viel Aufwwand an für 4-5 wechselnde Bilder. Ich muss leider gestehen, von Perl habe ich überhaupt keine Ahnung. Ich komme leider mehr aus dem Bereich "Design-Illustration und Musik". Wie würde es denn mit Perl funktionieren?
Schade das es kein einfaches setvariablebild +1 oder -1 giebt für links und rechts, oder bei text setvariabletextto="1" etc. so das jeweils der unsichtbare Text mit der entsprechenden Variabel angezeigt wird. Ich habe früher viel mit RPG-makern gescriptet, da gab es dann so tolle Dinge wie "switches","if-variabeln" etc.
Vielen Dank für deine Hilfe bis hierhin,
Wenn dir oder jemand anderem noch eine Lösung einfällt, wäre ich trotzdem sehr dankbar!
lg
Simon
Hi Simon
... Wie würde es denn mit Perl funktionieren?
Leider auch nicht ohne reload der Seite. Die Pfeile wären Links, die eine shtml Seite aufrufen, d. h. mit eingebautem SSI. Der Server bzw. das Perlscript springt an und wertet beispielsweise einen über cgi übermittelten Wert über If aus. Da das Script einem eindeutigem Pfeil/Link (vor oder zurück) zugeordnet ist, bräuchte es nur noch die CGI-Info (beispielsweise über ein verstecktes Input "hidden" Feld auswerten und weis, welches das nächste Bild ist. Das wird dann mit der Ausgabe der shtmlSeite mit ausgeliefert. So in etwa.... Aber fürn'n Perl-Neuling eher nicht zu empfehlen...
Schade das es kein einfaches setvariablebild +1 oder -1 giebt für links und rechts, oder bei text setvariabletextto="1" etc. so das jeweils der unsichtbare Text mit der entsprechenden Variabel angezeigt wird. Ich habe früher viel mit RPG-makern gescriptet, da gab es dann so tolle Dinge wie "switches","if-variabeln" etc.
Du musst eine Variable haben, die als Momentaner Wert für das Bild Steht. Sonst kannst du nicht blättern. Denkbar wäre auch die Nutzung von einem Cookie, wenn man den per JS ändern kann (wie gesagt - JS nicht meine Baustelle)
Im Forum fand ich das:
http://forum.de.selfhtml.org/archiv/2010/7/t199371/#m1341419
Gib doch mal im Suchfeld hier verschiedene Schlagwörter ein:
-Bilderwechsel mit JS
-Background ändern mit JS
-Gallerie mit JS
Ist sicher was dabei. Oder warte bis zu einer humaneren Stunde (Morgen?) wenn die Leute hier eventuell auch anwesend/wacher sind *grins*
Gruß Gary
Hi Simon
Noch ganz kurz nachgeschoben: Vielleicht ließe sich auch was über die Eigenschaft z-index machen. Das ist CSS und besagt, in welcher Schicht das Bild seine Position bezieht. Quasi ein Layer-Wert.
Guckst du hier.
Je höher die Zahl, desto weiter vorne liegt das Bild. Beispiel: Ein Bild mit dem z-index 100 verdeckt ein Bild mit dem z-Index 99.
Gruß und Gute Nacht
Gary
Huhu,
Vielen Dank für deine Hilfe und Recherche!
Werde ich alles mal anschauen, aber das mit dem z-index, da müssten ja beim Start der Seite alle bilder geladen werden, d.h. es kann zu anzeige Fehlern kommen wenn ich 7-8 Bilder habe die sich überlagern (bild wird zu früh geladen etc.) Die Möglichkeit fällt da wohl weg.
Aber wie es auschaut sollte ich meine Seite sowiso nochmal von "grundauf" neu aufbauen, damit mir leichter geholfen werden kann.
Ich warte darum erstmal wie sich das nun noch entwickelt.
Gute Nacht und Schöne Grüße,
Simon
Lieber MA,
http://www.simon-autenrieth.de/masimontestseitev3.html
willst Du's "richtig" machen, oder nur "irgendwie"?
Liebe Grüße,
Felix Riesterer.
Huhu,
Hm, ich weis leider nicht auf was du gerade anspielst,
aber wenn du das mit der "Qualität" meinst, eigentlich schon gerne "richtig-gut".
Aber auch möglichst übersichtlich, damit ich später selbst mehrere solcher Seiten anlegen kann um Bilder auszutauschen etc.
Simon
Bevor Ihr jetzt (hoffentlich) anfängt mir Tipps zu geben hier nochmal einige codeschnipsel:
Hier ist eine Version meiner Seite bei der ich versucht habe das Script einer
(frei verfügbaren-Seite) einzuarbeiten. Leider funktioniert es nicht..., ich habe alles Versucht aber mit meinen Kenntnissen komme ich wohl nicht sehr weit, habe bereits das css auf meien Seite angepasst und den code meines wissens nach richtig eingearbeitet. Schaut bitte mal, ich habe sowohl den ordner mit der kostenlosen Internetseite, als auch den mit meiner Seite in das rar eingefügt.
www.simon-autenrieth.de/projectdata/Problemdaten_04_10_2010.rar
Vielleicht liegt es nur an ein paar Zeilen und es lässt sich schnell heilen?
lg Simon
Lieber MA,
aber wenn du das mit der "Qualität" meinst, eigentlich schon gerne "richtig-gut".
Aber auch möglichst übersichtlich, damit ich später selbst mehrere solcher Seiten anlegen kann um Bilder auszutauschen etc.
1. Problem: Du benutzt Dreamweaver
Folge: Du verlässt Dich auf die "Philosophie" hinter der verwendeten Software, wie Internetseiten technisch realisiert werden sollten. Damit bist Du technisch ungefähr im Jahre 1998.
2. Problem: Deine Seite ist technisch gesehen eine gigantische Bilder-Tabelle.
Folge: Eine echte Trennung von Inhalt und Layout ist völlig unmöglich. Ohne Bilder sieht die Seite nicht wirklich sinnvoll strukturiert aus:
Auch eine Druckversion der Seite ist so nicht ohne Weiteres möglich. Momentan bekommt man jedenfalls keinen vernünftigen Ausdruck auf Papier.
Willst Du das alles verbessern? Bist Du Willens, Dich mit den zugrundeliegenden Technologien so gründlich auseinanderzusetzen, dass Du Deine Seite völlig ohne den Dreamweaver rein mit einem Texteditor erstellst? Dann kann Dir geholfen werden.
Liebe Grüße,
Felix Riesterer.
Hi,
Ja mir ist das Problem mit Dreamweaver bekannt (und ja ich habe den auch hier benutzt), aber die Tabelle entstammt gröstenteils Photoshop (Für web speichern) Aber ich benutzte dreamweaver eigentlich größtenteils nur wegen der schicken code ansicht.
"Folge: Eine echte Trennung von Inhalt und Layout ist völlig unmöglich."
Nun ja... meine Seite basiert auf der Grafik, von daher ist das nicht ganz unlogisch. Wenn ich von einem Bild die Farbe abziehe bleibt auch nicht mehr übrig als die nackte Leinwand. Auch gehe ich davon aus das die Leute die sich für meine Seite interessieren könnten nur Übdurschnittliche-Highend Rechner haben. (Gaming-Design-generation).
Das mit dem Drucken habe ich noch garnicht ausprobiert...
Ich wüsste jetzt keine Möglichkeit die Tabelle von Hand neu aufzubauen...
Das tut sich doch heutzutage kein Mensch mehr an, oder doch?
Ich bin aber willens hinzuzulernen :)
Jedoch möchte ich das layout ungern reduzieren.
Simon
Lieber MA,
aber die Tabelle entstammt gröstenteils Photoshop (Für web speichern)
ja, ich hatte diese Maximalkatastrophe schon geahnt. Aber egal.
Aber ich benutzte dreamweaver eigentlich größtenteils nur wegen der schicken code ansicht.
Dafür gibt es kostenlose Alternativen, die das noch besser können. Da Du mir noch Schüler zu sein scheinst, will ich mal lieber nicht fragen, wie Du an die verwendete Software gekommen bist. Dafür empfehle ich Dir im Gegenzug völlig kostenlose Freeware, wie z.B. den Notepad++.
"Folge: Eine echte Trennung von Inhalt und Layout ist völlig unmöglich."
Nun ja... meine Seite basiert auf der Grafik, von daher ist das nicht ganz unlogisch. Wenn ich von einem Bild die Farbe abziehe bleibt auch nicht mehr übrig als die nackte Leinwand.
Die Analogie hat einen schweren Gehfehler. Bei Deinem Bild und der Leinwand vermischst Du doch auch nicht die Gewebefasern mit der Farbe, um so Bild und Leinwand auf einer Glasplatte aufzubringen, damit Du später das Gemisch von der Glasplatte ziehen und in einen Rahmen aufspannen kannst. Du arbeitest mit Farben auf der einen und mit einer Leinwand auf der anderen Seite. Bei einer Website ist das in ungefähr etwas Ähnliches.
Auch gehe ich davon aus das die Leute die sich für meine Seite interessieren könnten nur Übdurschnittliche-Highend Rechner haben. (Gaming-Design-generation).
Das ist sowas von irrelevant...
Das mit dem Drucken habe ich noch garnicht ausprobiert...
War mir klar.
Ich wüsste jetzt keine Möglichkeit die Tabelle von Hand neu aufzubauen...
Das tut sich doch heutzutage kein Mensch mehr an, oder doch?
Weg mit der Tabelle! Wer sagt denn, dass eine Tabelle hier überhaupt sinnvoll sei??
Ich bin aber willens hinzuzulernen :)
Jedoch möchte ich das layout ungern reduzieren.
Das eine hat mit dem anderen nichts zu tun.
Dann fangen wir mit dem Dazulernen einmal an. Was verstehst Du vom grundlegenden Aufbau eines HTML-Dokuments? Was hast Du schon von semantischem Code gehört? Wo können wir einsteigen?
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
Aller befürchtungen zum Trotze, die software benutze ich legal :)
(Ich bin kommunikationsdesign Student mit vorheriger Grafikdesign Ausbildung)
"Dafür gibt es kostenlose Alternativen, die das noch besser können. Da Du mir noch Schüler zu sein scheinst, will ich mal lieber nicht fragen, wie Du an die verwendete Software gekommen bist. Dafür empfehle ich Dir im Gegenzug völlig kostenlose Freeware, wie z.B. den Notepad++."
Ich benutze zum arbeiten mit dem Code auch alternativ das programm "Phase 5.6"
Also fangen wir mal an:
Bisher habe ich nur eine Kombination aus html und css files benutzt, keine weiterführenden Sprachen. Meine jetziger Wissensstand liegt etwa bei meiner aktuellen Internetseite www.simon-autenrieth.de oder bei www.ronald-autenrieth.de
"Weg mit der Tabelle! Wer sagt denn, dass eine Tabelle hier überhaupt sinnvoll sei??"
Aber ob Tabelle oder nicht, irgendwie muss ich die Bilder ja in ein "system" packen? (Bitte nicht über meine unwissenden Bemerkungen lachen, als Student meine ich sowas nämlich ersteinmal völlig ernst :)
Simon
Lieber MA,
Ich benutze zum arbeiten mit dem Code auch alternativ das programm "Phase 5.6"
hmm, geht auch.
Aber ob Tabelle oder nicht, irgendwie muss ich die Bilder ja in ein "system" packen?
[Warum Layout mit Tabellen dumm ist]
Zuallererst denkst Du bitte weder an Grafiken, noch an Design, OK? Das lenkt nur unnötig ab. Du denkst zuallererst an _Inhalt_ und an sonst garnichts.
Was hast Du denn für Inhalte? Wenn Du Dir diese Frage beantwortet hast, dann denkst Du darüber nach, welche _Natur_ diese Inhalte haben, denn davon hängt ab, mit welcher _Struktur_ Deine Inhalte im HTML-Code ausgezeichnet werden. Stonie hatte da ein Tutorial für Einsteiger geschrieben, in dem sie auf die Umsetzung von Inhalt zu HTML beispielhaft eingeht: HTML-Tutorial
Wenn Du Deine Inhalte vernünftig ausgezeichnet hast, dann spiegelt der HTML-Code die Natur Deiner Inhalte wider. Dann ist Dein Code semantisch ("bedeutungstragend"). Mit solchem Code kann man dann (und erst dann!!) anfangen, mittels CSS zu gestalten.
Melde Dich, wenn Du ein Dokument mit semantischem Code erstellt hast. Dann kann man versuchen, Dein "Design" drüber zu stülpen.
Liebe Grüße,
Felix Riesterer.
Huhu,
Das Html tutorialb ist soweit klar (Das wusste ich alles schon)
Laut der CSS guru-seite Soll ich jetzt doch jedes einzelne Bild nochmal neu mit div tags anordnen und die Bildlinks alle im css setzen.
Das funktioniert aber gerade bei der Navigation schlecht, da es ja für jeden Punkt andere Bilder giebt etc.
Wie es auschaut muss ich jetzt doch mein Layout ändern damit ich es Horizontal und vertikal unterteilen kann. Das finde ich ja nicht so toll.
Giebt es die Möglichkeit z.b. Bei den beiden Boxen (Bild und Text) die ja identisch sind, diese als Einzelne Bilder zu platzieren und dann z.b. das Bild mit der Überschrift beim Text "vornendran" anzuzeigen?
Ich werde jetzt erstmal meine Seite neu "slicen" damit das passt.
Simon
Lieber MA,
Das Html tutorialb ist soweit klar (Das wusste ich alles schon)
ich vermute, dass Du Dein Denkschema nicht angepasst hast, sondern noch immer in "Design" und in "Grafik" denkst, anstatt in Struktur und Semantik.
Wo ist der Quelltext Deines semantisch strukturierten Dokuments? Wo sind Deine Lernfortschritte nachzuvollziehen?
Laut der CSS guru-seite Soll ich
... nichts! Dein Dokument mit semantischem Code bitte! Alles andere ist Dein alter Unsinn, den Du doch gerade loswerden wolltest.
Ich werde jetzt erstmal meine Seite neu "slicen" damit das passt.
Du willst also doch nichts dazulernen? Schade, Du verpasst eine schöne Möglichkeit...
Liebe Grüße,
Felix Riesterer.
Huhu,
Das Problem das ich gerade habe ist, das ich immer noch nicht genau verstehe was Ihr überhaupt von mir möchtet...
Semantischer code wie z.b h1 für Überschriften und li elemente für mein Menue?
Jetzt giebt es auf meier Seite ja nicht viele Elemente,
nur: Das Menue und den 7 zeiligen Text in <p>.
Alles andere ist ja "unsichtbar" in den Bildern drin, soll ich jetzt im html dokument "platzhalter" für die Fehlenden Abschnitte erstellen (Header, Pfeiltasten etc.)?
Ist es letztendlich egal ob ich das Textfeld einfach unterhalb meiner menueliste platziere statt nebendran da ja später im css verschoben?
Ich bin im moment überfragt wohin mit dem Rest?
So wie ich das verstanden habe wollt ihr ein dokument in dem nur der html grundaufbau (head,body etc) drin ist + das menue in listenform und das textfeld?
Simon
Lieber MA,
Das Problem das ich gerade habe ist, das ich immer noch nicht genau verstehe was Ihr überhaupt von mir möchtet...
das ist offensichtlich.
Semantischer code wie z.b h1 für Überschriften und li elemente für mein Menue?
Genau!
Jetzt giebt es auf meier Seite ja nicht viele Elemente,
nur: Das Menue und den 7 zeiligen Text in <p>.
Das ist doch schonmal ein Anfang... nur kann ich nicht sehen, was Du gemacht hast. Auf der Seite http://www.simon-autenrieth.de/masimontestseitev3.html ist alles unverändert. Wo ist Dein neues Dokument?
Alles andere ist ja "unsichtbar" in den Bildern drin, soll ich jetzt im html dokument "platzhalter" für die Fehlenden Abschnitte erstellen (Header, Pfeiltasten etc.)?
Moment. "Unsichtbar" darf Dein Inhalt nicht sein. Du hast doch eben von Textabsätzen und einer Linkliste ("Menü") geschrieben. Sind die etwa "unsichtbar"? Verwechsle Inhalt nicht mit Form! Das Aussehen kommt später. Erst benötigst Du eine Struktur. Und dazu hast Du offensichtlich den ersten Schritt gemacht.
Ist es letztendlich egal ob ich das Textfeld einfach unterhalb meiner menueliste platziere statt nebendran da ja später im css verschoben?
Du redest schon wieder vom Aussehen. "Textfeld" ist ein visuelles Teil. Im Moment versuche ich Dir klarzumachen, dass Du eine Struktur benötigst. Und das hast Du noch nicht ganz verinnerlicht.
Ich bin im moment überfragt wohin mit dem Rest?
Welchem Rest? Deinen Grafiken? Immer mit der Ruhe. Das kommt auch noch, aber nicht jetzt.
So wie ich das verstanden habe wollt ihr ein dokument in dem nur der html grundaufbau (head,body etc) drin ist + das menue in listenform und das textfeld?
Es gibt kein Textfeld. Es gibt nur Struktur. Welche Inhalte hast Du denn wie ausgezeichnet? Wo ist der Link zu Deinem jetzigen Dokument?
Liebe Grüße,
Felix Riesterer.
Hier mal das aktuelle Dokument:
http://www.simon-autenrieth.de/Masimon11102010.html
Mit dem fehlenden Inhalt habe ich nur gemeint ob man z.B. etwas wie den header etc. auch in textform festhalten muss?
(und nein ich denke NICHT an die Bilder! Mir geht es nur um den Aufbau... :)
Simon
Lieber MA,
Hier mal das aktuelle Dokument:
der relevante Code sieht so aus:
<body>
<ul>
<li>Home/News</li>
<ul>
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
</ul>
<li>Music-box</li>
<li>Design-box</li>
<li>Illu-box</li>
<li>Me</li>
<li>Contact</li>
<p>Text</p>
</body>
Der Validator meldet dazu 3 Fehler und 2 Warnungen. Du findest die syntaktischen Fehler sicher selbst, oder?
So. Schauen wir uns die Struktur Deines Dokumentes etwas an. Da gibt es eine (verschachtelte) Liste und einen Textabsatz. Im Moment also ein sehr einfaches Dokument.
Deine Liste soll das Menü darstellen. Das erscheint mir klar, aber aus Sicht der Semantik ist es nur eine Liste, sonst nichts. Also machen wir etwas mehr daraus:
<body>
<div id="inhalt">
<h1>Überschrift</h1>
<p>Ein Textabsatz...</p>
</div>
<div id="navigation">
<h2>Meine weitere Seiten</h2>
<ul>
<li><a href="/">Home/News</a>
<ul>
<li><a href="/news1">News 1</a></li>
<li><a href="/news2">News 2</a></li>
<li><a href="/news3">News 3</a></li>
</ul>
</li>
<li><a href="/music">Music-box</a></li>
<li><a href="/design">Design-box</a></li>
<li><a href="/illu">Illu-box</a></li>
<li><a href="/me">Me</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
</body>
Im Wesentlichen habe ich Deine Struktur etwas umgedreht (zuerst Inhalt, dann Navigation) und die Bestandteile jeweils in ein passendes Elternelement verfrachtet. Ansonsten steht im Inhaltsbereich noch eine (Haupt-)Überschrift, denn ein Dokument ohne eine solche erscheint mir unfertig. Zu der Überschrift folgt noch ein Textabsatz, denn was soll diese Überschrift sonst überschreiben?
Meiner persönlichen Meinung nach ist es sinnvoll, das Wichtigste auch zuerst im Dokument zu notieren, daher verwende ich in aller Regel obige Reihenfolge in meinen Dokumenten. Der passende SELFHTML-Featureartikel sieht das etwas anders, aber den halte ich auch nur bedingt für allgemeingültig, ebenso wie meinen eigenen Ansatz auch.
Befülle doch mal meine überarbeitete Struktur mit etwas mehr Inhalt als einem simplen "Text"! Dann kann man sehen, wie man die Sache visuell gestaltet.
Liebe Grüße,
Felix Riesterer.
http://www.simon-autenrieth.de/Masimon11102010.html
Huhu,
Ersteinmal vielen Dank für die Mühe!
Peinlich das ich vergessen habe den ul tag zu schließen, der Validator war mir nicht bekannt, den habe ich gleich mal abgespeichert.
Ich habe nun mal ein bisschen "Blindtext" eingetragen, da ich erst später sehen kann in wiefern alles passt. Allerdings befinden sich in dem Text ä, ö oder ß Zeichnen die dazu führen das der Validator das Dokument nicht mehr lesen kann.
Wo steckt der Fehler?
Und wie geht es nun weiter?
lg,
Simon
Lieber MA,
http://www.simon-autenrieth.de/Masimon11102010.html
naja, so richtig viel Inhalt ist da nicht. Da ist nur der Textabsatz etwas mehr mit Text befüllt. Wo sind Deine Grafiken (war da anfangs nicht die diskutierte Bildergalerie mit Blätterfunktion)?
Ersteinmal vielen Dank für die Mühe!
Gern geschehen.
Peinlich das ich vergessen habe den ul tag zu schließen, der Validator war mir nicht bekannt, den habe ich gleich mal abgespeichert.
Es ist wichtig, dass der Quelltext syntaktisch fehlerfrei ist, da sonst die Browser anfangen zu raten. Und das führt oft zu ungewollten Anzeigefehlern. Und nein, es war nicht nur die nicht geschlossene <ul>, es war auch die Art und Weise, wie Du die "innere" Liste verschachtelt hast, das den Validator gestört hat. In meinem Code-Beispiel ist die Verschachtelung korrigiert worden. Vergleiche den Unterschied!
Allerdings befinden sich in dem Text ä, ö oder ß Zeichnen die dazu führen das der Validator das Dokument nicht mehr lesen kann.
Wo steckt der Fehler?
Du hast ein in ISO-8859-1 kodiertes Dokument für UTF-8 verkauft.
Und wie geht es nun weiter?
Jetzt kann man mit CSS die Seite so gestalten, dass sie aussieht, wie Du das wolltest.
Da Du in Deiner bildgewaltigen Version (http://www.simon-autenrieth.de/masimontestseitev3.html) ein zentriertes Layout mit fester Breite geplant hattest, empfiehlt es sich, die Seite in ein umfassendes <div>-Element zu verpacken, das gerne auch als "wrapper div" bezeichnet wird.
<body>
<div id="seite">
<div id="inhalt"></div>
<div id="navigation"></div>
</div>
</body>
Das ist von der Semantik her zwar sehr unschön, weil das "wrapper div" keinen strukturellen Sinn hat (warum den Inhalt des <body> in ein weiteres Einzel-Element verpacken?), aber aus visuellen Gründen ist das ein üblicher fauler Kompromiss.
Probier mal, ob es Dir gelingt ein simples zwei-Spalten-Layout zu basteln, das auf dieser Struktur basiert. Poste Dein Ergebnis und wir sehen weiter.
Liebe Grüße,
Felix Riesterer.
Huhu,
Tut mir leid aber ich hatte die letzten paar Tage zuviel zutun um mich großartig mit html/css auseinander zusetzen. (Soundtracks führ mehrere Spiele und ein Hörbuch müssen komponiert werden) Ich denke es ist darum wohl auch das Beste das hier abzubrechen, da mir Im Moment einfach die Zeit nicht reicht.
Ich danke dir auf jeden Fall für deine Geduld und die Hilfe!
Ich werde mich wohl jetzt damit begnügen mir ein layout herunterzuladen und das einfach anzupassen, so das es wenigstens ein bisschen nach mir ausschaut, aber mehr geht gerade nicht.
lg Simon
Hallo Simon
Ich werde jetzt erstmal meine Seite neu "slicen" damit das passt.
Damit es wieder 92 Grafiken werden?
Damit du versuchst deine bisherige Tabelle mit DIVs nachzubauen?
Bei einem CSS-Layot benötigst du höchstens 20 Grafiken, es sei denn, du hackst sie sinnlos klein.
Findest du es nicht auch blödsinnig, eine Grafik erst in kleine Stücke zu schneiden, nur um diese Stücke dann wieder zusammenzusetzen?
Bitte vergiss erst einmal vollständig, wie es aussehen soll, wenn es fertig ist.
Denke nicht ans Design!
Denke daran, was passieren soll, welche Informationen angezeigt werden sollen.
Sonst puzzlest du ewig mit Unmengen von Grafiken rum, und darfst bei jeder noch so kleinen Änderung wieder komplett von Vorn anfangen.
Auf Wiederlesen
Detlef
Hi,
Wie bekomme ich es jetzt hin das ich mit diesen Pfeilen (vor-zurück) zwischen beliebig vielen Bildern hin und herschalten kann?
Vielleicht in dem du das Beispiel http://de.selfhtml.org/javascript/beispiele/buttons.htm entsprechend anpasst ...?
Wenn das auch immer noch nicht das sein sollte, was du suchst - dann musst du dich vielleicht mal deutlicher ausdrücken. Ein Screenshot hilft eher wenig beim Verständnis, was du erreichen willst.
MfG ChrisB
Huhu,
vielen Dank für den Link Chris,
war aber leider immer noch nicht das was ich erreichen wollte.
Schade das es so schwer verständlich zu machen ist...
ich habe bei einem anderen nochmal ausführlicher beschrieben was ich erreichen möchte und auch eine Beispielseite angehängt
Hoffe das Hilft euch!
P.S.
Ich bin ja jetzt schon total begeistert wie aktiv dieses Forum ist!