Bitte um Hilfe bei css

[aj]

Hallo.

Kann mir bitte jemand helfen. Ich bekomme das nicht hin.

Hier das der Html code.

Danke für Hilfe. aj

[MrMurphy1]

Hallo

Und jetzt soll jeder, der dir helfen möchte, den Quellcode einzeln abtippen?

Vermutlich wirst du auf diesem Weg nicht viel Hilfe erhalten. Besser ist ein Link zu der Seite, kostenlosen Webspace gibt es bei bplaced.net.

Wenn es darum geht den Text neben- statt untereinander anzuzeigen solltest du Flexbox (display: flex) verwenden.

Vorher bitte die Divitis entfernen und geeignete Elemente für den Text verwenden. Text nur in span und div zu packen ist unsinnig. Dafür gibt es sinnvollere Elemente, in deinem Fall zum Beispiel das dl-Element mit dt und dd.

Gruss

MrMurphy

[Rolf b]

Was hier fehlt, ist dein CSS, weil das das Erscheinungsbild festlegt. Ich würde Dir aber im ersten Schritt ein Markup in dieser Art vorschlagen. Das inline-block ist das wichtigste. Mit Flex geht es natürlich auch, setzt aber modernere Browser voraus.

Vor allem habe ich auf - vermutlich - unnötige Klassen verzichtet und statt dessen etwas längere Selektoren im CSS eingesetzt.

<div class="product-field product-field-type-5">
   <div>Jahrgang</div>
   <div>2011 und 2012</div>
</div>
<div class="product-field product-field-type-5">
   <div>Kategorie</div>
   <div>Rotwein</div>
</div>

div.product-field {
  margin: 1em 1em;
}
div.product-field div {
  display: inline-block;
}
div.product-field div:nth-child(1) {
  display: inline-block;
  width: 6em;
  color: #C00;
}

Ich hätte ja gerne ein semantischeres Markup empfohlen, bin aber selbst etwas ratlos was hier angemessen ist.

• dl/dt/dd, wie MrMurphy meint? Ist das eine Liste von Definitionen?
• label und p? Es ist kein Formular, darum stört mich label
• h1 und p? Überschriften gliedern das Dokument, das hier ist aber keine Gliederung.

Aber dafür gibt's hier kompetentere Kollegen. Die DIV-Lösung oben sieht im Browser jedenfalls so aus wie Du es gern hättest. Passendere Elemente werden sich sicher noch finden.

Rolf

[marctrix]

Hej Rolf,

• dl/dt/dd, wie MrMurphy meint? Ist das eine Liste von Definitionen?

dl heißt seit html5 Description List - eine Definitionsliste wird es nur mit zusätzlichem dfn

Passt also für fast alle Pärchen, in denen ein Term beschrieben wird.

Aber dafür gibt's hier kompetentere Kollegen. Die DIV-Lösung oben sieht im Browser jedenfalls so aus wie Du es gern hättest. Passendere Elemente werden sich sicher noch finden.

Lass einfach die div in Deinen Selektoren weg, dann funktioniert es mit den richtigen Elementen auch.

Dem Fragesteller sei nuqjatlh (What does it mean?) empfohlen...

Oder gleich die html5-specs...

Und ja, flex-box ist der Weg zum Erfolg. warum? Guckst du Zoe Mickley Gillenwaters "Enhancing Responsiveness With Flexbox"

Oder wenn es nur eine kurze Erklärung von Flexbox statt eines Filmchens mit Beispielen sein soll: Complete guide to flexbox

Marc

PS: Und ja, es ist schon verwunderlich, wenn man Hilfe zu CSS möchte und ausgerechnet das CSS dem Forum vorenthält... ;-)

[Gunnar Bittersmann]

@@marctrix

nuqjatlh

Co to k… znaczy?

Die Folien dazu gibt’s auch.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

nuqjatlh

Co to k… znaczy?

Die Folien dazu gibt’s auch.

Wiem. - Kocham krótkich zdań. ;-)

Dann reicht es auch mal wieder...

Marc

[Gunnar Bittersmann]

@@marctrix

Wiem. - Kocham krótkich zdań. ;-)

Dass du denkst, zdania wären belebt, lässt den Satz in ganz anderem Licht erscheinen. ;-)

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Wiem. - Kocham krótkich zdań. ;-)

Dass du denkst, zdania wären belebt, lässt den Satz in ganz anderem Licht erscheinen. ;-)

Das bisschen polnisch, was ich kann, ist reichlich eingerostet. Grammatik hatte ich nie, nur rumgeplappert bei zahlreichen Aufenthalten auf polnischen Campingplätzen vor vielen, vielen Jahren. War eine tolle Zeit!

Das bisschen, was ich gelegentlich preisgebe, glaube ich sicher zu kennen - reingefallen ;-)

Marc

[Rolf b]

Eine empfohlene Lösung mit EINER Description List (nicht einer pro Zeile), basierend auf Flexbox, würde ich gern sehen. Die <dt> sollen ja immer am linken Rand des Containers stehen. Wie bricht man nach einem Flex-Item um? Ich habe nur diese Möglichkeit gefunden, am <dd> ein flex-flow: row wrap zu setzen, am <dt> ein flex: 0 0 7em und am <dd> ein flex: 1 0 calc(100% - 8em). D.h. ich erzwinge den Umbruch über die Item-Breiten. Geht das auch eleganter?

Die Rahmen im Fiddle habe ich nur als Visualisierung der Item-Grenzen drin...

Update: Das funktioniert im Internet Explorer 10 gar nicht (nur mit -ms- Präfix) und im Internet Explorer 11 muss das flex: 1 0 calc(...) im dd Style aufgelöst werden zu flex-grow: 1; flex-basis: calc(100% - 8em);, das ist wohl ein bekannter IE Bug.

Rolf

[Gunnar Bittersmann]

@@Rolf b

Eine empfohlene Lösung mit EINER Description List (nicht einer pro Zeile), basierend auf Flexbox, würde ich gern sehen.

Meine empfohlene Lösung wäre, den Fehler in HTML zu beheben.

LLAP 🖖

[Rolf b]

Ja guuut. Ob ich das vor meiner Rente aber noch erleben würde? (Und das ist länger hin als mir lieb ist). Insofern müssen wir bis dahin eine Alternative im Angebot haben. Und HTMLisp (mehr div Klammern als Inhalt) ist es ja nicht :)

Andererseits - irgendwer hat ihn scheinbar behoben

Rolf

[aj]

Hallo Rolf.

Danke für die Hilfe. Das Thema ist das ich mit Virtuemart unter Joomla arbeite und gar nicht in die Programmierung gehen möchte. Ich dachte ihr könnt mir vielleicht helfen, da ich da auf dem Schlauch stand. Ich versuche jetzt mal deine Methode anzuweden.

Gruß Aglaia

[aj]

Danke Rolf deine Lösung hat funktioniert!!!!! Jetzt kann ich weiter machen.