HTML Seite verschiebt bei Verkleinerung?
Hallo, ich bin Anfänger was HTML und CSS angeht und habe meine erste Website fürs erste fertig. Nun bin ich beim verkleinern des Windows auf das Problem gestoßen, dass sich die Objekte verschieben und unteranderem auch Überlappen...
Wie kann ich dem entgegen steuern? Gibt es da eine Möglichkeit?
<body>
<div class="hero">
<nav>
<h1 class="ÜberschriftH1"> <span style="color:yellow">GESCHENKT! </span>Buch mit <span style="color:yellow">Anleitung </span> Überschrift </h1>
<h1 class="ÜberschriftH2">Überschrift <span style="color:yellow">0€</span></h1>
</nav>
<div class="picture">
<a href="link">
<img alt="Picture" src="Bild" height="500px" width="500px" class="front-cover">
</a>
</div>
<div class="text">
<h3>Text
<a style="color: yellow" href="Link">Text</a> Text
Text.<br> Text <span style="color:yellow">text</span>.
</h3>
</div>
<div>
<button class="button"> <a style="text-decoration: none;"href="link"</a></button>
</div>
</div>
</body>
*{
margin:0;
padding:0;
font-family:'poppins', sans-serif;
box-sizing: border-box;
}
.hero{
padding-top: 30px;
background-color: #1d5067;
min-height: 100vh;
width: 100%;
color: #fff;
}
.text{
font-size: 20px;
max-width: 600px;
margin-top: 150px;
margin-left: 765px;
color: #fff;
}
.button{
font-size: 25px;
height: 70px;
width: 300px;
margin-left: 765px;
margin-top: 100px;
background-color: gold;
color: #fff;
text-align: center;
text-decoration: wavy;
border: none;
border-radius: 30px;
display:inline-block;
cursor: pointer;
box-shadow: inset 0 0 0 0 white;
transition: ease-in 0.5s;
}
.button:hover{
box-shadow: inset 300px 0 0 0 white;
color: #1d2026;
}
.ÜberschriftH1{
font-size: 40px;
display: flex;
justify-content: center;
}
.ÜberschriftH2{
font-size: 30px;
display:flex;
justify-content: center;
}
.picture{
position: fixed;
top:150px;
left: 10%;
}
2 Antworten
Hast du mal Code und oder ein Bild? Am besten beides. Dann kann man dein Problem genau analysieren. In der Entwicklung gibt es immer viele Möglichkeiten und wenn jemand sagt: "Jo, ich habe ein Problem", ist das wenig aussagekräftig :)
Ich hab das ganze mal Ergänzt mit Code und die Stellen wie Text und links usw rausgenommen, da ich dies ungern teilen würde... Ist noch nicht viel aber wenigstens etwas für die erste Seite. Tipps und gut gemeinte Kritik nehme ich gerne entgegen ;P
Alle Css-Eigenschaften genau lernen und dann deinen Code überfliegen und die Fehler beseitigen.
Könnte mir vorstellen, dass du öfters Position:absolute; benutzt hast, ohne zu wissen, wozu das überhaupt gut ist.
Falls noch Fragen/Fehler offen bleiben, müsstest du einfach mal deinen Quellcode teilen.
In der überschrift kannst du das problem lösen in dem du die eigenschaft
flex-wrap:wrap;
benutzt
Dann würde ich dir empfehlen, die div von deinem Bild, Button, und Text nochmal in eine Weitere div zu packen. Dieser gibst du z.B. diese Eigenschaften:
/* Div wrapper für Bild-div, Text-div,Button-div */
div{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
dort musst du dann noch die beliebige größe bestimmen.
Von der Picture div würde ich position: fixed; entfernen, da sonst das Bild über die anderen Elemente überlappt
ich verstehe beide Punkte mehr oder weniger nicht... Wo genau soll flex-wrap:wrap stehen? Soll das einfach nur bei der Überschrift mit stehen? Also die Überschrift hab ich ja auch in einem div... Soll ich da das dann einfach hinzufügen?
Bei dem zweiten Punkt stoße ich leider auch auf Verzweiflung... Ich habe doch durch den Text in der div.hero schon den platz für noch eine div auf der horizontalen Ebene belegt? Oder gibt es eine Möglichkeit, wie ich die übereinander lappen kann? Wie gesagt bin noch Anfänger, sorry für die ganzen Fragen://
Ich glaube am Besten wäre es, wenn du auf Youtube gehen würdest und dort ein Tutorial schaust, wie man eine webseite mit html&css baut. Es würde hier einfach viel zu lange dauern, dir das zu erklären.
Viel Erfolg
Ich hab das ganze mal Ergänzt mit Code und die Stellen wie Text und links usw rausgenommen, da ich dies ungern teilen würde... Ist noch nicht viel aber wenigstens etwas für die erste Seite. Tipps und gut gemeinte Kritik nehme ich gerne entgegen ;P