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.

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Zero5201

09.12.2022, 17:59

Ein div-Tag (kurz für "division") ist ein HTML-Element, das verwendet wird, um einen Bereich einer Webseite in einem Container zu gruppieren. Diese Container können verwendet werden, um Text, Bilder, Formulare und andere Elemente auf der Webseite zu organisieren und zu formatieren.

Es gibt verschiedene Arten von div-Tags, die je nach Bedarf verwendet werden können. Hier sind einige Beispiele:

div class: Dieser div-Tag wird verwendet, um einen Container mit einer bestimmten Klasse zu definieren. Klassen können verwendet werden, um Elemente auf der Webseite mit CSS zu stylen.

div id: Dieser div-Tag wird verwendet, um einen Container mit einer bestimmten ID zu definieren. IDs können verwendet werden, um Elemente auf der Webseite mithilfe von JavaScript zu identifizieren und zu manipulieren.

div style: Dieser div-Tag wird verwendet, um einen Container mit inline-CSS zu definieren. Inline-CSS erlaubt es, einzelne Elemente direkt im HTML-Code zu stylen, anstatt sie in einer separaten CSS-Datei zu definieren.

Weitere Informationen zu div-Tags und ihren verschiedenen Attributen findest du in der HTML-Dokumentation. Hier ist ein Link zu einer Seite, die dir mehr Informationen dazu geben kann: https://developer.mozilla.org/de/docs/Web/HTML/Element/div.

Pro334

Fragesteller

10.12.2022, 18:21

Vielen Dank für deine Antwort, hat mir extrem weitergeholfen !

Kreyyy

09.12.2022, 17:59

Ein div -Tag wird normalerweise verwendet, um eine Gruppe von Elementen auf der Webseite zu kapseln und ihnen ein gemeinsames Layout oder Style zuzuweisen.

Pro334

Fragesteller

10.12.2022, 18:21

Vielen Dank für deine Antwort !

10tel

09.12.2022, 19:28

Ein div-Tag ist eine rechteckige Fläche auf einer Webseite. Ihr kann per CSS zahlreiche Eigenschaften zugeordnet werden wie width, height, margin, padding, border, color, ...

Die Fläche kann beliebige HTML-Elemente enthalten.

Pro334

Fragesteller

10.12.2022, 18:20

Vielen Dank für deine Antwort !

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

CSS Klassen hinzufügen?

Hallo,

wie kann ich durch den Klick auf einen Knopf eine Klasse einem div Container hinzufügen?

...zur Frage

Bild verkleinern ohne die div kleiner zu machen?

Ich will ein Bild verkleinern ohne ein Div kleiner zu machen, wie geht das?:

    <div class="container-book1">
        <img class="book-image" src="48gesetze1.jpg">  
    </div>

.book-image {
    box-shadow: 10px 10px 10px rgb(14, 14, 14);
}

...zur Frage

Javascript-Farbe ändern?

Hallo, ich möchte, dass mein div-container automatisch die Farbe ändert, also von weiß zu grau und dann wieder zu weiß und so weiter,..... Wie mache ich das?

Code:

<div class="Hallo">
  <div id="strombergsoutput">
</div>

...zur Frage

Unterschied im css zwischen .container und div.container?

Im html habe ich den Tag <div class="container">.

Was ist denn im CSS der Unterschied wenn ich .container und div.container schreibe?

...zur Frage

Warum funktioniert mein Text Decoration nicht?

CSS:

body{

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

margin: auto 0;

}

.nav{

background: rgb(0, 47, 255);

padding: 0.3em;

color: white;

text-decoration: none!important;

.contact{

text-decoration: none;

}

HTML:

<body>

XXX <span>XXX</span>

</div>

<a class="contact" href="#">Contact</a>

<a class="about-me" href="#">About Me</a>

<a class="projects" href="#">Projects</a>

</div>

</container>

<div>

Test

</div>

</container>

</body>

...zur Frage

Bild in einem Parallax Container etwas abschneiden?

Moin,

ich habe eine Parallax Container direkt unter die Nav Bar eingefügt. Es sieht eigentlich recht hübsch aus, auch den Effekt mag ich.

Aber leider ist das Bild etwas hoch, so dass auf der Seite nur der obere Teil des Bildes angezeigt wird.

Kann man das Bild in einem Parallax beschneiden (also etwas vom oberen Teil des Bildes entfernen), oder das Bild zentrieren? Ich würde gerne die Mitte zu beginn sehen und dann diesen scroll Effekt haben. Das Bild sieht momentan wie mittig abgeschnitten aus. Der obere Teil wird angezeigt und der Untere ist nicht vorhanden.

Falls es hilft:

 <div class="parallax-container valign-wrapper">
      <div class="section no-pad-bot">
        <div class="container">
          <div class="row center">
            <h1 class="header col s12 light">TEST</h1>
          </div>
        </div>
      </div>
      <div class="parallax"><img src="img/pic.png"></div> 
    </div>

Style: .parallax-container { min-height: 380px; line-height: 0; height: auto; color: white; }

.parallax-container .section { width: 100%; }

@media only screen and (max-width : 992px) { .parallax-container .section { position: absolute; top: 40%; } #index-banner .section { top: 10%; } }

Es hat keinen tieferen Sinn, es ist grade nur eine Spielerei :)

Danke im Voraus.

...zur Frage

Zwei funktionen auf ein button packen?

Wie kann ich zwei funktionen auf einen Button packen? Also ich will das bei jedem click auf meinen button

1. immer plus 1 addiert wird: onclick="pluszahl()"

2. das ein Sound abgespielt wird: onclick="play()"

Leider konnte ich nur den counter machen und frage mich jetzt wie ich den sound auch aktivieren kann

HTML:

    <span class="center">Bam?</span>
    <div onclick="custom()" class="btn-container">
        <button onclick="pluszahl()"; twoclick="play()"    class="button1">
            Bam
        </button>
    </div>

    <div id="resultArea">0</div>

JavaScript:

function play() {
  var audio = new Audio('bam.mp3');
  audio.play();
}

function pluszahl() {
  document.getElementById("resultArea").innerHTML = parseInt(document.getElementById("resultArea").innerHTML)+1;
  }

...zur Frage

Div Button über andere Div Container legen?

Ich habe eine Webseite erstellt, welche mehrere Div-Container beinhaltet. Nun habe ich einen Button mittels Div erstellt. Jedoch ist der Button nicht sichtbar wenn ich andere Div-Container "aktiviert" habe. Mir ist bewusst das sich dies mit dem z-index regeln lässt, jedoch bei allen Div-Containern, außer bei dem mit dem Button.

Ohne andere Div-Objekte funktioniert er problemlos.

Danke im Vorraus!:)

...zur Frage

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zur Frage

Sticky navbar funktioniert nicht?

Guten Tag, ich muss für die Schule eine Webseite erstellen und wollte eine Sticky navbar einfügen. Dabei soll der untere Teil mit La Petite France, Cathédrale, rivière kleben bleiben. Kann mir jemand helfen?

<script>
        window.onscroll = function() {myFunction()};

        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
        if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
    }
</script>

<header>
    <section class="hero is-medium">
        <div class="hero-head">
            <nav class="navbar">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="navbar-item" href="index.html">
                            <img src="cigogne_strasbourg.png" alt="Logo">
                        </a>
                        <span class="navbar-burger" data-target="navbarMenuHeroB">
                            <span></span>
                            <span></span>
                            <span></span>
                      </span>
                    </div>
                    <div id="navbarMenuHeroB" class="navbar-menu">
                        <div class="navbar-end">
                            <a class="navbar-item is-active" href="index.html">
                                Home
                            </a>
                            <a class="navbar-item" href="details.html">
                                Y arriver
                            </a>
                            <a class="navbar-item" href="anmeldung.html">
                                Composer ses vacances
                            </a>
                            <span class="navbar-item">
                              <a class="button is-info is-inverted">
                                <!--<span class="icon">
                                  <i class="fab fas fa-fingerprint"></i>
                                </span>-->
                                <span>Einloggen</span>
                              </a>
                            </span>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="hero-body">
            <div class="tile is-ancestor">
                <div class="tile is-parent">
                    <div class="tile is-child is-4 is-align-content-end">
                        <h1 class="title is-2">Strasbourg</h1>
                        <h2 class="subtitle is-4">La P'tit Venise</h2>
                    </div>
                    <div class="tile is-child is-8">
                        <figure class="image">
                            <img width="10" src="cathedralefenetre.jpg" alt="Fenêtre"/>
                        </figure>
                    </div>
                </div>
            </div>
        </div>



<div id="navbar">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                        <li class="is-active">
                            <a href="javascript:void(0)">La Petite France</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La Cathédrale Notre-Dame</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La rivière</a>
                        </li>
                    </ul>
                </div>
            </nav>
</div>

    </section>
</header>

CSS:

.content {
    padding: 16px;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.sticky + .content {
    padding-top: 60px;
}

...zur Frage

HTML CSS - DIV Container wie iframe nutzen

Ich hab mal eine Frage, gibt es in CSS und HTML eine Möglichkeit einen DIV Container wie einen iFrame zu nutzen und in diesen Container Content von einer anderen Webseite hineinzuladen?

...zur Frage

wie in Bootstrap 5 vertikal zentrieren?

Der Container ist ganz oben was auch immer man probiert


<div class="container mx-auto">
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-header">Header</div>
                    <div class="card-body">Content</div>
                    <div class="card-footer">Footer</div>
                </div>
            </div>
        <div class="col-sm-3"></div>
    </div>

...zur Frage

Angular: Wieso wird Component zweimal aufgerufen?

Hi,

ich bin gerade dabei in Angular eine kleine Webseite zu erstellen. Einfach Just for Fun.

Kurz meine Components + Quellcode.

app-component.html

<app-toolbar></app-toolbar>


<router-outlet></router-outlet>

toolbar.component.html

<div class="head" style="background-color: darkgreen;">
    <div class="box">
            <button class="selectionButton" routerLink="/startseite">
                <div class="menuButton"></div>
                <div class="menuButton"></div>
                <div class="menuButton"></div>
            </button>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">TypeScript</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">Java</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton" routerLink="/htmluebersicht">
            <font size="5">HTML</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">Cypress</font>
        </button>
    </div>
</div>

html-page.component.html

<p>html-page works!</p>

Wenn ich jetzt auf den Button HTML ("/htmluebersicht") klicke, kommt der Text "html-page works!" .... Alles gut, so solls.
Wenn ich jetzt aber wieder auf den Menü Button ("/startseite") klicke wird meine toolbar.component.html irgendwie zweimal auf der Webseite angezeigt.

Weis jemand wieso die toolbar dann zweimal angezeigt wird?

Ich hoffe es ist verständlich was ich meine.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen