Box im h4 tag erstellen - Probleme bei der Umsetzung

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

Nalci

Neues Mitglied
20 September 2019
9
0
1
22
Rostock
Hallo,

also ich hab wahrscheinlich eine ganz einfache Frage und wurde deshalb in einem anderen Forum schon fast ausgelacht.

Ich würde gerne eine Box in der h4 überschrift erstellen, darin soll "UPDATE + Datum" stehen und danach der eigentliche Titel.

Aber irgendwie bekomme ich das nicht hin, habe schon viel ausprobiert und kann langsam den Code nicht mehr sehen.

Das habe ich soweit:

CSS:
span.update_datum {
  color: #000 !important;
  font-size: 15px;
  line-height: 18px;
  width: 15%;
  float: left;
  color: #d00505;
  font-family: open sans;
  font-style: normal;
  letter-spacing: 0px;
}

span.umbruch::after {
  content: "\A";
  white-space: pre;
}

h4 {
  background: #000;
  color: #fff !important;
  padding-top: 7px;
  padding-bottom: 1.5px;
  padding-left: 7px;
  padding-right: 7px;
  letter-spacing: 1.5px;
}
HTML:
<h4>
  <span class="update_datum">
    <span class="umbruch">
      UPDATE
     </span> 29. Juli 2019
  </span>
  Rammstein verkündet weiteren UK Termin in Cardiff:
</h4>
Mit span.umbruch wollte ich den Umbruch hinter "UPDATE" erzwingen, damit es untereinander steht.

Mit display:flex; align-items:center; wollte ich den Inhalt der .span-Box mittig ausrichten aber da wird nur "UPDATE" mittig ausgerichtet und das Datum wird nach rechts verschoben.

Wenn ich height einfüge, damit es in den Hindergrund passt, ändert sich leider gar nichts.

Ich habe ein paar Beispiele:
5231
Dort ist leider das Update Datum nicht mittig und in der mobilen Ansicht wird ein Teil vom eigentlichen Titel unter das Datum verschoben.
5232
Bei einem kurzen Titel steht das Datum drüber, auch in der mobilen Ansicht.

Ich hoffe jemand weiß einen Rat und kann mir bei meiner banalen Frage helfen, ich komme leider nicht auf die Lösung und bin langsam am verzweifeln.
 

basti1012

Aktives Mitglied
26 November 2017
970
102
43
38
Minden
sebastian1012.bplaced.net
eigentlich ist das kein problem , aber ein <h4> Element ist da eigentlich fehl am Platz.
Warum nimmst du das ?
Versuche es mal mit einen <div> , und dann kannst du die Schrift auch auf Größe und dicke anpassen
 

Nalci

Neues Mitglied
20 September 2019
9
0
1
22
Rostock
Hey, danke. Ich benutze h4, weil das die Überschrift im Post ist, hätte ich vielleicht erwähnen sollen. ^^

Hab mir jetzt erstmal überlegt vielleicht ein div drum zu setzen, damit die Höhe festzulegen und darin mit span "UPDATE" zu definieren.

Ich steh total auf dem Schlauch, hab die letzten Tage soviel gelesen, dass ich nicht mehr durchblicke :D
 
Zuletzt bearbeitet:

basti1012

Aktives Mitglied
26 November 2017
970
102
43
38
Minden
sebastian1012.bplaced.net
https://codepen.io/basti1012/pen/QWLJJXo?editors=1100

Man kann auch h4 nehmen , doch eigentlich sind die H Elemente nur für Überschriften gedacht.
Die Elemente haben ja als default schon verschiedene größen, display ,usw ,,, Werte vorgegeben , deswegen ging dein height glaube ich auch nicht , da hättest du gaube ich erst display:inline-block setzen müßen, oder so.
Die h4 Werte kann man natürlich alle überschreiben, was aber eigentliich nicht der sinn der sache ist

Wie soll der Banner den Im Mobil ausehen ? Datum oben und dann der Title darunter ?
 
Zuletzt bearbeitet:

Nalci

Neues Mitglied
20 September 2019
9
0
1
22
Rostock
Danke für den Code, hatte es eben auf meiner Seite mal ausprobiert, doch da läuft es dann über die ganze Seite :D

Also es ist ja schon eine Überschrift im Post, nur da wollte ich das Update Datum noch zu ergänzen. Hatte es ursprünglich mit zu der Überschrift geschrieben, sah aber nicht so toll aus, in meinen Augen.

Bei mobilen Geräten würde ich es auch an der linken Seite belassen, nur würde ich eventuell die Schrift ein bisschen kleiner machen.

Also ich probiere das hinzubekommen:
  • Update Datum soll mittig zum Titel sein
  • bei mobilen Geräten soll die Überschrift nicht unter das Datum fließen
  • und das es sich der Größe der Überschrift anpasst, also wenn ich jetzt eine oder zwei Zeilige Überschrift habe, dass es mittig ist
Darf ich ein Link von meiner Seite posten, um es vielleicht besser verstehen zu können? Ich will hier auch keine schleich Werbung machen. :D
 

Anhänge

Zuletzt bearbeitet:

Nalci

Neues Mitglied
20 September 2019
9
0
1
22
Rostock
Hm, also hab mir gerade überlegt vielleicht lass ich das doch lieber. So wie ich das gerade sehe, wird das bestimmt nicht soooo toll aussehen, wie ich mir das vorgestellt hatte. ^^

Aber trotzdem vielen Dank @basti1012 für deine Mühe!
 

basti1012

Aktives Mitglied
26 November 2017
970
102
43
38
Minden
sebastian1012.bplaced.net
Das der Banner über der ganzen Seite geht das hättest du ändern können wenn du da width:100% rein geschrieben hättest ( vermute ich jetzt mal bei den Layout ).

In so ein Fall ist Link posten ja keine Werbung, du willst ja hilfe und nix verkaufen oder so .

Bei der Mobilen Version hätte ich Datum und Titel übereinander gemacht. Weil es könnte ja etwas eng werden im Banner wenn es Horizontal bleibt . Notfalls könnte man in der Mobilen Version die Schrift kleiner machen damit es passt .
An besten kann man das alles direkt auf der Seite testen. Falls du da doch weiter machen willst dann poste mal Link.
 

Nalci

Neues Mitglied
20 September 2019
9
0
1
22
Rostock
Das mit dem width hab ich nachher auch gemerkt :D

Natürlich würde ich gerne wissen wie ich es richtig machen kann, da packt mich dann auch der Ehrgeiz.

Der Link wäre: https://lau-rammstein.de/rammstein-setzt-2020-europa-stadion-tour-fort/

Dort habe ich bei den ersten beiden Überschriften das probiert, das sind aber zwei Zeilen. Bei einer sieht das dann wieder anders aus, da steht das Datum ab.

Ich schau mir das morgen auch nochmal an
 

basti1012

Aktives Mitglied
26 November 2017
970
102
43
38
Minden
sebastian1012.bplaced.net
Wenn man das sieht ist es auch einfacher zu verstehen was du genau meintest.
ICH , würde das Datum und den Titel , jeweils in einen Container packen. Da dein jetziger span Container nicht mit wachsen tut wenn der Container in der mobilen Ansicht größer wird , kann der Titel Text dann natürlich da runter rutschen.

https://codepen.io/basti1012/pen/QWLJJXo?editors=1100
 
Zuletzt bearbeitet:
Reactions: Nalci

Nalci

Neues Mitglied
20 September 2019
9
0
1
22
Rostock
Das ist ja mega, genau so wollte ich das erstellen. Selbst das Datum ist mittig und ich versuche das seit Tagen mit allen möglichen Varianten :rolleyes::D

Würdest du mir eventuell zeigen wie du das meintest, dass das Datum und der Titel bei mobilen Geräten übereinander ist?

Vielen Dank nochmal!
 
Zuletzt bearbeitet:

basti1012

Aktives Mitglied
26 November 2017
970
102
43
38
Minden
sebastian1012.bplaced.net
Ich meinte das so
https://codepen.io/basti1012/pen/QWLJJXo?editors=1100

Aber nachdem ich mir deine Seite auf Handy angekuckt habe, finde ich das deine Variante auch gut funktioniert .
Hatte erst gedacht das es alles zu eng wird , aber da habe ich falsch gedacht.
Kannst ja mal die Variante ausprobieren von mir und dann mußt du selber entscheiden was du passender findest
 
Reactions: Nalci

Nalci

Neues Mitglied
20 September 2019
9
0
1
22
Rostock
Das geht natürlich auch. Ich schau nachher nochmal was mir besser zusagt :D

Eine Frage habe ich noch. Dieses width:calc(100% - 10px); sind die 10px dafür da um an den Seiten 10px abzuziehen?
 
Zuletzt bearbeitet:

basti1012

Aktives Mitglied
26 November 2017
970
102
43
38
Minden
sebastian1012.bplaced.net
width:calc(100% - 10px); ist dafür da die beiden Kästen auf volle breite zu ziehen , weil sie im Desktop Modus ja noch 20 und 80 Prozent breit sind. Die 10px ziehe ich deswegen ab weil durch den padding:5px; ja insgesamt 10px zu viel sind( Wenn du den boxen mal einen roten border geben tust dann siehst du das der Border über den Boxen hinaus gehen tut) .
Man kann dieses abziehen der Padding Werte auch weg lassen , wenn man am Anfang der Css
Code:
*{
    box-sizing: border-box;
}
eingeben tut, dann wird die Box gleich so angezeigt wie ich es hier wollte.
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Box-Modell
 
Werbung: