| Schrijver |
Bericht |
flnitro
Forum Lid
5 posts |
# Geplaatst: 11 Mar 2010 17:47
Hallo,
Ik probeer en div in het midden van het scherm te krijgen.
De div moet 20% vanaf de bovenkant en 30 % vanaf de onderkant.
40% van rechts en 40% van links komen, maar ik krijg het niet voor mekaar.
Kan iemand mij helpen? Alvast bedankt
|
| |
|
Tiemmon
Forum Lid
277 posts |
# Geplaatst: 11 Mar 2010 17:50
css code
margin-top:20%;
margin-left:auto;
margin-right:auto;
zoiets ?!
|
flnitro
Forum Lid
5 posts |
# Geplaatst: 11 Mar 2010 17:57
Wel zoiets maar nu kleeft de onderkant van de div tegen de onderkant van de brouwser aan. de div moet ook 30% vanaf de onderkant.
Ik probeer dit ivm een achgtergrond afbeelding waar de div binnen een gedeelte van de afbeelding moet vallen.
De achtergrond afbeelding staat ook op 100% width en hight
|
Superkluns
Forum Lid
736 posts |
# Geplaatst: 11 Mar 2010 18:14 · Aangepast door: Superkluns
css code#div_id {
margin-top:20%;
margin-left:40%;
margin-right:40%;
margin-bottom:30%;
width:20%;
height:50%;
}
misschien dit?
EDIT: ow, w8 ff, bij alle percentages wordt uitgegaan van de 100%-breedte. Dus de margin-top/margin-bottom/height geven een foute waarde.
Dus dit gaat niet werken, maar hoe het wel moet, geen idee.
Javascript misschien?
|
flnitro
Forum Lid
5 posts |
# Geplaatst: 11 Mar 2010 18:22
Bedankt voor jullie reactie,
Hier onder even de code html en css
De achtergrond afbeelding krijgt nu ook een margin -top van 20
html code<style type="text/css">
<!--
body {
}
img.bg {
z-index: -9000;
width: 100%;
height: 100%;
position: fixed;
}
img.bg {
z-index: -9000;
width: 100%;
height: 100%;
position: fixed;
margin: 0px;
padding: 0px;
}
#groen {
background-color: #0F0;
margin-top:20%;
margin-left:40%;
margin-right:40%;
margin-bottom:30%;
width:20%;
height:50%;
}
-->
</style>
</head>
<body>
<img src="images/monitorSW-tafel.jpg" border="0" class="bg" />
<div id="groen">
<p>Hallo</p>
</div>
</body>
|
flnitro
Forum Lid
5 posts |
# Geplaatst: 11 Mar 2010 18:27
Met de volgende aanpassing is het achtergrond probleem verholpen.
css codeimg.bg {
z-index: -9000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
Nu is de div slechts 1 regel hoog, "hallo" , en verschijnt er wel een scrol bar.
|
paladin
Forum Lid
782 posts |
# Geplaatst: 11 Mar 2010 18:46
Hallo
20% van 0 is ? 0
2000% van 0 is ? 0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
*{padding:0;margin:0;}
html,body{height:100%;}
body{background:#ffff66;}
.bg{
background:#33ff33;
width: 100%;
height: 100%;
position: fixed;
}
#groen{
width:20%;
margin:0 auto;
background:#ff0066;
height:50%;
position:relative;
top:20%;
}
-->
</style>
</head>
<body>
<img src="images/monitorSW-tafel.jpg" border="0" class="bg" />
<div id="groen"><p>Hallo</p></div>
</body>
</html>
|
flnitro
Forum Lid
5 posts |
# Geplaatst: 11 Mar 2010 19:06
html,body{height:100%;}
Hiermee heb je van 0 100% gemaakt.
Weer wat geleerd! thx
Top, erg bedankt !
|
