Mit Pfeil zu nächster Seite: Wie lautet der Code dafür?

Ich hab jetzt einen Pfeil in meiner HTML-Seite und möchte den jetzt gerne mit einer anderen HTML-Seite verbinden. Wie ist denn der Code dafür?

Mein HTML-Code:

<a class="pfeil" onclick="umschalten(1)"><span>&#10095;</span></a>

Mein CSS-Code dazu:

.pfeil {
  position: relative;
  top: 0;
  bottom: 0;
  font-size: 50px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2%;
  color: red (255, 255, 255, 0.5);
  user-select: none;
  cursor: pointer;
}

2 Antworten

ChrisCat1, UserMod Light

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik

27.02.2022, 00:26

Einfach das Ziel per href Attribut angeben.
https://www.w3schools.com/tags/tag_a.asp

<a href="seite2.html" class="pfeil">&#10095;</a>

paaauleee

27.02.2022, 00:26

ich würde einfach <a href="naechsteseite.html (wie auch immer sie heisst)">nächste Seite</a> draus machen

Soll doch n Link auf ne andere Seite sein oder nicht?

Nussschnecke31

Fragesteller

27.02.2022, 00:27

Ja :) danke

paaauleee

27.02.2022, 00:27

@Nussschnecke31

kein Problem

Hallo zusammen,

ich habe folgenden +/- Increment and Decrement Select Button.

Bei +/- ändert sich der Wert immer 1. Dies möchte ich allerdings in 5er Schritten. Hat da jemand eine Lösung?

HTML:

</div>

CSS:

.wrapper{

height: 120px;

min-width: 380px;

display: flex;

align-items: center;

justify-content: center;

background: #FFF;

border-radius: 12px;

box-shadow: 0 5px 10px rgba(0,0,0,0.2);

}

.wrapper span{

width: 100%;

text-align: center;

font-size: 55px;

font-weight: 600;

cursor: pointer;

user-select: none;

}

.wrapper span.num{

font-size: 50px;

border-right: 2px solid rgba(0,0,0,0.2);

border-left: 2px solid rgba(0,0,0,0.2);

pointer-events: none;

}

JavaScript:

const plus = document.querySelector(".plus"),

minus = document.querySelector(".minus"),

num = document.querySelector(".num");

let a = 1;

plus.addEventListener("click", ()=>{

a++;

a = (a < 10) ? "0" + a : a;

num.innerText = a;

});

minus.addEventListener("click", ()=>{

if(a > 1){

a--;

a = (a < 10) ? "0" + a : a;

num.innerText = a;

}

});

...zur Frage

text-align:center; funktioniert nicht?

Ich versuche schon seit geraumer Zeit dieses Problem zu lösen, doch ich komme einfach nicht dahinter, vielleicht kann mir hier jemand netterweise bei meinem Problem weiterhelfen.

<!DOCTYPE html>                             
<style>
  body{
    font-family: Georgia, 'Times New Roman', Times, serif;
  }
  
 #top{
  text-align: center;
 } 
  
 #logo{
    color:rgb(255, 255, 255);
    background-color: crimson;
    display: inline-flex;
    font-size: 32px;
    font-weight: bold;
    padding: 8px;
    margin-top: 16px;
  }
  #logo-name {
font-size: 32px;
font-weight: bold;
margin: 16px;
text-align: center;
  }
</style>
<html>
  <head>
<title> Homepage </title>
  </head>
<body>
  <div id="top"></div>
  <div id="logo">OH</div>
  <div id="logo-name">Homepage</div>
  <div id="main"></div>
  <div id="footer"></div>
</body>
</html>

...zur Frage

JavaScript Maximalwert setzen und schneller Value-Wechsel?

Hallo zusammen,

ich habe folgenden +/- Increment und Decrement Button. Kann ich dort einen Maximalwert setzen?

Außerdem möchte ich gerne wenn man + bzw. - gedrückt hält den Value schneller wechseln kann. Wie ist das möglich?

Vorab danke für die Antworten!

HTML:

 <div class="wrapper">
   <span class="minus">-</span>
   <span class="num">01</span>
   <span class="plus">+</span>
</div>

CSS:

.wrapper{
 height: 120px;
 min-width: 380px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #FFF;
 border-radius: 12px;
 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.wrapper span{
 width: 100%;
 text-align: center;
 font-size: 55px;
 font-weight: 600;
 cursor: pointer;
 user-select: none;
}
.wrapper span.num{
 font-size: 50px;
 border-right: 2px solid rgba(0,0,0,0.2);
 border-left: 2px solid rgba(0,0,0,0.2);
 pointer-events: none;
}

JavaScript:

const plus = document.querySelector(".plus"),
   minus = document.querySelector(".minus"),
   num = document.querySelector(".num");
   let a = 1;
   plus.addEventListener("click", ()=>{
     a++;
     a = (a < 10) ? "0" + a : a;
     num.innerText = a;
   });
   minus.addEventListener("click", ()=>{
     if(a > 1){
       a--;
       a = (a < 10) ? "0" + a : a;
       num.innerText = a;
     }
   });

...zur Frage

Positionierung von Pfeilen in Flexboxen?

Hallo,

ich wollte bei meiner Website eine kleine Slideshow einbauen. Dazu habe ich erst einmal Pfeile erstellt. Diese wollte ich nun richtig positionieren. Ich hatte die Idee, eine Flexbox um die Bilder mit den Pfeilen zu erstellen und die Pfeile dann einfach mit align-items zu positionieren. Irgendetwas habe ich allerdings falsch gemacht. Vielleicht fällt euch ja mein Fehler auf. Bin für jeden Tipp dankbar.

html:

<div class="slide">
            <div id="footer2">
                <div id="bilder">
                    <div id="flexbox">
                        <div class="post">
                            <img src="wohnzimmer.png" alt="Wohnzimmer">
                            <div class="post-s">
                                <h2>Einbaumöbel</h2>
                            </div>
                        </div>
                        <div class="post1">
                            <img src="badezimmer.png" alt="Badezimmer">
                            <div class="post1-s">
                                <h2>Badmöbel</h2>
                            </div>
                        </div>
                        <div class="post2">    
                            <img src="einbauschränke.png" alt="Einbauschränke">
                            <div class="post2-s">
                                <h2>Einbauschränke</h2>
                            </div>
                        </div>
                    </div>
                    <div class="post3">
                        <img src="hochbett.png" alt="Hochbett">
                        <div class="post3-s">
                            <h2>Kinderhochbetten in Eichemassivholz</h2>
                        </div>
                    </div>
    
                    </div> 
                    
                </div>
                <a class="pfeil pfeil-links"><span>&#10094;</span></a>
                <a class="pfeil pfeil-rechts"><span>&#10095;</span></a>
            </div> 
        </div>

Css:

.slide{
    display: flex;
    border: solid black;
}
.pfeil {
    position: absolute;
    top: 0px;
    bottom: 0px;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
    
}
.pfeil-links {
    left: 0;
}
.pfeil-rechts {
    right: 0;
}

...zur Frage

HTML-Code für Wurzelziehen/Radizieren?

Hallo,

ich bin relativ neu im Gebiet programmieren und brauche Hilfe. In unserer Info-AG haben wir die Aufgabe bekommen, einen Taschenrechner mit den Rechenzeichen +, -, *, /, ** und √ mit einem HTML-Code zu programmieren.

Das Problem, wo ich festhänge ist das √.

Ich weiß einfach nicht, wie ich es in meinen Code einbauen kann.

Hier ist, was ich soweit habe (Wurzel-Button funktioniert wie gesagt nicht):

<!DOCTYPE html>
<html>
  <head>
    <h1>Taschenrechner</h1>
    <style>
      h1 {
        font-family: Arial;
        text-align: center;
        color: navy;
      }

      body {
        font-family: Arial;
        text-align: center;
      }

      input {
        width: 100px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <form name="Taschenrechner">
      <input type="button" value="0" onClick="document.Taschenrechner.erg.value+='0'">
      <input type="button" value="1" onClick="document.Taschenrechner.erg.value+='1'">
      <input type="button" value="2" onClick="document.Taschenrechner.erg.value+='2'">
      <input type="button" value="3" onClick="document.Taschenrechner.erg.value+='3'">
      <input type="button" value="4" onClick="document.Taschenrechner.erg.value+='4'">
      <input type="button" value="5" onClick="document.Taschenrechner.erg.value+='5'">
      <input type="button" value="6" onClick="document.Taschenrechner.erg.value+='6'">
      <input type="button" value="7" onClick="document.Taschenrechner.erg.value+='7'">
      <input type="button" value="8"
 onClick="document.Taschenrechner.erg.value+='8'">
      <input type="button" value="9"
onClick="document.Taschenrechner.erg.value+='9'">
      <label1>Rechensymbole:</label1>
      <input type="button" value="+" onClick="document.Taschenrechner.erg.value+='+'">
      <input type="button" value="-" onClick="document.Taschenrechner.erg.value+='-'">
      <input type="button" value="*" onClick="document.Taschenrechner.erg.value+='*'">
      <input type="button" value="/" onClick="document.Taschenrechner.erg.value+='/'">
      <input type="button" value="**" onClick="document.Taschenrechner.erg.value+='**'">
      <input type="button" value= "Wurzel"
onClick:="document.Taschenrechner.erg.valueMath.sqrt='x'">
      <input type="button" value="=" onClick="document.Taschenrechner.erg.value=eval(document.Taschenrechner.erg.value)">
      <label2>Ergebnis:</label2>
      <input type="textfield" id="erg" value="">
      <input type="reset" value="Reset">
    </form>
  </body>
</html>

...zur Frage

HTML Text verschieben?

Ich möchte den text horizontal mittig haben justify-content und align-items gehen beide nicht


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .WelcomeTitle {
           display: flex;
           flex-direction: column;
          
            text-align: center;
            align-items: center;
            font-family: sans-serif;
        }
    </style>
    <h1 class="WelcomeTitle">Hier kommt ein Titel
        <br>
        hin der Lang ist!</h1>
</body>
</html>

...zur Frage

Wie kann ich in HTML den Text im Rahmen die Schriftart ändern?

Hallo,

ich möchte in html von dem Text der im Rahmen ist, die Schriftart ändern.

Irgendwie klappt das nicht so.

@font-face {

font-family: "Germanica";

src: url("Schrift/germanica/Shadowed Germanica.ttf");

}

#id1 { margin-left: 170px;}

<div id="id1"><div align="center"><p style="font-family:Germanica"><p class="outset"><br><font size="7"><strong>Test </font></strong><br><br> <font size="5"><strong> Der Absatz </font></strong> <br><br></p></div>

...zur Frage

CSS header nimmt nicht volle breite?

Hallo,

Also ich hab einen Header erstellt, mit folgendem HTML Code:

<header>
    <p>Jetzt auch mit KLARNA zahlen!</p>
</header>

CSS Code:

 header {
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: rgb(102, 102, 102);
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}

Aber wenn ich nun mir mal per Untersuchen, die Webseite anschaue:

Dann sieht man, dass der header ab einem gewissen zeit punkt nicht mehr die volle breite nimmt. Warum?

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

Zwei funktionen auf ein button packen?

Wie kann ich zwei funktionen auf einen Button packen? Also ich will das bei jedem click auf meinen button

1. immer plus 1 addiert wird: onclick="pluszahl()"

2. das ein Sound abgespielt wird: onclick="play()"

Leider konnte ich nur den counter machen und frage mich jetzt wie ich den sound auch aktivieren kann

HTML:

    <span class="center">Bam?</span>
    <div onclick="custom()" class="btn-container">
        <button onclick="pluszahl()"; twoclick="play()"    class="button1">
            Bam
        </button>
    </div>

    <div id="resultArea">0</div>

JavaScript:

function play() {
  var audio = new Audio('bam.mp3');
  audio.play();
}

function pluszahl() {
  document.getElementById("resultArea").innerHTML = parseInt(document.getElementById("resultArea").innerHTML)+1;
  }

...zur Frage

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

WetterApp mit HTML, Css und C# über Blazor Server App?

Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.

Hier mein HTML code:

</div>

</div>

<div>

</div>

</div>

<img src="/images/image1.png" width="75" height="75" class="imageline "

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 22px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -14px;"

</div>

<div>

<p style="color:black;"class="line0 title margin-left ">Monday</p>

<p style="color:black;"class="line0 title margin-left ">Tuesday</p>

<p style="color:black;"class="line0 title margin-left ">Wednesday</p>

<p style="color:black;"class="line0 title margin-left ">Thursday</p>

<p style="color: black;"class="line0 title margin-left ">Friday</p>

</div>

<div>

<p class="speed">Humidity</p>

</div>

<div>

<p class="speed">Wind Speed</p>

</div>

</body>

hier mein Css code:

.backgroundimage {

background-image: url('../images/sun_background.png');

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

}

.cloud-background {

background-image: url('../images/cloud.png');

/* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */

}

.card {

width: 90%;

max-width: 470px;

color: #fff;

margin: 10px auto 0;

border-radius: 20px;

}

.search{

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

}

.search input{

border: 0;

outline: 0;

background: #ebfffc;

color: #555;

padding: 10px 25px;

height: 60px;

border-radius: 30px;

flex: 1;

margin-right: 16px;

font-size: 18px;

}

.search button{

border: 0;

outline: 0;

background: #ebfffc;

border-radius: 60%;

width: 60px;

height: 60px;

cursor: pointer;

}

.weather-icon{

margin-bottom: -30px;

}

.weather h1 {

font-size: 80px;

font-weight: 500;

color: floralwhite;

}

.weather h2 {

font-size: 40px;

font-weight: 400;

margin-top: -10px;

color: floralwhite;

}

.details {

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 20px;

margin-top: 50px;

}

.col {

display: flex;

align-items: center;

text-align: left;

margin-top: 150px;

}

.col img {

width: 20px;

margin-right: 20px;

margin-bottom: 70px

}

.humidity, .wind{

font-size: 28px;

margin-top: -6px;

color: floralwhite;

}

.speed{

font-weight: bold;

}

.temp {

margin-bottom: 20px;

display: flex;

justify-content: center;

}

.search button img{

width: 55%;

}

.center {

display: flex;

justify-content: center;

}

.top-left{

display: flex;

justify-content:left

}

.top-left

{

margin-left: 10px;

}

.margin-top{

margin-top: 20px;

}

.hr1 {

width: 390px;

height: 2px;

color: black;

}

.line{

margin-bottom: -100px;

margin-top: 10px;

}

.line1{

margin-top: 30px;

margin-bottom: -20px;

}

.line0{

margin-top: 70px;

margin-bottom: -90px;

font-size: 14px;

font-weight: bold;

color: black;

}

.imageline {

margin-top: 5px;

margin-bottom: -90px;

}

.imagesMain {

padding: 0;

margin-left: auto;

margin-right: auto;

margin-top: 20px;

text-align: center;

}

.imagesMain img {

height: 400px;

width: 300px;

vertical-align: middle;

}

.title {

display: inline-block;

color: lightgray;

}

.margin-left{

margin-left: 14px;

}

...zur Frage

Wie kann ich die Punkte von einer <ul> auch zentrieren?

Ich habe bereits für die Liste: text-align: center; , justify-content: center; und align-items: center;.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen