Foros del Web » Creando para Internet » CSS »

ayuda con web

Estas en el tema de ayuda con web en el foro de CSS en Foros del Web. hola a todos...hace poco comencé a crear mi web pero no logro que se vea correctamente en firefox, pero sí en IE. Utilicé el validador ...
  #1 (permalink)  
Antiguo 28/04/2010, 12:31
 
Fecha de Ingreso: abril-2010
Mensajes: 10
Antigüedad: 7 años, 7 meses
Puntos: 0
ayuda con web

hola a todos...hace poco comencé a crear mi web pero no logro que se vea correctamente en firefox, pero sí en IE. Utilicé el validador W3C para mi plantilla por ejemplo, y a pesar que me da sólo un error, en firefox no logro que salga bien. Podrán ayudarme ? ya llevo dos días buscando soluciones pero como no encuentro nada para mi caso prefiero preguntar directamente.
Les dejo el html de mi plantilla más la hoja de estilos.

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>andresreesc.com</title>
<link rel="stylesheet" href="estilo-plantilla.css" type="text/css" media="all">
</head>
<body>
<div id="global">

<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->

<div id="cabecera">
	  <div id="logotipo"><img src="objetos/encabezado.jpg" width="500" height="100" alt="encabezado"></div>
</div>

<div id="navegacion">
	<ul>
    <li><a href="#">Home</a></li>
		<li><a href="#">Galería</a></li>
		<li><a href="#">Autor</a></li>
		<li><a href="#">Libro de visitas</a></li>
		<li><a href="#">Contacto</a></li>
  </ul>
</div>

<!-- FIN DE CODIGO DE CABECERA -->

  <div id="contenido">
	<br><br><br><br>
	</div>
		

<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->

  <div id="pie">
	  <div id="copyright">COPYRIGHT &copy; Andrés Rees Catalán, 2010. Todos los derechos reservados.
	</div>

<!-- FIN CODIGO PIE DE PAGINA -->

</div>
</body>
</html> 

Código CSS:
Ver original
  1. * {margin:0px ; padding:0px ; border: 0px}
  2. body {text-align: center ; background-color: 072032; }
  3. #global {width:1024px; }
  4. #cabecera {border: e96d09 1px solid ; height:85px; }
  5.   #logotipo {}
  6. #navegacion {background-color: #D3D3D3 ; height:20px ; border-left: e96d09 1px solid ; border-right: e96d09 1px solid ; border-bottom: e96d09 1px solid; }
  7.   #navegacion ul {text-align: center;}
  8.     #navegacion li {display: inline ; margin: 0px 40px 0px 40px ; list-style-type: none; }
  9.     #navegacion li a {color: #A52A2A ; padding: 2px 10px 2px 10px ; text-decoration: none ; font-size: 11pt ; font: bold; }
  10. #contenido {width: 1024px ; float: left ; background-color: #696969 ; color: white ; border-left: e96d09 1px solid ; border-right: e96d09 1px solid; }
  11.   #contenido1 {text-align: left ; float: left; }
  12.       #contenido1 ul {list-style-type: none; }
  13.       #contenido1 li {margin: 30px 0px 0px 100px ; list-style-type: none; }
  14.       #contenido1 li a {color: white ; padding: 0px 0px 0px 0px ; text-decoration: none ; font-size: 13pt ; font: bold; }
  15.   #contenido2 {text-align: left ; float:right; }
  16.       #contenido2 ul{text-align: left ; list-style-type: none; }
  17.       #contenido2 li {margin: 30px 100px 0px 0px ; list-style-type: none;}
  18.       #contenido2 li a {color: white ; padding: 0px 0px 0px 0px ; text-decoration: none ; font-size: 13pt ; font: bold; }
  19. #pie {font-size:9pt ; color: white ; border-left: e96d09 1px solid ; border-right: e96d09 1px solid ; border-bottom: e96d09 1px solid; }

Les agradezco desde ya.
  #2 (permalink)  
Antiguo 29/04/2010, 00:59
Avatar de kyedesigns  
Fecha de Ingreso: abril-2010
Ubicación: Continuamente en movimiento...
Mensajes: 99
Antigüedad: 7 años, 8 meses
Puntos: 4
Respuesta: ayuda con web

¿Que es precisamente lo que no se ve bien?

Me he dado cuenta que al visualizarla en Safari y Firefox no se ve centralizada.

Para resolver esto añade lo siguiente:
Código:
#global {margin: auto; width:1024px; }
La propiedad "margin: auto;" hará que quede centralizada.

A parte de eso, ¿Que otro problema tienes? Lo demás lo veo bastante bien, aunque la estructura del código la puedes mejorar un poco mas.
  #3 (permalink)  
Antiguo 29/04/2010, 05:06
 
Fecha de Ingreso: abril-2010
Mensajes: 10
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: ayuda con web

Lo del centrado te lo agradezco, era uno de los errores que solucioné gracias a la propiedad que me diste. El otro problema que tengo es que las capas deberían tener un borde naranjo, pero en firefox éstos no me aparecen.

A todo esto, cómo supiste que en Firefox y Safari no se veía centralizada? me acabo de dar cuenta que olvidé dar la dirección, ya que la que aparece en "title" no es la actual.
Ahora sí la doy: [URL]http://webphoto.atwebpages.com/plantilla.html[/URL]

Gracias!
  #4 (permalink)  
Antiguo 29/04/2010, 07:12
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola andreesc

Muevo tu tema al foro de CSS desde Web general.

Saludos,
  #5 (permalink)  
Antiguo 29/04/2010, 10:13
Avatar de kyedesigns  
Fecha de Ingreso: abril-2010
Ubicación: Continuamente en movimiento...
Mensajes: 99
Antigüedad: 7 años, 8 meses
Puntos: 4
Respuesta: ayuda con web

Hola denuevo!

Bueno supe que no se veia centralizada al abrir el código HTML en ambos navegadores.

En cuanto al borde naranja si lo puedo visualizar en Safari pero en Firefox como dices, no se ve.

Para resolver esto podrías utilizar una de las siguiente:
  1. Observa en el CSS que cada vez que le vas a asignar color al borde utilizas esto:
    Cita:
    border: e96d09 1px solid
    Si le añades el signo "#" podrias resolverlo. Quedaria algo asi
    Cita:
    border: #e96d09 1px solid
  2. La otra que considero que es la mejor opción consiste de lo siguiente: Cambiar lo anterior por esta propiedad en todos los lugares que asi lo necesites:
    Cita:
    border-color: #e96d09;

Este es tu CSS:
Cita:
* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center ; background-color: 072032; }
#global {margin: auto; width:1024px; }
#cabecera {margin-bottom: 15px; border: e96d09 1px solid ; height:85px; }
#logotipo {}
#navegacion {background-color: #D3D3D3 ; height:20px ; border-left: e96d09 1px solid ; border-right: e96d09 1px solid ; border-bottom: e96d09 1px solid; }
#navegacion ul {text-align: center;}
#navegacion li {display: inline ; margin: 0px 40px 0px 40px ; list-style-type: none; }
#navegacion li a {color: #A52A2A ; padding: 2px 10px 2px 10px ; text-decoration: none ; font-size: 11pt ; font: bold; }
#contenido {width: 1024px ; float: left ; background-color: #696969 ; color: white ; border-left: e96d09 1px solid ; border-right: e96d09 1px solid; }
#contenido1 {text-align: left ; float: left; }
#contenido1 ul {list-style-type: none; }
#contenido1 li {margin: 30px 0px 0px 100px ; list-style-type: none; }
#contenido1 li a {color: white ; padding: 0px 0px 0px 0px ; text-decoration: none ; font-size: 13pt ; font: bold; }
#contenido2 {text-align: left ; float:right; }
#contenido2 ul{text-align: left ; list-style-type: none; }
#contenido2 li {margin: 30px 100px 0px 0px ; list-style-type: none;}
#contenido2 li a {color: white ; padding: 0px 0px 0px 0px ; text-decoration: none ; font-size: 13pt ; font: bold; }
#pie {font-size:9pt ; color: white ; border-left: e96d09 1px solid ; border-right: e96d09 1px solid ; border-bottom: e96d09 1px solid; }
El correcto debería de quedar algo así:
Cita:
* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center ; background-color: 072032; }
#global {width:1024px; margin: auto; }
#cabecera {border: 1px solid; border-color: #e96d09; height:100px; }
#navegacion {background-color: #D3D3D3 ; height:20px ; border-left: 1px solid ; border-right: 1px solid ; border-bottom: 1px solid; border-color: #e96d09; }
#navegacion ul {text-align: center;}
#navegacion li {display: inline ; margin: 0px 40px 0px 40px ; list-style-type: none; }
#navegacion li a {color: #A52A2A ; padding: 2px 10px 2px 10px ; text-decoration: none ; font-size: 11pt ; font-weight: bold; }
#contenido {width:1024px; float: left ; background-color: #696969 ; color: white ; border-left: 1px solid ; border-right: 1px solid; border-color: #e96d09; }
#contenido1 {text-align: left ; float: left; }
#contenido1 ul {list-style-type: none; }
#contenido1 li {margin: 30px 0px 0px 100px ; list-style-type: none; }
#contenido1 li a {color: white ; padding: 0px 0px 0px 0px ; text-decoration: none ; font-size: 13pt ; font: bold; }
#contenido2 {text-align: left ; float:right; }
#contenido2 ul{text-align: left ; list-style-type: none; }
#contenido2 li {margin: 30px 100px 0px 0px ; list-style-type: none;}
#contenido2 li a {color: white ; padding: 0px 0px 0px 0px ; text-decoration: none ; font-size: 13pt ; font: bold; }
#pie {font-size:9pt ; color: white ; border-left: 1px solid ; border-right: 1px solid ; border-bottom: 1px solid; border-color: #e96d09; }
Este ultimo código es el que esta completo, así que considero que es la mejor opción a utilizar.

Saludos, espero haber ayudado
  #6 (permalink)  
Antiguo 29/04/2010, 11:39
 
Fecha de Ingreso: abril-2010
Mensajes: 10
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: ayuda con web

Perfecto! te agradezco enormemente, ahora está cómo "debe" ser :D ;) Es la primera web que creo entonces hay muchas cosas que aún desconozco.

Muchas gracias nuevamente, un saludo!

Etiquetas: Ninguno
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 17:31.