Foros del Web » Creando para Internet » CSS »

Ayuda con problema en exploradores

Estas en el tema de Ayuda con problema en exploradores en el foro de CSS en Foros del Web. Hola a todos . Bueno estuve practicando con CSS para aprender más y me encontre con un gran problema , tengo esta web : w(3).freewebs.com/andreti68 ...
  #1 (permalink)  
Antiguo 07/05/2006, 21:33
 
Fecha de Ingreso: abril-2006
Ubicación: Bogotá
Mensajes: 251
Antigüedad: 11 años, 7 meses
Puntos: 14
Ayuda con problema en exploradores

Hola a todos .

Bueno estuve practicando con CSS para aprender más y me encontre con un gran problema , tengo esta web : w(3).freewebs.com/andreti68 se ve bien con IE pero con mozilla , opera y demas se ve muy mal , se descuadra todo , alguien podria decirme que debo arreglar para que se vea mejor en mozilla , opera y otros, se los agradeceria aca esta el codigo CSS.

CSS:

Código:
body
{
background-color:#666655;
font-family:arial,sans-serif;
}


#contenedor
{
margin:0 auto;
border:1px inset black;
width:622px;
height:602px;
background-color:#226282;
}


.pie
{
margin:0 auto;
float:bottom;
width:600px;
height:50px;
background-color:#999555;
border:1px double white;
}

#logo
{
background-color:#999555;
padding:8px;
width:392px;
height:119px;
border:1px inset white;
margin-top:8px;
margin-left:4px;
float:left;
}

#barner
{
padding:8px;
border-right:2px;
margin:8px 5px ;
width:172px;
height:119px;
border:1px inset white;
background-color:#999555;
float:left;
}

#menu
{
display: block;
color:white;
font-size:15px;
font-family:"comic sans ms",arial,sans-serif;
text-align:center;
background-color:#999555;
padding:8px;
float:left;
width:120px;
height:369px;
border:1px inset white;
margin-left:4px;
}

#contenido
{
overflow:auto;
color:#135;
padding:20px;
background-color:#999555;
float:left;
width:420px;
height:345px;
border:1px inset white;
margin-left:4px;
}


a:link
{
color:#000000;
text-decoration:none;
}

a:hover
{
color:blue;

}

a:visite
{
color:red;
text-decoration:none;
}
Gracias de ante mano como siempre
  #2 (permalink)  
Antiguo 07/05/2006, 23:49
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
He visto tu diseño y tengo varias correcciones que hacerte en cuanto a CSS, como por ejemplo:

le diste altura a tu contenedor, algo que no es necesario, puesto que crece con su contenido:
height:602px; /*Eliminado*/

El la división pie tienes "margin:0 auto", puesto que tienes un contenedor, lo único que debes hacer es darle un padding a tu contenedor (esto en tu diseño), así te ahorras el margen en varias divisiones, además el pie es del 100% del ancho, no tienes necesidad de colocarlo -"width: 600px"- y por último tienes "float:bottom;", disculpame si no te gusta mi comentario, pero esto es un SACRILEGIO, o flotas a la derecha o a la izquierda o no flotas, debes leer un poco más acerca de los atributos, también puedes usar el validador de css del w3c.

Bueno y más adelante tienes varias divisiones flotantes, no es que esté mal hecho, pero te planteo una mejor manera de hacerlo:

Código:
body {
background-color:#666655;
font-family:arial,sans-serif;
}

#contenedor {
margin:0 auto;
border:1px inset black;
width:622px;
padding: 11px; /*padding de 11px así no tendrás que poner margen en varias divisiones*/
background-color:#226282;
}

#logo {
background-color:#999555;
padding:8px;
width:400px;
height:119px;
border:1px inset white;
float: left;
}

#barner {
margin-left: 429px;/*No flota pero tiene un margen a la izquierda, así crece el contenedor*/
/margin-left: 425px;/*No tuve tiempo de averguar porque IE tiene menos margen*/
padding:8px;
width:175px;
height:119px;
border:1px inset white;
background-color:#999555;
margin-bottom: 11px; /*para que el contenido y el menu tengan un margen*/
}
#menu {
color:white;
font-size:15px;
font-family:"comic sans ms",arial,sans-serif;
text-align:center;
background-color:#999555;
padding:8px;
float:left;
width:120px;
height:369px;
border:1px inset white;
}

#contenido {
overflow:auto;
color:#135;
padding:20px;
background-color:#999555;
margin-left: 5px; /*No hay float y así crece el contenedor*/
width:437px;
height:345px;
border:1px inset white;
}

.pie {
clear: both; /*Limpia su zona y no queda montado sobre ninguna división*/
margin-top: 11px; /*para que no se pegue al contenido y al menu*/
height:50px;
background-color:#999555;
border:1px double white;
}

a:link {
color:#000000;
text-decoration:none;
}

a:hover {
color:blue;
}

a:visited {/*habías escrito mal visited, te faltó la D*/
color:red;
}
No siendo más y esperando no incomodarte.
Saludos,

PD: se ve similar en mozilla, explorer y opera.
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 07/05/2006 a las 23:57
  #3 (permalink)  
Antiguo 08/05/2006, 06:41
 
Fecha de Ingreso: abril-2006
Ubicación: Bogotá
Mensajes: 251
Antigüedad: 11 años, 7 meses
Puntos: 14
Gracias

xD , ok man muchas gracias , y me equivoque en eso de bottom(no lo pense xD) y gracias por las correcciones y cometiendo errores es que aprendo muchas gracias de nuevo
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 11:13.