ayuda con web

andreesc · #1 (**permalink**) 28/04/2010, 11:31

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* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center ; background-color: 072032; }
#global {width:1024px; }
#cabecera {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; }

Les agradezco desde ya.

kyedesigns · #2 (**permalink**) 28/04/2010, 23:59

¿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.

andreesc · #3 (**permalink**) 29/04/2010, 04:06

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!

JavierB · #4 (**permalink**) 29/04/2010, 06:12

Hola andreesc

Muevo tu tema al foro de CSS desde Web general.

Saludos,

kyedesigns · #5 (**permalink**) 29/04/2010, 09:13

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:

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

andreesc · #6 (**permalink**) 29/04/2010, 10:39

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!