wozu braucht man div? (HTML)

Hallo,

beschäftige mich momentan bisschen mit html. Mir bereiten diese Positions und div container Probleme.

Also meine frage lautet wofür braucht man denn Div container?

man kann eine Webseite doch auch einfach ohne Div container aufbauen. also man setzt für jedes Element die Position absolute und gibt dann mit top und left die genaue Position ein, wo sich ein Element befinden soll.

Hoffe ihr versteht mich.

Danke im voraus

5 Antworten

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite

22.01.2014, 22:50

Das

-Element ist ein semantisch bedeutungsloses Element und sollte nur dann verwendet werden, wenn es aus gestalterischen Gründen notwendig ist. Wenn Du ein HTML5-Dokument hast solltest Du z.B. für den Kopfbereich und für den Fußbereich verwenden statt einem . Mit diesen Elementen erhalten deren Inhalte auch die entsprechende semantische Ausrichtung, was z.B. für Suchmaschinen wichtig ist.

Woher ich das weiß:Berufserfahrung – mit dem Internet verbunden seit 1993

RainDrop123123

21.01.2014, 19:07

Zur Struckturierung und wegen dem Format

Steffile

21.01.2014, 22:49

:-) Alles mit position absolute, probier das mal aus, dann verstehst du es am besten wieso das fuer eine normale Website nicht praktisch ist.

Im Prinzip muessen die Container aber keine Divs sein, du kannst deine Website auch aus

, oder anderen Elementen bauen.

Divs haben aber den Vorteil, dass die Browser sie als Blockelemente (die die ganze verfuegbare Breite einnehmen) ohne jeglliche Eigenschaften behandeln.

oder dagegen haben in jedem Browser eine Groesse, eine Farbe usw. und das muesstest du dann im CSS erstmal umformattieren. Das geht und ist manchmal nuetzlich, aber halt nur manchmal.

Steffile

21.01.2014, 23:06

Ups, da hat GF was weggeschnitten:

Im Prinzip muessen die Container aber keine Divs sein, du kannst deine Website auch aus p, span oder anderen Elementen bauen.

[...}

p, span dagegen haben in jedem Browser eine Groesse, eine Farbe usw. und das muesstest du dann im CSS erstmal umformattieren. Das geht und ist manchmal nuetzlich, aber halt nur manchmal.

BueroSmart

22.01.2014, 08:31

Spätestens wenn Deine Seiten unterschiedlich lange Inhalte haben und Du unter dem Inhalt noch einen Footer einbauen möchtest gerätst Du mit "position: absolute" an Deine Grenzen. Außerdem positionierst Du Dich so ja dumm und dusselig :-)

Und wenn sich jemand Deine Seite mit dem Tablet anschaut kann eine Positionierung: left: 50px ganz anders ausschauen als auf einem 24 Zoll Monitor :-)

Im Prinzip muss Du Dir die DIVs wie Boxen vorstellen, die die verschiedenen Inhaltsbereiche definieren: Den Header, den Inhaltsbereich, die Sidebar(s), den Footer.

FGO65

21.01.2014, 17:28

Was machst Du denn mit deiner absoluten Position, wenn jemand mit einem kleineren/grösseren Bildschirm deine Seite betrachtet?

DHverteiler

Fragesteller

21.01.2014, 17:32

jou stimmt.

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

CSS : position: absolute; Was ist das?

Ich verstehe es irgendwie nicht, was diese Position macht? Und die relative Position sagt einfach nur, dass das Element frei beweglich ist ?

...zur Frage

HTML Header in der Mitte von <div>?

Wie ist es möglich einen Header z.B. <h4> in die Mitte von einem <div> Element anzuzeigen?

...zur Frage

HTML Texte besser mit <p> oder einem Div darstellen?

Hallo,

ich habe gerade folgendes gesehen:

Da sehen wir, dass die beiden Texte mit einem Div dargestellt werden und nicht mit einem P Element. Was hat das für Vorteile und warum machen das manche Seiten so? Sollte das jeder machen?

...zur Frage

Wie kann man einen HTML Div Container nach unten verschieben?

Hallo,

ich würde gerne den markierten Container unter das Posten Feld setzen. Wie genau kann das funktionieren?

Sorry für die blöde Frage, bin noch etwas neu / unerfahren beim coden :)

...zur Frage

HTML / CSS: Warum lässt sich das Bild nicht nach links bewegen?

HTML:

<div class="mittecrew_png">
  <img src="mittecrew.png" height="105"; widht="1505";>
  <a href="#"></a>
</div>

CSS:

.mittecrewpng {
  margin-left: 100px;
}

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

Positionierung von Pfeilen in Flexboxen?

Hallo,

ich wollte bei meiner Website eine kleine Slideshow einbauen. Dazu habe ich erst einmal Pfeile erstellt. Diese wollte ich nun richtig positionieren. Ich hatte die Idee, eine Flexbox um die Bilder mit den Pfeilen zu erstellen und die Pfeile dann einfach mit align-items zu positionieren. Irgendetwas habe ich allerdings falsch gemacht. Vielleicht fällt euch ja mein Fehler auf. Bin für jeden Tipp dankbar.

html:

<div class="slide">
            <div id="footer2">
                <div id="bilder">
                    <div id="flexbox">
                        <div class="post">
                            <img src="wohnzimmer.png" alt="Wohnzimmer">
                            <div class="post-s">
                                <h2>Einbaumöbel</h2>
                            </div>
                        </div>
                        <div class="post1">
                            <img src="badezimmer.png" alt="Badezimmer">
                            <div class="post1-s">
                                <h2>Badmöbel</h2>
                            </div>
                        </div>
                        <div class="post2">    
                            <img src="einbauschränke.png" alt="Einbauschränke">
                            <div class="post2-s">
                                <h2>Einbauschränke</h2>
                            </div>
                        </div>
                    </div>
                    <div class="post3">
                        <img src="hochbett.png" alt="Hochbett">
                        <div class="post3-s">
                            <h2>Kinderhochbetten in Eichemassivholz</h2>
                        </div>
                    </div>
    
                    </div> 
                    
                </div>
                <a class="pfeil pfeil-links"><span>&#10094;</span></a>
                <a class="pfeil pfeil-rechts"><span>&#10095;</span></a>
            </div> 
        </div>

Css:

.slide{
    display: flex;
    border: solid black;
}
.pfeil {
    position: absolute;
    top: 0px;
    bottom: 0px;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
    
}
.pfeil-links {
    left: 0;
}
.pfeil-rechts {
    right: 0;
}

...zur Frage

CSS Grid leere Zelle?

Hi,

bin gerade etwas Ratlos wie ich das mit css grid umsetzen kann.

Aktuelle habe ich folgenden Code

<div class="grid-container">
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <input type="text" class="grid-item">
  <div class="grid-item">Ein Text</div>
  <select class="grid-item"></select>
  <div class="grid-item">Ein Text</div>
</div>

CSS 
.grid-container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(4, 1fr);
}

https://jsfiddle.net/tb2e75L8/2/

Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben. Also sozusagen eine Leere Zelle. Ich habe schon über grid-template-areas nachgelesen, jedoch bräuchte ich da für jedes item eine eigene ID, oder sehe ich das falsch?

Für sonstige Vorschläge zum realisieren von diesem Layout (auch ohne Grid) bin ich grundsätzlich auch offen.

Vielen Dank im Voraus

whgoffline

...zur Frage

Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

...zur Frage

Bild an Div Container anpassen?

Das Bild ist erstmal nur Platzhalter, da kommt später noch ein Timer rein (aber erst mit JavaScript). Nun soll das Bild aber halt in der Mitte des Bildes auf einer bestimmten Höhe sein. Ich hab bis jetzt mit Padding gearbeitet, aber da der Container je nach der Größe der Seite (das ganze soll halbwegs responsive sein) immer größer als das Bild ist, haut das mit dem Padding da nicht komplett hin. Da ich allerding auch das Prinzip mit dem zentrieren eines divs mit 2 weiteren Containern überhaupt nicht kann, ist mein Ansatz jetzt, dass sich das Bild immer dem Container anpasst in dem es ist. Darüber ist bereits so eine 3er Reihe mit Containern, aber da hat mir ein Freund geholfen, der gerade nicht da ist. Wenn ihr wollt, setze ich dann noch n Bild ran, wo ihr euch das nochmal genau ansehen könnt, ansonsten hier die betreffenden Code-Zeilen:

HTML:

</div>

CSS:

.Timer-container {

display: block;

padding-top: 10%;

padding-left: 25%;

padding-right: 25%;

padding-bottom: 30%;

}

Ich hoffe ihr könnt mir helfen!

Eure Amy

...zur Frage

Wie kann ich das Rutschen des DIV-Containers verhindern?

Hallo, wie auf dem Foto (schlecht, rechts unten) zu erkennen möchte ich 3 DIV-Container nebeneinander platzieren.Dazu habe ich alle drei in ein großen Container gesteckt. Jedoch "rutscht" das rechte DIV immer nach unten ohne dass ich es möchte oder weiß wieso es das tut...Ich hoffe es kann mir hier geholfen werden!

CSS:

#body {
    background-color: aqua;
    width: 100%;
    height: 100%;
}


#mitte {
    height: inherit;
    max-width: 60%;
    background-color: aliceblue;
}


#links {
    width: 15%;
    height: inherit;
    float: left;
    background-color: brown;
}


#rechts {
    width: 15%;
    height: inherit;
    float: right;
    background-color: blueviolet;
}

Da HTML hier Probleme mit den < und > hat, davon ein Bild im Anhang...

Danke im voraus, Thomas

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

Bilder auf gleiche Höhe in HTML/CSS?

Hallo,

ich habe nochmal eine Frage zu meiner Website.

Kann mir jemand sagen, wie ich die beiden linken Bilder auf die gleiche Höhe wie das rechte Bild bringen kann? Ich finde bei Google nichts und weiß nicht weiter.

Hier der Ausschnitt meines Codes:

HTML:

<div id="bilder">
  <div id=bild1>
    <img src="bild1.jpg" alt="Wir bei der Arbeit">
  </div>
  <div id=bild2>
    <img src="bild2.jpg" alt="Wir bei der Arbeit">
  </div>
  <div id=bild3>
    <img src="bild3.png" alt="Holzschränke"
  </div>

CSS:

#bild1 {
  display: inline;
  margin-left: 500px;
}

#bild2 {
  display: inline;
  margin-left: 50px;
}

#bild3 {
  display: inline;
  margin-left: 50px;
}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen