Verwandte Themen

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 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
Frage
von Kasagranda
23.09.2022, 02:43
Frage wurde 1 Mal erneut gestellt
Wie kann ich auf Google Sites Anker ohne Inhaltsverzeichnis erstellen?

Hallo,

ich bin verzweifelt. Ich versuche auf einer Seite in Google Sites einen Anker auf den Bereich einer anderen Seite zu erstellen. Soweit, so offensichtlich (mag man behaupten). Ich habe schon mal über den Quellcode herausgefunden, dass Sites automatisch jedem Bereich der Seite ein id-Attribut zuordnet, was die Sache ja in der Theorie vereinfachen sollte. Aber wenn ich einen Link erstelle, werden nur vollständige URLs akzeptiert, keine Anker-Links (ich glaube, nicht mal interne Links auf der selben Websites würden funktionieren). Gut: dachte ich mir, gehe ich den Umweg und setze halt die vollständige URL davor, muss halt die Seite beim Klick drauf notgedrungen neu geladen werden. Dann kam das nächste Problem: die Links werden immer voreingestellt in neuen Tabs geöffnet. Was bitte soll das? Ich brauche schon gar keinen neuen Tab, wenn ich doch ursprünglich nicht einmal die Seite neu aufrufen wollte.

Nun, jetzt mag man ja noch kreativ genug sein, und extra ein Seitenelement anlegen, um HTML selber einzufügen (das geht nämlich auch nicht in einem normalen Textelement, das muss extra angelegt werden). Weiter geht das Drama: HTML-Code wird nicht einfach in die bestehende Seite hinzugefügt, sondern über ein Iframe eingebunden (Geht's noch? Welchen Zweck hat es, HTML extra über ein Iframe einzubinden?).

Kann mir jemand erklären, was das alles soll? Ich weiß, Google Sites richtet sich eher an einfache Baukastenersteller, die sich nicht so für die einfachsten Grundlagen von Webentwicklung interessieren. Aber ernsthaft, direkt HTML in einer Seite einbauen zu können und Ankerlinks zu setzen gehören doch nun zu den primitivsten Basics, eine Webseite zu erstellen. Es scheint so, als wäre das so einfach, dass es schon wieder maßlos kompliziert ist. Geht das überhaupt?

Gut, bevor ich mich über das allererste Google-Produkt weiter aufrege, dass mich echt enttäuscht hat, wenn es da keine Lösung für gibt: weiß jemand, wie man das Problem angehen kann? Und gibt es irgendwo eine versteckte Funktion, einen erweiterten Editor zum Vorschein zu bringen, der etwas professionelleres Arbeiten ermöglicht? Ich brauche doch nur eine sehr simple Webseite mit etwas Text und einem Google Formular. Das darf doch nicht für einen Webbaukasten, der mit einem „professionellen Aussehen“ wirbt, so schwer sein.

PS: Ja, man kann Verknüpfungen über das Inhaltsverzeichnis erstellen. Aber ich brauche diese im Fließtext.

Datenschutz, Google, HTML, Webseite, Recht, HTML5, Medienrecht, Webentwicklung, Google Sites, DSGVO
1 Antwort
Frage
von Hatschpi
06.08.2022, 01:50
Mit Bildern
Mit Links
Ich Weiß nicht Warum habe ich Fehler beim HTML Sprache?

Auf dieser Seite habe ich mein Programm getestet:https://validator.w3.org

Mein Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <!--Infos Über diese Webseite-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <titel> Start seite - Videokurs Webtechniken Lernen 1: HTML </titel>
  <meta name="description" content="In diesem Kurs lernen Sie das Erstellen und Gesralten von Webseiten mit HTMl und CSS.">
    <!--Die verbindung zum Stylesheet-->
   <link href="CSS/styke.css" rel="stylesheet">
 </head>
  <body>
    <header>
      <h1>Html + CSS</h1>
      <p>Webseite erstellen und gestalten</p>
   </header>
   <nav>
   </nav>
   <main>
    <h2>Willkommen</h2>
    <p> Webseite bestehen aus <strong> recheckigen kästchen</strong>. Alles Runde ist entweder trick, Grafik oder beides.</p>
    <p> Beim Umgang mit diesen Kästchen haben <em>HTML</em> und <em>CSS</em> klar getrennte Aufgaben:</p>
     <ul>
       <li> HTML Strucktur die webseite und erstellt die Kästehen.</li>
       <li> CSS gestatet die Kästehen und die Inhalte darin.</li>
     </ul>
    <p>Beide SPrache arbeiten bei der Erstellung und Gestaltung von webseiten eng zusammen.</p>
   </main>
   <footer>
   </footer>
  </body>
</html>

Bild zu Frage
Programm, HTML, Webseite, programmieren, HTML5
2 Antworten
Frage
von HomosexualGod
19.07.2022, 13:41
HTML Buttons alignment?

Moin, hier eine kleine Seite die Nur 3 Knöpfe ausgibt. Habe jetzt leider das Problem, dass die Knöpfe nicht auf gleicher höhe sind, trotz des "vertical-align:top" bin noch sehr neu in html, hoffe ihr könnt helfen. LG

Nachtrag: Habe es mit Padding gelöst, vielleicht geht es trotzdem besser anders?

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <body>
        <style>
          .subscribe-button
          {
            background-color: rgb(204, 0, 0);
            color:white;
            border:none;
            border-radius:2px;
            cursor:pointer;
            margin-right:12px;
            transition:opacity 0.2s;
            padding-top:10px;
            padding-bottom:10px;
            padding-left:16px;
            padding-right:16px;
            vertical-align:top;
          }
          .subscribe-button:hover
          {
            opacity: 0.7;
          }
          .subscribe-button:active
          {
            opacity: 0.4;
          }
          .join-button:hover
          {
            background-color:
            rgb(37, 25, 207);
            color: white;
          }
          .join-button:active
          {
            opacity:0.7;
          }
          .join-button
          {
            background-color:white;
            color:rgb(37, 25, 207);
            border-color:rgb(37, 25, 207);
            border-style:solid;
            border-width:1px;
            border-radius:2px;
            cursor:pointer;
            margin-right:8px;
            transition:background-color 0.2s, color 0.2s, opacity 0.2s;
            padding-left:5px;
            padding-right:5px;
            padding-top:4px;
            padding-bottom:4px;
            vertical-align:top;
          }
          .tweet-button
          {
            color:white;
            background-color:rgb(67, 145, 235);
            height:36px;
            width:75px;
            border:none;
            border-radius:20px;
            font-weight:bold;
            font-size:15px;
            cursor:pointer;
            transition:box-shadow 0.15s;
            transition:opacity 0.2s;
            vertical-align:top;
          }
          .tweet-button:hover
          {
            box-shadow: 0px 5px 5px rgba(0,0,0,0.15);
          }
          .tweet-button:active
          {
            opacity:0.6;
          }
        </style>
        <button class="subscribe-button">
          SUBSCRIBE
        </button>
        <button class="join-button">
          JOIN my channel
        </button>
        <button class="tweet-button">
          Tweet
        </button>
        <btton
      </body>
  </head>
</html>
HTML, programmieren, HTML5
1 Antwort

Meistgelesene Fragen zum Thema HTML5
Mehr meistgelesene Fragen zu HTML5