HTML style="" nur erster a href funktioniert?
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Autotuning</title>
<link rel="shortcut icon" href="T4Nissan 240 SX BR101.png" type="image/x-icon">
<meta name="description" content="">
<link href="styleSeite1.css" rel="stylesheet">
</head>
<body>
<br><br><br><br><br><br><br><center>
<a href="NFSU.html"><img src="images/NFSU.jpg" width="" height="230" style="align:/></a>
<a href="NFSU2.html"><img src="images/NFSU2.JPG" width="" height="235" style="align:/></a>
<a href="NFSUC.html"><img src="images/NFSUC.JPG" width="" height="241" style="align:/></a>
<a href="NFSC.html"><img src="images/NFSC.JPG" width="" height="237" style="align:/></a>
<a href="NFSMW2005.html"><img src="images/NFSMW2005.JPG" width="" height="230" /></a><br>
<a href="MC3DER.html"><img src="images/MC3DER.JPG" width="" height="250" style="vertical-align:/></a>
<a href="MCLACE.html"><img src="images/MCLACE.JPG" width="" height="250"/></a>
<a href="Gran Turismo 6.html"><img src="images/Gran Turismo 6.jpg" width="" height="250" /></a>
<a href="LEGO.html"><img src="images/LEGO.JPG" width="" height="250" /></a><br>
<a href="Modellbau.html"><img src="images/Modellbau.jpg" width="500" height="" align="top"/></a>
<a href="Sonstige.html"><img src="images/Sonstige.JPG" width="230" height="" align="top"/></a>
<a href="GTA5.html"><img src="images/Coil Cyclone.jpg" width="350" height="" align="top"/></a>
<a href="Silent Hill.html"><img src="images/Halo.JPG" width="185" height="" align="top"/></a>
</body>
</html>

durch ,,style=""´´ werden die Hyperlinks ohne Abstand platziert. Warum werden diese Hyperlinks gruppiert und alle außer dem erstem werden ignoriert? Die Frage ist leicht zu verstehen beim Blick auf den F12-Debugger im Browser. </style> löst das Problem nicht. autotuningyv.square7.ch/Seite1.html. Kann jemand den Quelltext bitte korrigieren?

Computer, HTML, IT, CSS, HTML5, Programmiersprache, Webdesign
JavaScript/jQuery! Wie einen Loop einbinden?

Auch hier bin ich absoluter Newby!

Ich habe eine nette kleine Funktion:

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

 $({ countNum: $('.code2').html() }).animate({ countNum: 5360 }, {

  duration: 10000,

  easing: 'linear',

  step: function () {

  $('.code2').html(Math.floor(this.countNum));

},

complete: function () {

  $('.code2').html(this.countNum + "+");

  //alert('finished');

}

});

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

Das funktioniert - alles supi - nun möchte ich, dass die Animation nach einem kleinen Zeitintervall erneut startet. Habe dazu über Google 'setInterval' gefunden und einen Code. Leider fehlt mir noch das Verständnis was ich wo einfügen muss.

Hier der Code von Google:

Edit: Ist der Code vielleicht falsch, javascript vs jquery???

function meineFunktion() { 
    // ... 
} 

setInterval(function() { 
    // alle 3 Sekunden ausführen 
    meineFunktion(); 
}, 3000);

Habe das so in meine Scriptdatei eingebunden:

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

$({ countNum: $('.code').html() }).animate({ countNum: 1295365}, {

   duration: 10000,

   easing: 'linear',

   step: function () {

   $('.code').html(Math.floor(this.countNum));

   setInterval(function() {

    // alle 3 Sekunden ausführen

    meineFunktion();

  }, 3000);

 },

 

 complete: function () {

   $('.code').html(this.countNum + "+");

   //alert('finished');

 }

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

Ich nehme an mindestestens "meineFunktion()" ist nur ein Platzhalter, aber ich bin nicht sicher, was da vom Code rein soll.

Stört das complete eigentlich die Wiederholung oder zeigt das nur an, was passiert, wenn es fertig hochgezählt hat?

Freue mich wie immer über Antworten! :)

Aber auch über Links z.B. mit einer leicht verständlichen Übersicht der Anatomie eines Jquery Codes, damit ich zukünftig besser allgemeine Beispiele an meine anpassen kann.

Bonusfrage:

Ich würde ganz gerne zu der Zahl noch eine einfache sich drehende Grafik (Kreis, Pfeil oä) hinzufügen. Hat da jemand zufällig nen leicht verständlichen Link oä dazu?

HTML, Webseite, CSS, JavaScript, HTML5, Programmiersprache, Webentwicklung
jQuery Eingabe unten einfügen?

Ich soll einen Code schreiben, der die Eingabe nach dem drücken des Buttons unten auflistet (wie im Bild gezeigt). Kann mir jemand sagen was ich falsch gemacht habe?

Hier mein 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>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <style>
        h1{
            font-size: 50px;
        }


        div{
            float: left;
            margin: 10px;
        }


        .aufgabe{
            font-weight: bold;
            font-size: larger;
        }
       
        .liste{
            border: solid black;
        }
    </style>
    <body>
        <h1>Todo Liste</h1>
        <div class="aufgabe">Aufgabe:</div>
        <div class="eingabe"> <input type="text"> </div>
        <div class="erstellen"> <input type="submit" value="Erstellen"> </div>
        <br><br>
        <p class="liste"></p>
    </body>
    <script>
        $(document).ready(function(){
            $(".erstellen").click(function(){
                $("input").appendTo(".liste");
            });
        });
    </script>
  </body>
</html>


Bild zu Frage
HTML, CSS, JavaScript, JQuery
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;
}


Bild zu Frage
HTML, Webseite, CSS, Webentwicklung
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>

        <link rel="stylesheet" href="style.css">

        <link rel="icon" href="">

        <title>beispiel</title>

    </head>

    <body>

    <nav>

      <ul class="topnav">  

                <li class="logo"><a href="beispielbild.jpg"></a></li>

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

      <ul class="leftnav">

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

}

HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung

Meistgelesene Fragen zum Thema CSS