centrar?

hades87 · #1 (**permalink**) 27/12/2007, 14:26

tengo el siguiente codigo

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>prueba garmande</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="cabecera1"><img src="web_03.jpg" width="180" height="105"></div>
<div class="cabecera2"><img src="banner.gif" width="667" height="65"></div>
<div class="menu"><img src="21areas.jpg" height="39" width="112"></div>
<div class="lateral1"><img src="web_11.jpg"  width="181" height="65"></div>
<div class="lateral2"><img src="webgarmande_12.jpg" width="181" height="124"></div>
<div class="lateral3"></div>
<div class="pie Estilo1">
Garmande
</div>
<div class="centro">eoeoe</div>
</body>
</html>

lo que quiero es que las 7 capas me queden siemrpe centradas en el navegador, alguna diea de como ahcerlo?

habia pensado con emter un contenedor y aplicarle el margin: auto; pero no ha funcionado, alguna idea?

webosiris · #2 (**permalink**) 27/12/2007, 14:44

- primero que nada agregale a tu html un doctype, que sino el navegador puede interpretar cualquier cosa
- no se que CSS le estas aplicando a esas capas, pero si estan posicionadas relativamente, margin:auto funciona

hades87 · #3 (**permalink**) 27/12/2007, 15:28

las capas son absolutas, alguna solucion?

y le puse este doctype:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

no se si sera el correcto o que, pero es el que viene por defecto en dreamweaver.

Gracias por todo ^^

juaniquillo · #4 (**permalink**) 27/12/2007, 17:17

Puedes meter todas los div en un div contenedor, le das el tamaño que quieras, y pones ese div en position:relative y margin:0 auto. Aldo así:

CSS

Código HTML:

.container{
  width: 780px;
  position:relative;
  margin:0 auto
}

XHTML

Código HTML:

<div class="container">

<div class="cabecera1"><img src="web_03.jpg" width="180" height="105"></div>
<div class="cabecera2"><img src="banner.gif" width="667" height="65"></div>
<div class="menu"><img src="21areas.jpg" height="39" width="112"></div>
<div class="lateral1"><img src="web_11.jpg"  width="181" height="65"></div>
<div class="lateral2"><img src="webgarmande_12.jpg" width="181" height="124"></div>
<div class="lateral3"></div>
<div class="pie Estilo1">
Garmande
</div>
<div class="centro">eoeoe</div>

<div>

De esta forma tus divs quedarán centrados con relación al container.

hades87 · #5 (**permalink**) 27/12/2007, 17:29

pues pruebo eso y no m da resultado :S, puede ser por el width?

Estefania76 · #6 (**permalink**) 28/12/2007, 05:17

Hola,

Aquí te paso un script que te centra una capa como, cuando haces que en una página te salga un alert, éste siempre sale centrado, sea el navegador que sea, pues con esta función, la capa te sale como si de un alert se tratara, te sale centrada.

<script language="JavaScript">
var ie = (document.all)?true:false;
var ns6 = ((document.getElementById)?true:false) && !ie;

if(ie)//si es internet explorer el ancho y el alto se indican de esta
manera
{
var ancho=document.body.clientWidth/2;
var alto=document.body.clientHeight/2;
}
if (ns6)//Si es Firefox el alto y el ancho se indican de esta manera
{
var ancho=window.innerWidth/2;
var alto=window.innerHeight/2;
}

function capaON(pNomCapa)//Funcion que muestra la capa por pantalla al apretar qualquier boton del 1 al 4
{
document.getElementById(pNomCapa).style.visibility = 'visible';
}

function capaOFF(pNomCapa)//funcion que hace que se vaya la capa al apretar el boton de tancar
{
document.getElementById(pNomCapa).style.visibility = 'hidden';
}

function centraCapes(pNomCapa)
{
var anchocapa=document.getElementById(pNomCapa).offset Width/2;//guardo en una variable el ancho de la capa /2
var altocapa=document.getElementById(pNomCapa).offsetH eight/2;//guardo en una variable el alto de la capa /2

var result=ancho-anchocapa;//distancia entre el left y la capa
var resultado=alto-altocapa;//distancia entre el top y la capa
capaON(pNomCapa);
document.getElementById(pNomCapa).style.left = result;//la capa tiene como posición result
document.getElementById(pNomCapa).style.top = resultado;//la capa tiene como posición resultado
}

</script>

hades87 · #7 (**permalink**) 28/12/2007, 06:13

y con solo meter ese script ya me tendria que salir bien? muchas gracias ^^

Estefania76 · #8 (**permalink**) 28/12/2007, 06:23

Bueno.....depende del resto del código que tu tengas...

por ejemplo si tienes una capa y apretando un boton quieres que te salga la capa centrada, como los alerts en el boton tendrías que poner:

<input type='button' value='Capa 1' onclick="capaON('finalJ');centraCapes('finalJ')">

Esto es un ejemplo, yo he utilizado este escript para sacar una capa mediante un boton y que ésta me salga centrada...., tu tendrás que adaptarlo a lo que tu tengas.

Saludos!!

Estefania76 · #9 (**permalink**) 28/12/2007, 06:27

Te lo paso todo entero...para que lo veas... es todo el html, lo ejecutas y ves como funciona.

<html>
<head>
<title>CentaCapes</title>

<style type="text/css">
#inici{position: absolute; visibility:hidden; left:400px; top:250px; z-index:3;
background-color:#ff9900; border-width:4; border-style:ridge; border-color:#c0c0c0;
padding:10}
#finalB{position: absolute; visibility:hidden; left:700px; top:200px; z-index:3;
background-color:#ff9900; border-width:4; border-style:ridge; border-color:#c0c0c0;
padding:10}
#apuesta{position: absolute; visibility:hidden; left:120px; top:120px; z-index:3;
background-color:#ff9900; border-width:4; border-style:ridge; border-color:#c0c0c0;
padding:10}
#finalJ {position: absolute; visibility:hidden; left:10px; top:300px; z-index:3;
background-color:#ff9900; border-width:4; border-style:ridge; border-color:#c0c0c0;
padding:10}
</style>

<script language="JavaScript">
var ie = (document.all)?true:false;
var ns6 = ((document.getElementById)?true:false) && !ie;

if(ie)//si es internet explorer el ancho y el alto se indican de esta manera
{
var ancho=document.body.clientWidth/2;
var alto=document.body.clientHeight/2;
}
if (ns6)//Si es Firefox el alto y el ancho se indican de esta manera
{
var ancho=window.innerWidth/2;
var alto=window.innerHeight/2;
}

function capaON(pNomCapa)//Funcion que muestra la capa por pantalla al apretar qualquier boton del 1 al 4
{
document.getElementById(pNomCapa).style.visibility = 'visible';
}

function capaOFF(pNomCapa)//funcion que hace que se vaya la capa al apretar el boton de tancar
{
document.getElementById(pNomCapa).style.visibility = 'hidden';
}

function centraCapes(pNomCapa)
{
var anchocapa=document.getElementById(pNomCapa).offset Width/2;//guardo en una variable el ancho de la capa /2
var altocapa=document.getElementById(pNomCapa).offsetH eight/2;//guardo en una variable el alto de la capa /2
//alert("width : " + anchocapa + " px\nheight : " + altocapa + " px")

var result=ancho-anchocapa;//distancia entre el left y la capa
var resultado=alto-altocapa;//distancia entre el top y la capa
capaON(pNomCapa);
document.getElementById(pNomCapa).style.left = result;//la capa tiene como posición result
document.getElementById(pNomCapa).style.top = resultado;//la capa tiene como posición resultado
}

</script>
</head>

<body bgcolor="#ffffcc">
<form>

<span id="finalJ">
<h1>Partida finalitzada</h1>
<h2 align="center">Perd vostè</h2>
</span>

<span id="finalB">
<h1>Partida acabada</h1>
<h2 align="center">Vostè ha guanyat</h2>

</span>

<span id="inici">
<table cellspacing="5" cellpadding="0">
<tr>
<td colspan="2"><B>Amb quant diners desitges<br>començar la partida</B></td>
</tr>
<tr>
<td align="center"><input type="text" maxlength="6" size="6" name="entrada"></td>

<td align="center"><input type="button" value="Ok" onclick="recollirDiners(this.form)"></td>
</tr>
</table>
</span>

<span id="apuesta">
<table cellspacing="5" cellpadding="0">
<tr>
<td colspan="3" align="right"><b>Quantitat:</b></td>
<td colspan="3"><input type="text" maxlength="6" size="6" name="quant"></td>

</tr>
<tr>
<th colspan="6">Aposta per:</th>
</tr>
<tr>
<td><input type="radio" value="0" name="qcranc"></td><td><img src="images/cranc0.gif"></td>
<td><input type="radio" value="1" name="qcranc"></td><td><img src="images/cranc1.gif"></td>
<td><input type="radio" value="2" name="qcranc"></td><td><img src="images/cranc2.gif"></td>

</tr>
<tr>
<td><input type="radio" value="3" name="qcranc"></td><td><img src="images/cranc3.gif"></td>
<td><input type="radio" value="4" name="qcranc"></td><td><img src="images/cranc4.gif"></td>
<td colspan="2" align="right"><input type="button" value="Ok" onclick="recollirApuesta(this.form)"></td>

</tr>

</table>
</span>

<table cellspacing="10" cellpadding="10" align="center">

<tr>
<td><input type='button' value='Capa 1' onclick="capaON('finalJ');centraCapes('finalJ')"></td>
<td><input type='button' value='Capa 2' onclick="capaON('finalB');centraCapes('finalB')"></td>
</tr>
<tr>
<td><input type='button' value='Capa 3' onclick="capaON('inici');centraCapes('inici')"></td>
<td><input type='button' value='Capa 4' onclick="capaON('apuesta');centraCapes('apuesta')" ></td>
<td><input type='button' value='Centrar Capa' onclick="centraCapes('apuesta')"></td>
</tr>
<tr>

<td colspan="2"><input type='button' value='Tancar' onclick="capaOFF('finalJ');capaOFF('finalB');capaO FF('inici');capaOFF('apuesta')"></td>
</tr>
</table>

</form>
</body>
</html>

juaniquillo · #10 (**permalink**) 28/12/2007, 07:17

Pon el CSS que tienes o un link a tu página para que te podamos ayudar mejor.

hades87 · #11 (**permalink**) 02/01/2008, 08:28

Código:

body{
background: #FFCC00;
}

.cabecera1{
    position: absolute;
    z-index: 1;
    left: 249px;
    top: 0px;
    width: 180px;
    height: 105px;
    border: 1px solid #FF6600;
}

.cabecera2{
    position: absolute;
    z-index: 1;
    left: 431px;
    top: 0px;
    width: 667px;
    height: 65px;
    border: 1px solid #000000;
}

.menu{
    position: absolute;
    z-index: 1;
    left: 431px;
    top: 66px;
    width: 667px;
    height: 40px;
    border: 1px solid #000000;
}

.lateral1{
    position: absolute;
    z-index: 1;
    left: 249px;
    top: 107px;
    width: 181px;;
    height: 65px;
    border: 1px solid #000000;
}

.lateral2{
    position: absolute;
    z-index: 1;
    left: 249px;
    top: 173px;
    width: 181px;;
    height: 124px;
    border: 1px solid #000000;
}

.lateral3{
    position: absolute;
    z-index: 1;
    left: 249px;
    top: 299px;
    width: 183px;;
    height: 400px;
    background: #FF6600;
}

.pie{
    position: absolute;
    z-index: 1;
    left: 249px;
    top: 699px;
    width: 851px;;
    height: 70px;
    background: #FF6600;
    text-align: left;
    font-family:"Comic Sans MS";
}

.centro{
    position: absolute;
    z-index: 1;
    left: 431px;
    top: 107px;
    width: 647px;
    height: 565px;
    border: 1px solid #000000;
    background: #FF6600;
    padding-top: 25px;
    padding-left: 20px;
}

.container{
  width: 2500px;
  position: relative;
  margin: auto;
}

este es el codigo del css.

la funcion de javascrip no la entiendo :S

juaniquillo · #12 (**permalink**) 02/01/2008, 20:25

No entiendo, quieres que te quede centrado todo pero das margen a la izquierda a todos los divs. ¿Primero que nada, de que ancho lo quieres todo, osea, el layout completo?

hades87 · #13 (**permalink**) 03/01/2008, 02:05

ya da igual, al final la rediseñe con capas relativas.

juaniquillo · #14 (**permalink**) 03/01/2008, 18:15

pues que bueno que pudiste hacerlo. Yo creo que usar capas relativas en este caso es mejor.

hades87 · #15 (**permalink**) 03/01/2008, 18:22

si, por que absolutas como estableces una distancia ya predeterminada, es mas complejo.

Entonces mi dilema es cuando uso relativas y cuando absolutas?