Forum
Tipps
News
Menu-Icon

[CSS] span Element ohne Schriftverschiebung

Kann man ein <span> Element dazu zwingen, die Schriftformatierung z.B. nur in der Schriftfarbe zu verändern?

Sobald ich ein <span> Elemant in einem anderen <span> Element habe, verschiebt sich der 1. Text um ca. 5px nach unten.
 

Zitat

<span>
    <span> Text1 </span>
    Text2
</span>

In CSS ist nur die Schriftfarbe definiert
 
Zitat

.element span {
color: #fff;
}

.element span span {
color: #000;
}

Und beide Texte sollten auf einer Höhe sein.

Antworten zu [CSS] span Element ohne Schriftverschiebung:

Schriftverschiebung = Zeilenumbruch / Zeilenvorschub (gemeint)?

Lies mal zu:
"Formate für Klassen definieren" +
"Klassen in Verbindung mit den Elementen div und span"
"Individualformate definieren"
in:
http://de.selfhtml.org/css/formate/zentrale.htm
und sieh dir die jeweilöigen Anzeigenbeispiele an

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Ich meine das so:
 


Von Natur aus hat der <span> ein padding von:  padding: 2px 6px 3px;

Dieses padding kann man aber nicht aufhaben durch padding: 0px 0px 0px; oder gegenwirken mit negativen Werten....

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Sende nochmal den zusammenhängenden Quellcode zu Deinem Problem. Was bedeutet .element ? Wenn ich das wegnehme, dann werden beide Span-Elemente perfekt dargestellt.

 

Zitat
<html lang="de-de">
  <head>
<title>Paketschein erstellen</title>
<STYLE type="text/css">
span { color: #666; padding: 2px 6px 3px }
span span { color: #000 }
 </STYLE>
</head>
  <body>
   <span>
    <span> Text1 </span>
    Text2
</span>
       
  </body>
</html> 
 

Habe ich so getestet. Beide Texte stehen auf einer Reihe ohne Versatz.

gruß

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
http://ni67947_2.vweb14.nitrado.net/new/index2.php

Hier die Seite. Bei dem YouTube-Button ist das "You" gegenüber dem "Tube", vertikal versetzt (auch wenn "Tube" hier absolute Positionierung hat, aber das tut nichts zur Sache)
 
Zitat von: HTML

<button class="button-1 page1_buttonreihe_links">
            <span><span>You</span>Tube</span>
</button>

 
Zitat von: CSS
.button-1 span{
   position: absolute;
   width: 200px;
   height: 53px;
   top: 5px;
   margin-left: -100px;
   font-size: 40px;
   color: #fff;
   line-height: 40px;
   vertical-align: middle;
   text-align: center;
}
.button-1 span span {
   color: #99173C;
}
 

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Versuch mal das:
 

Zitat
<!doctype html>

<html lang="de-de">
  <head>
<title>Paketschein erstellen</title>
<STYLE type="text/css">
.button-1 {
   position: absolute;
   width: 200px;
   height: 53px;
   top: 5px;
   margin-left: 100px; <!-- hier habe ich das Minus weggenommen, musst Du wieder ändern -->
   font-size: 40px;
   color: #fff;
   line-height: 40px;
   vertical-align: middle;
   text-align: center;
}
.button-1 span {
   color: #99173C;
   margin-left:200;

}
</STYLE>
</head>
  <body>
   <button class="button-1 page1_buttonreihe_links">You<span>Tube</span>
</button>
       
  </body>
</html>


« Umleitung per PHP funtioniert nur für die index.phpQuellcode verbergen »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

Fremdwörter? Erklärungen im Lexikon!
Hypertext
Hypertext ( zu Deutsch: Übertext) ein ein von dem Informatiker Theodore L. Nelson in den sechziger Jahren geprägter Begriff für Text, der dreidimensional g...

Textur
Unter einer Textur versteht man eine Oberflächenstrukur, die ein bestimmtes Material simuliert, wie Holz, Tapete oder Metall. Bei der 3D-Computeranimation bezeichnet...

CSS
CSS ist die Abkürzung für Cascading Style Sheets, eine Beschreibungssprache im Internets, die für die visuelle Gestaltung von Webseiten verantwortlich ist....