Foros del Web » Creando para Internet » CSS »

centrar?

Estas en el tema de centrar? en el foro de CSS en Foros del Web. 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" ...
  #1 (permalink)  
Antiguo 27/12/2007, 14:26
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
centrar?

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?
  #2 (permalink)  
Antiguo 27/12/2007, 14:44
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Re: centrar?

- 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
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 27/12/2007, 15:28
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: centrar?

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 ^^

Última edición por hades87; 27/12/2007 a las 15:33
  #4 (permalink)  
Antiguo 27/12/2007, 17:17
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: centrar?

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.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #5 (permalink)  
Antiguo 27/12/2007, 17:29
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: centrar?

pues pruebo eso y no m da resultado :S, puede ser por el width?
  #6 (permalink)  
Antiguo 28/12/2007, 05:17
Avatar de Estefania76  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 25
Antigüedad: 10 años
Puntos: 0
Re: centrar?

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>
  #7 (permalink)  
Antiguo 28/12/2007, 06:13
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: centrar?

y con solo meter ese script ya me tendria que salir bien? muchas gracias ^^
  #8 (permalink)  
Antiguo 28/12/2007, 06:23
Avatar de Estefania76  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 25
Antigüedad: 10 años
Puntos: 0
Re: centrar?

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!!
  #9 (permalink)  
Antiguo 28/12/2007, 06:27
Avatar de Estefania76  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 25
Antigüedad: 10 años
Puntos: 0
Re: centrar?

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&egrave;</h2>
</span>

<span id="finalB">
<h1>Partida acabada</h1>
<h2 align="center">Vost&egrave; 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>
  #10 (permalink)  
Antiguo 28/12/2007, 07:17
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: centrar?

Pon el CSS que tienes o un link a tu página para que te podamos ayudar mejor.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...

Última edición por juaniquillo; 28/12/2007 a las 07:30
  #11 (permalink)  
Antiguo 02/01/2008, 08:28
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: centrar?

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

Última edición por hades87; 02/01/2008 a las 08:35
  #12 (permalink)  
Antiguo 02/01/2008, 20:25
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: centrar?

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?
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #13 (permalink)  
Antiguo 03/01/2008, 02:05
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: centrar?

ya da igual, al final la rediseñe con capas relativas.
  #14 (permalink)  
Antiguo 03/01/2008, 18:15
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: centrar?

pues que bueno que pudiste hacerlo. Yo creo que usar capas relativas en este caso es mejor.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #15 (permalink)  
Antiguo 03/01/2008, 18:22
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: centrar?

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

Entonces mi dilema es cuando uso relativas y cuando absolutas?
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:54.