Entwickler-Ecke :: Thema anzeigen - Anordung von mehreren Elemente in einem "div"

Horand - Mi 29.04.20 20:40
Titel: Anordung von mehreren Elemente in einem "div"

Hallo und guten Tag erstmal,

ich habe angefangen, mich ein wenig mit Webentwicklung zu beschäftigen.
Ich habe allerdings ein kleines Verständnisproblem, was die div-Tags in Verbindung mit css angeht. Ich weiß, dass man mit div-Tags die Seite sozusagen unterteilen kann. Wenn ich nun aber einem div-tag eine Klasse oder id zuweise und diese dann in css anspreche und z.B. eine Hintergrundfarbe vergebe, dann erscheint eine Art Viereck. Das außen dann noch border kommen kann, weiß ich schon, aber jetzt mal nicht wichtig.
Ich möchte allerdings in einen Div zwei Elemente dazufügen: ein Bild (img) und ein normaler Text (p).Es soll so aussehen, dass oben der Text steht und das Bild drunter ist. Normalerweise ist das auch so. Aber in dem Div überlappt das Bild den Text und ragt zudem aus dem Viereck, das das Div darstellt, raus.
Habe es daraufhin mit position versucht, indem ich das Div auf position:relative setzte und die das Bild und den Text auf absolute, dass es sich am Div orientiert. Aber auch das hat nicht wirklich was geändert. Ich kann die beiden Elemente zwar mit Bezug auf das Div verschieben, aber wirklich untereinander sind die nicht, sondern überlappen und das Bild ragt halt, wie gesagt, aus dem Div raus.

Geht das nicht anders oder habe ich da irgendeinen Denk-/Verständnisfehler?

Besten Dank für Antworten und schöne Grüße

Horand - Do 30.04.20 14:28

Vielen Dank für eure Antworten und das freundliche "Willkommen".

Ich entschuldige mich für die verspätete Antworten und möchte hiermit den Quellcode der .html-Datei und des .css-Stylesheets nachreichen. Zudem habe ich einen Screenshot erstellt, wie das Ganze bei mir im Webbroser (Firefox aussieht).

Da ich leider die Werkzeuge für das Einbetten von Code nicht gefunden habe, poste ich den Code mal als Text. Falls es sich um "blindheit"meinerseits handelt, bitte ich das zu entschuldigen. Den Screenshot habe ich als Dateianhang hinzugefügt.

HTML-Code:

HTML-Dokument

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="bb-bb">
  <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    </head>

  <body>

<div id="div2">
  <p id="testtext">TestTestTestTestTest</p>
  <img src="night-fog-1521028.jpg" alt="schalte deine Bilder an" width="200" height="300" id="Bild1">
  </div>
  
  </body>
  </html>

Und nun das CSS:

Cascading Style Sheet

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:

#div2 {
  background-color: black;
  margin-left: 15%;
  height: 200px;
  padding-bottom: 20px;
  position:relative;
}

p {
color:red;
text-align: justify;
text-decoration: none;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 2;
word-spacing:1.5;
font-family: "Arial","Courier", Serif, Sans-serif, Monospace;
font-size: 29px;
font-style: italic;
font-variant: small-caps;
margin-left: 15%;

}


#Bild1 {
position:absolute;

}

#testtext {
margin-left: 0;
position:absolute;
}

Nochmals danke für eure Hilfe.

Moderiert von Narses: HTML-Tags hinzugefügt
Moderiert von Narses: CSS-Tags hinzugefügt

jfheins - Do 30.04.20 21:11

Wenn du auf beide Elemente positon: absolute anwendest, ist klar, dass sie aufeinander liegen. (Weil standardmäßig dann beide oben links in der Ecke sitzen)

Aber ohne sieht es genau danach aus, was du möchtest:

Zitat:

Ich möchte allerdings in einen Div zwei Elemente dazufügen: ein Bild (img) und ein normaler Text (p).Es soll so aussehen, dass oben der Text steht und das Bild drunter ist. Normalerweise ist das auch so. Aber in dem Div überlappt das Bild den Text und ragt zudem aus dem Viereck, das das Div darstellt, raus.

Oben ist der p Tag, darunter direkt das Bild. Falls du das lieber zentriert haben möchstest, würde ich dir display: flex empfehlen.

margins

Horand - Fr 01.05.20 16:46

Vielen Dank für deine Ausführungen. Ich habe das soweit verstanden.

Aber wie mache ich das, wenn ih möchte, das beide Elemente des Div (Text und Bild) sich mit dem Div mitbewegen, sich also am Div ausrichten. Dann muss doch bei div die position = relative sein und bei den beiden Elemente auf absolute. Aber das führt ja dazu, dass die sich überlagern (wie ihr mir sehr verständlich erklärt habt). Und hier beißt sich die Schlange in den Schwanz. Kann man das irgendwie lösen?

jfheins - Fr 01.05.20 23:18

Was meinst du mit mitbewegen?

Standardmäßig werden die beiden Unterlemente (also p und img) untereinander im div positioniert. Das div wäre normalerweise dann genau so groß, wie der Inhalt vorgibt. (Standard bei CSS: Parent ist genau so groß, wie nötig)
Du setzt das div jedoch manuell auf 200px, sodass es früher aufhört.

Möchtest du nun
a) Dass das Bild nicht herausragt, sondern abschnitten wird? => overflow auf am div setzen
b) Dass der Inhalt sich nach den äußeren Maßen richtet? => display flex auf das div und Proportionen angeben

:?:

Horand - Sa 02.05.20 19:16

Also, ich möchte, dass sich Text und Bild am div ausrichtet und untereinander stehen. Sprich: das div bewegt sich z.B. 30px nach rechts und die beiden Elemente bewegen sich mit.
Normalerweise richten sich ja Elemte mit position:absolute am body aus. Deshalb habe ich das div mit position:relative bezeichnet, damit sich Text und Bild daran ausrichten. Wenn ich mich richtig eingelesen habe, ist ja immer das nächsthöhere Element mit einer position - Anweisung maßgebend.
Hoffe, mein Problem konnte ich einigermaßen verständlich erklären. Wenn nicht, bitte gerne nachhaken.:)

jfheins - So 03.05.20 13:57

Ich denke immer noch, dass due dir den ganzen position: xyz Kram schenken kannst (=weglassen)

Zitat:

das div bewegt sich z.B. 30px nach rechts und die beiden Elemente bewegen sich mit.

Das, was du da beschreibst, ist das Standardverhalten. Wenn du nicht mit position: absolute; überschreiben würdest, wäre es genau so.

Ich habe nochmal ein paar styles entfernt:

HTML-Dokument

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="bb-bb">
<head>
<style>

#div2 {
background-color: darkslategray;
margin-left: 150px;
margin-right: 150px;
transition: margin 700ms;
}

p {
color:red;
border: 1px solid cyan;
margin: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 29px;
font-style: italic;
}

</style>
</head>

<body>


<div id="div2">
  <p id="testtext">TestTestTestTestTest</p>
  <img src="E:\Temp\ads.png" alt="schalte deine Bilder an" width="200" height="150" id="Bild1">
</div>

<script>
    function move() {  
    const elem = document.getElementById("div2");
    if(elem.style.marginTop == "100px") {
      elem.style.marginTop = "0";
    } else {
      elem.style.marginTop = "100px";
    }
  }
  document.getElementById("Bild1").onclick = move;
</script>
</body>
</html>

Wenn man auf das Bild klickt, bewegt sich der ganze div und alles was darin ist.

Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!