Verwandte Themen

Frage
von VuroxDerWeeb
16.11.2022, 16:44
Mit Bildern
Mit Links
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
1 Antwort
Frage
von marshallclub
15.10.2022, 16:37
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
3 Antworten
Frage
von karlo4208
08.10.2022, 17:01
was ist hier falsch gelaufen?
<!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>Rocket vs Aliens</title>
  <style>
    canvas {
      background-color: gray;
    }
    
  </style>
  <script>
    let KEY_SPACE = false;
    let KEY_UP = false;
    let KEY_DOWN = false;
    let canvas;
    let ctx;
    let backgroundImage = new Image();
    let rocket = {
      x: 100,
      y: 200,
      width: 200,
      height: 80,
      src: 'img/rocket.png'
    };
    let spaceship = {
      x: 500,
      y: 200,
      width: 100,
      height: 40,
      src: 'img/spaceship.png'
    };
    document.onkeydown = function(e) {
      if (e.keyCode ==32) { // Leertaste gedrückt
        KEY_SPACE = true;
      }
      if (e.keyCode ==32) { // unten gedrückt
        KEY_SPACE = true;
      }
    
      if (e.keyCode ==38) { // Oben gedrückt
        KEY_UP = true;
      }
    }
    document.onkeyup = function(e) {
      if (e.keyCode ==32) { // Leertaste losgelassen
        KEY_SPACE = false;
      }
    
      if (e.keyCode ==38) { // oben losgelassen
        KEY_UP = false;
      }
      if (e.keyCode ==40) { // unten losgelassen
        KEY_DOWN = false;
      }
    }
    function startGame () {
      canvas = document.getElementById('canvas');
       ctx = canvas.getContext('2d');
      loadImages();
      draw();
      // calculate
    }
    function loadImages() {
      backgroundImage.src = 'img/background.png';
      rocket.img = new Image();
      rocket.img.src = rocket.src;
      spaceship.img = new Image();
      spaceship.img.src = spaceship.src;
    }
    function draw() {
      ctx.drawImage(backgroundImage, 0, 0);
      ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.widht, rocket.height);
      
      requestAnimationFrame(draw);
    }
  </script>
</head>
<body onload="startGame()">
<canvas id="canvas" width="720" height="480"></canvas>
</body>
</html>
HTML, Webseite, CSS, JavaScript, HTML5, Programmiersprache, Webentwicklung
1 Antwort
Frage
von Kuchenmonster31
06.10.2022, 10:40
HTML input ausgeben?

Hallo Community,

ich habe einen Code für eine Webseite mit HTML geschrieben.

Nun ist es so, das ich den input von vier Feldern, welche sich oben auf der Webseite befinden, unten auf der Webseite angezeigt haben möchte. Ich habe schon viele Möglichkeiten im Internet gefunden, aber keine wollte so richtig funktionieren. Kann mir hier jemand bei meinem Problem helfen?

Bei dem Code kann ich euch nur einen Ausschnitt, nämlich den mit den betreffenden Teilen reinschicken, da die Frage sonst zu lang ist.

MfG Kuchenmonster31

Teilcode:

Feedbackwebsite
<form class="Formular" action="datenbank für website.py" method="post">
  Vorname:
  <input type="text" name="vorname" size="30" maxlength="50">
</form>
<!-- Nachname -->
<form class="Formular" action="datenbank für website.py" method="post">
  Nachname:
  <input type="text" name="nachname" size="30" maxlength="50">
</form>
<!-- Fedback für Coding School -->
<form class="Formular" action="datenbank für website.py" method="post">
  Feedback für die<br> Coding School:
  <textarea type="text" name="vorname" size="30" maxlength="1000"></textarea>
</form>
<!-- Feedback für Website -->
<form class="Formular" action="datenbank für website.py" method="post">
  Anmerkung zur <br> Website:
  <textarea type="text" name="vorname" size="30" maxlength="1000"></textarea>
</form>
<!-- Button damit die eingabe unten auf der Website angezeigt wird: -->
<button class="Button">Formular abschicken</button>
<h4 class="Ausgabe">Ausgabe:</h4>
HTML, Webseite, programmieren, CSS, Webdesign, Webentwicklung
3 Antworten
Frage
von Thoss
27.09.2022, 16:30
Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>
HTML, Webseite, CSS, HTML5, Code, Webdesign, Webentwicklung, Frontend
1 Antwort

Meistgelesene Fragen zum Thema CSS
Mehr meistgelesene Fragen zu CSS