Anordung von mehreren Elemente in einem "div"

Horand · Hält's aus hier Beiträge: 6

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

jfheins · Beiträge: 918 Erhaltene Danke: 158 Win 10 VS 2013, VS2015

Bitte mehr code zeigen und am Besten einen Screenshot wie es aktuell aussieht 😉
Ich vermute, das Bild hat noch weitere styles...

Narses · Verfasst: Do 30.04.20 10:24

Moin und

in der EE!

Genereller Tipp: im Firefox kann man mit Strg+Shit+I die Entwicklerwerkzeuge einblenden (kann auf die eine oder andere Weise eigentlich jeder moderne Browser). :idea:

Da kannst du dann im Reiter "Inspektor" auch sehr genau sehen, welche Stile auf ein Element wirken (mit Vererbung, das ist schon krass gut!). :lupe:

cu
Narses

_________________
There are 10 types of people - those who understand binary and those who don´t.

Horand · Hält's aus hier Beiträge: 6

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:

markieren

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:

markieren

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

Einloggen, um Attachments anzusehen!

jfheins · Beiträge: 918 Erhaltene Danke: 158 Win 10 VS 2013, VS2015

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

Einloggen, um Attachments anzusehen!

Horand · Hält's aus hier Beiträge: 6

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 · Beiträge: 918 Erhaltene Danke: 158 Win 10 VS 2013, VS2015

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 · Hält's aus hier Beiträge: 6

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 · Beiträge: 918 Erhaltene Danke: 158 Win 10 VS 2013, VS2015

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:

markieren

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.

Horand · Hält's aus hier Beiträge: 6

Vielen Dank dir für die Antwort. So funktionierts. Ich glaube, ich habe die Sache mit position irgendwie nicht richtig begriffen, wann man da was auf relative oder absolute setzten muss..
Naja, mittlerweile kann man ja auch mit grid-layouts arbeiten und ist somit nicht mehr wirklich auf position angewiesen.

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme