Div Container Layout?

Hallo zusammen,

ich habe meine Website fertig programmiert

und möchte sie zum Abschluss noch optisch umgestalten.

Durch YouTube bin ich auf das Feature mit dem Div Container aufmerksam geworden, habe versucht es zu programmieren, aber leider ohne Erfolg, vielleicht könnt ihr mir helfen, das wäre super.

Liebe Grüße

JanaL161

30.03.2024, 17:29

Was genau möchtest du erreichen, was hast du probiert, und was klappt nicht so, wie du es erwartest?

Kalisca

Fragesteller

30.03.2024, 17:43

möchte einen HEADER NAV MAIN FOOTER erstellen bzw programmieren

hummmel123

30.03.2024, 17:30

Was möchtest du genau wissen mit den Div Containern?

Kalisca

Fragesteller

01.04.2024, 07:17

Guten Morgen,

Ich habe es nach langen Versuchen endlich geschafft und wollte mich für eure Hilfe bedanken.

Beste Grüße.

2 Antworten

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

IT, Webentwicklung

30.03.2024, 17:45

Hier ist Hilfe zur Selbsthilfe zu empfehlen, in dem du dir die Grundlagen von HTML und CSS aneignetest. Eine gute Anlaufstelle ist das Mozilla Developer Netzwerk und dich darüber in die Sprachen HTML, CSS sowie JavaScript kostenlos einlesen kannst.

Mozilla Developer Network → Learn web development

Ein <div> Element ist kein Feature, sondern ein Block-Element von weiteren. Das <span> Element wäre als Inline-Element das entsprechende Gegenstück. In beiden Fällen handelt es sich um Container die selbst keine semantische Bedeutung haben.

ich habe meine Website fertig programmiert

Wie und in welcher Sprache wurde deine Website den programmiert? Ich meine was ist der aktuelle stand und was fehlt dir genau, um deine Website fertigstellen zu können? Wie gesagt, eigne dir entsprechendes Grundlagenwissen an.

Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer

Kalisca

Fragesteller

30.03.2024, 21:41

Guten Abend,

Ich arbeite mit HTML-Editor

Muss zugeben, ich bin ein Anfänger, meistens schaue ich mir YouTube Tutorials an und schreibe nach oder besuche HTML/CSS/Java Seminar Seiten.

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

30.03.2024, 21:59

Hi Kalisca,

wenn du HTML5-Standard verwenden möchtest für deine Webseite, kann ich dir die Seite von Selfhtml ans Herz legen. Hier findest du auf Deutsch alles was du dafür benötigst. Hier der Link: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung

Damit kannst du dich informieren wie und wo du diese Elemente aus dem HTML5-Standard zur Strukturierung von Webseiten verwenden kannst.

Ich wünsche dir viel Erfolg

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Hey,

Ich versuche eine Website wie Tiktok zu programmieren und habe jetzt programmiert, dass man runterscrollen kann und dann ein neues Video kommt.
Das habe ich 100% nur mit HTML und CSS gemacht, aber jetzt will ich in Javascript ein Check einführen, welches Video man gerade anschaut.

dashboard.php:

player.css:

Kann mir wer helfen?

...zur Frage

Wie kann man in einer HTML-Website den Übersetzer ausschalten?

Ich habe eine eigene Website mit HTML, CSS und JavaScript programmiert und ich habe ein paar englische Wörter, die ich nicht Übersetzen möchte, sondern in Originalform stehenlassen möchte. Wie kann man das programmieren.

...zur Frage

Wie kann man ein festes Bild über einem div oder header in css anzeigen lassen ohne, dass es sich in diesem Container befindet?

Hallo,

ich bin aktuell dabei meine eigene kleine Website mit HTML und CSS zu gestalten und bin auf ein Problem gestoßen. Ich möchte mein Logo über einem Header oder Div anzeigen wie es unten auf dem Bild auch gezeigt ist. Ich habe versucht das Bild in den Container zu verschieben und dann versucht es mit den Display Typen flex und grid zu positionieren. Leider wird entweder das Bild an eine falsche stelle verschoben oder meine Links werden falsch positioniert (Siehe Bild 2). Hat jemand eventuell eine Lösung wie ich das mache ohne das Bild in den Container zu verschieben oder das Bild obwohl es in dem Container ist statisch zu positionieren, ohne dass es von den Positionen der Links beeinflusst wird.

...zur Frage

Website Datenbank programmieren?

Hallo ich habe eine Website mit html programmiert und würde gerne wissen ob und wie ich eine Datenbank programmieren kann, dass man eingegebene Dinge speichern und jederzeit Wiederabdrucken kann

...zur Frage

Webentwicklung mit Baukasten oder selber programmiert?

Moin, ich frage mich zurzeit, macht es noch Sinn, eine Website selbst zu programmieren? Also zum Beispiel wenn man eine Restaurant Website oder eine Unternehmenswebsite entwickelt. Also mit zum Beispiel React und so. Oder auch React und ein Headless CMS? Weil viele verwenden ja oft Baukasten Systeme oder Templates. Ist man als Webentwickler noch gut, wenn man selbst programmiert?

...zur Frage

Wie kann ich bei dieser Website den Link nach oben rechts verschieben?

Ich habe einen Link erstellt, der mich wieder zurück zur Hauptwebsite bringt. Nur möchte ich, dass der Link oben rechts ist. Kann mir da jemand helfen?

Die Webseite:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preise</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      padding-left: 100px;
      padding-right: 100px;
    }

    .preise-navbar {
      padding-left: 100px;
      color: rgb(52, 57, 56);
    }

    .preise-container {
      background-color: white;
      padding: 16px;
    }

    table {
      border-collapse: collapse;
    }

    td,
    th {
      padding: 16px;
      border-bottom: 2px solid #8ebf42;
      text-align: center;
      padding-left: 100px;
    }

    a {
    }
  </style>
</head>
<body>
  <div class="preise-container">
    <h1 class="preise-navbar">Preise:</h1>
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Erwachsene:</td>
      <td>20€</td>
    </tr>
    <tr>
      <td>Kinder unter 18</td>
      <td>10€</td>
    </tr>
    <td>Kinder unter 6</td>
    <td>3€</td>
  </table>
  <a href="Index.html">Zurück</a>
</body>
</html>

...zur Frage

Was ist ein div-Tag und welche div-Tags gibt es?

Hallo zusammen,

leider habe ich das div-Tag noch nicht ganz verstanden. Bisher ist mir nur verständlich, dass es sich beim div-Container um eine Art "Box" handelt, in der man Texte und sonstiges hinzufügen kann.

Kann mir jemand erklären, welche div-Tags es noch gibt (z.B. div-class, id, etc.) und was sie bedeuten?

Hat jemand eventuell einen Link zur einer Webseite, in der alle div-Tags und ihre zugehörige Funktionen aufgelistet sind?

Leider habe ich diesbezüglich nicht viel im Internet gefunden.

...zur Frage

Html div anordnen?

Hallo, ich habe mehrere Container, welche nebeneinander, bzw. untereinander platziert

werden sollten. Das problem liegt darin, dass wenn ein Container zu groß ist werden bei den kleineren Container platz gelassen. Wie kann man das vermeiden?

...zur Frage

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zur Frage

DIV-CONTAINER an Bildschirmgröße anpassen?

Liebe Commuity, Ich bin sehr neu in sachen HTML und CSS. Wir haben ein Projekt von der Schule aus, eine Website erstellen. Nun habe ich einen Div-Container mit einem Hintergrund gemacht (Auf den Hintergrund kommt ein Text). Jedoch wenn ich es auf meinem großen Bildschirm anordne und dann auf meinen Laptop gehe, ist klarerweise alles verschoben. Wie kann ich dies verhindern? :)

LG Flagga005

...zur Frage

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

...zur Frage

Was ist eigentlich das div genau in html?

Wenn ich zum Beispiel 4 div Container im Code habe, ist der erste div Container dann ganz oben und der letzte div Container ganz unten?

...zur Frage

Wie macht man eine HTML Webseite responsive?

Ich habe in einem div Container zwei div Container nebeneinander.

Wenn man die Webseite vom Handy aus öffnet, sollen die zwei div Container welche nebeneinander sind übereinander angezeigt werden, ansonsten sieht der Text echt schlecht aus, wie kriege ich das hin?

...zur Frage

Wie programmiert man eine Website mit Scratch?

Hallo ich würde gerne eine Website mit der Programmiersprache Scratch programmieren, weil ich die schon kann, wie macht man das?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen