Mysteriöser Spalt unter IMG in DIV-Box + text vertikal zentrieren

  • Hallo & danke für die Aussicht auf Hilfe..

    Ich bin noch nicht so lange am HTML Programmieren & hänge momentan an einem Total blöden Problem.


    Der Header einer Seite der nur aus einem DIV & einem Bild besteht, skaliert sich nicht auf die höhe des Bildes, sondern lässt einen bösen Spalt.

    Zudem lässt sich der Text in der Box nicht vertikal zentrieren :/



    hab das mal extra so für euch erstellt, damit ihr versteht was ich meine.. das grüne ist das Bild & der Graue spalt sollte meines Erachtens nicht da sein oder?

    also hier nochmal meine fragen:


    - ich würde gern wissen wie ich #mark vertikal in den #header zentrieren kann

    - wie ich den hässlichen spalt unter dem Grünen-Bild weg bekomme..

    - & kann mir bitte einer sagen ob es Überhaupt sinn macht H1 als Seitenüberschrift zu nehmen?


    Vielen Dank! 8o

  • Hey,


    das <style> musst du in den <head> tag machen oder in eine externe css-datei auslagern und dann mit <link rel="stylesheet" src="datei.css"> einbinden.


    Du benutzt nicht die aktuellen HTML5 Container die dafür vorgesehen sind. Es gibt header, main, aside, article, section. Und div solltest du nur benutzen wenn kein anderer Container diese Aufgabe erfüllt.


    Ich würde wenn Text über das Bild sein soll, das Bild per css einbinden. Ebenso benutzt du veraltetes html. <center> sowie <font> gibt es nicht mehr, sind deprecated. Schau dir aufjedenfall nochmal HTML5 an, da kannst du gleich CSS mitlernen. Z.b. hier (ist sehr gut erklärt) : https://www.html-seminar.de/


    Ebenso frage ich mich was du da im css-teil machst. Soviel brauchst du nicht. Der H1-Tag ist für Überschriften da, und als Seitenüberschrift natürlich passend. Würde niemals ein h1 für überschriften von artikeln oder abteile benutzen. Never.


    Habe mal dein Code umgeändert:

    Stef

  • Die Ursache für den Spalt und wie man ihn weg bekommt, wird hier beschrieben:

    https://stackoverflow.com/ques…age-tag/31445364#31445364

    Vertikale Zentrierung war früher ein gewisses Problem aber durch Flexlayout ist es jetzt ganz einfach:

    https://jsfiddle.net/9b83hsLq/2/

    Dabei verschwindet offenbar auch der Spalt ohne weitere Maßnahmen.

    Gut zur Info über Flexlayout:

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


    Edit: Ahh, Stef war schneller!

    Edit2: U. U. müsste man das Bild noch responsiv machen.

  • Danke euch beiden! & auch Danke für die Hinweise.

    Ich werde meine Programmierweise überdenken :)


    hab an sich noch kaum gecodet, mir lediglich quellcodes angeschaut.

  • HTML ist keine Programmiersprache. HTML = Auszeichnungssprache, CSS = Formatierungssprache. (Nur als Info, habe ich früher auch immer falsch gesagt)

    Mir ist schon klar, dass HTML eine Gestaltungstechnische Sprache ist.

    mit Programmiersprachen habe ich auch weniger Probleme.


    Aber danke


    Ich habs ausprobiert, hat alles Super funktioniert. Aber der eigentliche Sinn, warum ich das Bild nicht als Hintergrund festgelegt hab war, dass das Bild so in der Höhe nicht richtig zu sehen ist.


    Der Header müsste sich genau auf die höhe des Hintergrundes skallieren. Da kann man ja auch keinen Pixelwert nehmen, weils immer in % ist.

  • Zitat

    Aber der eigentliche Sinn, warum ich das Bild nicht als Hintergrund festgelegt hab war, dass das Bild so in der Höhe nicht richtig zu sehen ist.

    Wie meinst du das ?


    Nach meinem Wissen wird das Bild von der Höhe nicht kleiner. Und %-Angaben sind wichtig, aufgrund der responsivität der Seite,

    habe ich so mitgenommen. Feste Angaben vermeiden und anstatt diesen %-Angaben. Und mit position:absolute würde ich nicht arbeiten.


    Und so wie es aussieht ist doch ok. Oder wie magst du es haben?


    Bzw. für was brauchst du für einen grünen Hintergrund ein bild? Kannst es doch einfach mit background-color: green; machen.

  • Zitat

    Aber der eigentliche Sinn, warum ich das Bild nicht als Hintergrund festgelegt hab war, dass das Bild so in der Höhe nicht richtig zu sehen ist.

    Verstehe ich dich richtig: Du störst dich daran, dass das Bild nicht in voller Höhe zu sehen ist? Das ist leider ein Negativum bei Hintergrundbildern, dass sich der Container, in dem sie drin sind, nicht in der Größe an das Bild anpasst, sondern man muss die Größe explizit setzen, so wie ich es hier getan habe:

    https://jsfiddle.net/9b83hsLq/3/

    Umgekehrt funktioniert es jedoch: Man kann das Hintergrundbild dazu bringen, sich an den umgebenden Container anzupassen:

    https://wiki.selfhtml.org/wiki…d_-bilder/background-size

  • Verstehe ich dich richtig: Du störst dich daran, dass das Bild nicht in voller Höhe zu sehen ist? Das ist leider ein Negativum bei Hintergrundbildern, dass sich der Container, in dem sie drin sind, nicht in der Größe an das Bild anpasst, sondern man muss die Größe explizit setzen, so wie ich es hier getan habe:

    https://jsfiddle.net/9b83hsLq/3/

    Umgekehrt funktioniert es jedoch: Man kann das Hintergrundbild dazu bringen, sich an den umgebenden Container anzupassen:

    https://wiki.selfhtml.org/wiki…d_-bilder/background-size

    macht es dann nicht wieder mehr sinn einfach ein IMG in die Box zu setzen? .. dann bräuchte ich dem nur ein Width: 100% geben & die höhe errechnet sich automatisch.


    also eher die richtung wie ichs vorher hatte..


    naja hätte echt schon gern die volle höhe des Bildes also werde ich mit dem weg nicht weiterkommen

    und umgekehrt wäre es ja so.. wenn ich es auf die Box anpasse kann es sein, dass das Bild bei merkwürdigen Auflösungen verzerrt sein wird.


    puh viel stressiger alles als ich gedacht hatte :/

  • Keiner Braucht ein Grünes Bild.. ich habe es Benutzt um zu verdeutlichen wie Groß das Benutze Bild ist :)


    Wenn du jetzt in jede der Ecken von dem Bild einen Schwarzen Fetten Punkt hättest, dann müssten


    1. Alle Punkte in Allen ecken zu sehen sein

    2. das Bild in keinster Weise verzerrt sein


    width: 100% height: auto%


    so wie ich es halt vorher hatte, nur da war der blöde spalt

    Oder kann ich das nicht evtl eben mit PHP umsetzen?


    Danke dass ihr mir weiter Helft.

  • Zitat

    macht es dann nicht wieder mehr sinn einfach ein IMG in die Box zu setzen? .. dann bräuchte ich dem nur ein Width: 100% geben & die höhe errechnet sich automatisch.

    Wenn ich dich richtig verstehe, willst du, dass der Text nicht neben/unter/über dem Bild sein soll, sondern darüber.

    Und dafür gibt es nur diese Wege:

    • Bild als Hintergrundbild, Text als Inhalt. Vorteil: Text kann sauber zentriert werden. Nachteil: Container passt sich nicht an Bild an
    • Bild als img-Tag und als Inhalt, Text absolut positioniert. Vorteil: Bildgröße passt sich automatisch an. Nachteil: Text kann nicht automatisch zentriert werden, da er aus dem Textfluss heraus fällt. Zentrierung muss über top und left austariert werden und das ist mit CSS kaum dynamisch zu machen, wenn das Bild dynamisch ist. Das Problem, das Du ursprünglich hattest:
    Zitat

    Zudem lässt sich der Text in der Box nicht vertikal zentrieren

    Zitat

    Oder kann ich das nicht evtl eben mit PHP umsetzen?

    Nein, PHP bietet keine Lösung, weil Du damit auch nur HTML und CSS anlegen kannst.

  • Wenn ich dich richtig verstehe, willst du, dass der Text nicht neben/unter/über dem Bild sein soll, sondern darüber.

    Und dafür gibt es nur diese Wege:

    • Bild als Hintergrundbild, Text als Inhalt. Vorteil: Text kann sauber zentriert werden. Nachteil: Container passt sich nicht an Bild an
    • Bild als img-Tag und als Inhalt, Text absolut positioniert. Vorteil: Bildgröße passt sich automatisch an. Nachteil: Text kann nicht automatisch zentriert werden, da er aus dem Textfluss heraus fällt. Zentrierung muss über top und left austariert werden und das ist mit CSS kaum dynamisch zu machen, wenn das Bild dynamisch ist. Das Problem, das Du ursprünglich hattest:

    Nein, PHP bietet keine Lösung, weil Du damit auch nur HTML und CSS anlegen kannst.

    Bin ich Grade echt so hohl? Denn in meinen Augen scheint PHP ja doch ne Lösung zu sein..


    Das Bild ist glaub ich 1100*400px

    & es hat ja ne breite von 100%


    Ich könnte Abfragen wie breit der Bildschirm ist, dann wäre die

    Höhe = Breite*(400/1100)


    hab jetzt mal so locker daher geschrieben.. muss jetzt mal schauen ob es einen Befehl in der Art gibt.

  • PS: OMG, ich muss mich korrigieren: Automatische Zentrierung ist sehr wohl möglich, man kann auch die Größe eines absolut positionierten Elementes mit %-Angaben definieren:

    https://jsfiddle.net/9b83hsLq/5/

    Jetzt brauchst Du nur noch den Text einschl. margin/padding dynamisch zu machen.

    Ach super! Danke

    Werde es später mal ausprobieren.


    Sorry wenn ich viele Blöde fragen stelle, aber bin im Webdesign ein ziemlicher Bruchpilot

  • Zitat


    Ich könnte Abfragen wie breit der Bildschirm ist

    Ich bezweifle, dass diese Information in PHP direkt verfügbar ist. Hier wird empfohlen, diese Infos mit Javascript zu ermitteln und an den Server zu schicken:

    https://stackoverflow.com/ques…ions-in-php-on-first-load

    Dann könnte man es auch gleich mit Javascript berechnen.

    Aber wahrscheinlich nicht nötig, denn mein letztes Fiddle müsste eigentlich liefern, was Du brauchst.

  • 777 : Schau dir nochmal mein beigefügtes Bild an. Du erkennst doch dort den border? Wenn man anstatt dem border punkte hinmachen würde wären die auch erkennbar. Teste es doch erstmal mit deinem Originalen Bild. Dann wirst du es sehen.


    Für was willst du abfragen wie breit der Bildschirm ist? Finde ich mehr als unnötig.


    Den Weg den ihr jetzt geht würde ich nicht nehmen.

    Sempervivum :
    Zitat: Nachteil: Container passt sich nicht an Bild an

    Das habe ich noch nirgends gelesen.

Jetzt mitmachen!

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