Foros del Web » Creando para Internet » CSS »

CSS rebelde

Estas en el tema de CSS rebelde en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 08/05/2008, 16:49
Avatar de Skairva  
Fecha de Ingreso: noviembre-2007
Mensajes: 7
Antigüedad: 10 años
Puntos: 0
CSS rebelde

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.
  #2 (permalink)  
Antiguo 08/05/2008, 17:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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
  #3 (permalink)  
Antiguo 08/05/2008, 17:07
Avatar de Skairva  
Fecha de Ingreso: noviembre-2007
Mensajes: 7
Antigüedad: 10 años
Puntos: 0
Re: CSS rebelde

Corrijo. No se ve en ninguno.

Última edición por Skairva; 08/05/2008 a las 17:13
  #4 (permalink)  
Antiguo 08/05/2008, 17:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: CSS rebelde

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

Mikel.
  #5 (permalink)  
Antiguo 08/05/2008, 17:23
Avatar de Skairva  
Fecha de Ingreso: noviembre-2007
Mensajes: 7
Antigüedad: 10 años
Puntos: 0
Re: CSS rebelde

Aquí está:


  #6 (permalink)  
Antiguo 08/05/2008, 17:26
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
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
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Última edición por webosiris; 08/05/2008 a las 17:36
  #7 (permalink)  
Antiguo 08/05/2008, 17:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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>&copy;Cyrium 2008. Todos los derechos reservados.</p>
<p>Cr&eacute;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.
  #8 (permalink)  
Antiguo 08/05/2008, 18:02
Avatar de Skairva  
Fecha de Ingreso: noviembre-2007
Mensajes: 7
Antigüedad: 10 años
Puntos: 0
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/05/2008 a las 18:15
  #9 (permalink)  
Antiguo 08/05/2008, 18:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #10 (permalink)  
Antiguo 09/05/2008, 03:42
Avatar de Skairva  
Fecha de Ingreso: noviembre-2007
Mensajes: 7
Antigüedad: 10 años
Puntos: 0
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.
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 02:50.