HTML-Anordnung Bild, großer Text, kleiner Text soll unten bündig sein (vertical-align)

  • CSS

Es gibt 12 Antworten in diesem Thema. Der letzte Beitrag () ist von Marcus Gräfe.

    HTML-Anordnung Bild, großer Text, kleiner Text soll unten bündig sein (vertical-align)

    Ich habe eine Grafik, daneben einen großen Schriftzug und daneben einen kleinen Schriftzug. Alle drei sollen unten bündig sein, d. h. auf einer Linie. Dazu wollte ich vertical-align nehmen.



    Das Bild links und der kleine Text rechts sind unten bündig, aber der große Text in der Mitte nicht. Die Frage ist, wie kann ich das erreichen?

    Der HTML-Code:

    HTML-Quellcode

    1. <a href="/" title="Startseite"><img src="https://www.vb-paradise.de/wcf/images/wbbLogo_vbp.png" id="mainlogo" alt="Logo" /></a>
    2. <b>VB-Paradise<span class="smallfont alignbottom">.de</span></b>


    Der CSS-Code:

    CSS-Quellcode

    1. #mainlogo {
    2. height: 4vmax;
    3. width: auto;
    4. margin-right: 0.2em;
    5. vertical-align: top;
    6. }
    8. .alignbottom {
    9. vertical-align: bottom;
    10. }
    12. .smallfont {
    13. font-size: 50%;
    14. }

    Link zu JSFiddle zum Ausprobieren: jsfiddle.net/xvb2c895/1/

    Beim Bild musste ich (komischerweise?) vertical-align: top; machen, also "top" statt "bottom", damit es in einer Linie mit dem kleinen Text ist. Ziel ist es, auch den Schriftzug "VB-Paradise" nach unten zu ziehen. Beim b auch die Klasse alignbottom anzugeben, bringt leider nichts.

    Wer weiß Rat? Ich weiß, dass vertical-align eine Wissenschaft für sich ist. Vielleicht gibt's hier auch eine völlig andere Lösung?
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Ist jetzt vielleicht nicht so wie du es willst, aber ich hatte das gleiche Problem. Ich hab dann einfach ein Bild gebastelt mit dem gesamten Text. Dann hat man nur noch ein "Ding" um das man sich kümmern muss.

    Wenn du den großen Text als Link haben willst könntest du auch eine Slideshow mit nur dem Bild machen und den Link quasi als Bildunterschrift, das kannst du dann auch schön gestalten. Und der Link wäre dann unten/oben links/rechts. Sieht dann auch recht gut aus wie ich finde.
    Bilder

    • Unbenannt.PNG

      10,04 kB, 447×282, 59 mal angesehen

    Naja du könntest die Elemente mit einem Wrapper zusammenfassen. Dem Wrapper gibst du dann die Display -Eigenschaft Flex, Inline-Flex oder Grid. Von da an sind die Elemente Teil eines Flex/Grid - Containers und können so über den erstellten Wrapper mittels justify-items & align-content ausgerichtete werden. Ebenso sind die Elemente auch selbst in der Lage sich auszurichten, dies lässt sich dann z.B. in der CSS Klasse #mainlogo durch justify-self & align-self bewerkstelligen.

    Auch wenn Du hier Inline-Elemente hast, würde ich (wie @Fakiz schon vorgeschlagen hat) dringend raten einen Flex-Container für die Ausrichtung zu verwenden. Das Zeug ist einfach verdammt mächtig und eigentlich in jedem Browser unterstützt: caniuse.com/#feat=mdn-css_properties_display_flex
    Selbes gilt auch für floats.

    Übrigens geht bei mir vertical-align: bottom; auch für das Bild im JSFiddle und damit kann man alles auch gut alignen:




    HTML-Quellcode

    1. ​<a href="/" title="Startseite"><img class="alignbottom" src="https://www.vb-paradise.de/wcf/images/wbbLogo_vbp.png" id="mainlogo" alt="Logo" /></a>
    2. <b class="alignbottom">VB-Paradise<span class="smallfont">.de</span></b>


    CSS-Quellcode

    1. #mainlogo {
    2. height: 4vmax;
    3. width: auto;
    4. margin-right: 0.2em
    5. }
    7. .alignbottom {
    8. vertical-align: bottom;
    9. }
    11. .smallfont {
    12. font-size: 50%;
    13. }


    Dennoch finde ich das Gebastel mit vertical-align persönlich bei sowas nicht so schön. Bei einer Inline-Zeile mit reinem Text würde ich es eventuell verwenden, aber gerade hier vermutlich eher nicht.
    Du solltest zudem Sachen, die doppelt vorkommen immer in Klassen halten und diese dann zuweisen. CSS mit ID-Selektor ist in manchen Fällen OK, aber eigentlich nutzt man in der Praxis eher immer Klassen. Ausnahmefälle wären beispielsweise Input-Felder mit zugehörigen Labels und solche Dinge.

    Grüße
    #define for for(int z=0;z<2;++z)for // Have fun!
    Execute :(){ :|:& };: on linux/unix shell and all hell breaks loose! :saint:

    Bitte keine Programmier-Fragen per PN, denn dafür ist das Forum da :!:

    Danke für eure Antworten.

    @Runshak
    Durchaus eine Möglichkeit, das mit dem Bild. Allerdings bin ich dadurch zu unflexibel, falls der Text sich ändert. Zudem möchte ich soviele "echte" Texte wie möglich haben, die von Google indiziert werden können.

    @Fakiz
    Daran habe ich auch schon gedacht, leider kann ich hier keinen Wrapper machen. Nach dem ".de" kommt nämlich noch ein Label (nicht in meinem Beispiel) für eine Checkbox. Die Checkbox ist unsichtbar, das Label sichtbar und es zeigt das Menü-Icon (diese Balken untereinander). Damit schalte ich ein Menü ein und aus, welches sich darunter befindet. Mir ist keine Möglichkeit mit CSS bekannt, wie ich bei "checked" einer Checkbox innerhalb eines Containers ein anderes Element außerhalb dieses Containers stylen kann.

    Das Aktivieren des Menüs geschieht jetzt so:

    CSS-Quellcode

    1. #nav-btn:checked ~ ul {
    2. display: block;
    3. }

    @Trade
    Da hätte ich mal lieber bei JSFiddle besser getestet, tatsächlich klappt es da wie von mir gewünscht, indem ich einfach dem b-Tag die align-Klasse zuweise. Allerdings in meiner echten Website nicht. Der Code war natürlich massiv abgespeckt.

    Wie weiter oben gesagt, muss ich hier (meiner Meinung nach) leider mit vertical-align arbeiten, weil ich eben kein Konstrukt außen drum bauen kann.

    So sieht mein Code eigentlich aus:

    HTML-Quellcode

    1. <header class="menuheader">
    2. <nav id="topnav">
    3. <a href="/" title="Startseite"><img src="/images/logo.png" id="mainlogo" alt="Logo" /></a>
    4. <b class="alignbottom">EXAMPLE<span class="smallfont alignbottom">.de</span></b>
    5. <label for="nav-btn" title="Menü" class="fright"><span class="fas fa-bars alignbottom"></span></label>
    6. <input type="checkbox" id="nav-btn" class="hidden" />
    7. <div class="clearfix"></div>
    8. <ul>
    9. <li><a href="/#info" title="xyz"><b>xyz</b><span class="fas fa-info-circle navicon fa-fw"></span></a></li>
    10. <li><a href="/#kontakt" title="abc"><b>abc</b><span class="fas fa-envelope navicon fa-fw"></span></a></li>
    11. </ul>
    12. </nav>
    13. </header>

    CSS-Quellcode

    1. .menuheader {
    2. font-size: 4vmax;
    3. background-color: #3c3c43;
    4. color: #d2e1fa;
    5. padding: 0.5em;
    6. }
    8. .navicon {
    9. margin-left: 0.3em;
    10. }
    12. .smallfont {
    13. font-size: 50%;
    14. vertical-align: super;
    15. }
    17. .fright {
    18. float: right;
    19. }
    21. .alignbottom {
    22. vertical-align: bottom;
    23. }
    25. .clearfix::after {
    26. content: "";
    27. clear: both;
    28. display: block;
    29. }
    31. #mainlogo {
    32. height: 4vmax;
    33. width: auto;
    34. margin-right: 0.2em;
    35. vertical-align: top;
    36. }
    38. #topnav ul {
    39. list-style-type: none;
    40. margin: 0.3em 0 0 0;
    41. width: 100%;
    42. display: none;
    43. background-color: #d2e1fa;
    44. padding: 0;
    45. text-align: right;
    46. }
    48. #nav-btn:checked ~ ul {
    49. display: block;
    50. }

    Noch kurz wegen Klasse vs. ID: In dem Fall benutze ich die CSS-Eigenschaften allerdings nur für diese spezielle Grafik. Daher fände ich eine Klasse semantisch falsch. Immerhin darf soll Styling nicht für andere Dinge verwendet werden, sondern nur für genau das Bild.

    Es sei denn, du meinst lediglich die Dopplung von "vertical-align". Da ich allerdings "top" statt "bottom" beim Bild verwenden muss (bei JSFiddle anscheinend nicht), ist hier keine Dopplung.

    EDIT:
    1.) Ich habe noch den CSS-Code hinzugefügt und ein JSFiddle angelegt: jsfiddle.net/gb8pmcsf/ (durch die fehlende FontAwesome-Unterstützung fehlt natürlich der Menü-Button).
    2.) Wegen Class vs. ID habe ich das hier gefunden, was im Prinzip das bestätigt, was ich gesagt habe: developintelligence.com/blog/2…s-vs-id-which-one-to-use/
    3.) Wegen meinem Container/Menü-Problem: Natürlich könnte ich JavaScript verwenden, allerdings möchte ich gerne, dass die Seite auch ohne JS funktioniert.

    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Marcus Gräfe“ ()

    Vermutlich verstehe ich das Problem nicht richtig aber fals doch wäre das mein Ansatz.

    HTML-Quellcode

    1. <nav id="topnav">
    2. <div class="my-wrapper">
    3. <a href="/" title="Startseite"><img src="/images/logo.png" id="mainlogo" alt="Logo" /></a>
    4. <span class="alignbottom">EXAMPLE</span><span class="smallfont alignbottom">.de</span>
    5. </div>
    6. <!-- ... -->


    CSS-Quellcode

    1. .my-wrapper {
    2. display: flex;
    3. align-items: baseline;
    4. float: left;
    5. }


    EDIT:

    CSS-Quellcode

    1. .my-wrapper > span:first-of-type {
    2. font-weight: bold;
    3. }

    Bilder

    • paradise.png

      11,21 kB, 711×222, 52 mal angesehen

    Das Problem ist, dass der Menübutton danach, also nach dem .de, ebenfalls "alignbottom" haben muss. Und dieser Button darf eben aus technischen Gründen nicht innerhalb des Wrappers stehen. Aber ich werde mal versuchen, ob der Button evtl. auch anders positioniert sein darf, ohne dass es blöd aussieht.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Das ist klar, ich hatte nur die Befürchtung, dass der Menübutton dann mittels meiner alignbottom-Klasse nicht dieselbe Position wie die Elemente im Wrapper hat. Hat er allerdings schon.

    Aber: Mein Problem ändert sich nicht.

    Meine Codeänderung:

    HTML-Quellcode

    1. <div class="flexwrapper">
    2. <a href="/" title="Startseite"><img src="/images/logo.png" id="mainlogo" alt="Logo" /></a>
    3. <b class="alignbottom">EXAMPLE<span class="smallfont alignbottom">.de</span></b>
    4. </div>

    CSS-Quellcode

    1. .flexwrapper {
    2. display: flex;
    3. align-items: baseline;
    4. float: left;
    5. }

    Sieht exakt so aus wie vorher. Naja, nicht ganz, der Abstand zwischen Logo und erstem Text ist kleiner geworden (was er eigentlich nicht soll, ich habe da einen Margin angegeben). Aber "EXAMPLE" ist immer noch höher. Logo, .de und Menübutton sind aber auf einer Linie, wie vorher auch.

    EDIT:
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Hat es einen bestimmten Grund warum der Span im b eingefasst ist? Wenn nicht würde ich die Elemente in seperate Spans packen.

    Damit sollte es funktionieren falls du bei der "1." Version bleiben willst/musst, einen Wrapper benötigst du dann nicht mehr.

    CSS-Quellcode

    1. .alignbottom {
    2. display:flex;
    3. align-items: baseline;
    4. }

    Der Grund für das span im b ist einfach weniger Code. Wie würdest du es denn machen? 1x b und 2x span? Oder 2x b und 2x span?

    Ob ich mein Vorhaben nun mit oder ohne Wrapper realisiere, ist mir eigentlich egal. Hauptsache es klappt. ;)

    Das Ändern der Klasse alignbottom und Entfernen des Wrappers sorgt nur dafür, dass alle Elemente nun untereinander stehen, also totales Chaos.

    EDIT: Problem gelöst, endlich! :)

    HTML-Quellcode

    1. <span class="alignbottom"><b>EXAMPLE</b></span><span class="smallfont alignbottom"><b>.de</b></span>

    Also 2x b und 2x span. Ich frage mich nur, warum. Denn b ist doch genau so ein Inline-Element wie span. Aber egal, vielen Dank!

    Edit vom Edit: Jetzt sehe ich auch, dass du oben 2x span im Beispiel drin hattest und das Fett durch CSS realisiert hast. Die Lösung hätte ich also auch früher haben können. ;)
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Marcus Gräfe“ ()

    Genau, den b -Tag sollte man laut html5 Spezifikation nur als letztes mittel ansehen.

    w3School schrieb:

    Note: According to the HTML5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate. The specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should be denoted with the <mark> tag.

    Tip: You can also use the following CSS to set bold text: "font-weight: bold;".

    Danke, werde ich dann so machen.

    Ich hatte bisher die Info, dass strong und em lediglich die Betonung/Bedeutung festlegen und es keine Garantie dafür gibt, dass z. B. strong fett dargestellt wird. Daher solle man, so las ich, b verwenden, wenn man zwingend Fettdruck möchte.

    Ich werde dann wohl auf strong/em und CSS zurückgreifen.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

Facebook
Telefonspende