Hyperlinkproblem

Hallo Zusammen,
Ich habe gerade ein Homepagelayout in Dreamweaver gebastelt - und nach nach einigen Schweißausbrüchen - steig ich so langsam hinter das Geheimnis um CSS und Html… naja - aber halt nur langsam…

Ich habe eine Datei erstellt und einen toll-designed Scrollbalken (freies Script, CSS) … verwendet und eingefügt… sieht alles ganz gut aus.
Jetzt wollte ich mich endlich über die Vervielfältigung meines Layouts machen und die Seiten miteinander verlinken… doch wenn ich ganz normal ein Wort verlinke - macht mir der Computer hinter das Wort einen grauen Hintergrund (sieht aus wie ein grauer Button aus den 80ern)… !!! Das möchte ich nicht. In den CSS-Styles stimmt alles.

vorsichtshalber habe ich den Text in ein frisches Dokument kopiert - und siehe da - ich kann Wörter ganz normal verlinken… Hm… die Page Properties habe ich überprüft - stimmt alles…
style=„text-decoration:none“ funktioniert leider nur für die Schrift.
Es muß also eher an das div gekettet sein.

kann irgendwo in den Scripts von dem Scrollbalken der Eintrag für den grauhinterlegten Hyperlink versteckt sein???

Habt Ihr vielleicht eine Lösung parat… gibt´s irgendwas - was ich vergessen habe zu checken? Irgendeine Voreinstellung - die ich nicht richtig eingestellt habe???

Vielen lieben Dank
Steffi

Moin,

Ich habe gerade ein Homepagelayout in Dreamweaver gebastelt -

Hmmm…

steig ich so langsam
hinter das Geheimnis um CSS und Html… naja - aber halt nur
langsam…

Das Geheimnis der beiden ist, dass HTML nur dafür da ist, die logische Struktur Deines Inhalts auszuzeichnen, also die Semantik. Damit ist HTML nicht dazu da, irgendetwas auf den Bildschirm zu zaubern.
Für letzteres ist CSS zuständig. Wenn Du beides immer strikt voneinander trennst, hast Du das Geheimnis gelüftet. Das zu verstehen - wenn man nicht durch irgendwelche falschen HTML-Tutorials vorbelastet ist - ist eine Sache von ein paar Minuten.

Ich habe eine Datei erstellt und einen toll-designed
Scrollbalken (freies Script, CSS) … verwendet und
eingefügt… sieht alles ganz gut aus.

Zum Glück geht das Einfärben von Scrollbalken nicht in jedem Browser.
Und wenn Du von einem echt eigenen Scrollbalken sprichst, davon würde ich abraten, weil die Nutzer den evtl. nicht als Scrollbalken erkennen bzw. akzeptieren. Es gibt einige Elemente des Browsers, die man nicht ändern oder nachbauen sollte, weil das die Nutzer verwirrt.

wenn ich ganz normal ein Wort verlinke - macht mir der
Computer hinter das Wort einen grauen Hintergrund
In den CSS-Styles stimmt alles.

Kann ja nicht sein. Wenn etwas nicht so aussieht, wie Du es willst, dann stimmt das dazugehörige CSS nicht.

vorsichtshalber habe ich den Text in ein frisches Dokument
kopiert - und siehe da - ich kann Wörter ganz normal
verlinken…

Die Fähigkeit, Wörter zu verlinken hat nichts damit zu tun, wie der Link auf Deinem Bildschirm aussieht (siehe meinen Einleitungsabsatz, das eine hat mit dem anderen nichts zu tun).

style=„text-decoration:none“ funktioniert leider nur für die
Schrift.

Naja, dafür ist es ja auch da.
Etwas anderes ändert diese Eigenschaft auch nicht.

Es muß also eher an das div gekettet sein.

Hört sich an, als hättest Du div-Suppe gekocht und nicht auf Semantik geachtet. Layout mit divs gemacht? Schlecht - nicht im Sinne von HTML.

kann irgendwo in den Scripts von dem Scrollbalken der Eintrag
für den grauhinterlegten Hyperlink versteckt sein???

Je nachdem, was das für Scripts sind, ist das denkbar.

Habt Ihr vielleicht eine Lösung parat…

Nein, wie denn? Wir wissen ja nicht, was Du da zusammen brutzelst.

gibt´s irgendwas -
was ich vergessen habe zu checken? Irgendeine Voreinstellung -
die ich nicht richtig eingestellt habe???

Alle. Es gibt keine definierten Voreinstellungen für CSS, an die sich alle Browser halten müssen. Es gibt nur Empfehlungen.

In CSS gilt: Wenn Du etwas willst, musst Du es explizit setzen. Wenn Du etwas nicht willst, musst Du es auch explizit setzen. Wenn Du eine Eigenschaft nicht setzt, erklärst Du dem Browser damit, dass Dir das Aussehen an der Stelle in der Hinsicht völlig egal ist.

Um Dein Problem konkret angehen zu können, brauchen wir einen Link zur Seite.

Liebe Grüße,
-Efchen

Hallo,
zu deinem eigentlichen Problem kann ich dir nichts sagen.
Aber wenn du mit Firefox arbeitest solltest du dir unbedingt Firebug installieren. Damit kannst du sehr gut herausfinden, wo die Angabe für deinen grauen Hintergrund herkommt.

Gruß ich_vogel

Hallo,

grundsätzliche Vorgehensweise: Nimm immer das letzte Stück Code raus, was du eingefügt hast, und prüfe erneut, ob der Fehler noch auftritt. Das ist die einfachste Art der Fehlersuche. Die Webdeveloper Toolbar von Firefox hilft da auch (wurde ja schon erwähnt). Wenn du nicht mehr genau weißt, welches Element was tut, gib diesem im CSS einen farbigen Rand, um es im Layout leichter identifizieren zu können und genauer zu sehen, wie es sich zum Rest verhält. Danach natürlich wieder wegmachen :wink: Bei deinem aktuellen Problem kann man dir ohne den Code oder einen Link nicht so recht helfen, fürchte ich. Aber wozu brauchst du den Scrollbalken?

Grüße

Hallo Liamara,
Danke Dir für Deine Tipps…
konnte so tatsächlich den Fehler finden… hab nochmal alle css styles durchgeklickt und einen Style gefunden - der sich direkt auf a bezieht… darin war der graue Hintergrund enthalten.
hm… irgendwie komisch, daß man in mehreren Menüs das Styling verändern kann… einmal in den „Page Properties“ und dann noch in den CSS-styles … dachte Page Properties sind übergeordnet… Aber da muß ich mich erst reinarbeiten. Bin doch noch zu sehr Laie auf diesem Gebiet… und Du schlägst vermutlich gerade die Hände über den Kopf zusammen.

einen Scrollbalken brauche ich deshalb:
Meine Homepage ist feststehend - und der Text oder Bilder befinden sich in einem fixen Bereich. Den Scrollbalken brauche ich - um den Text oder Bilder in diesem Bereich zu scrollen.
Ich mag diese vielleicht etwas veraltete Bedienung - nicht das Design - aber das Design kann man ja etwas gefälliger machen. Von der Usability halte ich manuell scrollen für sehr benutzerfreundlich. Ich finde es sehr anstrengend - wenn man eine Seite öffnet - und sämtliche Fenster bewegen sich automatisch von Links nach Rechts. Oder die Bilder rasen an einem vorbei und die Geschwindigkeit ist nicht einstellbar.

Ich Schick´ Dir den Link - wenn sie fertig ist…

Lieben Dank
Steffi

Hallo Du-Vogel,
Danke für den Hinweis.
Hab dazu noch was interessantes entdeckt:

da ich mich ja bisher noch nicht mit HTML und CSS auseinandersetzen mußte, das Thema aber verstehen möchte, habe ich mir komplette Homepages (incl. CSS, scr, images) herunter geladen.

[Nicht gleich motzen - wegen „Klauen“ oder so…] Die verschiedene Pages konnte ich nun analysieren, wie die „Pagemaker“ den so Ihre Seiten programmieren.

Falls dich das interessiert - hier die software zum free-download:
http://www.httrack.com/

VG Steffi

Hallo Efchen,
Danke für Deine Ausführliche Beschreibung.
Habe den Fehler finden können… es lag am CSS-Style.
Hm… hab tatsächlich eine „Div-Suppe“ gekocht… wo machen Div´s denn Probleme?

Ich schicke Dir sobald ich das Layout fertig hab den Link…

Vielen, vielen Dank
Steffi

Moin,

Hm… hab tatsächlich eine „Div-Suppe“ gekocht… wo machen
Div´s denn Probleme?

Bei der Semantik.
Das Element „div“ bedeutet „logische Gruppe“. Wenn Du z.B. nur ein Element in ein div packst, ist das in fast allen Fällen überflüssig, weil ein Element alleine keine Gruppe ist.
Das ist jetzt nicht ganz so schlimm, wie Tabellenlayout oder andere semantische Patzer (wie z.B. Ich bin (k)eine Überschrift , was definitiv KEINE Überschrift darstellt!), aber unnötige divs blähen den Quellcode auf, machen die Arbeit daran für Dich schwerer und verlängern die Ladezeiten bei den Nutzern und kosten Dich mehr Traffic.
Viele machen den Fehler, weil sie glauben, CSS-Eigenschaften dürften sie nur auf divs anwenden. Aber nahezu alle Eigenschaften kannst Du auf alle Elemente anwenden (Unterschiede zwischen Inline- und Block-Elementen definieren die meisten Ausnahmen).

Ich schicke Dir sobald ich das Layout fertig hab den Link…

Stells doch in „Mitgliederseiten“ ein. Da können auch noch andere bewerten. Da bekommst Du noch mehr Feedback.

Grüße,
-Efchen

Moin,

da ich mich ja bisher noch nicht mit HTML und CSS
auseinandersetzen mußte, das Thema aber verstehen möchte, habe
ich mir komplette Homepages (incl. CSS, scr, images) herunter
geladen.

Das ist aber nur dann eine gute Idee, wenn die Seite, die Du Dir runterlädst, auch technisch perfekt ist.

Es gibt aber leider so viele Websites von namhaften Firmen, die den Anforderungen von HTML leider nicht gerecht werden.

Eine gute Einführung in (X)HTML findest Du in FAQ:1161 verlinkt.

Wichtig ist, dass man versteht, dass HTML nicht dazu da ist, Inhalte auf den Bildschirm zu bringen, sondern dass HTML nur die logische Struktur (= Semantik) festlegt. Erst CSS bringt alles auf den Bildschirm. Und Inhalt und Layout sollte man immer und überall strikt voneinander trennen.

verschiedene Pages konnte ich nun analysieren, wie die
„Pagemaker“ den so Ihre Seiten programmieren.

Und wie beurteilst Du als Anfänger (war doch richtig, oder?), ob die Seite gut oder schlecht erstellt ist? Dazu bist Du als Anfänger gar nicht in der Lage. Programmiert ist dabei übrigens nichts, was Du runterladen kannst, ist nur HTML und CSS und beides sind sehr weit davon weg, Programmiersprachen zu sein.

Liebe Grüße,
-Efchen

Moin,

dachte Page Properties sind übergeordnet…

Eigentlich ist es ganu andersrum. Eigenschaften, die Du für die Seite festlegst, also z.B. in „body“ sind die grundlegenden Eigenschaften, die durch andere Definitionen „überschrieben“ werden, weil die anderen Elemente Kind-Elemente des bodys sind.

und Du schlägst
vermutlich gerade die Hände über den Kopf zusammen.

Daran erkennt man den Unterschied zwischen echtem Experten und Möchtegernexperten, die echten schlagen eben nicht die Hände über dem Kopf zusammen.

einen Scrollbalken brauche ich deshalb:
Meine Homepage ist feststehend

Autsch. Tu mal allen Menschen mit kleinen Displays oder kleinen Browserfenstern den Gefallen und verkleinere Dein Browserfenster auf sagen wir 1000x600px. Ich kenne Deine Site ja nicht, aber ich ahne fürchterliches.
Feststehende Inhalte sind sowas von unglücklich bis hin zu hochgradig nutzerunfreundlich, weil Du denen mit kleinem Viewport oftmals noch mehr Platz klaust, um die eigentlich relevanten Inhalte darzustellen.

Ich mag diese vielleicht etwas veraltete Bedienung

Denke immer daran, dass in erster Linie die späteren Besucher/Nutzer der Site die Bedienung mögen müssen, nicht Du. Du als Ersteller der Seiten kommst eigentlich immer ganz hinten.

Von der Usability halte ich manuell scrollen für sehr
benutzerfreundlich.

Das ist richtig (solange es nicht horizontal ist), umso mehr wundert es mich, dass Du feststehende Elemente verwendest. Aber vielleicht reden wir auch aneinander vorbei.

Ich Schick´ Dir den Link - wenn sie fertig ist…

Wir sind gespannt :smile:

Liebe Grüße,
-Efchen

Hallo Efchen,
Der Scroll-Balken soll so etwa aussehen… http://n-son.com/jsScrollbar/demos/fixedthumbs.html und es gibt auch ein Script dazu… kann man sich direkt von der Seite herunter laden.

Nur schaffe ich es nicht, daß auf der hochgeladenen Seite dieser Scrollbalken erscheint.
http://www.outofnorm.com

Merkwürdigerweise kann ich den tollen Scrollbalken in der Dreamweavervorschau sehen…
Es scheint… als ob der Pfad falsch angegeben ist … und die links zu den Scroll-images fehlt.
Bei Dreamweaver gibt es unterschiedliche Link-Optionen (relative oder absolut zu Dokument) Hab schon alles mögliche ausprobiert… klappt leider nicht.

Gibt es außerdem bei Dreamweaver vielleicht ein Tool ähnlich dem „Packen“ in „Indesign“. So daß beim Exportieren alle verwendeten Daten gepackt werden - und auch der Link entsprechend angepaßt wird?
Dann gibt es da noch das Problem… ich kann mit Mozilla die Seite öffnen aber nicht mit dem Internet-Explorer… Gibt´s da irgendein Tool, das die Daten irgendwie konvertiert?

VG Steffi

Guten Morgen,

Der Scroll-Balken soll so etwa aussehen…

Positiv daran ist, wenn JavaScript abgeschaltet ist, kommen normale Scrollbalken - so muss der Einsatz von JavaScript sein!

Aber negativ ist, dass der Scrollbalken anders aussieht und dass er links ist. Außerdem sind die browsereigenen Scrollbalken schneller. Auf langsameren Rechnern kann das eine ruckelige oder zähe Angelegenheit werden.

Fazit: Ich finds richtig gut, dass diese Lösung eine JS-lose Alternative hat, benutzen würde ich es aber dennoch nicht, weil anders aussehende Scrollbalken die Nutzer nur verwirren. Und wenn dann - z.B. aufgrund eines kleinen Viewports - womöglich noch andere, womöglich originale Scrollbalken zu sehen sind, weil die Seite in ihrer Gesamtheit nicht in einen kleinen Viewport passt, dann ist die Verwirrung perfekt und die Nutzbarkeit schrumpft gewaltig.

http://www.outofnorm.com

Da passiert bei kleinen Viewports genau das, was ich angemerkt habe. Man bekommt horizontale, dazu noch vertikale Scrollbalken und hat dann inmitten des Inhalts den nochmal von Dir erzeugten Scrollbalken. Am Ende soll der auch noch anders aussehen, als die anderen und der Nutzer ist völlig verwirrt und überfordert. Wenn er dann dazu noch keine Maus hat und mit Touchpad arbeitet, wirds echt haarig! Das ist dann die Stelle, bis zu der ich komme, wenn mich die Inhalte der Seite interessieren. Aber dann linke ich mich aus und werde die Site vermutlich nicht mehr benutzen.

Übrigens, ist der HTML-Code Dein Werk? Da muss ich Dir leider sagen, dass der von vorn bis hinten falsch ist. Du machst ja alles nur mit divs, das ist sozusagen völliger Kokolores :smile:
HTML soll eine Aussage treffen. Bei Dir sagt Deine Seite „Alles hier ist eine Gruppe“. Es gibt keine Überschriften und keine Textabsätze und nichts. Außerdem trennst Du Inhalt nicht von Layout und erzeugst mit HTML-Mitteln Linien (das ist Aufgabe von CSS). Und zu allem Überfluss vergewaltigst Du noch Tabellen zu Layout-Zwecken. In bezug auf HTML hast Du - so leid mir das ja tut - alles falsch gemacht, was man falsch machen kann.

Ach ja, und Du bezeichnest Deinen Code als HTML5. Davon ist aber dann nichts zu sehen. Keine Einteilung in Sections, keine ausgezeichnete Navigation und was es sonst noch für Dinge gibt, die HTML5 auszeichnen. Das macht keinen Sinn. Und kann IMHO (aber das habe ich noch nicht bestätigt bekommen) nur dazu führen, dass Vorlesebrowser und Suchmaschinen Deinen Inhalt völlig falsch verstehen (okay, tun sie wegen der div-Suppe sowieso).

Nur schaffe ich es nicht, daß auf der hochgeladenen Seite
dieser Scrollbalken erscheint.

Das müsste sich mal ein JavaScript-Experte ansehen, diese Frage ist in diesem Unterforum ja sowieso falsch aufgehoben, weil das weder mit HTML noch mit CSS zu tun hat.
Wenn man Scripts irgendwo runterlädt, ist doch meist eine Anleitung dabei, wie man das einbinden muss.

Es scheint… als ob der Pfad falsch angegeben ist … und die
links zu den Scroll-images fehlt.

Na, dann solltest Du den Pfad einfach korrigieren :wink:

Bei Dreamweaver gibt es unterschiedliche Link-Optionen
(relative oder absolut zu Dokument) Hab schon alles mögliche
ausprobiert… klappt leider nicht.

Selber nachsehen und von Hand ausbessern?

Gibt es außerdem bei Dreamweaver vielleicht ein Tool ähnlich
dem „Packen“ in „Indesign“. So daß beim Exportieren alle
verwendeten Daten gepackt werden - und auch der Link
entsprechend angepaßt wird?

Ich kenne DW nicht. Ich kann mir auch gerade nicht vorstellen, was gemeint ist.

Dann gibt es da noch das Problem… ich kann mit Mozilla die
Seite öffnen aber nicht mit dem Internet-Explorer… Gibt´s da
irgendein Tool, das die Daten irgendwie konvertiert?

Im IE9 sieht die Seite bei mir genauso aus wie in Firefox 13.0.1.

Grüße,
-Efchen

Ich nochmal,

Nur schaffe ich es nicht, daß auf der hochgeladenen Seite
dieser Scrollbalken erscheint.

Du hast das Script auch nicht aufgerufen. Wenn Du in der Demo-Seite guckst, wird da am Ende

aufgerufen. Das fehlt bei Dir. In diesem Script kommt als erstes das apply(), die Funktion gibts bei Dir auch, da steht im Kommentar, dass sie am Ende der Seite aufgerufen wird. Das fehlt definitiv bei Dir. Es liegt nahe, dass das Dein Problem ist.

Liebe Grüße,
-Efchen

P.S.: Beim Durchforsten Deines Quellcodes haben sich mir die Nackenhaare aufgestellt und die Zehnägel hochgerollt. Nicht nur, dass HTML völlig sinnfrei angewendet ist, es werden Umlaute in Klassennamen verwendet, die Klassennamen sind nicht semantischer Natur, sondern Layoutbezogen (keine Trennung von Inhalt und Layout). Die CSS-Angaben sind nicht in einem externen Stylesheet und die CSS-Angaben sind (auf den ersten Blick) überwiegend redundant (d.h. hohe Ladezeiten für die Nutzer).
Da kann man so ziemlich alles besser machen. Auch und insbesondere auf das Ergebnis, das mit Deiner Bildschirmgröße funktioniert (absolute Positionierung! Geht ja gar nicht!), aber andere ziemlich einschränkt.

Mein Tipp: Lass DW weg, lerne HTML/CSS und schreibe Deinen Code selbst. Dann musst Du nicht die Fehler, die DW macht, von Hand korrigieren. Hilfe gibts hier im Forum!

Ich nochmal,

Nur schaffe ich es nicht, daß auf der hochgeladenen Seite
dieser Scrollbalken erscheint.

Du hast das Script auch nicht aufgerufen. Wenn Du in der
Demo-Seite guckst, wird da am Ende

Hab´s eingefügt… Tut sich nix… dachte - es wäre einfach - so einen Scrollbalken einzufügen…

aufgerufen. Das fehlt bei Dir. In diesem Script kommt als
erstes das apply(), die Funktion gibts bei Dir auch, da steht
im Kommentar, dass sie am Ende der Seite aufgerufen wird. Das
fehlt definitiv bei Dir. Es liegt nahe, dass das Dein Problem
ist.

Liebe Grüße,
-Efchen

P.S.: Beim Durchforsten Deines Quellcodes haben sich mir die
Nackenhaare aufgestellt und die Zehnägel hochgerollt.

:wink: na, na… sowas sagt man doch nicht als Experte :smile: „Daran erkennt man den Unterschied zwischen echtem Experten und Möchtegernexperten, die echten schlagen eben nicht die Hände über dem Kopf zusammen.“
Aber vermutlich würde das mir genauso gehen … wenn ein Laie meint - sich innerhalb von wenigen Tagen das Wissen aneignen zu können - wozu Experten Jahre brauchen

Nicht

nur, dass HTML völlig sinnfrei angewendet ist, es werden
Umlaute in Klassennamen verwendet, die Klassennamen sind nicht
semantischer Natur, sondern Layoutbezogen (keine Trennung von
Inhalt und Layout).

Das mag wohl daran liegen, daß Design eher mein Gebiet ist… nur fehlen mir leider die Grundlagen - um eine saubere Programmierung hinzubekommen.

Die CSS-Angaben sind nicht in einem

externen Stylesheet und die CSS-Angaben sind (auf den ersten
Blick) überwiegend redundant (d.h. hohe Ladezeiten für die
Nutzer).
Da kann man so ziemlich alles besser machen. Auch und
insbesondere auf das Ergebnis, das mit Deiner Bildschirmgröße
funktioniert (absolute Positionierung! Geht ja gar nicht!),
aber andere ziemlich einschränkt.

Was bedeutet das? Heißt das, daß der "Gucker mit 4:3 Bildschirm mein Layout nur teilweise sieht??? (sorry, für die vielen unqualifizierten Fragen…)

Mein Tipp: Lass DW weg, lerne HTML/CSS und schreibe Deinen
Code selbst. Dann musst Du nicht die Fehler, die DW macht, von
Hand korrigieren. Hilfe gibts hier im Forum!

hm… ich mach mir mal nix vor… wäre ja eine Schande für jeden Programmierer - wenn ich es schaffe in kürzester Zeit mir HTML/CSS so anzueignen, daß ich eine perfekte Homepage gestalte… DW ist der schnellere Weg (Dachte ich jedenfalls - abgesehen von der manuellen Überarbeitung)… und ich hab leider nicht unendlich viel Zeit.
Möchte nur die Homepage so hinkriegen, daß alles so aussieht - wie ich es haben möchte - und das ist schon schwierig genug…
(ohje… vielleicht solltest Du Dir doch eher die Nackenhaare rasieren :wink:)
Wenn diese Extrawünsche - wie z.B. toller Scrollbalken - nicht klappen - muß es halt irgendwie was einfacheres werden… schade…

Vielen lieben Dank
für Deine Geduld
Steffi

Moin,

Hab´s eingefügt… Tut sich nix… dachte - es wäre einfach -
so einen Scrollbalken einzufügen…

Na, Du hast ja einen Scrollbalken. Einen viel besseren sogar :smile:
Nein, im Ernst, da würde ich im JavaScript-Forum nachfragen, wenn die Anleitung zur Installation des Scripts nichts hergibt.

P.S.: Beim Durchforsten Deines Quellcodes haben sich mir die
Nackenhaare aufgestellt und die Zehnägel hochgerollt.

:wink: na, na… sowas sagt man doch nicht als Experte :smile: „Daran
erkennt man den Unterschied zwischen echtem Experten und
Möchtegernexperten, die echten schlagen eben nicht die Hände
über dem Kopf zusammen.“

Hmmm…kommt mir irgendwie bekannt vor das Zitat :smiley:
Ich lache Anfänger nicht aus, aber wenn sie etwas falsch machen, dann muss man sie auch darauf aufmerksam machen, und zwar entsprechend der Schwere der Fehler.

Aber vermutlich würde das mir genauso gehen … wenn ein Laie
meint - sich innerhalb von wenigen Tagen das Wissen aneignen
zu können - wozu Experten Jahre brauchen

Nun, in wenigen Tagen hättest Du das Grundwissen durchaus lernen können. Aber Deine Quellen haben Dir einfach Mist erzählt - wie soll man als Anfänger den Unterschied zwischen richtig und falsch erkennen?

Das mag wohl daran liegen, daß Design eher mein Gebiet ist…

Dafür hast Du Dich mit dem festen Layout aber auch gründlich in die Nesseln gesetzt. Das ist vielleicht was fürs Printdesign, aber im Web klappt das so nicht.

nur fehlen mir leider die Grundlagen - um eine saubere
Programmierung hinzubekommen.

Weder für HTML noch für CSS brauchst Du Programmierung. Beides sind lediglich Strukturbeschreibungssprachen. Du musst nur verstehen, was Semantik ist (das ist der ganze Sinn von HTML) und das ist eher ein Begriff aus dem Deutschen und nicht aus der Informatik.

insbesondere auf das Ergebnis, das mit Deiner Bildschirmgröße
funktioniert (absolute Positionierung! Geht ja gar nicht!),
aber andere ziemlich einschränkt.

Was bedeutet das? Heißt das, daß der "Gucker mit 4:3
Bildschirm mein Layout nur teilweise sieht??? (sorry, für die
vielen unqualifizierten Fragen…)

Das sind keine unqualifizierten Fragen und das ist die Stelle, an der ich nicht die Augen verdrehe. Das sind die Fragen von jemandem, der es noch nicht weiß, aber wissen will.

Du musst Dich da auch von den Begriffen „Bildschirmgröße“ oder „Auflösung“ lösen. Auch das Seitenverhältnis des Bildschirms ist da nicht relevant. Das hat mit Erstellen von Webseiten nichts zu tun.

Du weißt aber hoffentlich, dass ein (Browser)Fenster nicht maximiert sein muss? Demnach kannst auch Du einfach Dein Browserfenster auf eine Größe von 1024x600px verkleinern, dann hast Du das, was ein moderner Netbook-Benutzer maximal zu sehen bekommt. Wenn Du das dann siehst, wirst Du sofort verstehen, warum der Nutzer Probleme hat. Und bedenke, dass er sein Fenster nicht vergrößern kann.

hm… ich mach mir mal nix vor… wäre ja eine Schande für
jeden Programmierer - wenn ich es schaffe in kürzester Zeit
mir HTML/CSS so anzueignen, daß ich eine perfekte Homepage
gestalte…

Merke:

  1. Keine Programmierung nötig. Programmierer müssen viel mehr lernen.
  2. Das Gestalten (wie Du schreibst) ist nur die eine Hälfte beim Erstellen von Webseiten, nämlich ausschließlich der CSS-Teil. HTML hat mit Gestalten nichts zu tun.
    Sag, wenn Du Deinen Inhalt erstellst, wie erstellst Du denn bei Dreamweaver die Semantik? Das musst Du da doch genauso machen, als wenn Du HTML direkt selbst schreiben würdest. Und Dreamweaver kann Dir diese Arbeit nicht abnehmen, weil die nur der Autor des Inhalts festlegen kann, das kann kein Computer alleine bestimmen.

Die *perfekte* Website erstellst Du nicht in wenigen Stunden, wohl aber eine Website mit der (nahezu; weil niemand perfekt ist) perfekten Semantik sehr wohl. HTML versteht ein 11-jähriger in 30 Minuten, die Tags lernt er in ein paar Stunden und bei regelmäßiger Anwendung kann er HTML in ein paar Wochen.

CSS zu verstehen ist ein bisschen umfangreicher. Gut erklärt kann man es aber auch in ein, zwei Tagen verstehen. Die Eigenschaften muss man halt mit der Zeit lernen. Das sind so viele, dass das erst mit der Zeit kommt. Aber von Anfang an braucht man auch nicht alle. „position“ z.B. würde ich erst nach vielen Wochen anschneiden.

Wenn Du es versuchst und den Sinn von HTML verstehst (Semantik) und Inhalt strikt von Layout trennen lernst, dann ist alles weitere geradezu ein Kinderspiel.
Am besten geht das, indem Du Dir ein paar Inhalte überlegst, diese in eine Textdatei schreibst. Dann setzt Du die Semantik fest, indem Du die richtigen HTML-Tags verwendest. Dabei behältst Du im Kopf, dass das alles nichts damit zu tun hat, wie die Seite später aussehen soll.

DW ist der schnellere Weg (Dachte ich jedenfalls -

Sehe ich anders. Du musst da die Bedienung des Programms lernen und musst jede Seite immer manuell nachbearbeiten (was zu erwarten ist bei Programmen, die Dinge automatisch machen).

abgesehen von der manuellen Überarbeitung)… und ich hab
leider nicht unendlich viel Zeit.

Daher würde ich jedem empfehlen, lieber HTML&CSS zu lernen. Geht IMHO schneller. Wenn man begreift, wie einfach es wirklich ist. Das geht nicht, solange Du beim Schreiben des HTML-Codes (anfangs) das Layout im Kopf hast.

Möchte nur die Homepage so hinkriegen, daß alles so aussieht -
wie ich es haben möchte

Und das möglichst gestern. Klar, das sagen viele Anfänger. Weil sie nicht wissen, dass das nunmal nicht geht. Das Thema ist nicht übermäßig kompliziert, aber Gedanken muss man sich schon machen. Von heute auf morgen erstellt man eben keine Website, auch nicht mit irgendwelchen Editoren. Wer etwas anderes behauptet, hat entweder keine Ahnung oder will nur Dein Geld.

(ohje… vielleicht solltest Du Dir doch eher die Nackenhaare
rasieren :wink:)

Kein Problem :smile:

Wenn diese Extrawünsche - wie z.B. toller Scrollbalken - nicht
klappen - muß es halt irgendwie was einfacheres werden…
schade…

Das ist nicht schade, das ist besser! Du bist ja nicht im Print-Design, sondern im Web-Design. Da ist weniger oft mehr.

Vielen lieben Dank
für Deine Geduld

Gerne. Wenn Du im Laufe der Diskussion hier verstehst, was HTML wirklich ist und erkennst, wie einfach alles ist, dann kann ich mich glücklich schätzen.
Und mir gefällt, dass Du - egal wie viel oder wenig Zeit Du hast, oder ob Du jemandem andersartige Scrollbalken aufzwingen willst - anscheinend aber doch lernwillig bist. Nicht selten wird man hier angeschnauzt, weil die Antwort nicht die war, die der Fragende hören wollte - ob diese dann richtig ist oder nicht.

Liebe Grüße,
-Efchen

Hallo Efchen,
Kennst du vielleicht ´ne Homepage - die wenig Schnickschnack hat und perfekt geschrieben ist…

…Nur mal zum besseren Verständnis… so fällt es mir hoffentlich leichter den Unterschied zu erkennen.

Du hast sehr wahrscheinlich Recht, dass die meisten Pages doch sehr gepfuscht sind… nur fällt mir als Laie das nicht auf und der Quellcode erschließt sich mir soooooo gar nicht.

Vielen Dank
Steffi

Seitentitel Site-Titel, nicht zu verwechseln mit Seitentitel

  • Startseite

  • Link 1

  • Link 2

  • Link 3

  • Link 4

News-Überschrift 1

Text

Seitenüberschrift
Text

Das wäre mal so ein einfaches Beispiel mit Site-Titel (Banner o.ä.), Menü, News-Bereich und Content-Bereich.

Was Dir auffallen sollte:

  • Nichts im HTML-Code weist auf Layout oder Design hin
    (das hat nämlich im HTML-Code nichts zu suchen. Klassennamen wir „rechts“ oder „gruen“ widersprechen auch der Trennung von Inhalt und Layout, weil sie ein Redesign erschweren)
  • Einzelne Elemente sind nicht unsinnigerweise zusätzlich in ein div gepackt
    (div bedeutet „Gruppe“. Das Menü oder die News-Leiste brauchen nicht nochmal in ein div gepackt werden, weil sie als einzelne Elemente keine Gruppe darstellen. Wenn es dann ans Layout geht: Beides (dv und ul) sind Block-Elemente. Sie verhalten sich optisch beide gleich. Was man mit dem div hätte machen wollen, kann man auch mit dem l machen, z.B. ein float:right, um es an den rechten Rand zu kriegen.
  • Inhalte haben eine logische Bedeutung. Alle Textabsätze haben ein , Listen sind als solche ausgezeichnet, die Reihenfolge und Wertigkeit der Überschriften ist sinnvoll und lückenlos.

Prinzipiell bräuchte man auch nicht das div#Content, das wird interessant, wenn man ein mehrspaltiges Layout machen will, und nicht will, dass der Content unten die Sidebars umfließt.

Mein Tipp: Nimm Dir ein bisschen einfachen Content und übe, diesen semantisch sinnvoll auszuzeichnen und dabei keinen Gedanken als Layout/Design zu verschwenden. So lernst Du Semantik (HTML) und so lernst Du, Inhalt und Layout strikt voneinander zu trennen.

Ich hoffe, das hilft Dir schonmal weiter!
Ansonsten wie bestimmt schon erwähnt: Gute Einführung in FAQ:1161 verlinkt.

Grüße,
-Efchen

P.S.: Ob XHTML oder HTML ist egal, aber Strict sollte es sein und Du solltest die Seiten validieren (das ist aber nur Syntax). So lernst Du ordentliches Arbeiten und verwendet keine Tags, die eigentlich nicht ins HTML gehören.
Wenn Du HTML5 verwenden willst (hast Du bei Deinem Doctype getan), dann solltest Du aber auch HTML5 verwenden, also Einteilung in Sections, andere Überschriftenwertigkeit, Navbar usw.
Ob Du diesen oder jenen Doctype nimmst, kann nämlich die Bedeutung Deines Inhalts verändern. Eine Überschrift 1. Ordnung und eine Überschrift 1. Ordnung, die in einer der ersten Überschrift untergeordneten Section liegt, haben nämlich nicht mehr die selbe Wertigkeit, wie das bis HTML 4 der Fall war. Das nur so am Rande, auch wenn Du es jetzt sofort vielleicht nicht verstehst. Aber „einfach so“ den HTML5-Doctype zu verwenden „weil er kürzer ist“, ist eigentlich Unfug.

1 Like