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?

YeriFragen

Fragesteller

17.02.2023, 09:18

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

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.

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?

...zur Frage

Listenpunkte in zentrierter Liste verschoben?

Hallo,

Ich habe mit HTML Editor eine Liste erstellt und diese dann mit CSS zentriert.

Das Problem: Irgendwie sind die Punkte für die Liste ganz links, nicht wie der Text der Liste. Vorher waren die mal zusammenhängend, aber ich weiß nicht mehr was ich anders gemacht habe.

...zur Frage

HTML/CSS, Footer, Divs werden untereinander und nicht nebeneinander platziert?

Guten Abend. :)

Ich beschäftige mich momentan viel mit HTML und CSS und habe eine eigene kleine Website zum Spaß gemacht.

Aus Jux und Tollerei wollte ich jetzt einen Facebook-Like und einen -Teilen-Button mit einbauen, und das in einem Footer. Die Buttons habe ich beide jeweils in ein Div gepackt und diesen per "float: left;" gesagt, das sie sich nebeneinander von links anordnen sollen. Zumindest stand in sehr vielen anderen Foren in denen ich mich umgesehen habe so ziemlich überall genau das.

Bei mir funktioniert das aus unerfindlichen Gründen leider nicht, die Buttons werden untereinander angeordnet.

Zur Seite kommt ihr hier: http://nyancatmarathon.tk/

(Am Besten auf Lautlos stellen, nervige Musik im Hintergrund, außerdem hat sich der Footer von ganz unten in die Mitte der Seite verschoben, als ich die Seite am Localhost bearbeitet habe war das noch nicht so, komisch...)

Ich hoffe jemand von euch weiß woran es liegt und kann mir helfen. :)

Vielen Dank und LG, Bluedragon1

...zur Frage

Geht dieser Prompt von PromptBase auch für GPT-4?

Da bei dem Model 3.5 steht

...zur Frage

Kann ich Job in Webdevelopment irgendwo finden, wenn ich solche Kurse absolviere?

https://www.udemy.com/course/der-komplette-webentwickler-2/?couponCode=LETSLEARNNOWPP

...zur Frage

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;
}

...zur Frage

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>

...zur Frage

Einfacher Taschenrechner JS?

Hallo :)

Ich soll einen einfachen Taschenrechner mit Eingabefeldern erstellen, so dass er am Ende wie im Bild aussieht, ich weiß nur nicht, wie ich den <script> Teil schreiben muss, sodass er auch tatsächlich funktioniert, kann mir da jemand weiterhelfen?

Hier noch mein bisheriger Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Praktikum Webanwendungen 1</title>
    <style>
      input,
      button {
        margin: 10px;
      }
    </style>
    <script>
     
    </script>
  </head>
  <body>
    <h1>Taschenrechner</h1>
    <label for="number1">Zahl1:</label>
    <input id="number1" type="number">


    <label for="number2">Zahl2:</label>
    <input id="number2" type="number">


    <div>
      <button onclick="add()">+</button>
      <button onclick="subtract()">-</button>
      <button onclick="multiply()">x</button>
      <button onclick="divide()">/</button>
    </div>


    <label for="result">Ergebnis:</label>
    <input id="result" type="number">
  </body>
</html>

...zur Frage

Wordpress lädt manchmal langsam, manchmal schnell?

Servus Leute.

Ich habe seit einer Weile eine Test Website online. Alles funktioniert sehr gut, bis auf die Ladezeiten.

Der Host ist Ionos und meistens klappt auch alles super. Manchmal jedoch, braucht wie Website fast 30 Sekunden zu laden. Also unzumutbar lange. Plugins habe ich schon auf ein absolutes Minimum reduziert, also habe ich derzeit nur Elementor, Envato Elements, Ionos Performance und Elementor Header installiert.

Das komische ist, dass jedes Website Analytics Tool, also Chrome Inspector, PageSpeed Insights usw eine perfekte Performance anzeigen.

Und es dauert auch nur manchmal so extrem lange und manchmal geht es innerhalb einer Sekunde. An der Netzwerkverbindung kann es nicht liegen. Habe am Computer einen sehr schnellen LAN Anschluss und habe es auf mehreren Geräten getestet.

Die Website lautet leofleischmann.com und ist nur ein Test. Das Passwort wäre "123abc"

Bei meiner Hauptwebsite leofleischmann.de kommt es auch manchmal zu diesen Problemen, aber ich würde gerne erst mal mit leofleischmann.com anfangen, da das mein "Playground" ist und ich da nichts kaputt machen kann.

Würde mich sehr über Hilfe freuen, denn ich bin mit meinem Wissen am Ende. Jegliche Optimierungsversuche nach Tutorials und auch weitere Plugins die für die Performance sind, haben nicht geholfen.

Vielen Dank schon mal und LG, Leo

Hier noch ein Bild von dem Status der Website:

...zur Frage

CSS: Warum werden bei meiner ul-Liste die Bullet-Points nicht angezeigt?

Hallöchen,

wie schon im Titel steht, werden bei meiner ul-Liste die Bullet-Points nicht angezeigt. Höchstwahrscheinlich liegt es an der CSS-Datei, da ohne sie die Punkte sichtbar sind.

In anderen Foren habe ich meistens gelesen, dass man das Problem mit padding-left oder margin-left lösen kann. Hat aber bei mir nicht funktioniert.

Woran liegt es dann?

Falls ihr den kompletten Quelltext sehen wollt hier die URL:

https://meisterbetrieb-mathias-schiller.de/

Ansonsten hier die relevanten Quellcode-Ausschnitte:

Übrigens: Ich hatte auch die Einstellung "list-style-position: inside;" ausprobiert, da konnte man die Punkte sehen. Allerdings sieht das aber nicht schön aus.

In der HTML-Datei:
<section>
  <ul>
    <li>1. Punkt</li>
    <li>2. Punkt</li>
  </ul>  

</section>

In der CSS-Datei: section ul { padding-left: 3em; }

section li { padding-bottom: 0.5em; width: 95%; }

...zur Frage

Guten Tag, ich suche einen HTML Code wo, verwendet werden kann zum Copyright wo sich das Jahr jedes Jahr logischerweise automatisch +1 ändert, wo finde ich so ein Code?

...zur Frage

JavaScript Ajax?

Wo ist eigentlich der Sinn dabei wenn ich eine

index.html habe die so aussieht :

<!Doc...> <html><body>
<div>Startseite</div> 
<button>Click</button>
</body></html>

und eine kontakt.html die nur so aussieht :

<h1> Max Mustermann, Adresse,Telefonnummer usw </h1>

und beim klicken auf einen Button wird der Inhalt von der kontakt.html in meinen div von der Datei index.html "gerendert" mithilfe von AJAX

xhttp.open("GET", "kontakt.html", true);
xhttp.send();
zb (weiß ich grad nicht auswendig)....

sodass es am Ende so aussieht:

<div>

<h1> Max Mustermann, Adresse,Telefonnummer usw.</h1>

</div>

Wenn ich mir schon die Mühe mache eine kontakt.html zu erstellen, die mit daten zu befüllen dann könnte ich gleich document.querySelector benutzen und dann tauscht es halt den inhalt aus wenn ihr versteht was ich meine. Wär in 2 Sekunden gemacht und dann müsste ich nicht erst irgendeine Http anfrage machen.

In den meisten Tutorials auf Youtube wird halt leider sowas gelehrt und so kann man nicht verstehen was mir Ajax so richtig bringen soll.

Hat wer Sinnvolle Projekt Ideen die ich umsetzen könnte mit Ajax?

...zur Frage

style.css (sheet) in einen .php Code einfügen?

wie kann ich mein Style sheet in .css in einen .php Code einfügen? So, dass ich es damit quasi designen kann?

...zur Frage

Pinball-Game / JavaScript: Wie kann ich die Kollisionserkennung implementieren?

Hallo zusammen,

ich muss für die Uni ein kleines Single Page 2D-Spiel entwickeln. Die Backend REST-API mit Python, das Frontend mit HTML/CSS, die Logik mit JavaScript. Die Animationen sollen wir selbst entwickeln und nicht z.B. von canvas-Objekten übernehmen.

Ich versuche zurzeit ein Pinball-Spiel (Flipper-Automaten) und habe das Grundgerüst mit CSS gebaut. Nur habe ich mir die Kollisionserkennung deutlich leichter vorgestellt, als sie wahrscheinlich ist.

So sieht das Spielfeld momentan aus:

Die JavaScript-Logik sodass der Ball im Spielfeld bleibt, ist ja recht simpel:

  var ball = document.getElementById('ball');
  var playArea = document.getElementById('play-area');
  var ballRadius = 10;
  var playAreaWidth = playArea.offsetWidth; // 600
  var playAreaHeight = playArea.offsetHeight; // 820
  var ballX = playAreaWidth / 2; // Startposition des Balls in der Mitte des Spielfelds
  var ballY = playAreaHeight / 2; // X = 300, Y = 410
  var ballSpeedX = 3; // Geschwindigkeit des Balls in horizontaler Richtung
  var ballSpeedY = 3; // Geschwindigkeit des Balls in vertikaler Richtung
  
  function updateBallPosition() {
    // Aktualisiere die Position des Balls basierend auf der aktuellen Geschwindigkeit
    ballX += ballSpeedX;
    ballY += ballSpeedY;
  
    if (ballX + ballRadius > playAreaWidth || ballX - ballRadius < 0) {
      ballSpeedX *= -1; // Richtungswechsel in der horizontalen Richtung
    }
  
    if (ballY + ballRadius > playAreaHeight || ballY - ballRadius < 0) {
      ballSpeedY *= -1; // Richtungswechsel in der vertikalen Richtung
    }
  
    // Setze die neue Position des Balls
    ball.style.left = ballX + 'px';
    ball.style.top = ballY + 'px';
  }
  
  // Aktualisiere die Position des Balls alle 16 Millisekunden (ca. 60 Frames pro Sekunde)
  setInterval(updateBallPosition, 16);
}

Aber wie man es implementiert, sodass der Ball von den Hindernissen und Banden richtig abprallt, sodass ein Richtungswechsel entsteht, habe ich noch nicht wirklich verstanden. Hätte da jemand eine Idee oder Erfahrung, wie man hier an die Kollisionserkennung herangehen könnte?

LG und danke im Voraus. :)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen