Verwandte Themen

Hendiplayer
21.05.2020, 17:13
Mit Bildern
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>
Bild zum Beitrag
HTML, CSS, HTML5
3 Antworten
Hendiplayer
21.05.2020, 10:55
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
3 Antworten
KnowHow1001
15.05.2020, 14:45
Mit Bildern
Mit Links
Basic HTML Kästchen positionieren?

Hey.

Also ich weiß, dass es bei HTML divs gibt die sozusagen Blöcke sind die man mit Eigenschaften versehen kann via CSS.

nun wollte ich ein einfaches web layout gestalten aber scheitere daran, dass ich divisions einmal rechtsbündig und einmal linksbündig zentriere mit nem abstand dazwischen

wie ihr sehen könnt habe ich es dann zusammen gepfuscht bekommen sodass die abstände halbwegs passen.

gibt es da einen besseren zugang ? Bitte nur Tipps will selbst auf die Lösung kommen :)

bin auch schon am Überlegen den Code komplett neu zu schreiben :)

habe euch ein bild vom layout gemacht. dachte eigentlich ich mache für jedes kästchen eine eigene div umgeben von einer master div welche die komplette breite bestimmen soll.

und darin dann eben die einzelnen divs entweder zentrieren oder rechts / links

nur weil ich eben 2 kästchen in einer reihe habe dachte ich daran es mit einem table zu lösen und in der tr dann eben 2x TD damit die divs nebeneinander sein können

nicht geklappt. hab eigentlich schon so ziemlich alles probiert. divs hinzufügen, entfernen und über css habe ich versucht einzelne elemente zu manipulieren etc.

haut leider nicht hin.

Was meint ihr zu den bilder crop und größen veränderung. ich weiß man könnte es mit photoshop auf die entsprechende größé trimmen aber ich wollte es mit html/css schaffen :)

habe auch versucht den code Schön zu machen als "Lesbar", was hält ihr davon?

HTML

http://pastie.org/p/2vfSJIRfb5QSHBNQciATWO

Header CSS

http://pastie.org/p/6wEHhhZQWKYwwfC2RSxof3

Mainstyle CSS

http://pastie.org/p/5gFxKIEBpI0f5dlimjen9X

Footer CSS

http://pastie.org/p/5oUkLA58gIJ8cgWjw6gGTq

lg

Bild zum Beitrag
Computer, HTML, programmieren, CSS, Webdesign
3 Antworten
Fibunacciii
11.05.2020, 16:28
Woran erkennt man einen guten Entwickler und woher weiß ich, ob ich dazu in der Lage bin?

Schönen guten Tag,

ich habe vor 3 Jahren privat angefangen mir selbst programmieren beizubringen. In dieser Zeit, habe ich allerlei Programme erstellt. Angefangen von größeren, bis hin zu kleineren. Dabei kam ich mit

  • Java(Spring)
  • C#
  • PHP
  • HTML und CSS
  • SQL

in Berührung.

In letzter Zeit keimt aber das Verlangen in mir auf, zu erfahren, wo ich mit meiner Leistung stehe. Ich bin ein Mensch, der in dem was er tut, gut sein will. Das bedeutet, ich habe eine hohe Erwartungshaltung an mich selbst. Der Programmiersektor ist ein breit gefächerter Bereich und mir ist bewusst, dass man unmöglich sagen kann, wo genau man steht.

Ich kann nur sagen, dass ich Spaß mitbringe und bin sehr gerne auf der Suche nach Fehler im Quellcode. Aber wie wir alle wissen, reicht das unter Umständen nicht aus.

Woran erkennt man einen guten Programmierer? Und vor allem: Woran erkenne ich, ob ich das Zeug dazu habe?

Ich habe mich zu dem Thema intensiv befasst. Immer wieder lese ich darüber, dass das Erkennen von Problemen und Algorithmen zur Lösung zu erschaffen einen guten Programmierer ausmachen.

Ich bin auch sehr Selbstkritisch. Manchmal muss man sich selbst sagen können: Lass es lieber sein. Das ist nicht dein Weg. Dieser Umstand gepaart mit meiner hohen Erwartungshaltung an mich selbst, ist Gift. Gift für meinen Geist. Denn ich stehe mir damit selbst im Weg.

Ich habe auch das Gefühl von Programmierbereich zu Programmierbereich zu pendeln. Dabei bleibt das Gefühl zurück, etwas angefangen zu haben, aber nicht richtig gelernt zu haben.

Vielleicht kann mir ein erfahrener Programmierer etwas zu dem Thema sagen? Über mehrere und fundierte Antworten wäre ich sehr dankbar.

SQL, HTML, programmieren, Java, pro, Code, Selbstzweifel
2 Antworten
M3LLemAmr
08.05.2020, 02:27
Browserfehler: "0: Unable to get property 'SavePersonalAndPaymentData' of undefined or null reference"?

Hallo,

ich habe eine Aufgabe gemacht und mein Browser gibt diesen Fehler aus:

0: Unable to get property 'SavePersonalAndPaymentData' of undefined or null reference

Ich glaube aber, dass die Aufgabe richtig ist!

Ich habe es auch einen Freund geschickt und bei ihm funktioniert es ebenfalls nicht.

HTML:

<!DOCTYPE html>
<html>
  <head lang="de">
    <meta charset="UTF-8" />
    <style type="text/css"></style>
    <title>Lieblings Professor</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Notenberechnung<br>Teilaufgaben</legend>

        <label for="aufgabe1">Aufgabe 1:</label>
        <input type="number" name="Augabe1" id="a">
        <br><br>

        <label for="aufgabe2">Aufgabe 2:</label>
        <input type="text" name="Aufgabe2" id="b">
        <br><br>

        <label for="aufgabe3">Aufgabe 3:</label>
        <input type="number" name="Augabe3" id="c">
        <br><br>

        <label for="aufgabe4">Aufgabe 4:</label>
        <input type= "number" name="Augabe4" id="d">
        <br><br>

        <button id="069" value="069">druck berechne</button>
      </fieldset>
    </form>
    <h1>Note</h1>
    <div id="note"></div>
    <script src="x1.js"></script>
  </body>
</html>
</form>
<h1>Note</h1>
<div id="note"></div>
<script src="x1.js"></script>
</body>
</html>

JavaScript:

"use strict"

window.addEventListener("load", init);

function init() {
  console.log("Fenster ist geladen");
  let btn = document.getElementById("069");
  btn.addEventListener("click", btnfk);

  function btnfk() {
    console.log("ich wurde geklickt!!!!");

    let aufgabe1 = document.getElementById("a").value;
    console.log(aufgabe1);
    let aufgabe2 = document.getElementById("b").value;
    console.log(aufgabe2);
    let aufgabe3 = document.getElementById("c").value;
    console.log(aufgabe3);
    let aufgabe4 = document.getElementById("d").value;
    console.log(aufgabe4);

    aufgabe1 = Number(aufgabe1);
    aufgabe2 = Number(aufgabe2);
    aufgabe3 = Number(aufgabe3);
    aufgabe4 = Number(aufgabe4);

    let note = document.getElementById("note");
    global = global + aufgabe1 + aufgabe2 + aufgabe3 + aufgabe4;

    note.textContent = global;
    let note5 = document.createElement("div");
    document.body.appendChild(note5);

    if (global < 12) {
      note5.textContent = "Ihre Note ist 5!!!!!";
    }

    if (global >= 12 && global <= 15) {
      note5.textContent = "Ihre Note ist 4 ...";
    }

    if (global >= 15 && global <= 18) {
      note5.textContent = "Ihre Note ist 3";
    }

    if (global >= 18 && global <= 21) {
      note5.textContent = "Ihre Note ist 2 super";
    }

    if (global >= 21) {
      note5.textContent = "Ihre Note ist 1 WOW";
    }
  }
}

let global = 0;

Wenn ich statt Zahlen aber Buchstaben eingebe, werden sie gespeichert. Ansonsten mit Zahlen werden sie nicht gespeichert und verschwindet sofort.

Browser, Fehler, HTML, programmieren, JavaScript, HTML5
2 Antworten
M3LLemAmr
19.04.2020, 23:47
Mit Bildern
JavaScript: Schachbrett Schleifen?

Leute, bitte, ich brauche Hilfe, wer programmieren kann.

Ich habe es versucht, aber keine Ahnung warum, es funktioniert nicht.

Ich wäre sehr dankbar, wenn ich Tipps oder so hier bekommen würde.

Was fehlt? Was ist falsch?

JavaScript:

"use strict";

window.addEventListener("load", init);

let i;
let t;
let tr;
let td;

function init() {
  console.log("Fenster ist geladen");

  let btn = document.getElementById("btn");
  btn.addEventListener("click", btn_angeklickt);
}

function btn_angeklickt() {
  console.log("btn angecklickt");

  let zeilen = document.getElementById("zeilen").value;
  console.log(zeilen);

  let spalten = document.getElementById("spalten").value;
  console.log(spalten);

  let table = document.getElementById("bratan");
  
  for (i = 0; i < spalten.value; i++);
  {
    tr = document.createElement("tr");
    table.appendChild(tr);

    for (t = 0; t < zeilen.value; t++);
    {
      td = document.createElement("td");

      if (i % 2 == t % 2) {
        td.style.backgroundColor = colors[0];
        td.style.height = "60px";
        td.style.width = "60px";
      }
      else {
        td.style.backgroundColor = colors[1];
        td.style.height = "60px";
        td.style.width = "60px";
      }
    }
  }

  tr.appendChild(td);
}

let colors = ["#044272", "#80AB52"];

HTML:

  <label for="Anzahl">Zeilen</label>
  <input type="number" id="zeilen">
  <br><br>
  <label for="Anzahl">Spalten</label>
  <input type="number" id="spalten">
</form>
<br>
<button type="button" id="btn" value="btn">erstelle Schachbrett</button>
<table id="bratan"></table>
Bild zum Beitrag
PC, Computer, HTML, programmieren, JavaScript
2 Antworten

Meistgelesene Beiträge zum Thema HTML
Mehr meistgelesene Fragen zu HTML