Homepage - Schwebende Menü- und Titelleiste

Hi!

Es geht um folgende Homepage: (…)

Nachdem ich meine Homepage schon relativ lange vernachlässigt habe, wollte ich ihr mal einen neuen Bilderviewer für die Galerie (Lightbox2 gönnen). Dies ist mir auch gelungen - ich habe die Homepage mit Lightbox hier am PC.
Das Problem, dass sich aber stellt, ist, dass Lightbox nicht gut mit Frames klar kommt, und da diese ja schon seit längerem *hust* als veraltet gelten, habe ich mir überlegt, wie ich meine Homepage ohne Frames auskommen lassen könnte.
Das Kernproblem dabei ist aber, dass sich das Aussehen der HP möglichst nicht ändern sollte. Sprich, es sollte oben eine Art Headerleiste geben, in der groß „emptyvi“ steht, und das Navigationsmenü soll auch beim Scrollen des Inhaltes möglichst da bleiben wo es ist, und nicht nach obenhin mitscrollen. Auch der gepunktete Rahmen von Menü und Inhalt sollen gleich bleiben.
Tja, nur habe ich leider absolut keine Idee, wie sich das ohne Frames hinbekommen lässt. :frowning:
Nachdem ich leider im Scripten und CSS nicht sonderlich Erfahrung habe, dachte ich, ich wende mich mal wieder an euch :wink:

Falls wer eine Idee hat, immer raus damit!

l.g.: Ulli

[Team] Link entfernt

Moin Moin!

Das Problem, dass sich aber stellt, ist, dass Lightbox nicht
gut mit Frames klar kommt

Niemand kommt gut mit Frames klar. Am wenigsten die Webmaster. Wenn man Frames verwendet (die teils enormen Nachteile lassen sich bei Google finden), muss man deutlich mehr Aufwand investieren, so dass Frame-unfähige Clients (wie z.B. Suchmaschinen-Robots) die Site auch komplett nutzen können. Meistens wird das aber eben vernachlässigt („Ihr Browser kann keine Frames darstellen…“).

Es gibt heute keinen guten Grund mehr, Frames zu verwenden. Auch Du solltest umdenken.
In Sachen HTML & CSS hast Du ja auch noch enormen Nachholbedarf.

und da diese ja schon seit längerem
*hust* als veraltet gelten

Sie gelten nicht als veraltet, sie sind einfach nutzerunfreundlich und haben keine wirklichen Vorteile. Alles, was Du an Frames persönlich gut findest, lässt sich auch auf benutzerfreundliche Art und Weise umsetzen.

habe ich mir überlegt, wie ich
meine Homepage ohne Frames auskommen lassen könnte.

Einfach weg damit, das wars schon :smile:

Das Kernproblem dabei ist aber, dass sich das Aussehen der HP
möglichst nicht ändern sollte.

Frames sind ja in erster Linie auch kein Feature, das das Aussehen verändert.

Tja, nur habe ich leider absolut keine Idee, wie sich das ohne
Frames hinbekommen lässt. :frowning:

Die gleiche Frage stellen so viele Frames-Umsteiger. Die Antwort ist aber ganz einfach: weglassen :smile:

Nachdem ich leider im Scripten und CSS nicht sonderlich
Erfahrung habe, dachte ich, ich wende mich mal wieder an euch

Dann musst Du das ändern.

  1. HTML lernen. Dein Code weist darauf hin, dass Du den eigentlichen Sinn von HTML noch nicht verstanden hast (wie so viele und auch sogenannte Medien-Agenturen).
  2. CSS lernen.
  3. Beides strikt voneinander trennen.

Du musst verstehen, wozu HTML da ist: Für die logische Inhaltsauszeichnung. Nichts, was Du mit HTML machst, hat Auswirkung auf das Aussehen. Das wird komplett und nur über CSS gemacht.

Was heißt denn nun „logische Textauszeichnung“? Das ist das Vergeben von Semantik. Und was ist das? Mehr dazu sagt Dir u.a. Wikipedia.
In HTML gibt es Tags. Jedes Tag hat eine Bedeutung. Mit Hilfe dieser Tags gibst Du Deinem Inhalt eine Bedeutung. Du zeichnest Überschriften aus, Adressen, Textabsätze, wichtige und sehr wichtige Textpassagen, tabellarische Daten, Listen, usw.

Das ist HTML. Mehr nicht. Kann man in 2 Stunden lernen. Man darf nur nicht den Fehler machen, von HTML einen Sinn zu erwarten, den es nicht erfüllen darf: nämlich das Visualisieren Deines Inhalts. Das macht HTML nicht, dafür ist es nicht zuständig. Wenn Du eine Überschrift willst, musst Du bestimmen, welche Ordnung die Überschrift hat. Wenn Du dann feststellst, dass das gewählte Tag im Browser die Schrift zu groß erscheinen lässt, dann ist der Fehler, eine niedrigere Ordnung zu wählen. Denn damit veränderst Du die Bedeutung Deines Inhalts, obwohl Du nur das Aussehen ändern willst. Ist die Schrift zu groß, änderst Du das über die Schriftgröße mit CSS.

Gerne erkläre ich mehr, wenn es noch nicht klar ist. Also einfach nochmal nachfragen, wenn was nicht klar ist.

Liebe Grüße,
-Efchen

Lektüre
Hi, Ulli!

Hier findest Du, was Du zum Thema „Layout mit CSS“ wissen musst.
http://de.selfhtml.org/css/layouts/index.htm

Gruß, Caro

Moin,

SelfHTML hilft da nur bedingt, weil es der Zeit sehr hinterher hinkt.

Es bringt auch nichts, sich auf CSS zu stürzen, wenn man noch kein HTML kann. Es tun zwar immer wieder viele, aber die Ergebnisse finden sich überall im WWW. Fehlende Semantik, aufgeblähter Code. Und wenn man regelmäßig in Foren unterwegs ist, hört man immer wieder, dass CSS so ein schwierig zu lernendes Monster sei. Bei 95% derjenigen, die mit CSS nicht klar kommen, findet man dann aber heraus, dass sie auch keine Ahnung von richtig verwendetem HTML haben. Schließt man diese Lücke, klappts auf einmal auch ganz einfach mit CSS.

Daher vor dem Lernen von CSS unbedingt HTML lernen!

Grüße,
-Efchen

Hi, Efchen!

SelfHTML hilft da nur bedingt, weil es der Zeit sehr hinterher
hinkt.

Das mag sein, aber man muss man ja mal einen Einstieg finden. Und das Prinzip des CSS-Box basierten Layoutes ist in SELFHTML einfach gut erklärt.

Im übrigen glaube ich kaum, daß der Fragesteller auf seiner Seite auf die Optik verzichten und zurück zum reinen HTML kehren möchte. Warum auch? Er hat bereits eine Ahnung von HTML, er muss nicht die Sprache von der Pike auf lernen sondern seine Ansätze überdenken. Und auf die Grundprinzipien hast Du ihn ja bereits aufmerksam gemacht. Er scheint dem gegenüber auch aufgeschlossen zu sein - den ersten Schritt, nämlich auf die Frames zu verzichten, macht er bereits von sich aus.

Meinst Du nicht, dass jetzt die Zeit für ein wenig praktische Hilfstellung ist?

Es bringt auch nichts, sich auf CSS zu stürzen, wenn man noch
kein HTML kann.

Ganz im Gegenteil, denke ich. Das Prinzip HTML für Auszeichnungen -> CSS fürs Format verinnerlicht man am besten, wenn man beides gleichzeitig lernt. Dann kommt man nämlich gar nicht erst in Versuchung, sich mit so lustigen Dingen wie -Tags vertraut zu machen.

Gruß, Caro

Das mag sein, aber man muss man ja mal einen Einstieg finden.

Das ist richtig. Ich habe es auch nur der Vollständigkeit halber dazu gesagt, dass SelfHTML leider der Zeit hinterher hinkt. Aber das bezieht sich tatsächlich auch mehr auf die HTML-Basis (speziell die Semantik). Und auf die Trennung von Inhalt und Layout wird nicht genau genug eingegangen, was das effektiv wirklich heißt.

Und das Prinzip des CSS-Box basierten Layoutes ist in SELFHTML
einfach gut erklärt.

Allerdings werden dafür s verwendet, was leider das Märchen verbreitet, man mache heutzutage „Layout mit divs“. In der Tat ist das aber genau so falsch, wie Layout mit Tabellen.

Im übrigen glaube ich kaum, daß der Fragesteller auf seiner
Seite auf die Optik verzichten und zurück zum reinen HTML
kehren möchte. Warum auch?

Wer will das denn? Aber die Basis aus HTML muss trotzdem stimmen, d.h. sie muss valide und semantisch sinnvoll sein, sonst hast Du mit CSS nur Probleme. Wenn Du Fehler im HTML-Code hast, zeigt CSS u.U. nicht das an, was Du Dir vorgestellt hast. Wenn Du keine oder eine falsche Semantik vergibst, dann hast Du doppelte und dreifache Arbeit, wenn Du das später korrigierst.

Und so ganz nebenbei ist nur eine Site mit richtiger Semantik barrierefrei und wird von Suchmaschinen richtig erkannt. HTML richtig zu nutzen heißt nicht „back to the roots“, sondern ist nach wie vor eine unbedingt notwendige Basis. Nur seit der Einführung von CSS kann man HTML endlich wieder dem Sinn zuführen, zu dem es eigentlich gemacht ist. Und an dem Sinn wird sich auch in Zukunft nichts ändern, ohne HTML ist CSS nichts wert.

Er hat bereits eine Ahnung von HTML

Eine Ahnung vielleicht. Aber sehr rudimentäres Wissen, das für vernünftiges CSS leider nicht ausreicht. Den eigentlichen Sinn von HTML hat der OP noch nicht verstanden. Der Code könnte den 1990er Jahren entsprungen sein.

er muss nicht die Sprache von der Pike auf lernen

Doch. Er muss den Sinn von HTML verstehen. Er glaubt noch, HTML dient zur Darstellung von Websites und was „Semantik“ in dem Zusammenhang ist, ist ihm gänzlich unbekannt.

Er scheint dem gegenüber auch aufgeschlossen zu sein

Das möchte ich mit meinen Analysen seiner Fähigkeiten auch nicht abstreiten. Ich möchte damit nur klar machen, worauf es bei moderner Website-Erstellung ankommt. Weil das nämlich bei der Mehrheit der Webmaster leider immer noch nicht angekommen ist.

Meinst Du nicht, dass jetzt die Zeit für ein wenig praktische
Hilfstellung ist?

Ich sagte ja, HTML lernen. Verstehen, was „Semantik“ ist. Mit Google und ein paar Nachfragen kann man das recht schnell begreifen, wenn man sich nicht selbst im Weg steht.

Es bringt auch nichts, sich auf CSS zu stürzen, wenn man noch
kein HTML kann.

Ganz im Gegenteil, denke ich. Das Prinzip HTML für
Auszeichnungen -> CSS fürs Format verinnerlicht man am besten,
wenn man beides gleichzeitig lernt.

Das führt dann aber dazu, dass die Semantik oft auf der Strecke bleibt; und wenn man die dann ändert, wenn das Stylesheet fertig ist, hat man oft doppelte und dreifache Arbeit, weil man dann das Stylesheet auch wieder ändern muss.

CSS ist weit einfacher, wenn man eine valide und semantisch sinnvolle und fertige Basis aus HTML hat.

Dann kommt man nämlich gar
nicht erst in Versuchung, sich mit so lustigen Dingen wie
-Tags vertraut zu machen.

Das kommt man auch so nicht, weil das physische Inhaltsauszeichnung ist, die man mit HTML nicht macht (was SelfHTML nicht deutlich genug sagt). In HTML gehts ja um logische Inhaltsauszeichnung. Wichtig ist, dass man versteht, dass nichts, was man in HTML macht, man wegen des Aussehens macht, sondern nur wegen der Bedeutung des Inhalts.

Grüße,
-Efchen

Hi!

Ich hab jetzt mal ne neue Seite ohne Frames dafür mit mehr Einsatz von CSS gestüzt. Für die Gliederung der Seite habe ich aber dennoch eine table benutzt - du hast geschrieben, dass dies genauso falsch sei, wie divs zu verwenden. Nur leider weiß ich nicht wirklich, wie ich da drum herum kommen soll :confused: Übrigens wird die Seite mit Firefox so angezeigt, wie ich es mir vorstelle, der IE8 zieht meine Menübox jedoch mit nach unten.

Seite: (…)

Dann hat sich noch ein weiteres kleineres Problem ergeben: Wenn ich mir die Website von der Festplatte aus ansehe, wird sie richtig dargestellt, mit charset ISO-8859-1. Sobald ich die Seite aber hochgeladen habe, und sie auf dem Server abrufe, nimmt mein Browser (Firefox) automatisch UTF-8 als charset. Nachdem ich nun schon lang=„de“ und eine Metainfo mit in den Code genommen habe, bin ich doch relativ ratlos, warum.
Könnte das Problem irgendwie Seitens des Servers liegen?

mfg.: Ulli

[Team] Link entfernt

Für die Gliederung der Seite habe ich
aber dennoch eine table benutzt - du hast geschrieben, dass
dies genauso falsch sei, wie divs zu verwenden. Nur leider
weiß ich nicht wirklich, wie ich da drum herum kommen soll :confused:

Hmmm…einfach nicht das -Tag benutzen?
Bei der „Gliederung“ einer Seite mit HTML geht es ja NICHT um das spätere Aussehen der Seite! Es besteht also gar keine Notwendigkeit, eine Tabelle zu benutzen.
Mit den HTML-Tags legst Du nur die logische Bedeutung Deines Inhalts fest. Und wenn Du nicht gerade tabellarische Daten hast, wirst Du auch kein verwenden.

  1. Aufgabe an Dich: Entferne die Tabelle.

Was Du z.B. falsch machst: Du definierst Dein Menü als mehrere „Txtabsätze“. Das ist ein Menü sicher nicht. Es gibt in HTML (noch) kein eigenes Tag mit der Bedeutung „Menü“, aber es gibt Listen. Ein Menü ist eine Liste, eine Liste von Links. Also zeichnest Du Dein Menü als Liste (
) aus.
2. Aufgabe: Zeichne Dein Menü als Liste aus.

Dabei darfst Du nicht mehr an Layout oder Design denken, das ist an dieser Stelle irrelevant. Darum geht es bei HTML nicht.

D.h. Du hast am Ende eine Überschrift , ein Menü
und zwei Überschriften , eine fürs Menü und eine für den Content.

Prima! Keine Tabellen und bisher noch keine . So muss das aussehen.

Jetzt gehts dann ans Layout. Das macht man allein mit CSS. Je nach Wünschen kann aber auch noch eine HTML-Änderung notwendig sein, wie bei Dir:

  1. Du willst einen Menü-Bereich mit Liste und Überschrift, und alles soll einen Rahmen bekommen. Deshalb gruppierst Du die beiden Elemente und
    . Mit welchem Tag gruppiert man? Richtig! Mit . Also ein um die beiden Tags.
  2. Du willst den Content-Bereich auch logisch zusammenfassen und einen Rahmen geben. Also was machst Du? Richtig, den Content-Bereich mit einem umschließen.
    Das reicht. Keine Tabellen und mehr als zwei sind hier nicht nötig.
  3. Jetzt kannst Du den Elementen, die Du im HTML-Code festgelegt hast, mit CSS formatieren. Änderungen am HTML-Code musst Du an der Stelle nicht mehr machen, außer velleicht um eindeutige IDs oder mehrfach verwendbare Klassen zu verwenden.

Übrigens wird die Seite mit Firefox so angezeigt, wie ich es
mir vorstelle, der IE8 zieht meine Menübox jedoch mit nach
unten.

Erstmal die Fehler im HTML korrigieren. Sonst macht es keinen Sinn, nach CSS-Problemen zu suchen!
CSS funktioniert nur mit validem und semantisch sinnvollem HTML.

Vielleicht hast Du auf Anhieb verstanden, was ich Dir vermitteln wollte. Dann wirst Du Dich zurücklehnen und erleichtert feststellen: Mann ist das einfach!

abrufe, nimmt mein Browser (Firefox) automatisch UTF-8 als
charset.

Nein. Der sieht ja, dass das Dokument ISO-8859-1 sein soll. Tatsächlich ist das Dokument aber wahrscheinlich als UTF-8 abgespeichert, jedenfalls als was anderes als das, was im charset angegeben ist. Das ist immer die Ursache für die falsche Darstellung von Sonderzeichen.

Könnte das Problem irgendwie Seitens des Servers liegen?

Evtl. liefert der Server per HTTP-Header alle Seiten als utf-8 aus?

1 „Gefällt mir“

Hi!

Hab jetzt mal die Tabelle entfernt und das Menü mit einer Liste gemacht, so wie du es empfohlen hast. Ist das ganze jetzt halbwegs in Ordnung?

Seite: (…)

Falls ja, hätte ich da noch die Frage, was ich als Behälter für die Thumbnails in der Galerie nehmen soll? Da hatte ich bisher immer eine Tabelle mit festen drei Spalten. Meiner Meinung nach wäre eine Tabelle eigentlich aber nicht wirklich richtig, oder? Es sind ja eigentlich mehr ein Haufen von kleinen Bildern, sollte man sie also in einem div zusammen fassen?
Falls ja, müsste ich die Thumbnails, da darunter immer noch ein Bildnahme steht jedes einzeln nochmal in ein div packen?
Mit margin sollte es dann hinzubekommen sein, dass nur soviele Bilder in einer Zeile angzeigt werden, wie Platz haben, und dann automatisch in die nächste Zeile „umgebrochen“ wird. Wenn man diesen automatischen „Umbruch“ verhindern wollte, sondern immer genau 3 Bilder pro Zeile haben will, wie könnte man das mit CSS realisieren? :confused:
Hast du, oder wer anderer da vielleicht einen Vorschlag, wie sich das sauber mit CSS realisieren ließe?

Ich möchte mich nochmals für die Antworten bedanken, die du mir schon gegeben hast - sie haben mir wirklich sehr geholfen :smile:

l.g.: Ulli

[Team] Link entfernt

Moin,

Hab jetzt mal die Tabelle entfernt und das Menü mit einer
Liste gemacht, so wie du es empfohlen hast. Ist das ganze
jetzt halbwegs in Ordnung?

So ist es anständiger HTML-Code, wie er gedacht ist. Ich sehe nichts mehr, was ich beanstanden würde. :smile:

Falls ja, hätte ich da noch die Frage, was ich als Behälter
für die Thumbnails in der Galerie nehmen soll?

Wozu einen Behälter? Man muss nicht immer alles in irgendwelche Container stopfen. Aber mit einem bestimmten Tag wird das natürlich ausgezeichnet, vielleicht meinst Du das einfach.

Überlege, was Deine Images am besten beschreibt. Wie wirst Du sie zeigen wollen? Eine einfache AufLISTung? Irgendeine Form von Liste sind Fotogalerien eigentlich immer. Wenn es nur die Bilder sind, dann ist
perfekt. Wenn Du zu jedem Bild noch eine Beschreibung angeben willst, bietet sich die Definitionsliste an, weil man damit den beschreibenden Text direkt dem Bild zuordnet.

Da hatte ich
bisher immer eine Tabelle mit festen drei Spalten. Meiner
Meinung nach wäre eine Tabelle eigentlich aber nicht wirklich
richtig, oder?

Genau. Eine Tabelle ist ja zweidimensional und vermittelt entsprechende Informationen. Eine Liste von Bildern ist aber eindimensional.

Es sind ja eigentlich mehr ein Haufen von
kleinen Bildern, sollte man sie also in einem div zusammen
fassen?

Nein.
Es ist ja auch nicht nur ein „Haufen“.

Falls ja, müsste ich die Thumbnails, da darunter immer noch
ein Bildnahme steht jedes einzeln nochmal in ein div packen?

Ah, darunter noch ein Bildname? Dann sind wir ja bei der Definitionsliste.

Mit margin sollte es dann hinzubekommen sein, dass nur soviele
Bilder in einer Zeile angzeigt werden, wie Platz haben, und
dann automatisch in die nächste Zeile „umgebrochen“ wird.

Das passiert automagisch. margin setzt nur einen Abstand, sorgt aber nicht für das Umbrechen.

Wenn man diesen automatischen „Umbruch“ verhindern wollte, sondern
immer genau 3 Bilder pro Zeile haben will, wie könnte man das
mit CSS realisieren? :confused:

Ich würde erstmal hinterfragen, ob das sinnvoll ist. Denn Du weißt ja gar nicht, wieviel Platz Du im Viewport der Browser Deiner Besucher hast. Beim einen würden vielleicht 10 Bilder in eine Zeile passen, bei Dir vielleicht 3, bei dem ein oder anderen vielleicht nur 2. Wenn Du dann da 3 reinquetschst, muss der Nutzer horizontal scrollen und ist schon genervt von Deiner Site.

Ansonsten bräuchtest Du ja Deine Bilderliste nur in einen Container packen, dessen Breite gerade mal 3 Bilder zulässt (fixe Breite).

Ich möchte mich nochmals für die Antworten bedanken, die du
mir schon gegeben hast - sie haben mir wirklich sehr geholfen

Ich freue mich, wenn ich helfen kann. Ich weiß, dass das Erstellen von Websites mit HTML & CSS nach modernen Gesichtspunkten um ein Vielfaches einfacher ist, als in den 1990ern, wo man mit Layouttabellen kämpfte. Und ich weiß, dass es eigentlich nicht schwer ist, man muss nur das dahinterliegende Prinzip begreifen. Und das will ich vermitteln.

Das bringt denen was, denen ich damit helfe, und es führt zu einem besseren WWW. Mit 100%iger Nutzbarkeit aller Sites in allen Clients (auch Browsern) und ein vollständig barrierefreies Web, das Menschen mit Behinderungen nicht als Menschen zweiter Klasse abtut.

Liebe Grüße,
-Efchen

1 „Gefällt mir“

Hiho!

Erstmals nochmal ein dickes Danke!

Dann zu meiner (hoffentlich ^^) letzten Frage in diesem Thread:

Seite: (…)

Ich habe alle Thumbnails in eine Definitionsliste eingefügt, und die Bildtitel als Beschreibung der Thumbnails genommen. Soweit so gut. Jedoch schaffe ich es mittels CSS einfach nicht, dass sich die „Objekte“ samt „Beschreibung“ von links nach rechts anordnen, und nicht stur in einer Reihe hinunter. :confused:
Ich habe versucht, die „Objekte“ nach links zu floaten, was aber nicht wirklich funktioniert.
Ich habe eine Webseite gefunden, die erklärt, wie man es mit Definitionslisten machen kann - jedoch benutzt der Autor hier für jedes einzelne Bild eine eigene Liste, was, wie ich meine ein wenig unelegant ist (funktionieren tut es aber so).
Link dazu: http://www.xhtml-und-css.de/medien/beispiele/bsp-fot…
Meine Frage: Wie schaffe ich es, dass Thumbnails von links nach rechts laufen, und, wenn zu wenig Platz ist, in die nächste „Zeile“ umbrechen? (Eine feste Breite an das Thumbnail und dessen Beschreibung habe ich schon mittels CSS vergeben)

Liebe Grüße, Ulli :smile:

[Team] Link entfernt

ALso was mir als erstes mal so auffällt:
Die Klassen „galerieDD“ und „galerieDT“ sind überflüssig und verwirrend. Du kannst die Elemente ja alle so ansprechen: „dl dt“ oder „dl dd“. Außerdem scheinst Du irgendwie für alles Klassen anzulegen, das macht den Code nicht immer übersichtlicher. Und manchmal wären IDs sicherlich sinnvoller.

Dann zur Definitionsliste. „galerieDT“ ist mit „display:block“ ausgezeichnet. Damit verhält sich dieses Element wie ein Block-Element. Die Eigenschaft von Block-Elementen ist aber, dass sie nach sich einen Zeilenumbruch einfügen, das Ergebnis, dass diese Elemente alle immer untereinander stehen.

Ah, ich seh gerade „.inhaltsbox“ hat sowohl „float“ als auch „position:absolute“. Das geht nicht, die beiden Eigenschaften widersprechen sich. Nimm das „position“ raus und ersetze das „left“ durch ein „margin-left“. Das „float“ brauchst Du an der Stelle auch nicht. Und schon weitet sich der Container auch auf die volle zur Verfügung stehende Breite, was sich als durchaus hilfreich erweisen wird, wenn Du Deine Bilder nebeneinander haben willst :smile:

Die Elemente der Definitionsliste scheinen aber auch von Hause aus Block-Elemente zu sein. Also müssen wir tricksen. Die eine Möglichkeit ist, das mit jewels einer eigenen Liste zu machen, das halte ich persönlich aber auch nicht unbedingt für sehr sinnvoll. Denn es ist ja logisch gesehen nur eine Liste.
Die Alternative wäre, jeweils ein dt und dd in einem zu gruppieren und diese divs dann jeweils zu floaten. Das müsste funktionieren.

Die feste Breite gibst Du dann natürlich dem gruppierenden div und nicht beiden Elementen.

Probiers mal aus!

1 „Gefällt mir“

Hi!

Ich bins nochmal (jaaa, ich weiß, schon wieder :/). Leider kann ich mein Vorhaben aus dem letzten Post, diesen Thread um nicht noch eine Frage zu erweitern nicht ganz einhalten (dieses Mal ist es aber sicher das letzte Mal :wink: )

Aaaaalso: Hab jetzt, wie du mir empfohlen hast, um jedes Element samt Beschreibung aus der Definitionsliste ein gebastelt. Funktioniert mit nach links floaten auch wunderbar.

Das Problem dass sich mir nun stellt, ist, dass die Bilder innerhalb des Inhaltsrahmens (der Rahmen der „inhaltsbox“) horizontal zentriert werden sollen. Das funktioniert aber leider nicht (vor allem wenn man das Browserfenster so lange schmäler macht, bis das rechteste Bild umbricht, hat man rechts einen breiten Abstand zum Inhaltsrahmen).
Um mein Problem zu verdeutlichen, hier zwei Screenshots. Den zweiten habe ich mit Bildbearbeitung so gemacht, wie ich mir vorstelle, dass es aussieht :wink::
(…)

Hier die Galerie (zum selbst testen und so ^^): (…)

Dabei ist noch zu beachten, dass ich Rahmen um die -Container gemacht habe, damit man die Abstände besser sehen kann.

Kennst du (oder wer anderes :smile: ) für mein Problem eine Lösung? Ich habe die Vermutung, dass sich die Sache nicht mehr mit CSS alleine lösen lässt und ich auf JavaScript oä. zurückgreifen werde müssen (schon zum JavaScript-Forum schiel :stuck_out_tongue:)

l.g.: Ulli

[Team] Link entfernt

Liebes Efchen!
Wo lernt man den HTML um dann auf CSS umzusteigen. Ist das etwas, das man auf der VHS lernt oder ist das schon ein halbes Studium?
Grüße
taboga (wir kennen uns ja schon von einer anderen Seite)

Moin,

keine Ahnung, wo man HTML lernt. Mir ist kein Online Tutorial oder Buch bekannt, wo das anständig erklärt wird. Wiederum suche ich auch nicht danach, weil ich es schon kann.

Ob die VHS das richtig vermittelt, wage ich zu bezweifeln.

Aber mit Studium hat das nichts zu tun, HTML ist eigentlich so einfach, dass man es in 2 Stunden beherrsschen kann. Eigentlich deswegen, weil sich in den Köpfen der meisten Menschen festgesetzt hat, dass man mit HTML das Aussehen einer Website gestalten kann und das Umdenken teilweise sehr schwierig wird. Wenn man dann von Suchmaschinen und Vorlesebrowsern erzählt, bekommt man als Antwort, dass die Website nicht von Suchmaschinen indiziert werden braucht und Blinde sowieso nicht erwartet werden. Dadurch öffnen sich die meisten Menschen leider nicht für den Sinn von HTML - die Semantik. Und solchen Leuten kann man nur schwer helfen, da werden dann aus 2 Stunden leicht 2 Monate.

Ich hab schon so viel zum Thema HTML gechrieben, da muss man doch schlau draus werden? Und ansonsten bin ich für Fragen immer offen!

Grüße,
-Efchen

Moin,

zentrieren kann man natürlich nur, wenn das zu zentrierende Element eine feste Breite hat.

Da Du hier aber nicht die Breite weißt, kannst Du die Liste auch nicht zentrieren, denn sie hat ja als Block-Element eine Breite von 100%.

So auf Anhieb fällt mir jetzt keine schnelle Lösung ein, ich hab mit display:inline rumprobiert, weil dann das text-align:center im Elternelement ziehen sollte, tut aber nicht.

Das ist natürlich ein bisschen auch ein Problem davon, wenn man flexible Layouts macht. Aber ich bin der Meinung, dass das voll in Ordnung ist so, wie es jetzt ist, so wird wenigstens der Platz, der verfügbar ist, auch ausgenutzt ohne dass man nervige Scrollbalken bekommt.

Jede weitere Arbeit mit JavaScript würde ich als überflüssig einstufen und nicht machen. Zumal Du dann wieder darauf aufpassen musst, dass alles ja auch bei abgeschaltetem JavaScript immer noch funktionieren muss.

Ich würde nicht ausschließen, dass es eine Lösung für Dein „Problem“ gibt, aber da gibts dann wieder die absoluten CSS-Cracks, denen sowas einfällt. Vielleicht sehe ich auch nur das offensichtliche nicht :smile:

Sorry, dass ich Dir jetzt nicht helfen kann, aber dass ich nicht Allwissend bin, wusste ich auch schon vorher :wink:

Grüße,
-Efchen

Liebes Efchen!
Ja! Du hast schon so viel geschrieben. Du gibst jedem Tipps und Anregungen. Ich aber verstehe nur Bahnhof. Ich kann mit deinen Tipps gar nichts anfangen, weil ich die Semantik nicht verstehe.
Herzliche Grüße
taboga

Moin,

Du gibst aber schnell auf!

Wie lange hast Du gebraucht, um Sprechen zu lernen? Oder Lesen und Schreiben?

Was ist Dein Problem? „weil ich die Semantik nicht verstehe“ ist keine ausreichende Begründung, warum Du was nicht verstehst. „Die“ Semantik wird von Dir selbst festgelegt. Zu verstehen, was Semantik ist, sollte eigentlich nicht sonderlich schwer sein: Das ist schlichtweg die Bedeutung, die Dein Inhalt hat: Was sind Überschriften, was sind Textabsätze, welche Textpassagen sind als „wichtig“ einzustufen usw. DAS sollte man hinkriegen, wenn man ein gewisses Alter und eine weiterführende Schule erreicht hat.

Aber wenn Du mir sagst, was Dein Problem ist, dann kann ich Dir gerne weiterhelfen. Ich befürchte nur, dass Du gar nichts verstehen willst, und dann ist es natürlich schwer. Aber dann solltest Du die Finger vom Erstellen von Websites lassen.

Lebe Grüße,
-Efchen