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

Frage html span element

M

Masterfly

Neues Mitglied
Hallo liebe Community,

ich habe eine Frage zum span Element. Gibt es in html oder css eine Möglichkeit span Elemente zu formatieren?
Würde gerne vor dem span Element einen Abstand haben, der in jeder Zeile gleich sein soll, oder muss ich ein anderes Element nehmen?

Lieben Gruß

Masterfly
 
Werbung:
Hallo

span-Elemente können wie jedes andere inline-Element formatiert werden.

Würde gerne vor dem span Element einen Abstand haben, der in jeder Zeile gleich sein soll,
Zum Vergrößern anklicken....

Die Beschreibung verstehe ich nicht.

Was für einen Abstand? Oben? Unten? Links? Rechts?

Und was meinst du mit "in jeder Zeile"?

Am besten wäre ein Beispiel.

Gruss

MrMurphy
 
Sorry,

ich möchte links einen Abstand. Momentan verschiebt sich das bei den automatischen Zeilenumbrüchen, wenn man es verkleinert.


Ich hänge ein Beispielbild an, wie es aussehen soll und zwar in jeder Größe.

beispiel4f6szyapd7.jpg
 
Werbung:
Hallo,

ein Bild ist kein Beispiel. Daraus ist überhaupt nichts von deinem Problem zu erkennen.

Zeige bitte deinen Quelltext.

Ich habe die Vermutung, das du noch grundsätzliche Probleme mit den Anwendung von HTML und CSS hast - Stichwort: Papierdenken mit festen Größen.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
<span style="padding-left:0.3em;background-color:white; color:black">Irgendein ziemlich langer text über mehrere zeilen</span>

Ich verstehe halt nicht, wie man es hinbekommt das nicht der komplette hintergrund weiss ist und er immer in jeder neuen Zeile padding-left:0.3em macht.

Es tut mir leid, ich bin noch Anfänger, was HTML und CSS betrifft.
Es ist nett, dass du versuchst zu helfen.
Gruss

Masterfly
 
Hallo

Ich verstehe halt nicht, wie man es hinbekommt das nicht der komplette hintergrund weiss ist und er immer in jeder neuen Zeile padding-left:0.3em macht.
Zum Vergrößern anklicken....

Ich verstehe immer noch nicht was du erreichen willst. Meinst du vielleicht:

Ich verstehe halt nicht, wie man es hinbekommt das der komplette hintergrund weiss ist und er immer in jeder neuen Zeile padding-left:0.3em macht.
Zum Vergrößern anklicken....

Dann solltest du statt des span-Elements das p-Element verwenden.

Für Hintergrundinformationen kannst du dann nach dem Unterschied zwischen inline-Elementen und block-Elementen googeln.

Gruss

MrMurphy
 
Werbung:
Ich will erreichen, nur den Texthintergrund weiss zu haben und nicht den kompletten Absatz. Und vor dem jeweils ersten Buchstaben einer Zeile soll der Text 0.3 em auch weiss sein.
Und das funktioniert nicht mit p Elementen, oder doch?
 
Ich will nur erreichen, dass vor dem eigentlichem Textanfang die Zeile weiss ist, wie auf dem Bild zu sehen ist.
 
Werbung:
Es ist ja schon so aufgebaut. Wenn ich ganz viel Text dahinter schreibe, entstehen Zeilenumbrüche automatisch. Diese Zeilenumbrüche haben aber dann kein padding. Versteht ihr das jetzt?

1.Zeile mit Abstand und alle anderen nicht.
sieht ungefähr dann so aus:
.....=Abstand

......Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
Werbung:
Hallo,

das was du willst ist in HTML / CSS nicht vorgesehen. Absätze sollen einen durchgehenden Hintergrund haben, damit auch optisch erkennbar ist, das sie zusammengehören.

Das zwischen den Zeilen eines Absatzes der Hintergrund des darunterliegenden Elements zu sehen ist stört beim Lesen ungemein, da optisch eine Trennung zwischen den Zeilen verfolgt, die es aber nicht gibt.

Gruss

MrMurphy
 
Werbung:
Nur eine Vermutung.
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SPAN</title>

<style>
p {
background:#333;
padding:10px;
}
p span {
padding:0;
line-height:2.5em;
}

p b {
background:#fff;
font-weight:normal;
}
</style>
</head>
<body>

<p>
<span>
<b>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</b>
</span>
</p>
</body>
</html>

Upps, ich glaube, dass ist doch nicht das was du willst.
 
Zuletzt bearbeitet:
Guck mal ob du das gebrauchen kannst.
Code: 
<head>
<meta charset="utf-8">
<title>SPAN</title>

<style>
p {
 background:linear-gradient(90deg, #000 , #f00 , #ff0 );
 padding:0 10px ;
}

span {
 display:block;
 padding:5px;
 line-height:2.75em;
 background: -webkit-linear-gradient(180deg, transparent, transparent 10px, #fff 10px);
 background: linear-gradient(180deg, transparent, transparent 10px, #fff 10px);
 background-size: 100% 2.75em;
}

</style>
</head>
<body>

<p>
<span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
</p>
</body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben