div bewegt sich beim Verkleinern des Browsers

help · #1 (**permalink**) 02.05.2018, 21:25

Hallo

Ich habe ein Problem:

Ich bin noch ziemlich am Anfang mit html und habe eine Website erstellt. Zum Positionieren der Bilder habe ich "div" benutzt, also div id="...". Das Problem ist jetzt, dass wenn ich den Browser verkleinere sich die Bilder mit dem Text überlappen. Ich habe alles Mögliche ausprobiert z.B. flexbox, nur hat das bei mir nichts gebracht. Ich sitzt schon seit einiger Zeit daran und muss endlich weiter kommen. Habe die Website an nem anderen PC erstellt mit anderem Monitor und anderer Auflösung, deshalb sind die Bilder so schon zu weit rechts.
Ich hoffe ihr könnt mir da weiterhelfen.

HTML-Code:

<!DOCTYPE HTML>
<html lang="de">
<head>
<link rel="stylesheet" href="css/suits.css" type="text/css">
<title>website</title>
<meta charset="UTF-8">
<meta name="author" content="prakti05">
<meta name="editor" content="html-editor phase 5">




</head>
<body>


<main>



<header>


</header>



<nav>

<ul>

<li><a href="index.html">WHO AM I</a></li>
<li><a href="index2.html">The 100</a></li>
<li><a href="index3.html">Breaking Bad</a>
<li class="aktiv"><a href="suits.html">Suits</a></li>
<li><a href="index4.html">Kontakt</a>


</ul>

</nav>

<article>

<h1>Suits</h1>
<p>Suits" ist eine US-amerikanische Anwaltsserie, die durch die Augen des jungen Genies Mike Ross erzählt wird. Neben seinem fotografischen Gedächtnis verfügt Mike über eine unglaublich starke Auffassungsaufgabe. Nach dem frühen Tod seiner Eltern geriet er allerdings auf die schiefe Bahn. So ist er zum Beispiel gerade mit einem Koffer Marihuana auf der Flucht vor der Polizei, als er auf den erfolgreichen und gerissenen Anwalt Harvey Specter trifft.

Harvey ist Senior Partner der Top-Kanzlei "Pearson & Hardman" - und gezwungenerweise auf der Suche nach einem Assistenten. An dem jungen und cleveren Mike findet er schnell Gefallen und obwohl dieser weder das von der Kanzlei geforderte Jurastudium in Harvard noch eine Zulassung als Anwalt vorweisen kann, engagiert Harvey ihn. Das ungleiche Team muss sich einiges einfallen lassen, um dieses kleine Geheimnis zu hüten. Und das sind nicht die einzigen Schwierigkeiten, die die beiden im Laufe ihrer Zusammenarbeit bewältigen müssen. Während es Mike ziemlich schwer fällt sich von seinem alten Leben zu trennen, ist Harvey ganz auf den Beruf fixiert: Für seinen Traum von der großen Karriere als Anwalt würde er alles tun.

"Suits" zeichnet sich besonders durch messerscharfe Dialoge und starke Charaktere aus. Die etwas untypische Anwaltsserie verspricht so mit tollen Hauptdarstellern und interessanten Fällen absolute Top-Unterhaltung. </p>

<figure>
<a href="https://www.youtube.com/watch?v=5nSa6VNR7lE"><img src="img/suitstr.jpeg" alt="" border="0" width="620" height="260">

<figcaption>Hier klicken für den Trailer</figcaption>    </a>
</figure>




<h2>Details</h2>

<p>Produktionsunternehmen: Universal Cable Productions, Hypnotic Films & Television</p>
<p>Produktionsjahr: seit 2011</p>
<p>Erstausstrahlung: 23. Juni 2011 (USA) auf USA Network</p>
<p>Deutschsprachige Erstausstrahlung: 7. Januar 2013 auf FOX</p>
<p>Genre: Dramatic Comedy</p>
<p>FSK: ab 12</p>
<p>Länge: pro Folge ca. 42 Minuten</p>
<p>Episoden: 108 (7 Staffeln)</p>
<p>Titelmusik: Greenback Boogie von Ima Robot</p>
<br>
<br>
<br>
<br>
<br>



<div id="info-box">

<ul id="galerie">

                <li>
                        <button id="but3" tabindex="1"><img src="img/img2/suitsbanner8.jpg" alt="">
                        </button>
                </li>
                <li>
                        <button id="but1" tabindex="1"><img src="img/img2/suitsgal2real2.jpg" alt="">
                        </button>
                </li>





        </ul>

</div>

<div id="info-box2">
<ul id="galerie">
 <li>
                        <button id="but4" tabindex="1"><img src="img/img2/suitsgalreal.jpg" alt="">
                        </button>
                </li>
                <li>
                        <button id="but2" tabindex="1"><img src="img/img2/suitsgal3real.jpg" alt="">
                        </button>
                </li>

        </ul>

</div>

<div id="info-boxw"> Bildersammlung:
                </div>





<div id="info-boxmc">

        <audio id="audio_with_controls" controls src="img/Suits.mp3" type="audio/mp3">
        Ihr Browser kann dieses Tondokument nicht wiedergeben.
                <br>Sie können es unter <a href="img/Suits.mp3">diesem Link</a>                abrufen. </audio>

</div>


<div id="info-boxw2"> Greenback Boogie (Titelmusik)
                </div>

</article>





<footer>
Quelle: de.wikipedia.org
</footer>




</main>


</body>
</html>

[CSS]
body {
background-image: url(../img/schwarz.png);
margin: 0 auto;
max-width: 80em;
}

header {
background-image: url(../img/suitsbanner2222.jpg);
height: 500px;

}

nav {

width: 234px;
float: left;
margin-left: 30px;
margin-top: 20px;
background-color: white;

}

nav ul {
list-style-type: none;
padding-left: 0px;

}

nav li {
margin-top: 1.3em;

}

nav ul ul {
list-style-type: square;
padding-left: 1.5em;
margin-bottom: 1em;

}
nav ul ul li {
margin-top: 0.4em;

}

nav a{
color: black;
text-decoration: none;
width: 100%;
display: inline-block;
line-height: 1.4em;
box-sizing: border-box;
padding-left: 6px;
padding-right: 20px;
padding-top: px;
inline-size: 230px;
}
nav li.aktiv a {
background-color: #3366b6;
background-image: none;
text-decoration: none;
cursor: default;
}
nov a:hover {
text-decoration: underline;
background: url(../img/dreieck2.gif) top right no-repeat;
}

article {
background-color: white;
margin: px 1px 30px 260px;
padding-left: 30px;
}
article h1,
article h2
{
color: Black;
padding-top: 10px;
padding-left: 240px;

}
article p {
padding-bottom: 1em;
line-height: 1.7em;
padding-left: 15em;
}

footer {
background-color: black;
text-align: center;
clear: both;
line-height: 2em;
color: Silver;
font-size: 80%;

margin-top: 20px;
}

footer a {
color: Silver;
text-decoration: none;
}

main {
border-left: Black 1px solid;
border-right: Black 1px solid;
}

header p {
color: White;
text-align: right;
font-size: 2em;
padding: 10px 40px 0 0
text-shadow: 1px 1px 1px black;
opacity: 0.8;
}

html, body {
font: 100% Arial, Helvetica, sans-serif;
}

figure {
background-color: black;
display: inline-block;
padding: 10px;
border: Silver 1px solid;
float: right;

}

figcaption {
font-size: 80%;
color: blue;
text-align: center;
font-style: italic;
font: 100% Arial, Helvetica, sans-serif;
padding-top: 5px;
}

a:hover {
background-image: url(../img/grau-50.png);
}

ul,
li {
margin: 0.1em;
padding: 0.1em;

}

li {
display: inline-block;
list-style-type: none;
width: 45%;
}

}

button {
padding: 0.1em;
}
/* Large screens */

@media all and (min-width: 35em) {
li {
width: 10em;
}

#but1 {
padding: 0.1em;
width: 10.3em;
height: 6.5em;
position: relative;
}

#but2 {
padding: 0.1em;
width: 10.3em;
height: 6.5em;
position: relative;
}

#but3 {
padding: 0.1em;
width: 10.3em;
height: 5.9em;
position: relative;
}

#but4 {
padding: 0.1em;
width: 10.3em;
height: 6em;
position: relative;
}

button img {
border: 0;
position: absolute;
left: 0%;
top: 0%;
z-index: 1;
box-shadow: 0;
width: 10em;
transition: all 1s;
}
button:focus img,
button:hover img {
border: 2em solid #eee;
border-radius: 1em;
position: absolute;
left: -4%;
top: -4%;
width: 300%;
z-index: 5;
box-shadow: 1px 1px 5px #333;
transition: all 1s;
}
#info-box {

height: auto;
padding: 7px;
position: absolute;
right: 14.5em;
top: 81em;
width: 250px;

}

#info-box2 {

height: auto;
padding: 7px;
position: absolute;
right: 25em;
top: 81em;
width: 250px;

}

#info-boxw {

height: auto;
padding: 10px;
position: absolute;
right: 24.5em;
top: 79.5em;
width: 250px;
font-weight: bold;
}

#info-boxmc {

height: auto;
padding: 10px;
position: absolute;
right: 24.5em;
top: 96.5em;
width: 250px;
font-weight: bold;
}

#info-boxw2 {

height: auto;
padding: 10px;
position: absolute;
right: 24.5em;
top: 94.5em;
width: 250px;
font-weight: bold;
}
[/CSS]

cloned · #2 (**permalink**) 03.05.2018, 08:26

Das kommt daher, dass du position:absolute verwendet hast. Das ist ein häufiger Fehler bei Anfängern: Es geht erst einmal schnell, etwas wohin zu schieben. Aber das schaut dann eben nur auf einem Monitor gut aus.
p-Tags sollten ganze Absätze enthalten und nicht einzelne Sätze. Das ist für mich zB eine Liste mit Facts, da würde sich definition-list (dl-Tag) eignen.

Die Lösung: Du löscht "alles" (was position: absolute drin hat) an CSS raus und baust es neu auf.
Zum positionieren verwende flexbox oder grid. Ich weiß, niemand hört diese Antwort gerne, aber auch ich habe das am Anfang machen müssen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIV in anderem DIV einfügen, ohne Verschiebung des Contents	hfr	CSS	6	27.03.2009 07:39
float: bei variierender Fenstergröße des Browsers	localex	CSS	2	08.05.2008 09:06
joomla template entschlüsseln	nieselfriem	CSS	2	18.03.2008 13:12
Div passt sich nicht an größe des Background-Image an?	Sombreo	CSS	13	09.07.2004 02:37
CSS div Größe anpassen anhand des inhaltes	Heavenfighter	(X)HTML	3	07.07.2004 10:04