Wie kann ich im HTML style die Aufzählungspunkte in die Mitte des Textes setzten?

Wie kann ich im HTML style die Aufzählungspunkte (Hacken) in Mitte des Textes Bringen, sodass die Punkte parallel zum Text sind und nicht verschoben?

Bild zum Beitrag

Vielen Dank im Voraus!

2 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

17.02.2023, 17:07

Auf die Position der list-style-images hast du nicht so viel Einfluss. Daher würde ich dir empfehlen, stattdessen ::before-Pseudoelemente einzusetzen.

Beispiel:

li {
  list-style-type: none;
  margin-top: 5px;
}

li:first-child {
  margin-top: 0;
}

li::before {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/50/Yes_Check_Circle.svg');
  content: '';
  display: inline-block;
  height: 20px;
  margin-right: 5px;
  vertical-align: bottom;
  width: 20px;
}

Eine vertikale Ausrichtung kann man über verschiedene Wege erreichen. Im obigen Fall nutze ich das vertical-align-Property. Das klappt, da das Pseudoelement als Inline-Block-Element definiert wurde.

Alternativ kann man ebenso mit absoluten Positionieren (position, top) arbeiten oder mit dem transform-Property.

NackterGerd

18.02.2023, 00:15

Wieso kann man das List Icon nicht positionieren ?

regex9

18.02.2023, 00:59

@NackterGerd

https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#allowable_properties

NackterGerd

18.02.2023, 09:01

@regex9

Keine Ahnung was du sagen möchtest.

Die Frage war doch POSITION

Dein Beispiel ändert doch nur das Zeichen und positioniert es gar nicht.

position: relative;
top: -2px;

Damit kann du z.b. Positionieren

regex9

18.02.2023, 15:30

@NackterGerd

Für die Aufzählungszeichen ist standardmäßig das ::marker-Pseudoelement zuständig. Das kannst du aus dem verlinkten Artikel entnehmen. Dort steht ebenso, welche CSS-Properties für das Pseudoelement unterstützt werden.

Bei meinen Beispiel wird ein Icon positioniert. Wie, habe ich oben erklärt.

SadDad

17.02.2023, 09:15

Im table-tag wären sie genau nebeneinander. Wie ist es denn jetzt gelöst?

NackterGerd

17.02.2023, 09:18

Tabletten hat nichts mit Aufzählung zu tun und wäre hier die falsche Lösung

SadDad

17.02.2023, 09:49

@NackterGerd

Von Tabletten war auch nicht die Rede. Eine falsche Lösung ist es jedenfalls nicht, da sie funktionieren würde. Ein valign=top und die Punkte sind genau neben der ersten Textzeile.

YeriFragen

Beitragsersteller

17.02.2023, 09:18

Einfach eine ul und dann das Zeichen als PNG bei der ul eingebunden

Ähnliche Beiträge

Was kann ich in den HTML Header schreiben, damit der Text in der Website in der Mitte schmal zentriert ist.?

Also, links und recht ein großer Abstand, und nur in der Mitte der Text, höchstens ein Drittel des Bildschirms einnehmend, was muss ich da in die HTML Styles oder so schreiben, danke

...zum Beitrag

Punkte bei einer ul in html mittig formatieren?

Ich habe mehrere li in einer ul. Ich habe aber den Text mittig formatiert, nur sind die Punkte noch rechts, von der unordered list, der Text aber mittig. Wie bekomm ich die Punkte auch in die Mitte?

...zum Beitrag

HTML Texte in die Mitte setzten?

Ich bin gerade dabei meine Website responsive zu machen

Ich möchte, dass ab einer bestimmten Display Grösse die Texte in der Mitte des Bildschirms untereinander angezeigt werden.

Wie kann ich das machen?

Wenn ich beim 2. Text die margin top auf eine bestimmte Anzahl Pixel einstelle dann ist er zwar unterhalb des 1. Text aber der 1. Text bleibt dann linksseitig und der 2. Text dann rechtsseitig. Ich möchte aber dass beide Texte dann sofort zentriert sind.

mit align items center klappt es nicht

...zum Beitrag

Wie kriege ich in HTML einen Text in die Mitte?

Hallo,

ich wolte fragen, wie ich in HTML einen Text in die Mitte bekomme. Also das er in der Mitte vom Bildschirm ist.

...zum Beitrag

Kann man mit HTML einen Text nur auf die Hälfte der Seite machen?

Ich möchte einen Text im Blocksatz nur auf der Hälfte der Seite haben, sodass der Text mit dem Ende einer Tabelle abschließt. Ist da was möglich? Wie nennt man sowas, ich scheine nicht die richtigen Begriffe für Google zu verwenden?

Skizze hinzugefügt.

...zum Beitrag

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zum Beitrag

navbar logo in die mitte?

Bin gerade dabei Für einen Freund eine Website zu erstellen jedoch ist es das erste mal das ich ein logo in die Mitte machen muss und ich komm mit nichts weiter.. Tutorials.. w3schools.. etc

html

	<div class="topnav">
	


  
  <div class="topnav-centered">
		  <a class="topnav-centered" href="#home">
            <img src="https://cdn.discordapp.com/attachments/807683377137844285/1036024148855627786/Strixley_Ruffy_2.png" width="85px;"	height="80px;" class="img-fluid">
	
</a> 
  </div>


 
  <a href="#about">Über</a>
  <a href="#gamemodes">Gamemodes</a>


  
  <div class="topnav-right">
  
    <a href="#shop">Shop</a>
    <a href="#staff">Team</a>
  </div>


</div>
</div>

css

.topnav {
	position: relative;
	list-style-type: none;
    overflow: hidden;
    background-color: #181818;
    box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
    transition: all .2s ease-in;
    font-weight: 700;
    text-transform: uppercase;
}


.topnav a {
  float: left;
  color: white;
  text-align: top;
  align-items: start;
  padding-top: 30px;
  padding-right: 100px;
  padding-bottom: 30px;
  padding-left: 100px;
  text-decoration: none;
  font-size: 20px;
}


.topnav a:hover {
  color: #5205ed;
}


.topnav-centered a {
  float: none;
    display: inerhit;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}


.topnav-right {
  float: right;
  align-items: end;
}


.right {
  justify-content: flex-start;
}


.left {
  justify-content: flex-end;
}


@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
}
	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}
}


@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: center;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: right;
    display: inline-block;
    text-align: left;
  }
}


@media screen and (min-width: 800px) {
  div .max-width {
    max-width: 60%;
    margin: 0 auto;
    box-shadow: none;
  }
}


	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}






body {
  padding: 0px;
  background-image: linear-gradient(rgba(24, 24, 24, 1), rgba(14, 14, 14, 1));
  color: black;
  font-size: 20px;
}

...zum Beitrag

HTML - Wie kriege ich den Text in einer Liste linksbündig?

In einer Zeile eines Inhaltsverzeichnisse ist ein rotes Sternchen. Ich hätte gerne, dass der Text rechts daneben linksbündig ist, also nicht verschoben durch den Zeilenumbruch.

Der Text in den anderen Zeilen ist hinter den Nummern einwandfrei linksbündig. Nur sollte die zweite Zeile in Nr. 7 eingerückt sein.

...zum Beitrag

Textfeld in die Mitte bringen?

Bei meiner Webseite würde ich gerne die Überschrift die einen farbigen Hintergrund hat in die Mitte verbschieben. Und ich weiss um den Text in die Mitte des Textfelds zu bekommen muss ich text-align: center; schreiben aber wie bring ich dann noch das Textfeld in die Mitte der Seite?

...zum Beitrag

HTML und CSS - Box erscheint nach Klick auf Button und verschwindet nach Klick auf Text wieder?

Die Aufgabenstellung lautet:

"Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Diese Funktion ist noch nicht implementiert. Bitte schließen.“

Die Box soll beim Klick auf den Text wieder unsichtbar werden.

Die Box soll ihre Farbe ändern, wenn man mit der Maus darauf fährt."

Einzelne Punkte schaffe ich, aber nicht dass die Box z.B. wieder weg geht wenn man in den Text klickt ...

Freue mich über jede Nachricht!

...zum Beitrag

HTML Seite verschiebt bei Verkleinerung?

Hallo, ich bin Anfänger was HTML und CSS angeht und habe meine erste Website fürs erste fertig. Nun bin ich beim verkleinern des Windows auf das Problem gestoßen, dass sich die Objekte verschieben und unteranderem auch Überlappen...

Wie kann ich dem entgegen steuern? Gibt es da eine Möglichkeit?

...zum Beitrag

HTML - Wie kriege ich Text in einen Facebook-Teilen-Button?

Ich kann ohne weiteres einen Text in einen WhatsApp-Teilen-Button bringen, der dann bei einem Empfänger angezeigt wird.

Als Beispiel:

Geht das auch bei Facebook? Hier der HTML-Text zu Facebook.

An welcher Stelle müsste ich den Text "Dieses%20ist%20ein%20Beispieltext%20für%20Gutefrage." in Facebook einfügen so wie in WhatsApp?

...zum Beitrag

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zum Beitrag

Bild Datei ins selbe Verzeichnis bringen wie html Datei?

Wie schaffe ich das wenn meine html Datei in VS drin ist? Ich hab keine ahnung wie ich die in einen externen Ordner tun soll.

Wie soll ich den Pfad angeben?

(Bild ist im Ordner namens Pegasus, Bild heißt landschaft.jpg)

Ist kein Problem das Bild woanders hin zu tun damit es einfacher geht, ich weiß nur nicht wie.

So habe ich das gemacht:

body {
        font-family: helvetica, arial;
        font-size: 90%;
        line-height: 1.5;
        margin: 0;
        padding: 0;
        justify-content: center;
        text-align: center;
        background-image: url(Pegasus/landschaft.jpg);
        background-attachment: fixed;
        background-size: cover;
      }

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen