So habe ich auf eine CSS-Formatierungsfrage gestoßen, die ich hoffe, dass ich etwas Hilfe bekommen kann. Im Allgemeinen habe ich meine Einrichtung funktioniert, mit der Position der Menüverschiebung basierend auf der Größe des Bildschirms, so dass es immer vertikal und horizontal zentriert ist, etc.Verwenden Sie CSS, um Elemente von der Überlappung basierend auf der Höhe zu halten
Allerdings habe ich auf ein Problem gestoßen Wenn Sie das Anzeigefenster zu klein machen, beginnen Elemente sich zu überlappen, was nicht erwünscht ist.
Hier ist eine Geige, um anzuzeigen, worüber ich spreche. Ich würde es vorziehen, dass die grüne Box Kraft alles anderes darunter, so dass es nicht mehr überlappt die roten (Alles im „buttonContainerBase“ div):
Hier ist der HTML-Div-Setup und relevante CSS:
#buttonContainerBase {
position: absolute;
left: 0px;
width: 100%;
height: 100%;
}
.hCenterDiv {
width: 370px;
margin-left: auto;
margin-right: auto;
}
.backgroundBoxDiv {
position: absolute;
top: 50%;
height: 244px;
margin-top: -112px;
margin-left: 0px;
width: 370px;
overflow: auto;
display: inline-block;
text-align: center;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
opacity: 0.95;
filter: alpha(opacity=95);
background: -moz-linear-gradient(top, #FFFFFF 45%, #F5F5F5 75%);
background: -webkit-gradient(linear, top, bottom, color-stop(45%, #FFFFFF), color-stop(75%, #F5F5F5));
background: linear-gradient(180deg, #FFFFFF 45%, #F5F5F5 75%);
box-shadow: 2px 2px 4px #244260;
}
.logoContainerDiv {
width: 344px;
height: 76px;
margin-top: 5px;
display: inline-block;
background-color: red;
}
.dividingLineDiv {
height: 2px;
width: 370px;
background-color: #335B84;
}
#myLogo {
position: absolute;
top: 5px;
left: 5px;
width: 257px;
height: 73px;
background-color: green;
}
#contentWrapper {
min-height: 300px;
}
.buttonContainerDiv {
/*padding: 5px;*/
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#studentLoginDiv {
margin-bottom: 10px;
}
.customButton {
padding: 0px;
width: 225px;
height: 34px;
border: solid 2px #FFFFFF;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border-style: outset;
background-color: #f5f5f5;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
cursor: pointer;
}
.customButton:hover {
border: solid 2px #F5F5F5;
border-style: inset;
background-color: #f2f2f2;
}
.customButton:active {
border: solid 4px #F5F5F5;
border-style: inset;
background-color: #D1D1D1;
}<div id="contentWrapper">
<div id="buttonContainerBase">
<div class="hCenterDiv">
<div class="backgroundBoxDiv">
<div class="elementContainerDiv">
<div class="logoContainerDiv"></div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructorLogin" type="button" value="Instructor Login" onclick="window.open('http://www.google.com');" />
</div>
<div class="buttonContainerDiv" id="studentLoginDiv">
<input class="customButton" id="studentLogin" type="button" value="Student Login" onclick="window.open('http://www.google.com/');" />
</div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructionalVids" type="button" value="Instructional Videos" onclick="window.open('https://www.youtube.com/');" />
</div>
</div>
</div>
</div>
</div>
<div id="myLogo"></div>
</div>Noch Art von neu in das CSS-Spiel, so entschuldige ich mich im Voraus, wenn Dinge flippige/umständlich aussehen.
Im gonna Ihre Frage nicht beantworten, aber wenn Sie auf das „CSS-Spiel“ neu sind, können Sie eine Menge lernen überspringen, wenn Sie Flexbox von Anfang an lernen. Dann könntest du viele Probleme vermeiden, vielleicht sogar diese. Ich empfahl http://flexboxfroggy.com/ Backend-Entwickler zu koppeln und sie genossen dieses Lernspiel. Ich hoffe, Sie werden diesen Rat hilfreich finden. – Pavelloz
Ich würde @Pavelloz nicht zustimmen müssen. Das Erlernen * aller * Aspekte von CSS erlaubt es Ihnen, Ihr eigenes CSS zu schreiben, aber auch Probleme mit CSS zu diagnostizieren und zu beheben, die andere Leute geschrieben haben. Um nicht zu sagen, dass Flexbox hier nicht die Lösung sein könnte, aber Ihnen zu empfehlen * viel zu lernen * scheint mir kein solider Rat zu sein. – mezmi
Ich werde zu einem gewissen Zeitpunkt in flexbox schauen, aber ich stimme mit enki darin überein, dass es einen Wert darin gibt, eine Lösung zu lernen, anstatt zu lernen, wie man das Problem umgehen kann. Ich habe dies nur in CSS getan, um mehr über CSS zu lernen, da es ein so einfaches Konzept ist. – nyghtrunner