Ein fröhliches "hallo" und eine Frage zu einfachem? CSS

    Hallo,

    schön, daß es Euch und dieses Forum gibt.

    Mein Benutzername ist mein Wissensstand! Ich fange gerade an ( im Ruhestandsalter) mich mit HTML und CSS zu beschäftigen. Eigentlich ist dies nur die halbe Wahrheit, weil ich vor vielen Jahren bereits einige Webseiten mit "MS Frontpage" erstellt habe, nachdem ich mit einer PC Zeitschrift HTML gelernt habe. ( ca. 1996 oder so). Damals brauchte man nur ganz wenig Wissen um eine Website zu erstellen. Tabellen in einer Websseite waren da schon die ganz hohe Schuile des Könnens. Dann habe ich mich mal um meinen Beruf gekümmert und als ich vor einigen Wochen wieder in HTML einsteigen , bzw. dort anknüpfen wollte, wo ich einst ausgestiegen bin, habe ich festgestellt, daß ich ganz neu lernen muss, um die aktuellen Dinge um HTML, CSS, PHP... zu verstehen.

    Also habe ich mir erst mal Hilfe geholt und habe von Prof. Schwickert ein Manuskript der WBT- Serie " Einführung in HTML, CSS und JS" in die Hände bekommen. Dann das dortige Beispiel einer Website ( Casarella) nachgebaut. Nun bin ich an der ersten eigenen Website dran und scheitere schon beim Erstellen der Frames.

    Also- keine Frameseite, wie früher, sondern eben dieses Boxmodell. Wenn dies steht, ist es ja relativ einfach, Inhalte darin zu platzieren und zu formatieren.

    Ich hänge mal 2 Dateien an: 1. index.html und 2. index.css Das ist nur die reine Box-Anordnung. Aber die passt eben nicht. Der "footer" ist genau so breit formatiert, wie der"wrap"- passt aber nicht.

    Ich habe den HTML- Code über validator.W3.org prüfen lassen, da gab es keine Fehler ( aber 2 Hinweise).

    Das Problem liegt irgendwo in der.css- Datei. Und... warum werden mir in den beiden Boxen die Begriffe main und article nicht als Text angezeigt????

    Kann mir bitte da jemand helfen und mir sagen, warum der (gelbe) Footer-Bereich über die Seite hinausragt? Und... welche Fehler habe ich ansonsten bei der Formatierung gemacht?

    Ganz herzlichen Dank für jede Hilfe.

    Trotz allg. Verschlussache, Euch eine schöne und gesunde Adventszeit!

    der Beginner


    2 Anhänge, bei Bedraf nur die Endung .txt wegnehmen- fertig! html-seminar.de/woltlab/attachment/2721/    html-seminar.de/woltlab/attachment/2722/

    PC AMD Phenom II X4 955; 12GB RAM, Windows 7 home 64 bit ; Firefox 83.0; Editor von BS Windows 7; 24" Screen;

    Hallo und willkommen im Forum,

    leider muss man sagen, dass Du mit diesem Manuskript keinen guten Griff getan hast, denn der Inhalt ist veraltet, nicht so stark wie Tabellenlayout aber float ist ebenfalls nicht mehr Stand der Technik.

    Mach dich am besten zunächst mit Flexlayout vertraut, hier ein Tutorial als Einstieg:

    https://www.html-seminar.de/css-flexbox.htm

    und eine Übersicht:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/


    Ich wünsche dir ebenfalls eine schöne und gesunde Adventszeit!

    Sempervivum

    Ganz herzlichen Dank für diese sehr wichtigen Infos Links! Ja, das WBT von Prof Schwickert ist von 2016. 4 Jahre und die Welt ist veraltet! Wie gut, daß es da doch noch Beständiges gibt!

    Einen schönen 3. Adventsabend wünscht Dir

    der Beginner

    Wie schon geschrieben: das Script taugt nichts. Es fehlen völlig wenigstens ein Hinweis auf flex und grid fürs Layout, für Größen wird immer die falsche Einheit verwendet (kein pt/px verwenden!) und das Thema media-Querys habe ich garnicht gesehen. Welche Seite ich dir empfehlen würde siehst du schon an den Links im Text: SELFHTML.


    Dein #wrap-Element ist überflüssig, es gibt schon ein Element das alles umschließt: body. Aber nein, #wrap und footer sind nicht gleich breit: footer hat noch einen Rahmen und der kommt noch auf die Breite drauf - zumindest wenn die Eigenschaft box-sizing nicht auf border-box gesetzt wurde. Allerdings sind deine Breitenangaben ohnehin alle falsch und gehören weg: die Breiten (und auch Höhen) werden vom Browser automatisch gesetzt wenn man grid/flex verwendet. Noch ein Tipp: um Fehler in der Darstellung zu finden sind die Entwicklertools in den Browsern sehr hilfreich, erreichbar sind die idR über F12 bzw. das Kontextmenü ("untersuchen" o.ä.).


    Dein HTML-Code enthält übrigens doch einen Fehler: <h3> wird nicht geschlossen, auch im CSS sind zwei Fehler: "font-family" und "line-height" sind falsch geschrieben (einmal Bindestrich, einmal E zu wenig). Vom logischen Aufbau ist das HTML auch falsch: #wrap (wie schon geschrieben) ist überflüssig, #hauptschrift wäre gern ein <h1>, <h3> ein <h2> sowie <h5> ein <h3> - sonst fehlen ja Ebenen in der Hierarchie. das <h1> ganz unten sollte eigentlich eher ein <p> sein, eine Überschrift scheint mir das nicht zu sein. In <main> gehört imho der ganze Seiteninhalt, also auch das <article>.


    Wo hast du main und article als Text eingefügt? Da stehen nur zwei Kommentare mit <main></main> bzw. <article> </article> als Inhalt - und die werden natürlich nicht dargestellt. Aber natürlich lässt sich auch HTML-Quelltext auf einer Seite darstellen.


    btw: du weißt das der Support von Windows 7 Anfang des Jahres eingestellt wurde?

    Da muss ich meinen Vorrednern leider widersprechen. Das Script wirkt zwar ein wenig angestaubt, bildet aber einen fundierten Einstig ind Welt von HTML und Co.


    Vor allem Der Aufbau mit den Übungen gefällt mir.


    Ich habe im Übrigen, gerade den 2. Teil des Scripts gefunden, in dem unter Anderem Mediaqueries und Grid-Layout Eingeführt wird.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden