Content-DIV soll Größe beim Fensterresize nicht ändern
ich programmiere gerade eine Website, wo auf der linken Seite (50%) ein Logo vorhanden sein soll und auf der rechten Seite (ebenfalls 50%) das inhaltsverzeichnis existiert.
Zunächst sah dies sehr gut aus, aber nach der Veränderung der Fenstergröße verschiebt sich der Inhalt der rechten Seite, und nicht der linken Seite mit dem Logo...
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
html, body {
width: 100%;
height: 100%;
background: black;
overflow: hidden;
}
/*---Full Website Container----*/
#main{
display:flex;
height:100%;
}
/*---Logo Container------------*/
#left{
flex:1;
display:flex;
height:100%;
align-items:center;
justify-content:center;
}
#left img{
width:100%;
max-height:100%;
}
/*---Content Container---------*/
#right{
flex:1;
display:flex;
flex-direction:column;
border:2px solid red;
align-items:center;
justify-content:top;
}
h1 {
text-align: left;
font-family: "Press Start 2P";
font-size: 4vw;
color: #FF6A00;
}
h2 {
text-align: left;
font-family: "Kelly Slab";
font-size: 3vw;
color: white;
}
/*---Links---------------------*/
a {
text-decoration: none;
color: white;
}
.zoomh2 {
padding: 0vw;
transition: transform 0.2s;
margin: 0vw auto;
}
.zoomh2:hover {
font-size: 133%;
cursor: pointer;
color: lime;
}
/*---Fade in from right--------*/
.animated {
animation-duration: 0.5s;
animation-fill-mode: both;
}
@keyframes fadeInRightfast {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animated:nth-child(1) {animation-delay: 0.0s; }
.animated:nth-child(2) {animation-delay: 0.2s; }
.animated:nth-child(3) {animation-delay: 0.4s; }
.animated:nth-child(4) {animation-delay: 0.6s; }
.animated:nth-child(5) {animation-delay: 0.8s; }
.animated:nth-child(6) {animation-delay: 1.0s; }
.animated:nth-child(7) {animation-delay: 1.2s; }
.animated:nth-child(8) {animation-delay: 1.4s; }
.animated:nth-child(9) {animation-delay: 1.6s; }
.animated:nth-child(10) {animation-delay: 1.8s; }
.animated:nth-child(11) {animation-delay: 2.0s; }
.animated:nth-child(12) {animation-delay: 2.2s; }
.animated:nth-child(13) {animation-delay: 2.4s; }
.animated:nth-child(14) {animation-delay: 2.6s; }
.animated:nth-child(15) {animation-delay: 2.8s; }
.animated:nth-child(16) {animation-delay: 3.0s; }
.animated:nth-child(17) {animation-delay: 3.2s; }
.animated:nth-child(18) {animation-delay: 3.4s; }
.animated:nth-child(19) {animation-delay: 3.6s; }
.animated:nth-child(20) {animation-delay: 3.8s; }
.animated:nth-child(21) {animation-delay: 4.0s; }
.animated:nth-child(22) {animation-delay: 4.2s; }
.animated:nth-child(23) {animation-delay: 4.4s; }
.animated:nth-child(24) {animation-delay: 4.6s; }
.animated:nth-child(25) {animation-delay: 4.8s; }
.animated:nth-child(26) {animation-delay: 5.0s; }
.animated:nth-child(27) {animation-delay: 5.2s; }
.animated:nth-child(28) {animation-delay: 5.4s; }
.animated:nth-child(29) {animation-delay: 5.6s; }
.animated:nth-child(30) {animation-delay: 5.8s; }
.animated:nth-child(31) {animation-delay: 6.0s; }
.animated:nth-child(32) {animation-delay: 6.2s; }
.animated:nth-child(33) {animation-delay: 6.4s; }
.animated:nth-child(34) {animation-delay: 6.6s; }
.animated:nth-child(35) {animation-delay: 6.8s; }
.animated:nth-child(36) {animation-delay: 7.0s; }
.fadeInRightfast {
fadeInRightfast;
animation-name: fadeInRightfast;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.fadeinlogo{
animation: fadein 2s;
}
</style>
<body>
<div id="main">
<div id="left">
<img alt="Logo" class="fadeinlogo nocopy" src="/image/Logo-not-original.jpg">
</div>
<div id="right">
<h1>Überschrift</h1>
<h2 class="animated fadeinrightfast"> <a class="zoomh2" href="#">Irgendwas</a> </h2>
<h2 class="animated fadeinrightfast"> <a class="zoomh2" href="#">Nochmal Irgendetwas</a> </h2>
<h2 class="animated fadeinrightfast"> <a class="zoomh2" href="#">Ein Drittes Wort</a> </h2>
<h2 class="animated fadeinrightfast"> <a class="zoomh2" href="#">etwas Wichtiges</a> </h2>
<h2 class="animated fadeinrightfast"> <a class="zoomh2" href="#">Nun aber das letzte</a> </h2>
</div>
</div>
</body>