Verwandte Themen
Frage von KnowHow1001
29.05.2020, 11:17
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
Frage von WeKnow
28.05.2020, 10:51
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
Frage von Hendiplayer
27.05.2020, 16:30
Wie kann ich mit jquerry die paragraphen ausblenden lassen?

Ich habe die Paragraphen mit Javascript die Paragraphen ausblenden lassen können, allerdings, wie mache ich das mit Jquerry? Ich habe bisher folgendes:

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8" />
   <title>Praktikum Webanwendungen</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script>
    window.addEventListener("load", function hideParagraphsJS() {
       // Hier den Java Script Code einfügen
      hideButton.addEventListener("click", function() {
      document.getElementById("paragraph").style.display="none";
      document.getElementById("paragraph1").style.display="none";
      document.getElementById("paragraph2").style.display="none";
      }, false);
     });
     $(document).ready(function() {
       // Hier den jQuery Code einfügen
      $(button).click(function() {
      $("#paragraph").hide();
      $("#paragraph1").hide();
      $("#paragraph2").hide();
      });
     });
   </script>
 </head>
 <body>
   <h1>Aufgabe 4</h1>
   <h2>Paragraph 1</h2>
   <p id = "paragraph">
     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.
   </p>
   <h2>Paragraph 2</h2>
   <p id = "paragraph1">
     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
   </p>
   <h2>Paragraph 3</h2>
   <p id = "paragraph2">
     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 erat, sed diam
     voluptua. At vero eos et accusam et
   </p>
   <button id="hideButton" onclick="hideParagraphsJS()">
     Paragraphen ausblenden
   </button>
   <button id="hideButton2">
      Paragraphen ausblenden
   </button>
 </body>
</html>
Website, HTML, JavaScript, JQuery
3 Antworten
Frage von WeKnow
26.05.2020, 12:21
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
Frage von Hendiplayer
21.05.2020, 17:13
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
Frage von Hendiplayer
21.05.2020, 15:40
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

Meistgelesene Fragen zum Thema HTML
Mehr meistgelesene Fragen zu HTML