Heisann!
Problemet er som følger: Jeg prøver å få en boks til å bli sentrert i midten av siden, noe som den gjør hvis jeg skriver margin: 25% auto; (prøvd alle mulige varianter, 0px auto er også prøvd) Problemet er at bodyen (aka det jeg har kalt entire_body men har også prøvd rett på body) blir for stor for vinduet mitt og det er derfor ut som om den er for langt nede og når jeg setter den til 0px auto så blir bodyen like stor som høyden til boksen.
Hvordan får jeg det slik at vinduet på browseren min ikke blir mer enn 100%?
css:
Det jeg spør om egentlig er vel hvordan man får bodyen (aka entire_body) til å være 100% slik at jeg kan sentrere boksen min!
Hvis noen kunne ha hjulpet meg for å få til dette her så hadde jeg vært evig takknemlig etter å ha brukt 4 timer for å prøve å løse dette uten hell!
-kim
Gjorde om litt, men fikk ikke et resultat (puttet margin ogsånt i body)
[code]
body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
#entire_body {
border: 1px solid green;
display: flex;
justify-content:center;
align-items:center;
flex-flow:row wrap;
}
#start_button {
flex-initial;
height: 50px;
width: 200px;
border-radius: 20px;
box-shadow:rgba(110,110,110,0.7) 3px 3px 3px;
text-align: center;
opacity: 0.85;
padding:2%;
margin: 25% auto;
background: red;
}
#start_button_p {
text-align:center;
}
[/body]
Kunne likså godt ta med et bilde:
ojsann, der failet jeg litt og kan ikke redigere^^ srry
bilde: http://i44.tinypic.com/jijm0h.png
Problemet er som følger: Jeg prøver å få en boks til å bli sentrert i midten av siden, noe som den gjør hvis jeg skriver margin: 25% auto; (prøvd alle mulige varianter, 0px auto er også prøvd) Problemet er at bodyen (aka det jeg har kalt entire_body men har også prøvd rett på body) blir for stor for vinduet mitt og det er derfor ut som om den er for langt nede og når jeg setter den til 0px auto så blir bodyen like stor som høyden til boksen.
Hvordan får jeg det slik at vinduet på browseren min ikke blir mer enn 100%?
Kode
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tha Site</title>
<link rel="stylesheet" href="ThaSite.css" />
</head>
<body>
<div id="entire_body">
<div id="start_button">
<p id="start_button_p">Please, do not click this button!</p>
</div>
</div>
</body>
</html>
Kode
#entire_body {
padding:0px;
margin:0px;
width:100%;
height:100%;
border: 1px solid green;
display: flex;
justify-content:center;
align-items:center;
flex-flow:row wrap;
}
#start_button {
flex-initial;
height: 50px;
width: 200px;
border-radius: 20px;
box-shadow:rgba(110,110,110,0.7) 3px 3px 3px;
text-align: center;
opacity: 0.85;
padding:2%;
margin: 25% auto;
background: red;
}
#start_button_p {
text-align:center;
}
Hvis noen kunne ha hjulpet meg for å få til dette her så hadde jeg vært evig takknemlig etter å ha brukt 4 timer for å prøve å løse dette uten hell!
-kim
Gjorde om litt, men fikk ikke et resultat (puttet margin ogsånt i body)
[code]
body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
#entire_body {
border: 1px solid green;
display: flex;
justify-content:center;
align-items:center;
flex-flow:row wrap;
}
#start_button {
flex-initial;
height: 50px;
width: 200px;
border-radius: 20px;
box-shadow:rgba(110,110,110,0.7) 3px 3px 3px;
text-align: center;
opacity: 0.85;
padding:2%;
margin: 25% auto;
background: red;
}
#start_button_p {
text-align:center;
}
[/body]
Kunne likså godt ta med et bilde:
ojsann, der failet jeg litt og kan ikke redigere^^ srry
bilde: http://i44.tinypic.com/jijm0h.png
