HTML CSS Underline nicht unterbrechen lassen?

Hallo zusammen, Ich habe einen neuen Titel für eine Webseite, den ich verschiedenfarbig gestalten möchte. Den farbigen Teil habe ich einfach in einen Div eingekesselt, der style = "color:red;"; enthält. Da jedoch h1 unterstrichen ist, ergibt sich so eine hässliche Unterbrechung des Unterstriches. Wie kann ich diesen entfernen? Hier noch mein Code:

Teil1Teil2

Vielen Dank!

4 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, programmieren, CSS

06.05.2017, 01:25

Kannst du bitte noch einmal den Code (HTML, CSS) bei pastebin posten oder ein Bild zeigen, was dir an deinem derzeitigen Stand nicht gefällt? Trotz des Codes, den du in den Antworten aufgeführt hast, kann ich nicht erfassen, wo das Problem liegt.

<h1 style="text-decoration: underline">Titel1 div style="color: red; display: inline"> Teil2</div></h1>

In diesem Fall wird der gesamte Inhalt der Headline ganzheitlich schwarz unterstrichen. Wenn Teil2 in der eigenen Farbe unterstrichen werden soll, musst du diesem Teil noch einen entsprechenden Style zuordnen (erneut: text-decoration: underline;).

Des Weiteren solltest du, wie hier schon öfter erwähnt, span statt div nutzen. Das div nur für diesen Fall extra in ein Inline-Element umzuwandeln, ist unnötig, da es bereits zuständige, verwendbare Inline-Elemente gibt.

rikks

04.05.2017, 17:13

Da ist leider kein Code dabei - aber ich machs allgemein immer so, dass ich ein Span um das zu unterstreichende lege und dort nur den unteren Rand anzeigen lasse.

Der Vorteil ist, dass man dabei den Unterstrich auch noch etwas über die Schrift raus laufen lassen und anders stylen kann.

Wichtig dabei:

white-space: nowrap;

oder

white-space: line-line;

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML

04.05.2017, 17:29

Wenn du Text farblich markieren willst ist SPAN das richtige Element und nicht DIV.

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

threadi

04.05.2017, 19:06

Das spielt keinerlei Rolle für die Gestaltung.

Babelfish

04.05.2017, 19:53

@threadi

Doch, spielt es – sofern er sein DIV nicht per CSS inline definiert und padding angepasst hat.

regex9

06.05.2017, 01:12

@threadi

Ist aber nicht valid. Wenn er aus dem Container ein Inline-Element macht, kann er dieses Problem zwar beheben, doch ist das dann schlechter Stil.

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML

04.05.2017, 19:06

Verwende am besten border-bottom statt text-underline.

Woher ich das weiß:Berufserfahrung – mit dem Internet verbunden seit 1993

Ähnliche Beiträge

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...zum Beitrag

mit :hover Text hervorheben?

Hi, ich will, dass zum Beispiel ein Link, wenn man über ihn fährt mit der maus größer und unterstrichen wird. Das geht ja zum Beispeil mit

a:hover {
  text-decoration: underline;
  font-size: 200%;
}

Das funktioniert auch gut, ich will aber dass dabei eine kleine Animation passiert. Der Strich soll sich von links nach rechts "aufbauen" und die Schrift soll langsam größer werden. Wie kann man das mit nur css machen?

...zum Beitrag

Wie schreibt man in Discord farbig?

Ich weiss man kann gewisse markdown nutzen.

Trotzdem gibt es CSS etc, kann mir jemand ein paar "roh" beispiele geben wie man was schreiben müsste?

Es wird hier zb erklärt aber wie man farbig schreibt wird komplett übergangen....

Es wird null geholfen wie was geht, klar mit * und so weiter aber farben und links wurde nicht erklärt.

https://support.discordapp.com/hc/de/articles/210298617-Grundlagen-des-Markdown-Texts-Chatformatierung-fett-kursiv-unterstrichen-

Also ein paar vorlagen / beispiele wären hilfreich. Dankeee

...zum Beitrag

Wie ändere ich die Hintergrundfarbe meiner Webseite mit CSS?

Hallo, ich möchte gerne die Hintergrundfarbe meiner gesamten Webseite ändern, aber es funktioniert nicht, wie es sollte. An der Verlinkung in der HTML Datei kann es nicht liegen, da ich die Farbe von h1 ändern kann. Aber die Hintergrundfarbe von sowohl body als auch header lässt sich nicht ändern. Hat jemand eine Ahnung, woran das liegen könnte? Danke schonmal im vorraus

body{
  background-color: rgb(112, 224, 108);
  }
header{
      background-color: red;
  }
h1{
      color:red;margin-bottom: 100px;
  }

...zum Beitrag

css: wie mache ich so einen Unterstrich wie da?

https://themeix.com/livedemo?theme=appszone

zur class head-title finde ich nur diese Einträge aber das erstellt das nicht... : https://hastebin.com/hoyarafexo.css

wie geht dieser Strich genau ? kann man das auslesen ?

...zum Beitrag

JavaScript Puzzle Spiel?

Ich hab da ein Problem mit meinem Kleinen Puzzle spiel,

Es hat alles funktioniert, jedoch hab ich eine Sache nicht bedacht unzwar das die Karten immer auf einer Stelle sind.
Wie könnte ich das Umsetzen ?

Also Immer nur 2er Paare als Elemente Kreieren die aber auch nicht immer nebeneinander sind

Hier wäre ein dummer Ansatz von mir, vielleicht könnte man darauf aufbauen.

let kiwis = ["🥝","🥝"];
let cocos = ["🥥","🥥"];
let strawberrys = ['🍓','🍓'];
let cherry = ["🍒","🍒"];

arr = [kiwis,cocos,strawberrys,cherry]

arr.forEach(element => {
    element.forEach(element => {
        let Puzzelteil = document.createElement("td")
        document.body.appendChild(Puzzelteil)
        Puzzelteil.innerHTML = element
    });
});

Den Rest / Überprüfen ob man gewonnen hat könnte ich dann selber machen wenn sie richtig durchgemischt sind.

...zum Beitrag

Warum ist HTML Versionslos?

Hey, kann mit jemand ganz schnell und einfach erklären wieso HTML5 Versionslos ist? Also wieso dafür keine Updates in dem Sinne von HTML 6 kommen?

...zum Beitrag

Wie einen Shop programmieren?

Guten Abend,

ich bin in der Programmierungs Welt recht neu unterwegs und ich weiß auch das HTML & CSS keine Programmier Sprachen sind. Ich möchte gerne eine Seite programmieren mit verschiedenen Produkten in der Mode Branche. Wo kann ich eine Datenbank für die Produkte anlegen und womit kann ich die Funktionen programmieren. Die Seite muss es können das die Benutzer produkte der webseite verkaufen kann. Sprich wenn „Peter“ einen Iphone 13 verkaufen möchte für 1000€ dann soll er der billigste Verkäufer sein. Wenn dann aber „Hans“ nur 990€ möchte soll der Preis auf 990€ angepasst werden und dann soll der Verkäufer Hans sein. Wie kann ich so etwas am besten umsetzen? Beispiel Seiten:

www.Stockx.com

www.klekt.com

...zum Beitrag

Wordpress - Blau und unterstrichen?

Hallo, sobald ich etwas verlinke, wird der Text blau und unterstrichen. Wie schalte ich das aus?

Danke

...zum Beitrag

HTML CSS Website Footer wird im Container angezeigt, obwohl er nicht drin ist?

Hallo,

Ich "programmiere" gerade ein wenig mit HTML und CSS und baue eine Website mit einem Head, einer Main und einem Footer. Mein Problem ist, dass alle Elemente der Website nach der Main (bei mir heißt sie "Container") trotzdem noch innerhalb des Containers angezeigt werden. Somit ist bei mir der Footer im Container Main, obwohl der Container vorher schon geschlossen wurde.

-------------------------------------------------------------------------------------

HTML CODE:

<!DOCTYPE html>
<html>
 <head>
  <title>Aufgabe 1</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <header>
   <header1 class="item1">
    <h2>FeWos</h2>
   </header1>
  </header>
  <div" class="container">
   <div class="b1">
    <div>
     <h1>Item 1</h1>
    </div>
    <div class="bild1">
     <img src="pingu.png" width="50%" height="50%">
    </div>
   </div>
   <div class="b1"><br>Box 2</div>
   <div class="b1"><br>Box 3</div>
   <div class="b1"><br>Box 4</div>
   <div class="b1"><br>Box 5</div>
   <div class="b1"><br>Box 6</div>
  </div>
  <footer>
   <p>Hallo</p>
  </footer>
 </body>
</html>

----------------------------------------------------------------------------------------------------

CSS CODE:

body {
  margin: 0;
}
header {
  height: 120px;
  background-color: rgb(43, 43, 43);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.container {
  border: 3px solid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 90px;
  padding: 90px;
}
.b1 {
  display: flex;
  background-color: rgb(93, 161, 224);
  width: 30%;
  height: 500px;
  flex-grow: 1;
  transition: transform 0.2s ease-out;
  border-radius: 20px;
}
.b1:hover {
  transform: scale(1.05);
}
.bild1 {
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  width: auto;
  height: auto;
}
footer {
  background-color: rgb(43, 43, 43);
  width: 100%;
  height: 120px;
  padding: 0px;
}

----------------------------------------------------------------------------

Wie man sehen kann wird der "container" mit </div> abgeschlossen, aber der Footer ist trotzdem im Container. Hoffe mir kann jemand bei dem Problem helfen.

Auf dem Bild kann man das auch ganz gut sehen. Das anthrazit farbige soll der Footer sein und dieser liegt innerhalb des Containers, welcher zur Sichtbarkeit eine Umrandung hat.
Würde mich echt freuen, wenn mir jemand weiterhelfen kann. Hab auch Chat GBT schon gefragt, aber Chat GPT sagt, dass der Code ganz normal ist und, dass der Footer nicht im Container ist.

...zum Beitrag

HTML: Elemente von einer CSS-Formatierung ausschließen

Hallo Leute,

ich habe jetzt folgendes Problem: Ich habe eine Seite mit einer Übreschrift und dann einer Liste (Aufzählungen) und noch einen Div-Container mit Text. Da ich auf der ganzen Seite außer in der Überschrift (h1) eine bestimmte Schrift (Trebuchet MS) und eine bestimmte Schriftgröße und Zeilenabstand (95%/115%), habe ich die Formatierung auf den ganzen Body angewandt. Mein Problem ist aber jetzt dass die Überschrift (logischerweise) auch mit formatiert wird. Das mit der Schriftartrt ist ja ganz einfach - das geht, aber wegen der Schriftgröße habe ich es schon mit "font-size:100%" versucht, aber dadurch wird die Schrift nur richtig klein (wie Größe 12) (der Zeilenabstand geht komischerweise mit "normal" wieder zurückzusetzen).

Die Frage: Wie kann ich die Überschrift aus der body-Formatierung ausschließen (Ich möchte nicht ewig probieren bei wieviel Prozent die Schrift wieder richtig groß ist...)?

...zum Beitrag

HTML und CSS login daten abrufen?

Hallo ertmal!

Ich habe mal so recherchiert und habe eine Gratis Login und Register Template bekommen. Jetzt will ich aber dass mir die login daten aufs mail geschickt werden, damit ich weiss wer sich da registriert. Den HTML code kann ich nachher noch sagen!

Und bitte macht es nicht zu kompliziert, ich bin erst seit 7 Tagen am programmieren! Am besten ein Video, eine Schritt für Schritt Anleitung oder den code😀

wäre nett wenn ihr antworten würdet😁

...zum Beitrag

Wie mache ich eine eigene Webseite DSGVO-konform?

Hab die Webseite selber programmiert was muss ich tun?

...zum Beitrag

Ist HTML einsteigerfreundlich?

Ich habe heute angefangen schon meine ersten Websites zusammenzubauen. Würdet ihr sagen HTML 5 ist einsteigerfreundlich?

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen