How to divide the screen horizontally into 2 colours (50%/50%)
newbie
Posted: Thu, 2008-05-15 02:18
Hello,
I'm having a great problem trying to divide the screen horizontally into two halves.
Here's the link http://www.ambientarse.com.ar/
If anyone can give me any help it wil be much appreciated.
I leave the code below
Thanks
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ambientarse</title>
<link rel="Shortcut Icon" href="images/favicon.ico">
<style type="text/css">
body {
margin : 0; padding : 0;
background-color:#d7d8d8;
font-family:Arial, Helvetica, sans-serif;
font-size:small;}
#tierra {
margin:0 auto;
background:url(images/logo.png) no-repeat;
position:absolute;
left: 50%;
top: 50%;
width:326px;
height:279px;
margin-top: -139.5px;
margin-left: -163px;
z-index:1000;
}
#tierra p{
position:relative;
left:143px;
top:112px;
width:183px;
text-align:right;
color:#e0e3e4;
font-size:80%;
}
#tierra a{
display:block;
position:relative;
left: 240px;
top:108px;
text-decoration:none;
color:#e0e3e4;
font-size:130%;
}
img, #tierra, a { behavior: url(iepngfix.htc); }
#franja_marron{
position:relative;
top: 307px;
background:#212221;
height:460px;
}
</style>
</head>
<body>
<div id="tierra">
<p>Somos un grupo en plena formación, con el objetivo principal de desarrollar y promover el concepto de sustentabilidad tanto a nivel de la sociedad, como de la industria y las empresas, mediante la internalización del concepto de las 4Rs: Reducir, Reutilizar, Reciclar y Recuperar.</p>
<a style="border:none;" href="mailto:contacto@ambientarse.com.ar"><img style="border:none;" src="images/contactarse.png" height="16" width="83" /></a></div>
<div id="franja_marron"></div>
</body>
Guru
Posts: 2792
Joined: 2004-09-01
Location: MA, USA
just make a graphic 1px wide
Posted: Thu, 2008-05-15 03:21
just make a graphic 1px wide by something like 1200px tall (or even taller to accommodate extra large screens) containing your two colors. Place the graphic as the background image on the body, center it vertically and repeat it horizontally.
newbie
Posts: 5
Joined: 2008-05-15
many thanks
Posted: Thu, 2008-05-15 04:37
it works well in iexplorer and safari but not in Firefox, its doesn't center it.
here's the link: http://www.ambientarse.com.ar/
This is the code I put in the body:
background:url(images/fondo.gif) repeat-x center;thanks again
Guru
Posts: 2792
Joined: 2004-09-01
Location: MA, USA
add this: html, body
Posted: Sat, 2008-05-17 13:39
add this:
html, body {height: 100%;}newbie
Posts: 5
Joined: 2008-05-15
thanks a lot
Posted: Sat, 2008-05-17 16:58
works flawlessly