CSS Problem #document_id + span{

Deutsch HTML-CSS
1

Hallo,

hoffe ich darf einfach so mein Hilfegesuch posten?

In unserem Buchhaltungsprogramm kann ich das Layout für Rechnungen mit CSS anpassen. Nur habe ich mit sowas noch nicht wirklich zu tun gehabt und stehe jetzt vor einer Herausforderung.

damit positioniere ich den Text, wie z.B. Rechnungs-Nr.:
#document-id {
position: absolute;
top: 70mm;
left: 20mm;
width: 85mm;
text-align: right;
}

Allerdings wird die Nummer dann unter das Wort geschrieben, sie soll aber rechts daneben stehen.

Um die Nummer zu positionieren, steht im Handbuch “#document_id + span”
Wie schreibe ich denn das mit dem “span” in die erste CSS-Zeile??

Versteht ihr was ich meine?

2

Hallo,

Es tut mir leid, wenn meine Antwort nicht gut geschrieben ist, aber ich verwende Google Translate.

Können Sie uns bitte auch Ihren HTML-Code zur Verfügung stellen?

Auf diese Weise können wir besser verstehen, wo das Problem liegen könnte.

Danke!

1 Like
3

Hallo danaebouki,

leider habe ich auf den HTML-Code keinen echten Zugriff und kann da auch nichts ändern.

Der Quelltext lautet:

#item-header table td, #item-header table th, #item-list table td, #item-list table th, #item-list table td span, #item-header table td span { } 
  <td class="document-id-no-col">
    <div class="title document_id">
      Rechnungsnummer
    </div>
    <span>
      
      Entwurf
      
    </span>
  </td>

  <td class="customer-id-no-col">
    <div class="title customer_id">
      Kundennummer
    </div>
    <span>
      
      K-BEISPIEL
      
    </span>
  </td>

  <td class="service-date-col">
    
    <div class="title service_date">
      <span>Leistungszeitraum</span>
    </div>
    <span>
      
      <span class="na"> - </span>
      
    </span>
    
  </td>

  <td class="document-date-col date">
    <div class="title document_date">
      Datum
    </div>
    
    <span>14.11.2023</span>
  </td>
  

  

</tr>
1 Like
4

Hallo,

Das Problem scheint im div im HTML-Code zu liegen.
Ein div-Element ist ein Blockelement und nimmt daher standardmäßig den gesamten Platz in einer Zeile ein.

Um das mit CSS zu beheben, versuchen Sie, die div-Elemente in Inline-Elemente umzuwandeln. Auf diese Weise dehnen sie sich nicht über die gesamte Reihe aus und lassen etwas Platz für Ihre Spannweite.

Ich hoffe das hilft!

5

Hallo danaebouki,

hast du mir ein Beispiel dafür? Ich kenne mich damit gar nicht aus. :frowning_face:

ich kann im HTML nichts ändern, darauf habe ich keinen Zugriff. Nur in den CSS kann / darf ich arbeiten

6

Hallo Wuffzel,

Nun, zunächst müssen Sie in Ihrem CSS-Code alle div-Elemente als Ziel festlegen.

Dies kann durch Erstellen eines Selektors für eine der vorhandenen Klassen erreicht werden, beispielsweise für die Klasse „title“.

Anschließend können Sie in diesem Selektor die Anzeige der Elemente ändern und auf Inline einstellen.

Wenn Sie weitere Informationen zur Funktionsweise der Anzeigeeigenschaft wünschen, können Sie sich diese Seite ansehen (auf Deutsch):
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/display

Mit diesen Informationen hoffe ich, dass Sie das Problem lösen können!

7

aaah, ich glaube, ich habe verstanden :slight_smile:

vielen Dank :hugs:

8

Gern geschehen! Wenn du noch weitere Fragen hast, kannst du mich gerne fragen! :smiley:

2 Likes