Comunidad de diseño web y desarrollo en internet online

problemas con css

Citar            
MensajeEscrito el 14 Nov 2006 01:25 pm
bueno, he seguido los consejos que me han dado aqui en cristallab, y estoy aprendiendo CSS.
Revisando como maneja dreamweaver maneja el css, y haciendo css a mano, llegue a este codigo de prueba, deberia colocar un DIV centrado en la pantalla.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body{
text-align:center;
margin:0px;
}

#Layer1 {
position:relative;
left:0px;
top:0px;
width:772px;
height:289px;
z-index:1;
border:1px solid #0000FF;
text-align:left;
}
-->
</style>
</head>

<body>
<div id="Layer1">hola, como estas? </div>
</body>
</html>


Sin embargo en navegador maligno de mocosoft se ve bien, osea centrado, pero en firefox solo se ve hacia la izquierda. :crap:

Por leac3

46 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Nov 2006 02:09 pm
Prueba agregándole esto:

Código :

margin: auto;

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

 

firefox
Citar            
MensajeEscrito el 14 Nov 2006 03:52 pm
nada, sigue igual.

Por leac3

46 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Nov 2006 04:33 pm
Para centrado horizontal solamente:

Código :

...
<head>
<style type="text/css">
<!--
body{
text-align:center;
margin:0px;
}

#Layer1 {
width:772px;
height:289px;
z-index:1;
border:1px solid #0000FF;
text-align:left;
margin:auto;
}
-->
</style>
</head>

<body>
<div id="Layer1">hola, como estas? </div>
</body>
</html>

Para centrar horizontal y verticalmente (luego es dificil colocar otros elementos alrededor)

Código :

...
<head>
<style type="text/css">
<!--
body{
text-align:center;
margin:0px;
}

#Layer1 {
position:absolute;
top:50%;
left:50%;
width:772px;
height:288px;
z-index:1;
border:1px solid #0000FF;
text-align:left;
margin:-144px 0 0 -386px; //la mitad del ancho y alto en negativos para top y left
}
-->
</style>
</head>

<body>
<div id="Layer1">hola, como estas? </div>
</body>
</html>


Saludos

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.