Warum wird mir nur eine weiße Seite angezeigt?

Warum wird mir bei diesem Code nur eine weiße Seite angezeigt?

BTW: Ich versuche so ein Sidebar Menü zu scripten.

//HTML
<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Test &ndash;Website</title>
        <meta charset="utf-8>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <script>alert("Willkommen auf meiner Website")</script>
    </head>
    <body>
        <div id="sidebar">
              <div class="toggle-btn" ondblclick="show()">
                   <span></span>
                   <span></span>
                   <span></span>
              </div>
              <ul>
                  <li>Lorem,ipsum</li>
                  <li>Über mich</li>
                  <li>Kontakt</li>
              </ul>

        </div>     </body>

//CSS * {     margin: 0;     padding: 0; }

body {     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }

sidebar {

    position: absolute;     width: 300px;     height: 100%;     background-color: #000;     left: -300px; }

sidebar.active {

    left: 0; }

sidebar ul li {

    list-style: none;     color: #fff;     font-size: 20px;     padding: 20px 24px; }

sidebar .toggle-btn {

    position: absolute;     top: 30px;     left: 330px; }

.toggle span {     width: 45px;     height: 4px;     background-color: black;     display: block;     margin-top: 4px; }

Computer, Technik, Web, HTML, Programmieren, CSS, Sex, Informatik, Scripten
3 Antworten
Tic Tac Toe Spiel Fehler im Code?

<script type="text/javascript">
    
var WerIstDran = false;    
    
if(WerIstDran == false){
    $("#text-3").css("display", "block")
    $("#text-4").css("display", "none")
    ErsterSpielerMarkiertFeld();
}
    

if(WerIstDran == true){     $("#text-3").css("display", "none")     $("#text-4").css("display", "none")     ZweiterSpielerMarkiertFeld();

}

function ErsterSpielerMarkiertFeld(){         

    $(".Feld-1").click(function(){         $(".X-Feld-1").css("display", "block")         $(".Feld-1").css("display", "none")                  WerIstDran = true;              });

    $(".Feld-2").click(function(){         $(".X-Feld-2").css("display", "block")         $(".Feld-2").css("display", "none")                  WerIstDran = true;              });          $(".Feld-3").click(function(){         $(".X-Feld-3").css("display", "block")         $(".Feld-3").css("display", "none")                 WerIstDran = true;              });

    $(".Feld-4").click(function(){         $(".X-Feld-4").css("display", "block")         $(".Feld-4").css("display", "none")                WerIstDran = true;              });

    $(".Feld-5").click(function(){         $(".X-Feld-5").css("display", "block")         $(".Feld-5").css("display", "none")               WerIstDran = true;              });

    $(".Feld-6").click(function(){         $(".X-Feld-6").css("display", "block")         $(".Feld-6").css("display", "none")                WerIstDran = true;             });   

    $(".Feld-7").click(function(){         $(".X-Feld-7").css("display", "block")         $(".Feld-7").css("display", "none")

        WerIstDran = true;        

    });

    

     }      function ZweiterSpielerMarkiertFeld(){

      $(".Feld-1").click(function(){         $(".Null-Feld-1").css("display", "block")         $(".Feld-1").css("display", "none")                 WerIstDran = false;              });

    $(".Feld-2").click(function(){         $(".Null-Feld-2").css("display", "block")         $(".Feld-2").css("display", "none")                 WerIstDran = false;     });          $(".Feld-3").click(function(){         $(".Null-Feld-3").css("display", "block")         $(".Feld-3").css("display", "none")                  WerIstDran = false;     });

    $(".Feld-4").click(function(){         $(".Null-Feld-4").css("display", "block")         $(".Feld-4").css("display", "none")                  WerIstDran = false;     });

    $(".Feld-5").click(function(){         $(".Null-Feld-5").css("display", "block")         $(".Feld-5").css("display", "none")                 WerIstDran = false;     });

    $(".Feld-6").click(function(){         $(".Null-Feld-6").css("display", "block")         $(".Feld-6").css("display", "none")                  WerIstDran = false;     });   

        

HTML, Programmieren, CSS, JavaScript, JQuery, Javascript Codeproblem
3 Antworten
HTML / CSS: Wie kann ich die Formularelemente positionieren?

Hi.

habe ein Formular mit Feldern erstellt. Es sieht momentan so aus, wie auf dem Bild (https://imgur.com/Tvqcplf).

Ich möchte gern your name und age in der gleichen Zeile haben und viel größer (das Label soll aber darüber sein). Und dann country und horsepower in der zweiten Zeile.

Von der Größe her sollten die Textfelder ca. 20% der umgebenden Box haben. Es soll halt schön aussehen, haha.

Das Ganze ist übrigens von einer div umgeben. Ich poste auch noch den CSS-Style von der dazu, weil ich darin schon die Labels als Blockelemente definiert habe (ich weiß nicht, ob das richtig war).

<form>
  <label for="name">Your Name:</label>
  <input type="text" id="name" name="name" value="">
  <label for="age">Age:</label>
  <input type="text" id="age" name="age">

  <label for="country">Country:</label>
  <select id="country">
    <option name="austria">Austria</option>
    <option name="hungary">Hungary</option>
    <option name="greece">Greece</option>
  </select>
  <br>

  <label for="hp">Horsepower of your car:</label>
  <input type="text" id="hp" name="hp">
  <br>
  <input type="submit" value="Calculate" id="calculate">
</form>

CSS:

.calculator {
  width: 90%;
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  transition: background 3s;
  height: 1000px;
  left: 0;
  right: 0;
  margin: auto;

  h1 {
    margin: 20px;
    font-size: 4vw;
    text-align: center;
  }

  form {
    label {
      display: block;
    }
  }
Computer, Schule, HTML, Programmieren, CSS
2 Antworten
Warum ist der Text zentriert, die links aber nicht?

Beides ist im selben div (footercontent) definiert, trotzdem ist der text zentriert, die links aber nicht. Auch die weiße farbe wird nur auf den text und nicht die Links angewendet.

HTML:

<div class="subfooter">
        <div class="footercontent">
            <div id="footertext">
                <p> C hf 2020</p>
            </div>
            
            <div id="footerlinks">
                <a href="#">Home</a>
                <a href="#">Über Mich</a>
                  <a href="#">Portfolio</a>
                  <a href="#">Kontakt</a>
            </div>
            <div id="footersocialmedia">
                <a href="#" class="fa fa-facebook"></a>
                <a href="#" class="fa fa-twitter"></a>
            </div>
        </div>
    </div>

CSS:

.subfooter {
    height: 50px;
    background-color: #1D1D1D;
}
.footercontent {
    display: flex;
    font-family: lato;
    color: #FFFFFF;
    font-style: normal;
    font-weight: 100;
    font-size: 15px;
    justify-content: center;
}
#footertext {
    margin-right: 30%;
    outline: 2px dashed orange;
}
#footerlinks {
    outline: 2px dashed orange;
}
#footersocialmedia {
    margin-left: 30%;
}
 /* Style all font awesome icons */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}
/* Add a hover effect if you want */ .fa:hover {   opacity: 0.7; }


/* Set a specific color for each brand */


/* Facebook */ .fa-facebook {   background: #3B5998;   color: white; }


/* Twitter */ .fa-twitter {   background: #55ACEE;   color: white; }


Warum ist der Text zentriert, die links aber nicht?
HTML, CSS, Webdesign
2 Antworten
HTML / CSS: Wie zentriere ich die Logos?

Ich werde hier verrückt. Ich habe einen ganzen Tag gebraucht, um die Bilder in ein Raster zu bekommen und jetzt schaffe ich es nicht, sie auf der Seite zu zentrieren und mit der Fenstergröße zu skalieren.

Dieses Chaos habe ich jetzt (Outlines sind nur für mich zur Orientierung):

Und so soll es eigentlich aussehen (gemacht in Adobe 😁):

Hier mein Code (ich habe die unwichtigen Stellen, z.B. zum Button, weggelassen, weil die Frage zu viele Zeichen hatte):

HTML:

<!DOCTYPE html>
<html>
  <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>HFFoto - Portfolio</title>
    <link rel="stylesheet" type="text/css" id="applicationStylesheet" href="portfolio_kunden.css"/>
    <link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="fullbodybg">
      <div id="Headline">
        <span>Kunden;</span>
      </div>
      <div id="logos">
        <img class="griditem" id="hygge_logo" src="Hygge_Logo_final.png" srcset="Hygge_Logo_final.png, Hygge_Logo_final.png" >
        <img class="griditem" id="wellyou_Logo_Rot_Schwarz400" src="wellyou_Logo_Rot_Schwarz400.png" srcset="wellyou_Logo_Rot_Schwarz400.png 1x, wellyou_Logo_Rot_Schwarz400@2x.png 2x">
        <img class="griditem" id="Logo_muhlenbach" src="Logo_wei_.png" srcset="Logo_wei_.png 1x, Logo_wei_@2x.png 2x">
        <img class="griditem" id="Logo_neu_DOMKRUG" src="Logo_neu_DOMKRUG.png" srcset="Logo_neu_DOMKRUG.png 1x, Logo_neu_DOMKRUG@2x.png 2x">
        <img class="griditem" id="OMK_Kopie" src="OMK_Kopie.png" srcset="OMK_Kopie.png 1x, OMK_Kopie@2x.png 2x">
        <img class="griditem" id="hygge_logo_platzhalter" src="Hygge_Logo_final.png" srcset="Hygge_Logo_final.png, Hygge_Logo_final.png">
      </div>
      <div id="Portfolio_button">
        <div id="Portfolio_button_text">
          <span>Portfolio</span>
        </div>
      </div>
    </div>
  </body>
</html>

CSS:

html, body {
  max-width: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

#fullbodybg {
  position: absolute;
  width: 170%;
  height: 100%;
  overflow: visible;
  background: linear-gradient(110deg, #ffffff 50%, #000000 50%);
  outline: 5px dashed blue;
}

#logos {
  display: grid;
  grid-template-columns: repeat(3, 300px); /* 3 columns */
  grid-template-rows: repeat(2, 100px); /* 3 rows  */
  grid-gap: 50px 30px; /* 50 pixels of space added between rows and 30 pixels added between columns  */
  height: auto;
  max-height: 500px;
  width: auto;
  max-width: 1000px;
  outline: 5px dashed green;
}

.griditem {
  border: thin gray solid;
  padding: 20px;
}

img {
  width: 100%;
}
HTML / CSS: Wie zentriere ich die Logos?
HTML, Programmieren, CSS, Webdesign
1 Antwort
Wie bekomme ich es hin, das die Kästen beim verkleinern des Fensters über die gesamte Länge geht?

Ich habe bisher das:

und verkleinert sieht es so aus:

Aussehen soll es aber so:

Hier mein Code:

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
      <style>
         header {
         text-align: center;
         font-size: 3em;
         padding: 5px;
         color: #fff;
         background-color: #FFBF00;
         }
         .wrapper { display:flex }
         @media screen and (max-width:620px) {
         .wrapper {display:block }
         }
         nav {
         width:15%;
         text-align: center;
         font-size: 2em;
         padding-right: 60px;
         color: #fff;
         background-color: #819FF7;
         margin-right: 10px;
         margin-bottom: 150px;
         }
         a {color: #fff }
         li {list-style: none }
         article {
         width:70%;
         color: #BDBDBD;
         }
         aside {
         color: #fff;
         width: 15%
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #01DFD7;
         margin-bottom: 150px;
         }
         footer {
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #D8D8D8;
         color: #A4A4A4;
         }
      </style>
   </head>
   <body>
      <header><h2>Header</h2></header>
      <div class="wrapper">
           <nav>
            <ul>
               <li><a href="" target="_blank">Link 1</a></li>
               <li><a href="" target="_blank">Link 2</a></li>
               <li><a href="" target="_blank">Link 3</a></li>
               <li><a href="" target="_blank">Link 4</a></li>
            </ul>
         </nav>
         <article>
            <h3>Lorem Ipsum</h3>
               <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
               sed diam nonumy eirmod tempor invidunt ut labore et dolore
               magna aliquyam erat, sed diam voluptua. At vero eos et
               accusam et justo duo dolores et ea rebum. Stet clita kasd
               gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
               amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
               sed diam nonumy eirmod tempor invidunt ut labore et dolore
            magna aliquyam.</p>
         </article>
         <aside>
            <h2>About</h2>
            <p>Lorem ipsum dolor<br>
               sit ametr,<br>
               consecteteuer<br>
               adipiscing elit.
            </p>
         </aside>
      </div>
      <footer>
         <p>&copy; </p>
      </footer>
   </body>
</html>
Wie bekomme ich es hin, das die Kästen beim verkleinern des Fensters über die gesamte Länge geht?
HTML, CSS, HTML 5
3 Antworten
Wie bekomme ich es hin das die Website wie folgt aussieht und folgendes macht?

Ich habe bisher folgendes und komme nicht weiter:

<!DOCTYPE html>
<html>
   <head>
       <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
       <style>
         body {
         max-width: 90%;
         }
         header {
         float: none;
         text-align: center;
         font-size: 3em;
         margin-bottom: 20px;
         width: 100%;
         padding: 5px;
         color: #fff;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #FFBF00;
         }
         nav {
         }
         article {
         }
         aside {
         }
      </style>
   </head>
   <body>
      <header>
         <h2>Header</h2>
      </header>
      <nav>
         <a href="" target="_blank">Link 1</a>
         <a href="" target="_blank">Link 2</a>
         <a href="" target="_blank">Link 3</a>
         <a href="" target="_blank">Link 4</a>
      </nav>
      <article>
         <h3>Lorem Ipsum</h3>
         <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
            sed diam nonumy eirmod tempor invidunt ut labore et dolore
            magna aliquyam erat, sed diam voluptua. At vero eos et
            accusam et justo duo dolores et ea rebum. Stet clita kasd
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
            amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
            sed diam nonumy eirmod tempor invidunt ut labore et dolore
            magna aliquyam.
         </p>
      </article>
      <aside>
         <h3>About</h3>
         <p>
            Lorem ipsum dolor<br>
            sit ametr,<br>
            consecteteuer<br>
            adipiscing elit.
         </p>
      </aside>
      <footer>
         <p>&copy; </p>
      </footer>
   </body>
</html>      
Wie bekomme ich es hin das die Website wie folgt aussieht und folgendes macht?
HTML, CSS, HTML 5
2 Antworten
Wie bekomme ich es hin, dass es genauso wie im Bild aussieht mit css?

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style>
         .haupt1 {
         float: none;
         display: block;
         margin-bottom: 20px;
         width: 100%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #D8D8D8;
         }
         .haupt2 {
         float: none;
         display: block;
         margin-bottom: 20px;
         width: 75%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #D8D8D8;
         }
         .haupt3 {
         float: none;
         display: block;
         margin-bottom: 20px;
         width: 50%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #D8D8D8;
         }
         .w1 {
         float: none;
         color: #BDBDBD;
         display:block;
         }
         .s1 {
         width: 65%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #0B615E;
         }
         .a1 {
         width: 20%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #FA8258;
         }
      </style>
   </head>
   <body>
   <p class="w1">100% Width</p>
      <div class="haupt1">
         <div class="s1">Section</div>
         <div class="a1">Aside</div>
      </div>
      <p class="w1">75% Width</p>
      <div class="haupt2">
         <div class="s2">Section</div>
         <div class="a2">Aside</div>
      </div>
      <p class="w1">50% Width</p>
      <div class="haupt3">
         <div class="s3">Section</div>
         <div class="a3">Aside</div>
      </div>
   </body>
</html>      
Wie bekomme ich es hin, dass es genauso wie im Bild aussieht mit css?
HTML, CSS
2 Antworten
Wie kann ich mit css die zwei div container untereinander mit Abstand dazwischen anzeigen lassen?
<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style>
         .haupt {
         margint top: 50px;
         }
         .b1 {
         float: left;
         width: 400px;
         padding: 20px 0;
         color: #01DF01;
         border-bottom-width: 3px;
         border-style: solid;
         width: 50;
         height: 30;
         background-color: #fff;
         }
         .b2 {
         float: both;
         width: 400px;
         padding: 20px 0;
         color: #01DF01;
         border-bottom-width: 3px;
         border-style: solid;
         width: 50;
         height: 30;
         background-color: #fff;
         }
      </style>
   </head>
   <body>
      <div class="haupt">
         <div class="b1">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
            sed diam nonumy eirmod tempor invidunt ut labore et<br>
            dolore magna aliquyam erat, sed diam voluptua.<br>
            At vero eos et accusam et justo duo dolores et
         </div>
         <div class="b2">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
            sed diam nonumy eirmod tempor invidunt ut labore et<br>
            dolore magna aliquyam erat, sed diam voluptua.<br>
            At vero eos et accusam et justo duo dolores et
         </div>
      </div>
   </body>
</html>                  
HTML, CSS
4 Antworten

Meistgelesene Fragen zum Thema CSS