Anfängerproblem mit Navi-Leiste und Forum gesucht

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich bin Anfänger in Sachen xhtml und css und schreibe gerade meine erste Seite mit bluefish (Linux), d.h. ich schreibe jeden Befehl auch selbst.

Kennt jemand ein Forum, wo ich als Anfänger Fragen stellen und das Forum durchsuchen kann? Dieses Brett erscheint mir recht professionell zu sein und meine Fragen sind vermutlich eher banaler Natur.

Trotzdem mein Problem:

Ich habe linksseitig eine Navi-Leiste
mit float:left erstellt. Nun soll mittig vom Bildschirm eine Grafik liegen. Wie bekomme ich es hin, dass sie zentral auf dem Bildschirm erscheint und nicht leicht nach rechts verschoben?

Wenn ich für die Navileiste position:absolute wähle, wird das Bild bei kleinen Bildschirmen unter der Navileiste verschwinden. Das soll nicht.

Wer weiß Rat?

Danke sehr!
Ingo

#2

Hallo!

ich bin Anfänger in Sachen xhtml und css und schreibe gerade
meine erste Seite mit bluefish (Linux), d.h. ich schreibe
jeden Befehl auch selbst.

Hmmm…kann nicht sein…denn weder XHTML noch CSS kennen Befehle, die sind den Programmiersprachen vorbehalten und weder XHTML noch CSS sind welche! :smile:

Kennt jemand ein Forum, wo ich als Anfänger Fragen stellen und
das Forum durchsuchen kann?

Hier.

Dieses Brett erscheint mir recht
professionell zu sein und meine Fragen sind vermutlich eher
banaler Natur.

Für Dich wird nichts banal sein. Jeder Profi hat mal angefangen wie Du.

Trotzdem mein Problem:

Gerade wenn Du meinst, hier sind viele Profis, dann musst Du doch erst recht gute Antworten bekommen. Kann sein, dass Du von denen am Anfang nicht viel verstehst, aber da kannst Du ja einfach nochmal nachfragen. Besser eine professionelle und richtige Antwort, wo man zweimal nachfragen muss, als eine sofort verständliche, aber stümperhafte und falsche Antwort, die Dich nur falsches lehrt.

Ich habe linksseitig eine Navi-Leiste
mit
float:left erstellt.

Da muss ich gleich einhaken und fragen, wozu Du da ein verwendest. Wenn ich Dich richtig verstehe, hast Du doch nur das eine Element, die Navigationsliste mit
? Dann brauchst Du doch auch kein . Denn die Bedeutung von ist: Gruppiere MEHRERE Elemente. Also weg damit.

Nun soll mittig vom Bildschirm eine Grafik liegen.

Das macht nicht viel Sinn. Das sieht bei einigen sicher sehr komisch aus. Orientiere Dich lieber am Viewport des Browsers. Der ist eigentlich immer kleiner als der Bildschirm, manchmal sogar enorm. Der Viewport ist der Bereich, in dem Du Deine Website darstellst. Die Größe des Bildschirms, oft auch die „Auflösung“ genannt, ist beim Erstellen von Webseiten absolut irrelevant.

Wie bekomme ich es hin, dass sie zentral auf
dem Bildschirm erscheint und nicht leicht nach rechts
verschoben?

Indem Du sie normal zentrierst. Das „leicht nach rechts verschoben“ kann ich mir nicht vorstellen, weil es bei normaler Zentrierung keine derartigen Probleme gibt.

Wenn Du ein Block-Element hast, dann zentrierst Du das mit „margin:0 auto;“.

Wenn ich für die Navileiste position:absolute wähle

Aus welchem Grund würdest Du sowas tun?
Absolute Positionierung ist etwas, was man in der Regel nicht tut, um ein Element an eine bestimmte Position zu bringen. Oder anders gesagt: Ein Anfänger sollte „position“ erstmal weglassen, weil das ganz andere Effekte hat, die verwirrend sein könnten. „float“ reicht in der Regel aus, um die üblichen Layouts zu realisieren.

wird das
Bild bei kleinen Bildschirmen unter der Navileiste
verschwinden. Das soll nicht.

Wie gesagt, mit der Größe des Bildschirms hat das nichts zu tun. CSS kennt diese Größe auch nicht. Die kennt nur JavaScript.

Wer weiß Rat?

Ohne Link zur Seite wird das schwer.

Liebe Grüße,
-Efchen

#3

Hallo Efchen,

Für Dich wird nichts banal sein. Jeder Profi hat mal
angefangen wie Du.

wie wahr! Ich nutze das Buch Little Boxes zum Lernen. Eine Freundin will eine kleine und sehr simple Homepage haben. Ich will diese zur Übung erstellen, weil ich damit auch gleichzeitig html und css lernen möchte und sie ist damit einverstanden. (Sie ist freiberuflich tätig und ihre Frauen möchten gerne im Internet sehen können, wann die Kurse stattfinden. Ansonsten hat sie mit Internet gar nichts am Hut. Ich hoffe, es ist trotzdem möglich, dass man mir hilft.)
-> http://home.arcor.de/storchseite :wink:

Meine letzte Idee ist, dass ich vlt. die Navileiste „hochhebe“.

Vielen Dank an Dich für Deine Hilfe!!
Ingo

#4

Ich nutze das Buch Little Boxes zum Lernen.

Ich glaub, davon hab ich schon mal gehört. Das scheint was zu taugen.

Eine Freundin will eine kleine und sehr simple Homepage haben.

Auch simple Websits erfordern Arbeit. :smile:

Ich hoffe, es ist trotzdem möglich, dass man mir hilft.)

Klar, warum nicht?

Deine Frage war, wie Du das Bild „Hebammenteam“ im Viewport zentrierst, richtig? Normalerweise gar nicht und ich sehe, jetzt wo ich Deine Seite sehe, auch gar keinen wirklichen Grund dafür.

Dein Image liegt ja rechts vom Menü. Das heißt, Dir steht auch nicht die volle Breite des Viewports zur Verfügung, sondern entsprechend (der Breite des Menüs) weniger. Dadurch rutscht das Bild natürlich weiter nach rechts.
Ich bin jetzt kein Designer, aber ich wüsste keinen Grund, warum man daran was ändern wollte. Das ist ganz normales Verhalten, wie man es überall sieht. Ich bin sicher, dass man das mit einigen Tricks mit absoluter Positionierung vielleicht hinkriegen würde, aber ich halte das für nicht sinnvolle Mehrarbeit.

Vielleicht darf ich Dir dafür andere Tipps geben:

  • Benutze statt Transitional eine Strict-Variante. Da lernst Du XHTML besser. Benutze auf jeden Fall auch immer den Validator, um Deinen Code zu prüfen.
  • Durch Strict wird dann auch zu recht das Tag angemosert, was schon seit einem guten Jahrzehnt auf der Abschussliste steht und was auch nicht im Sinne von HTML ist, dient HTML doch nur der logischen Inhaltsauszeichnung. Das Zentrieren ist aber keine Semantik, sondern Optik. Und deswegen gehört das ins CSS.
  • Verfalle nicht in div-Suppe. Zu viele divs machen alles nur unnötig unübersichtlich und weichen Dein Verständnis von HTML auf. Sowas wie „Layout mit divs“ gibt es nicht. Wozu z.B. ist der #wrapper? Ich sehe keinen Sinn darin.
  • Wenn Du im #navibereich nur die Menüliste hast, dann ist das div selbst überflüssig. dient zum Gruppieren mehrerer Elemente. Du hast aber nur die Liste. Also weg mit dem div. #textbereich ist durchaus sinnvoll, wenn der Content nicht unter das Menü fließen soll. Ansonsten kann der prinzipiell auch weg.
  • Du hast zweimal eine Überschrift 1. Ordnung. Das ist zwar nicht prinzipiell falsch, aber ich würde da gefühlsmäßig aus dem Logo ein und aus dem „Willkommen“ ein machen, weil das nicht die selbe Wertigkeit hat.
  • Der Inhalt vom ersten ist falsch. Eine Überschrift darf keinen Textabsatz enthalten. Das macht logisch keinen Sinn. Außerdem ist der Wert des alt-Attributs falsch gewählt. Wenn das Image nicht angezeigt werden kann, wird niemand „Logo Hebammenteam“ lesen wollen, wird das Image angezeigt, steht auch nirgendwo was von „Logo“. Es reicht, wenn Du hier als alt-Wert „Hebammenteam“ reinschreibst, weil das der Content ist, den das Image vermittelt. Wenn Du das dann noch von der Schriftgröße her größer machst, dann wirkt es auch genauso wie das Image. Experimentier mal damit, wie das aussieht, indem Du in Deinem Browser Images abstellst.
    Die Adresse ist kein Textabsatz, sondern eine Adresse. Dafür gibt es ein eigenes Tag: Bei HTML geht es um richtige Auszeichnung. Nur wenn Du Deinen Inhalt mit den richtigen Tags auszeichnest, kann z.B. eine Suchmaschine Deinen Inhalt richtig verstehen.
  • gehört wie nicht ins HTML. _vermittelt keine Semantik, sondern macht den Inhalt nur kursiv. Das ist physische Inhaltsauszeichnung, sowas wird mit CSS gemacht! „font-style:italic“ heißt die Lösung.

Soviel erstmal zur ersten Seite. Auf den anderen gibts noch mehr. Z.B. sehe ich, dass Du Dein div#textbereich wegwerfen kannst, weil Du es nicht brauchst, weil Dein Text unter das Menü fließt. Zentrierter Text lässt sich außerdem schlecht lesen und und und.

Aber nicht deprimieren lassen. Aller Anfang ist schwer, aber man lernt eben nur, wenn man auf seine Fehler aufmerksam gemacht wird.

Fragen? Dann fragen!

Lebe Grüße,
-Efchen

P.S.: Im Impressum fehlt der Name und die ladungsfähige Anschrift des Verantwortlichen im Sinne des TMG._

1 Like
#5

Von Fehlern bei einer funktionierenden Webseite zu sprechen, ist unangemessen. Es gibt halt viele Lösungen.
Weiter im Text. Efchen schrieb:

Vielleicht darf ich Dir dafür andere Tipps geben:

  • Benutze statt Transitional eine Strict-Variante. Da lernst
    Du XHTML besser.

Interessiert mich auch, habe ich noch nicht verstanden.
Habe oft Probleme mit nicht angezeigten Umlauten fremder Seiten.
Im Firefox-Browser kann ichs nicht einstellen.
Und was sollte man den nun in die eigenen Seite oben hinschreiben?

  • gehört wie nicht ins HTML. vermittelt keine
    Semantik, sondern macht den Inhalt nur kursiv. Das ist
    physische Inhaltsauszeichnung, sowas wird mit CSS gemacht!
    „font-style:italic“ heißt die Lösung.

Sicher richtig, aber um ins CSS zu kommen, muss ich den Text auszeichnen - am sinnvollsten mit _und dann brauche ich kein CSS dafür, das wäre dann doppelt.

Ich gehöre noch zu den Gestrigen, die mit Modem surfen.
Und da habe ich tatsächlich das alt-Attribut „Hebammen-Logo“ gelesen.
Und dann dauerte es noch ewig, bis das Image da war.
Also hier mein Tip: Das Image mit so wenig Inhalt und 100 kB ist einfach zu gross, also weiter komprimieren oder ein progressive-JPG nutzen._

#6

Von Fehlern bei einer funktionierenden Webseite zu sprechen,
ist unangemessen. Es gibt halt viele Lösungen.

Das ist richtig. Aber wer sagt denn, dass die Website funktioniert?
Nur, weil die Site in seinem und Deinem Browser gut aussieht, heißt doch nicht, dass sie funktioniert!

Das ist ja der Witz an HTML. Es ermöglicht auch Clients, die die Website NICHT darstellen, den vollen Funktionsumfang. Wenn Du einen Text fett schreibst, wie soll dann eine Suchmaschine oder ein Vorlesebrowser unterscheiden, ob das eine wichtige Textpassage oder eine Überschrift ist? Gar nicht. Das menschliche Gehirn kann da viel mehr. Computerprogramme nicht. Die sind auf eine richtige Semantik angewiesen.

  • Benutze statt Transitional eine Strict-Variante. Da lernst
    Du XHTML besser.

Interessiert mich auch, habe ich noch nicht verstanden.

Der Validator (http://validator.w3.org/) zeigt Dir mehr Fehler. Veraltete Tags sind nicht mehr zugelassen. Eine Strict-Variante zwingt Dich zu sauberem Arbeiten.

Habe oft Probleme mit nicht angezeigten Umlauten fremder
Seiten.
Und was sollte man den nun in die eigenen Seite oben
hinschreiben?

Ins meta-Tag kommt der Zeichensatz, in dem man die Datei abgespeichert hat.

  • gehört wie nicht ins HTML. vermittelt keine
    Semantik, sondern macht den Inhalt nur kursiv. Das ist
    physische Inhaltsauszeichnung, sowas wird mit CSS gemacht!
    „font-style:italic“ heißt die Lösung.

Sicher richtig, aber um ins CSS zu kommen, muss ich den Text
auszeichnen - am sinnvollsten mit und dann brauche ich
kein CSS dafür, das wäre dann doppelt.

Nein, das ist Unfug. _hat keine Bedeutung und gehört nicht zum Strict-Umfang von HTML. gibts quasi nicht. Wenn Du Deinen Text nur kursiv machen willst, ohne damit eine Bedeutung zu vermitteln, dann nimmst Du das allgemeine Inline-Element dafür. Es ist ja außerdem nicht festgelegt, was eigentlich macht. Es gibt in CSS nur Empfehlungen, wie Tags dargestellt werden, letztlich kann das jeder Browser anders machen. Außerdem ist vermutlich gar nicht definiert, da es das ja nicht mehr gibt.

Ich gehöre noch zu den Gestrigen, die mit Modem surfen.
Und da habe ich tatsächlich das alt-Attribut „Hebammen-Logo“
gelesen.

Und? Fandest Du das aussagekräftig?
Ich nicht._