Hallo liebe Comunity,
bin neu hier und hätte eine Frage zu folgendem Problem.
Ich muss eine Webseite bis zum Ende des Semesters abgeben und habe schon grobe Umrisse der Seite.
Ich hatte dass alles am Pc mit einem großen Bildschirm gemacht und bemerkte dann am Laptop, das die
Seite sich nicht an die Fenstergröße anpasst.
Wie bekomme ich das jetzt hin, damit auch alle meine Inhalte (Divs etc) sich mit skalieren.
Das mit dem Hintergrund habe ich hinbekommen, jedoch bleiben alle meine Boxen in gleicher Größe und verschieben sich auch nicht mit.
Ich poste einfach mal meinen kompletten CSS Code.
Würde mich über eine Antwort sehr freuen.
P.S.
Bin nicht all zulange am Codieren, also bitte verständlich für einen Laien erklären haha.
[CODE]#backg {
background-image: url(Bild3.jpg);
background-repeat: no-repeat;
position: relative;
width: 100%;
height: 100%;
}
#zwei {
width: 250px;
height: 290px;
margin-left: 415px;
margin-top: 190px;
position: fixed;
font-family: Helvetica;
color: white;
font-size: 25px;
width: 250px;
height: 290px;
margin-left: 415px;
margin-top: 190px;
}
#zwei:hover{
background-image: url(gem%C3%A4lde.jpg);
position: absolute;
text-shadow: black 0.1em 0.1em 0.2em;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: solid 4px pink;
}
li {
list-style: none;
display: inline;
}
.boxgroesse {
width: 100%;
height: 100%;
opacity: 0.9;
position: fixed;
margin-top: -9px;
margin-left: -8px;
background-color: black;
}
/* Hover Effekt */
@-webkit-keyframes hvr-bob {
0% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
50% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@keyframes hvr-bob {
0% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
50% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@-webkit-keyframes hvr-bob-float {
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@keyframes hvr-bob-float {
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
.hvr-bob {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
-webkit-animation-name: hvr-bob-float, hvr-bob;
animation-name: hvr-bob-float, hvr-bob;
-webkit-animation-duration: .3s, 1.5s;
animation-duration: .3s, 1.5s;
-webkit-animation-delay: 0s, .3s;
animation-delay: 0s, .3s;
-webkit-animation-timing-function: ease-out, ease-in-out;
animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: normal, alternate;
animation-direction: normal, alternate;
}
#drei {
width: 240px;
height: 280px;
margin-left: 1220px;
margin-top: 528px;
position: absolute;
color: white;
}
#drei:hover {
background-image: url(tumblr2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
border: solid 2px pink;
}
#bar1{
width: 300px;
height: 30px;
border-bottom: solid 2px;
margin-left: -50px;
font-size: 15px;
}
#bar2{
width: 300px;
height: 30px;
margin-left: -50px;
font-size: 15px;
border-bottom: solid 2px;
text-shadow: black 0.1em 0.1em 0.2em;
font-family: Futura W01 Light;
}
#vier {
width: 240px;
height: 180px;
margin-left: 1227px;
margin-top: 318px;
position: absolute;
color: white;
}
#vier:hover {
background-image: url(tumblr3.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
border: solid 2px pink;
}
#bar3{
width: 300px;
height: 30px;
margin-left: -50px;
font-size: 15px;
border-bottom: solid 2px;
text-shadow: black 0.1em 0.1em 0.2em;
font-family: Futura W01 Light;
}
#intro1{
background-image: url(intro.jpg);
position: fixed;
background-repeat: no-repeat;
z-index: 0;
}
#trans1 {
height: 994px;
width: 1920px;
position: absolute;
background-color: black;
opacity: 0.9;
margin-top: -7px;
margin-left: -9px;
z-index: 1;
}
.blur{
-webkit-filter: blur(4px);
filter: blur(10px);
}
#introbox{
width: 80px;
height: 50px;
margin-left: 850px;
margin-top: 300px;
position: absolute;
font-family: ;
color: white;
z-index: 3;
text-align: center;
padding-top: 20px;
border: solid 2px;
}
.hvr-grow {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
[/CODE]
