Foros del web, para los que viven de bits

Skairva · 08-may-2008, 15:49

Hola,
mi problema es que no consigo establecer la hoja de estilos de mi web de manera que la página se vea como yo quiero. Esta es la web: www.cyrium.es

El diseño es muy sencillito: una cabecera, dos barras laterales y en medio el menú y el contenido de la web.

Este es el html de la web:

Código:

<?xml version ="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="es" lang="es">

<head>
<title>Cyrium-WebOficial</title>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
<style type="text/css">
	<!--
	.Estilo2 {font-size: 12px}
	-->
	</style>
</head>
<body>
   <div id="alrededor">
    <div id="principal">
        <div id="header">
          	<img src="images/header.gif" width="764" height="128" alt="Cyrium"/>
		
        </div>


	<div id="izquierda">
		<img src="images/barra_izq.gif" alt="barra izquierda"/>
	</div>
	
	
	
	

    <div id="centro">
    	<img src="images/barra_menu.gif" alt="Menú" width="595" height="65"/>
    </div>
    
  <div id="contenido">
      <p>CONTENIDO</p>
      </div>
	     <div id="derecha">
		<img src="images/barra_dcha.gif" alt="barra izquierda" />
	</div>
	  
	
	
	
<div id="firma">
  <p>&copy;Cyrium 2008. Todos los derechos reservados.</p>
  <p>Cr&eacute;ditos </p>
</div>
</div>
    
    
</div>



  
</body>

</html>

Y esta es la hoja CSS:

Código:

/* CSS Document */

* {
	margin:0;
	padding:0;
	
}
body {
	background-color: #000000;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	height: 100%;
	text-align: center;
}

#principal{
float:left;
width:764px;
height:700px;
background-color:#000000;
margin:20px;
}

#header{
width:764px;
float:left;
margin-bottom:20px;
}

#izquierda{
	float:left;
	width:60px;
	
	
}

#centro{
	width:595px;
	float:auto;
	margin-bottom:20px;
	margin-left::80px;

}
#contenido{
	width:595px;
	float:auto;
	background-color:#000000;
}

#derecha{
	float:rigth;
	width:60px;
	margin-left:703px;
}

#alrededor {
	height:700px;
	margin: 10px auto;
	width: 764px;
	float: left;	
}

#firma{
height:20px;
width:764px;
margin-top:20px;
float:left;

}

Creo que el problema está en los floats y en los margins, pero ya no sé cómo resolverlo y me estoy volviendo loca

Gracias de antemano,

Sara

P.D. Si hay algo más que criticar, no dudéis en hacerlo.

Mikmoro · 08-may-2008, 16:03

¿No consigues que se vea como quieres en ningún navegador? ¿en alguno sí y otros no?

Especifica esto, por favor.

Mikel.

P.D.: ¿y cómo quieres que se vea? Habría que leerte la mente para adivinarlo

Skairva · 08-may-2008, 16:07

Corrijo. No se ve en ninguno.

Mikmoro · 08-may-2008, 16:14

Ya. Repito: ¿y cómo te gustaría verlo?

Mikel.

Skairva · 08-may-2008, 16:23

Aquí está:

webosiris · 08-may-2008, 16:26

- acostúmbrate a validar tu CSS... "auto" no es un valor válido para float (solo se aceptan left, right y none) y además en "margin-left::80px;" tenes repetidos los dos puntos.

- las imágenes de decoración tienen que ir como fondo (desde el css) no como imágenes incrustadas en el html. Ese es el primer paso para generar un html + semántico, y un html semántico es el primer paso para no tener problemas con los navegadores.

- no entiendo porque #principal y #header estan flotando

- te recomiendo usar la mínima cantidad de divs posibles... en este caso usas 8, y se podría hacer con 3 o 4:
- 1 contenedor general para fijar en ancho y centrar el diseño
- 1 para el header (esto se puede obiar y simplemente poner esa imagen como fondo de un h1)
- 2 para el contenido (uno dentro del otro, y después le pones la imagen del borde de fondo a ambos, uno como fondo alineado a la izq y el otro fondo alineado a la derecha). Usa padding left y right para que el texto del contenido no te tape las imágenes de fondo

PD: de la forma que te digo ni necesitas usar float

Mikmoro · 08-may-2008, 16:57

El problema para una de las cosas que recomiendas, webosiris, es que las dos imágenes no son iguales aunque lo parecen.

Skairva:

yo en tu lugar seguiría la mayoría de las recomendaciones de webosiris, pero para que te apañes de momento te pongo el código modificado.

No te lo vas a creer, pero uno de los principales problemas que tenías era que habías puesto float rigth, en lugar de right (th por ht)

Html:

Cita:

<?xml version ="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="es" lang="es">
<head>
<title>Cyrium-WebOficial</title>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
<style type="text/css">

</style>
</head>
<body>
<div id="alrededor">
<div id="principal">
<div id="header">
<img src="http://www.forosdelweb.com/images/header.gif" width="764" height="128" alt="Cyrium"/>
</div>
<div id="derecha">
<img src="http://www.forosdelweb.com/images/barra_dcha.gif" alt="barra izquierda" />
</div>
<div id="izquierda">
<img src="http://www.forosdelweb.com/images/barra_izq.gif" alt="barra izquierda"/>
</div>

<div id="centro">
<img src="http://www.forosdelweb.com/images/barra_menu.gif" alt="Menú" width="595" height="65"/>
</div>
<div id="contenido">
<p>CONTENIDO</p>
</div>
<div id="firma">
<p>©Cyrium 2008. Todos los derechos reservados.</p>
<p>Créditos </p>
</div>

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

Css:

Cita:

/* CSS Document */

* {
margin:0;
padding:0;
}
body {
background-color: #000000;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: 100%;
text-align: center;
}
#alrededor {
height:700px;
margin: 10px auto;
width: 764px;
}
#principal {
width:764px;
height:700px;
background-color:#000000;
margin:20px;
}
#header {
width:764px;
margin-bottom:20px;
}
#derecha {
float:right;
}
#izquierda {
float:left;
}
#centro {
margin-bottom:20px;
margin-left:80px;
}
#contenido {
background-color:#000000;
}
#firma {
height:20px;
width:764px;
margin-top:20px;
}

Mikel.

Skairva · 08-may-2008, 17:02

Wow gracias a ambos.

webosiris tus consejos han sido muy útiles la verdad. Quizá me estaba complicando demasiado con tanto contenedor, para una web tan sencilla. Aunque tengo algunas preguntillas:
1ª. En los 2 contenedores destinados al contenido ¿Dónde debo poner el menú?
2ª. ¿Cómo se hace para poner el header como fondo de un h1?

Mikel, gracias por tomarte la molestia de corregir los códigos. Los voy a examinar detenidamente para entender mis errores.
Y bueno... lo de no saber escribir, creo que es problema de tanto teclear y claro los dedos ya no me responden jeje.

Mikmoro · 08-may-2008, 17:08

Como te ha dicho webosiris, si validas tu código te detectará incluso los pequeños errores de escritura

Espero que lo anterior te sirva. Un saludo.

Mikel.

Skairva · 09-may-2008, 02:42

Sí en un principio lo había validado, pero luego empezé a cambiar cosas y de ahí los errores de escritura y en los floats. Mea culpa, por no haberlo validado de nuevo.

Una duda Mikel, el div para la firma quiero que salga debajo de toda la web, ¿sería recomendable que lo pusiera fuera del div "principal" o del div "alrededor" ?

Sara.

08-may-2008, 16:03	#2 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 2.929	Re: CSS rebelde ¿No consigues que se vea como quieres en ningún navegador? ¿en alguno sí y otros no? Especifica esto, por favor. Mikel. P.D.: ¿y cómo quieres que se vea? Habría que leerte la mente para adivinarlo

08-may-2008, 16:07	#3 (permalink)
Skairva Fecha de Ingreso: noviembre-2007 Mensajes: 6	Re: CSS rebelde Corrijo. No se ve en ninguno. Última edición por Skairva; 08-may-2008 a las 16:13.

08-may-2008, 16:14	#4 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 2.929	Re: CSS rebelde Ya. Repito: ¿y cómo te gustaría verlo? Mikel.

08-may-2008, 16:23	#5 (permalink)
Skairva Fecha de Ingreso: noviembre-2007 Mensajes: 6	Re: CSS rebelde Aquí está:

08-may-2008, 16:26	#6 (permalink)
webosiris Moderador HTML y CSS Fecha de Ingreso: noviembre-2002 Ubicación: /home/montevideo Mensajes: 5.919	Re: CSS rebelde - acostúmbrate a validar tu CSS... "auto" no es un valor válido para float (solo se aceptan left, right y none) y además en "margin-left::80px;" tenes repetidos los dos puntos. - las imágenes de decoración tienen que ir como fondo (desde el css) no como imágenes incrustadas en el html. Ese es el primer paso para generar un html + semántico, y un html semántico es el primer paso para no tener problemas con los navegadores. - no entiendo porque #principal y #header estan flotando - te recomiendo usar la mínima cantidad de divs posibles... en este caso usas 8, y se podría hacer con 3 o 4: - 1 contenedor general para fijar en ancho y centrar el diseño - 1 para el header (esto se puede obiar y simplemente poner esa imagen como fondo de un h1) - 2 para el contenido (uno dentro del otro, y después le pones la imagen del borde de fondo a ambos, uno como fondo alineado a la izq y el otro fondo alineado a la derecha). Usa padding left y right para que el texto del contenido no te tape las imágenes de fondo PD: de la forma que te digo ni necesitas usar float __________________ Oraculus.com. Sitios web artesanales para el siglo XXI PSD a HTML. Tu diseño. Nuestro código. Última edición por webosiris; 08-may-2008 a las 16:36.

08-may-2008, 16:57	#7 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 2.929	Re: CSS rebelde El problema para una de las cosas que recomiendas, webosiris, es que las dos imágenes no son iguales aunque lo parecen. Skairva: yo en tu lugar seguiría la mayoría de las recomendaciones de webosiris, pero para que te apañes de momento te pongo el código modificado. No te lo vas a creer, pero uno de los principales problemas que tenías era que habías puesto float rigth, en lugar de right (th por ht) Html: Cita: <?xml version ="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="es" lang="es"> <head> <title>Cyrium-WebOficial</title> <link rel="stylesheet" type="text/css" href="estilos.css"/> <style type="text/css"> <!-- .Estilo2 {font-size: 12px} --> </style> </head> <body> <div id="alrededor"> <div id="principal"> <div id="header"> <img src="http://www.forosdelweb.com/images/header.gif" width="764" height="128" alt="Cyrium"/> </div> <div id="derecha"> <img src="http://www.forosdelweb.com/images/barra_dcha.gif" alt="barra izquierda" /> </div> <div id="izquierda"> <img src="http://www.forosdelweb.com/images/barra_izq.gif" alt="barra izquierda"/> </div> <div id="centro"> <img src="http://www.forosdelweb.com/images/barra_menu.gif" alt="Menú" width="595" height="65"/> </div> <div id="contenido"> <p>CONTENIDO</p> </div> <div id="firma"> <p>©Cyrium 2008. Todos los derechos reservados.</p> <p>Créditos </p> </div> </div> </div> </body> </html> Css: Cita: /* CSS Document / { margin:0; padding:0; } body { background-color: #000000; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 12px; height: 100%; text-align: center; } #alrededor { height:700px; margin: 10px auto; width: 764px; } #principal { width:764px; height:700px; background-color:#000000; margin:20px; } #header { width:764px; margin-bottom:20px; } #derecha { float:right; } #izquierda { float:left; } #centro { margin-bottom:20px; margin-left:80px; } #contenido { background-color:#000000; } #firma { height:20px; width:764px; margin-top:20px; } Mikel.

08-may-2008, 17:02	#8 (permalink)
Skairva Fecha de Ingreso: noviembre-2007 Mensajes: 6	Re: CSS rebelde Wow gracias a ambos. webosiris tus consejos han sido muy útiles la verdad. Quizá me estaba complicando demasiado con tanto contenedor, para una web tan sencilla. Aunque tengo algunas preguntillas: 1ª. En los 2 contenedores destinados al contenido ¿Dónde debo poner el menú? 2ª. ¿Cómo se hace para poner el header como fondo de un h1? Mikel, gracias por tomarte la molestia de corregir los códigos. Los voy a examinar detenidamente para entender mis errores. Y bueno... lo de no saber escribir, creo que es problema de tanto teclear y claro los dedos ya no me responden jeje. Última edición por Skairva; 08-may-2008 a las 17:15.

08-may-2008, 17:08	#9 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 2.929	Re: CSS rebelde Como te ha dicho webosiris, si validas tu código te detectará incluso los pequeños errores de escritura Espero que lo anterior te sirva. Un saludo. Mikel.

09-may-2008, 02:42	#10 (permalink)
Skairva Fecha de Ingreso: noviembre-2007 Mensajes: 6	Re: CSS rebelde Sí en un principio lo había validado, pero luego empezé a cambiar cosas y de ahí los errores de escritura y en los floats. Mea culpa, por no haberlo validado de nuevo. Una duda Mikel, el div para la firma quiero que salga debajo de toda la web, ¿sería recomendable que lo pusiera fuera del div "principal" o del div "alrededor" ? Sara.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado