Moin, wann benutzt man div-Elemente? ich Code immer mal wieder etwas nach, aber verstehe manchmal nicht warum soviele div Elemente erstellt werden.zB.<DIV><DIV><DIV>IMG (also hier wird ein Bild eingefügt)<DIV/><P>Hallo Welt<P\><DIV|><DIV\>Hat das was mit CSS zutun? Damit man es später besser bearbeiten kann?

Wann benutzt man DIV-Elemente?

Moin,

wann benutzt man div-Elemente?
ich Code immer mal wieder etwas nach, aber verstehe manchmal nicht warum soviele div Elemente erstellt werden.

zB.

<DIV>

IMG (also hier wird ein Bild eingefügt)

<DIV/>

<P>Hallo Welt<P\>

<DIV|>

<DIV\>

Hat das was mit CSS zutun? Damit man es später besser bearbeiten kann?

3 Antworten

McSKB

11.12.2023, 16:21

Solche div Elemente sorgen später mit CSS-Klassen für eine responsive Positionierung der Elemente.

Du kannst divs entfernen, die z.B. auf dem Smartphone gar nich dargestellt werden sollen - auf einem Tablet/PC hingegen schon.

Woher ich das weiß:Studium / Ausbildung – Begeisterter Beweger der 0 und 1

Tyldu

11.12.2023, 17:18

mit <div>s kann man so gut wie alles machen, deswegen wird es viel benutzt. außer <div>s braucht man sonst eigentlich nur noch <img> für bilder oder <a> für links. würde beides auch mit <div>s gehen, wäre aber etwas umständlicher

<div>s sind mehr oder weniger einfach nur container die noch keine bestimmten eigenschaften voreingestellt haben

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmieren & Softwareentwicklung

11.12.2023, 16:19

Das ist ein Container, eine Box quasi. Verschachtelte Boxen können beispielsweise Sinn machen um bestimmte Stil-Eigenschaften umzusetzen.

Ich habe ein ELement (zB ein Div) und möchte dass dieses div langsamer nach oben scrollt als andere Elemente auf der Seite - Wir nehmen zB an ich habe 4 divs: Jedes Div soll in einer anderen Geschwindigkeit nach oben scrollen.... Wie könnte man das mit JS/CSS umsetzen? Am besten mit Erklärung - im Internet finde ich leider nur fertigen Code den ich nicht einfach so einsetzen will ohne ihn zu verstehen :)

...zur Frage

CSS div container neben img in der selben Zeile?

Ich wollte ein Bild neben einem Div-container in der obersten Zeile platzieren, habe jedoch keinen Weg gefunden, kann mir jmd helfen? Danke! :^)

...zur Frage

wie unterscheidet man bilder in HTML/CSS?

Okay, ich habe auf meine Website nen Bild eingefügt,

ganz normal

und das zweite

<img src="http://t3.gstatic.com/licensed-image?q=tbn:ANd9GcQkZ6w8bYc2wm0VHc6SPTWVPGZogOf5Oseh35yBMeBbl2ByMCnTPoawYRQcuY9M"

height="646" weight="818"

aber jetzt will ich beide an andere positionen mit css verschieben.

aber dann schreibe ich img {

position:relative;

left:0%;

bottom:60%;

}

wie unterscheide ich das jetzt vom zweiten welches ich wo anders hin machen wollte?

falls ich etwas absolut falsch gemacht habe tut es mir leid, ich lerne HTML/CSS seit 2 Tagen

...zur Frage

Warum werden nicht alle Bilder in einem "versteckt" (overflow: hidden;)?

Guten Tag liebe Community,

ich bin dabei, einen Slider zu bauen und leider "versteckt" sich nur ein Bild in einem. Das dritte Bild bleibt wie schon davor nur in seiner Position. Liegt das eventuell an dem <img>?

Beim ersten <img>: picture1.jpg.jpg
Beim zweiten <img>: picture2.jpg.jpg
Beim dritten <img>: o233-ai4Q4-unsp.jpg -> hier ganz anderer Name

Welche Lösungen gibt es für dieses Problem?

Hier der wichtigste (Teil-)Code:

Der CSS-Code:

.Slider {
  width: 800px;
  height: 500px;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

HTML-Code (ein Teil):

<div class="Slider">
  <div class="Slides">
    <input type="radio" name="radio-btn" id="radio1">
    <input type="radio" name="radio-btn" id="radio2">
    <input type="radio" name="radio-btn" id="radio3">
    <div class="slidefirst">
      <img src="picture1.jpg.jpg" alt="" width="160" height="145" />
    </div>
    <div class="slidesecond">
      <img src="picture2.jpg.jpg" alt="" width="160" height="145" />
    </div>
    <div class="slidethird">
      <img src="o233-ai4Q4-unsp.jpg" alt="" width="160" height="145" />
    </div>
    <div class="navigation auto">
      <div class="auto-btn-1"></div>
      <div class="auto-btn-2"></div>
      <div class="auto-btn-3"></div>
    </div>

...zur Frage

Css div Container weissen Rand los werden?

Hey Leute, Lerne derzeit CSS und bin gerade bei einem Hindernis gelandet. Irgendwie ist ein weisser Rand aussen von meinem div Container entstanden und egal mit welchen Befehl, er geht einfach nicht weg. Habe es auch schon mit margin: 0%; versucht.

Nix hat funktioniert.

Ich würde den Code gerne einfügen jedoch ist er zu lang. Wenn jemand Interesse hat mir im privat Chat zu helfen kann ich gerne den Code zuschicken.

Hat jemand anderes trotzdem eine Ahnung was das sein kann und wie ich es loswerden kann? Habe den Code bereits kontrolliert und und nix finden können.

...zur Frage

Button mittig unter Bild Zentrieren HTML/CSS?

Hallo erstmal, ich bin komplett neu hier also bitte entschuldigt, falls ich irgendwas nicht richtig beachte. Zu meiner Frage: Ich möchte für eine Portfolio Site Vorschaubilder einer Gallery haben und darunter einen Zentrierten Button für den Link zu der jeweiligen Seite. Mein Problem ist jetzt, dass der Button sich leider nicht zentrieren lässt sondern immer links gebunden ist.

Mein HTML Code:

<section id="content">
<div>
<div id="studio"> 
<img src="img/Gallery_Preview/Studio.jpg" alt="Studio Aufnahmen">
<p><a class="button1" href="Studio.html">Studio</a></p>
</div>
</div>
</section>

Mein Css Code:

#studio {
margin: 30px ;
padding:4px;

}
#studio img {
width: 23%;
height: auto;
}
.button1 {
text-align: center;
width: 100%; 
}

P.s. ich bin Anfänger

Danke schon mal

...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

CSS-Bild-Text?

Hallo, wie lautet der Befehl, wenn ein Text und ein Bild auf der gleichen Linie stehen?

<div class="räderContainer">
                    <h3 class="h41">Text</h3>
                    <img class="rad" src="zahnrad.png">
                </div>

...zur Frage

CSS Grüne Blöcke nacheinander anzeigen lasen?

Von oben nach unten, aber ohne zusätzliche HTML Tags wie <div> <p> oder <br>.

Der Code sieht so aus <div> a*3 </div> nichts besonderes und dann noch bisschen padding height width background-color

...zur Frage

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zur Frage

DIV-Abstand entfernen (HTML/CSS)

Wenn ich meine Datei in DIV-Elemente aufteile, wird im Browser automatisch ein Abstand zwischen diesen eingefügt. Dabei spielt es keine Rolle, ob ich als Browser Chrome oder Firefox verwende. Gibt es eine Möglichkeit das zu unterbinden?

...zur Frage

HTML/PHP/CSS Code funktioniert nicht?

Ich benutze den Code <div class="Box">BOX</div> in einer php Datei und den Code .Box {

background-color: black;

}

in einer css Datei aber bei mir steht dort am ende nur "BOX".

...zur Frage

CSS Button und collapsible nebeneinander bekommen?

Hey, wie bekommt man den Button und das collapsible nebeneinander ?

Hier der HTML Code:

<div class="fach" id ="${nameDesFachs}"> <button type="button" class="collapsible">${nameDesFachs}</button><div class="content hidden"></div></div>

...zur Frage

CSS was ist hier falsch?

Hallo ich arbeite aus Spaß an einer Website und habe mich die tage mit CSS auseinander gesetzt habe auch was schönes zusammen gebastelt jedoch ist ein Problem aufgetaucht wobei ich nicht weiß wie ich es wieder beheben kann Problem folgendes:
Ich habe ein Bild rechts daneben der Name daneben ein kleines YouTube Icon und daneben ein kleines Twitch Icon ich habe auf beiden Icons ein link allerdings funktioniert der link nur bei Twitch das YouTube Icon wird auch angezeigt jedoch hat es keinen link hinterlegt keine Ahnung warum.
Hier ist der HTML Code:

--------------------------------------------------------------------------------------------------------------------------

<div class="teilnehmer-profile">
  <div class="item-1"><img src="castcrafter.jpg" width="100" height="100"></div>
  <div class="item-2"><span class="name">CastCrafter</span></div>
  <div class="item-3"><a href="https://www.youtube.com/c/CastCrafter"> <img src="youtubeicon.jpg" width="30" height="30"> </a></div>
  <div class="item-4"><a href="https://www.twitch.tv/castcrafter"> <img src="twitchicon.jpg" width="30" height="30"> </a></div>
</div>
<br>
</br>

------------------------------------------------------------------------------------

So sind die CSS codes:

------------------------------------------------------------------------------------

.teilnehmer-profile {
     display: grid;
     grid-template-columns: 100px 140px 0px 100px;
     grid-auto-rows: minmax(80px, auto);
     grid-template-rows: 100px;
     grid-auto-rows: 100px;
     grid-auto-flow: column;
     grid-auto-columns: 200px;
     justify-content: center;
     grid-template-areas:
  "bild name youtube twitch";
}
span.name {
     font-size: 1,5em;
     font-family: sArial,'Arial Unicode MS',Helvetica,Sans-Serif;;
     text-shadow: -1px 1px 20px black;
}
.item-1 {
  grid-area: bild;
}
.item-2 {
  grid-area: name;
}
.item-3 {
  grid-area: youtube;
}
.item-4 {
  grid-area: twitch;
}

Ich danke schonmal im Voraus und bedanke mich ebenfalls für allgemeine Code Verbesserungen da ich die Website für die schule mache (Informatik) und in dem Thema relativ neu bin.
LG Benji & Danke

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen