CSS rebelde

Skairva · #1 (**permalink**) 08/05/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 · #2 (**permalink**) 08/05/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 · #3 (**permalink**) 08/05/2008, 16:07

Corrijo. No se ve en ninguno.

Mikmoro · #4 (**permalink**) 08/05/2008, 16:14

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

Mikel.

Skairva · #5 (**permalink**) 08/05/2008, 16:23

Aquí está:

webosiris · #6 (**permalink**) 08/05/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 · #7 (**permalink**) 08/05/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 · #8 (**permalink**) 08/05/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 · #9 (**permalink**) 08/05/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 · #10 (**permalink**) 09/05/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.