Hallo community,
ich hab schon etweas an meiner Webseite rumgefummelt... ich hab sie auch mal hochgeladen unter: http://wiedemann.000webhostapp.com/
undzwar, sobald ein kleinerer Bildschirm oder man mit dem Handy auf die Seite geht, dann verschieben sich die Buttons? was muss ich machen um dies richtig anzupassen?
Das ist mein CSS code
Code
body {
padding:0;
margin:0;
background:white;
height: 100%;
}
header {
padding:0;
margin:0 auto;
width: 100%;
height: 300px;
background-image: url("bilder/header.png");
background-repeat: no-repeat;
}
header ul {
float:right;
margin-right: 150px;
margin:0;
padding:0;
}
header li {
list-style:none;
display:inline-block;
background:#ABC712;
transition: all 800ms;
padding:5px;
}
header ul li:hover{
background:white;
color:#ABC712;
text-shadow: white;
}
.menubar {
margin: 0 auto;
margin-top:-60px;
margin-right:150px;
width: auto;
height: 30px;
padding: 10px;
float:right;
color:white;
font-family:Verdana;
font-size:18pt;
}
a {
transition: all 500ms;
text-decoration: none;
color:white;
}
a:hover{
color:#ABC712;
}
.top{
margin: 0 auto;
width:40%;
left: 30%;
top:20%;
background:#ABC712;
}
.logo {
position: relative;
width: 198px;
height: 85px;
top: 15px;
left: 50px;
/*border: 1px solid red;*/
}
.logo:hover{
opacity: 0.7;
transition: all 300ms;
}
.menu {
width: 70%;
height: 115px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
background:#ABC712;
/*border: 1px solid red;*/
}
.text1{
margin: 0 auto;
background:#ABC712;
font-family:Verdana;
top:1%;
padding: 3px;
}MfG
Moritz
