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

Box im h4 tag erstellen - Probleme bei der Umsetzung

Nalci

Nalci

Neues Mitglied
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.
 
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
 
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:

Box im h4 tag erstellen - Probleme bei der Umsetzung

Box im h4 tag erstellen - Probleme bei der Umsetzung 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...
basti1012.bplaced.net basti1012.bplaced.net

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:
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

  • codebeispiel.png
    codebeispiel.png
    271,8 KB · Aufrufe: 3
Zuletzt bearbeitet:
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!
 
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.
 
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.

Box im h4 tag erstellen - Probleme bei der Umsetzung

Box im h4 tag erstellen - Probleme bei der Umsetzung 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...
basti1012.bplaced.net basti1012.bplaced.net
 
Zuletzt bearbeitet:
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:
Ich meinte das so
Link zur Lösung


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 musst du selber entscheiden, was du passender findest
 
Zuletzt bearbeitet:
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:
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
 
Hallo,

ich hab damit noch bisschen rumgespielt und denke soweit bin ich sehr zufrieden. Vielen Dank nochmal basti!
 

Anhänge

  • desktopview.PNG
    desktopview.PNG
    82,7 KB · Aufrufe: 5
  • mobilview.PNG
    mobilview.PNG
    24,3 KB · Aufrufe: 5
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben