hvordan får jeg mit design til at passe til både store og små skærme?
hvordan får jeg mit design til at passe til både store og små skærmebody {
color: #000000;
font-family: Lucida Sans Unicode,sana-serif;
font-size: 14px;
}
* {
margin: 0;
padding: 0;
}
h2 {
color: #C7A317;
float: left;
font-size: 1.2em;
letter-spacing: 5px;
margin-bottom: 15px;
text-align: center;
text-decoration: underline;
text-shadow: 2px 2px 4px #000000;
width: 100%;
}
h3 {
color: #B20405;
font-size: 1.1em;
padding: 3px;
}
h4 {
color: #C7A317;
float: left;
font-size: 1.2em;
letter-spacing: 5px;
margin-bottom: 15px;
text-align: center;
text-decoration: none;
text-shadow: 2px 2px 4px #000000;
width: 100%;
}
.lol:link {
color: #B20405;
text-decoration: none;
transition: all 1s ease-in-out 0s;
}
.menu:visited {
color: #C7A317;
}
.menu:hover {
color: white;
text-decoration: none;
}
p {
float: left;
margin-bottom: 15px;
text-decoration: none;
width: 100%;
}
p img {
border: 2px solid #B20405;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 5px #000000;
padding: 3px;
}
#contain {
border-radius: 10px 10px 10px 10px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
position: relative;
width: 900px;
}
#contain1 {
background-color: blue;
border: 5px solid #C7A317;
border-radius: 10px 10px 10px 10px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
min-height: 2000px;
opacity: 0.6;
position: relative;
width: 900px;
}
#billede {
float: left;
height: 200px;
margin-left: 20px;
margin-top: 10px;
width: 219px;
}
#title {
float: left;
height: 130px;
margin-left: -5px;
margin-top: 30px;
width: 660px;
}
#menu_top {
border-top: 2px solid #AF0F01;
clear: both;
float: left;
width: 100%;
}
.menu {
color: #B20405;
float: left;
font-size: 1.1em;
padding: 15px;
text-decoration: none;
text-shadow: 2px 2px 4px #000001;
transition: all 1s ease-in-out 0s;
}
#left {
float: left;
margin: 0 40px 15px 15px;
width: 620px;
}
.venstre_under {
float: left;
height: auto;
margin-bottom: 15px;
margin-left: -384px;
margin-top: 100px;
text-align: center;
text-decoration: none;
width: 2000px;
}
.box421 {
float: left;
margin-bottom: 15px;
margin-left: 50px;
margin-top: 100px;
text-align: center;
text-decoration: none;
}
#right {
float: left;
margin-left: 600px;
margin-top: -1150px;
width: 250px;
}
.right {
background-color: rgba(221, 182, 151, 0.5);
border: 5px solid rgba(221, 182, 151, 0.95);
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 5px #000000;
float: left;
font-size: 0.8em;
margin-bottom: 10px;
width: 100%;
}
#menu1 {
border-top: 2px solid #C7A317;
}
#right {
float: left;
margin-left: 600px;
margin-top: -1150px;
width: 250px;
}
.right1 {
background-color: rgba(221, 182, 151, 0.5);
border: 5px solid rgba(221, 182, 151, 0.95);
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 5px #000000;
float: left;
font-size: 0.8em;
margin-bottom: 10px;
width: 100%;
}
.sendnu {
border: 2px solid #0000CD;
border-radius: 10px 10px 10px 10px;
float: right;
font-size: 20px;
height: 40px;
margin-bottom: 50px;
margin-right: 70px;
padding-top: 10px;
text-align: center;
width: 100px;
}
#right2 {
background-color: rgba(221, 182, 151, 0.5);
border: 5px solid rgba(221, 182, 151, 0.95);
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 5px #000000;
float: left;
font-size: 0.8em;
margin-bottom: 10px;
width: 100%;
}
#menu {
clear: left;
}
#footer {
background-color: transparent;
clear: both;
height: 20px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
width: 880px;
}
#title p {
color: #C7A317;
font-family: 'Qwigley',cursive;
font-size: 100px;
}
#title1 p {
color: #C7A317;
font-family: 'Qwigley',cursive;
font-size: 70px;
margin-top: -100px;
text-align: center;
}
.sletLink {
border: 2px solid #C7A317;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 2px #000000;
float: right;
font-size: 20px;
height: 40px;
margin-bottom: 50px;
margin-right: 70px;
margin-top: 47px;
padding-top: 10px;
text-align: center;
width: 100px;
}
.redigerLink {
border: 2px solid #C7A317;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 2px #000000;
float: right;
font-size: 17px;
height: 21px;
margin-bottom: 50px;
margin-right: 880px;
margin-top: -874px;
padding-top: 3px;
text-align: center;
width: 94px;
}
.redigerLink22 {
border: 2px solid #C7A317;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 2px #000000;
float: right;
font-size: 20px;
height: 40px;
margin-bottom: 50px;
margin-right: 68px;
margin-top: 27px;
padding-top: 10px;
text-align: center;
width: 100px;
}
.redigerLink1 {
height: 40px;
margin-left: -1133px;
margin-top: 178px;
text-align: center;
width: 79px;
}
a:link {
color: #C7A317;
font-weight: bold;
text-decoration: none;
}
.menu {
color: #C7A317;
}
.broder {
color: #C7A317;
float: left;
height: auto;
margin-left: -190px;
margin-top: -20px;
text-decoration: none;
}
.broder1 {
color: green;
float: left;
height: auto;
margin-left: 10px;
margin-top: 10px;
text-decoration: none;
}
.broder3 {
color: #C7A317;
float: left;
height: auto;
margin-left: -190px;
margin-top: -10px;
text-decoration: none;
}
.broder4 {
color: #C7A317;
float: left;
height: auto;
margin-left: -190px;
margin-top: 10px;
text-decoration: none;
}
.broder77 {
color: #C7A317;
float: left;
height: auto;
margin-left: -171px;
margin-top: -19px;
text-decoration: none;
}
.contentBox22 {
color: black;
float: left;
margin-left: -80px;
margin-top: -40px;
text-decoration: none;
}
.jobber123 {
color: black;
float: left;
margin-left: 76px;
margin-top: -51px;
text-decoration: none;
}
.overskrift22 {
color: black;
float: left;
margin-left: -80px;
margin-top: -71px;
text-decoration: none;
}
.forfat22 {
color: black;
float: left;
margin-left: -79px;
margin-top: -5px;
text-decoration: none;
}
.job123 {
color: black;
float: left;
margin-left: -237px;
margin-top: -90px;
text-decoration: none;
}
.jobber123 {
color: #C7A317;
float: left;
font-size: 20px;
margin-left: -142px;
margin-top: -141px;
text-decoration: none;
}
.jobber1234 {
color: #C7A317;
float: left;
margin-left: -150px;
margin-top: 22px;
text-decoration: none;
}
.jobber12345 {
color: #C7A317;
float: left;
margin-left: -246px;
margin-top: 22px;
text-decoration: none;
}
.chef {
color: #C7A317;
float: left;
margin-left: -142px;
margin-top: -141px;
text-decoration: none;
}
.contentBox p {
font-size: 11px;
margin-left: -811px;
margin-top: -868px;
text-decoration: none;
}
.contentBox1 {
color: #C7A317;
margin-left: -74px;
padding-top: 30px;
text-decoration: none;
}
.forfat {
color: #C7A317;
float: left;
height: auto;
margin-left: 42px;
margin-top: -3px;
text-align: center;
text-decoration: none;
width: auto;
}
.forfat1 {
color: #C7A317;
float: left;
height: auto;
margin-left: 50px;
margin-top: -10px;
text-align: center;
text-decoration: none;
width: auto;
}
p {
text-decoration: none;
}
.headerBox {
color: #C7A317;
margin-left: 9px;
margin-top: 70px;
min-height: 10px;
text-align: center;
text-decoration: none;
}
.headerBox2 {
color: #C7A317;
margin-left: 9px;
margin-top: 70px;
min-height: 10px;
text-align: center;
text-decoration: none;
}
.headerBox1 {
color: #C7A317;
float: left;
margin-left: 108px;
margin-top: -18px;
min-height: 10px;
text-align: center;
text-decoration: none;
}
.bruger {
color: #C7A317;
float: left;
margin-left: -330px;
margin-top: 6px;
min-height: 10px;
text-align: center;
text-decoration: none;
}
.user {
color: #C7A317;
float: left;
margin-left: -151px;
margin-top: 3px;
min-height: 10px;
text-align: center;
text-decoration: none;
}
.pass {
color: #C7A317;
float: left;
margin-left: -331px;
margin-top: 26px;
min-height: 10px;
text-align: center;
text-decoration: none;
}
.kodeord {
color: #C7A317;
float: left;
margin-left: -151px;
margin-top: 26px;
min-height: 10px;
text-align: center;
text-decoration: none;
}
.role {
color: #C7A317;
float: left;
margin-left: -333px;
margin-top: 47px;
min-height: 10px;
text-align: center;
text-decoration: none;
}
.rolle {
color: #C7A317;
float: left;
margin-left: -151px;
margin-top: 47px;
min-height: 10px;
text-align: center;
text-decoration: none;
}
a:link {
color: #C7A317;
}
a:visited {
color: #C7A317;
}
a:hover {
color: #C7A317;
}
a:active {
color: #C7A317;
}
.edith {
margin-left: 200px;
text-align: center;
}
.valgform {
margin-left: 80px;
margin-top: 20px;
}
.title {
color: #C7A317;
float: left;
margin-left: -290px;
margin-top: -90px;
}
.title50 {
color: #C7A317;
float: left;
margin-left: -334px;
margin-top: -90px;
}
.job {
color: #C7A317;
float: left;
height: 10px;
margin-left: -255px;
margin-top: -37px;
width: 50px;
}
.job333 {
color: #C7A317;
float: left;
height: 18px;
margin-left: -324px;
margin-top: -41px;
width: 50px;
}
.job1 {
color: #C7A317;
float: left;
height: 10px;
margin-left: -244px;
margin-top: -35px;
width: 50px;
}
.jobber22 {
color: #C7A317;
float: left;
height: 10px;
margin-left: -329px;
margin-top: -25px;
width: 50px;
}
.job22 {
color: #C7A317;
float: left;
height: 10px;
margin-left: -325px;
margin-top: 15px;
width: 50px;
}
.fuldenavn {
color: #C7A317;
margin-left: 80px;
margin-top: 20px;
}
.brugernavn {
color: #C7A317;
margin-left: 73px;
margin-top: 20px;
}
.password {
color: #C7A317;
margin-left: 80px;
margin-top: 28px;
}
.password1 {
margin-left: 10px;
}
.ret {
color: #C7A317;
margin-left: 80px;
margin-top: 20px;
}
.test {
color: black;
margin-left: -42px;
margin-top: 9px;
}
.rolle12 {
color: #C7A317;
margin-left: 5px;
margin-top: 9px;
}
.username1 {
color: black;
margin-left: 2px;
margin-top: 6px;
}
.butler1 p {
font-size: 11px;
margin-left: -96px;
margin-top: -868px;
text-decoration: none;
}
.butler2 p {
font-size: 11px;
margin-left: 253px;
margin-top: -868px;
text-decoration: none;
}
.timer p {
font-size: 11px;
margin-left: 599px;
margin-top: -868px;
text-decoration: none;
}
.grad p {
font-size: 11px;
margin-left: -711px;
margin-top: -865px;
text-decoration: none;
}
.aktiv p {
font-size: 11px;
margin-left: -580px;
margin-top: -869px;
text-decoration: none;
}
.ansvar p {
font-size: 11px;
margin-left: -337px;
margin-top: -868px;
text-decoration: none;
}
.container p {
margin-left: -23px;
width: 300px;
}
.edith {
margin-left: 1000px;
}
