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

Wordpress - Blau und unterstrichen?

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

Danke

...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

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

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

CSS / JavaScript Name Conventions?

Was ist euch lieber oder ist der Standard?

Am Beispiel von meiner Hero Section: Hero_Section, HeroSection, Hero-Section, nur Hero?
Und groß oder klein alles, nur Anfangsbuchstabe groß?

In JavaScript dürfen Variablen keinen Bindestrich haben.

CSS Klassen & ID
JavaScript Variablen, lieber heroSection oder Hero_Section?
React.js Component-Namen groß klein? Unterstrich (_) oder keins
JSX/TSX Filename groß klein?

Bei den Klassen sollte es schon lesbar und aussagekräftig sein, weil es noch hero section headline gibt, hero section button usw.. Oder soll ich einfach sagen

.hero-section{
 cta-button{}
}

?
Mir war es immer so lieber, damit auf jeden Fall nicht mit irgendwas, das ich nicht selber gemacht habe, überschrieben wird. Aber ist viel länger natürlich und damit es nur dort greift, geschachtelt in hero-section.

.hero-section {
.hero-section-cta-button{}
}

Und das war schon SCSS. Mit CSS wäre es:

.hero-section .hero-section-cta-button{
}

...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

Abstand zwischen Bild und Text in CSS entfernen?

Also ich habe folgende Situation:

Der mittlere hellblaue Streifen soll direkt an die Bilder darüber und darunter sein, ohne diesen weißen Abstand dazwischen

Kann mir da jemand helfen?

...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/CSS/JS Sections einfliegen lassen?

Hi, ich arbeite gerade an einer Website, nun möchte ich, dass wenn man scrollt, die jeweilige section einfliegt (von links). Ich komme aber nicht richtig weiter, wäre nett, wenn mir jemand helfen kann.

...zum Beitrag

Wie kann ich eine Navigationsleiste in HTML an die rechte Seite verschieben?

Ich habe in HTML eine Navigationsleiste. Diese befindet sich ja standartmäßig an der linken Seite der Website. Wie schaff ich es dann die ganze Leiste (

tag) an die rechte Seite der Website ist?

Egal ob mit CSS oder HTML.

...zum Beitrag

html: wie div boxen neben- und untereinander?

Hallo, in meiner Website sollen dienstleistungen aufgelistet werden.
Für die PC Ansicht, sollen diese (insgesamt 6) nebeneinander stehen.
Für die Tablet und Handy Ansicht sollen diese dann so umbrechen, das genug Platz ist, um sie noch zu lesen und sie nicht ineinander verschwimmen.
Ich habe jetzt hier versucht fürs Tablet drei Boxen nebeneinander und somit dann zwei Spalten zu haben, allerdings ist in jeder Ansicht jetzt alles untereinander und man muss auch noch zur Seite scrollen um den ganzen Text zu lesen (dies soll aber nicht sein).
Im Folgenden ist der Teil meiner CSS Datei:

.leistung {

padding: 15px;

margin: 15px;

}

.leistung-container {

display: flex;

flex-direction: column;

}

/* Layout für Tablet (teilweise nebeneinander, teilweise untereinander) */

@media (min-width: 25em) and (max-width: 45em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(50% - 2em);

/* Zwei Boxen nebeneinander */

}

/* Layout für PC (nebeneinander) */

@media (min-width: 45em) and (max-width: 65em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(33.33% - 2em);

/* Drei Boxen nebeneinander */

}

@media (min-width: 65em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(33.33% - 2em);

/* Drei Boxen nebeneinander */

}

Ist da irgendwas falsch?
Könnt mir da jemand helfen?
Dankeschön

...zum Beitrag

Werden Fremdschlüssel in einem Datenbankmodell auch unterstrichen?

nehmen wir an wir hätten ein Datenbankmodell in der Chen Notation. Jede Entität muss ja einen Primärschlüssel haben und wenn ich einer Entität einen Fremdschlüssel hinzufügen würde, müsste ich den dann auch unterstreichen? Primarschlüssel werden ja immer unterstrichen in einem Datenbankmodell. Und Fremdschlüssel sind in einer anderen Entität ja auch Primärschlüssel und somit eindeutig.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen