Foros del Web » Creando para Internet » CSS »

Problema con las capas

Estas en el tema de Problema con las capas en el foro de CSS en Foros del Web. Buenas compañeros.. Aun no controlo muy bien el tema de las capas... para la maquetacion del sitio web.. y nose que pasa que no se ...
  #1 (permalink)  
Antiguo 19/12/2010, 11:04
 
Fecha de Ingreso: septiembre-2007
Mensajes: 152
Antigüedad: 10 años, 3 meses
Puntos: 1
Problema con las capas

Buenas compañeros..

Aun no controlo muy bien el tema de las capas... para la maquetacion del sitio web..
y nose que pasa que no se me pega bien la web por el bottom me deja un espacio, por lo demas creo que bien
os adjunto el code aver si alguna me puede hechar una mano.

muchas gracias por adelantao

Código:
<html>
<head>
<style>
body {
	background-color: white;
}
#wrapper {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}
#header{
	height: 100px;
}
#logos {
	float: left;
	width: 429px;
	height: 100%;
	background-image: url(images/fondoLogos.png);
}
#menu {
	float: right;
	width: 531px;
	height: 100%;
	background-color: white;
	background-repeat: no-repeat;
}
#contenido {
	clear: both;
	margin-top: 10px;
	background-color: white;
	height: 400px;
}
#contenidoLeft {
	float: left;
	height: 100%;
	width: 600px;
	background-image: url(images/dianaLeft.png);
}
#contenidoRight {
	float: right;
	height: 100%;
	width: 350px;
	background-image: url(images/contenidoRight.jpg);
}
#pie {
	clear: both;
	height: 250px;
	margin-top: 10px;
	background-color: #373837;
}
#pieLeft {
	height: 100%;
	float: left;
	width: 340px;
}
#pieCenter {
	height: 100%;
	float: left;
	margin-left: 10px;
	width: 300px;
}
#pieRight {
	height: 100%;
	margin-left: 10px;
	width: 300px;
	float: left;
}

#faldon {
	clear: both;
	height: 45px;
	width: 100%;
	background-color:#E4E4E4; /* Color de fondo */  
	border-bottom: 2px solid;
	bottom:0px;

}
#firma {
	height: 100%;
	width: 250px;
	float: left;
	margin-top: 18px;
	font-family: Arial;
	font-size: 9pt;
	
}
#links {
	height: 100%;
	width: 710px;
	float: left;
	font-family: Verdana;
}
#links ul li {
    display: inline;
    padding: 2px 7px; /*Separar el texto*/  
    margin: 5px; /* Separar los botones */  
    background-color:#E4E4E4; /* Color de fondo */  
}  
#links ul li:hover {  
    background-color:#CCCCCC; /* Color de fondo sobre el boton */  
    cursor: pointer; /* cambiar el aspecto del puntero */  
}  
p.titulo {
	color: #E0FFD9;
	padding-left: 15px;
	padding-top: 10px;
	font-family: Arial;
	font-size: 16pt;
}
p.texto {
	color: #3ac11f;
	padding-left: 15px;
	padding-top: 10px;
	font-family: Arial;
	font-size: 14px;
}
a:link {
	color: green;
	text-decoration: none;
}
a.faldon:link {
	color: black;
	text-decoration: none;
}
a.faldon:hover {
	color: black;
	text-decoration: none;
}
a.faldon:active {
	color: black;
	text-decoration: none;
}
a.faldon:visited {
	color: black;
	text-decoration: none;
}
</style>
<body>

<div id="wrapper">
	<div id="header">
		<div id="logos">
		</div>
		<div id="menu">
			<a href="#"><img border="0" src="images/linkInicio.jpg" /></a>
			<a href="#"><img border="0" src="images/linkClasificaciones.jpg" /></a>
			<a href="#"><img border="0" src="images/linkNormas.jpg" /></a>
			<a href="#"><img border="0" src="images/linkEventos.jpg" /></a>
		</div>
	</div>
	<div id="contenido">
		<div id="contenidoLeft">
		</div>
		<div id="contenidoRight">
		</div>
	</div>
	<div id="pie">
		<div id="pieLeft">
			<p class="titulo">Últimos resultados</p>
			<p class="texto">
				Seguramente más de una vez has<br />
				pensado en presentar una reclamación<br />
				por un servicio deficiente en un<br />
				comercio, con una agencia de viajes,<br />
				una compañía aérea, o por qué no,<br />
				en tu Ayuntamiento o Diputación.<br />
				Muchos de estos lugares disponen de<br />	
			</p>
		</div>
		<div id="pieCenter">
			<p class="titulo">Resultados anteriores</p>
			<p class="texto">
				Seguramente más de una vez has<br />
				pensado en presentar una reclamación<br />
				por un servicio deficiente en un<br />
				comercio, con una agencia de viajes,<br />
				una compañía aérea, o por qué no,<br />
				en tu Ayuntamiento o Diputación.<br />
				Muchos de estos lugares disponen de<br />	
			</p>
		</div>
		<div id="pieRight">
			<p class="titulo">Enlaces</p>
		</div>
	</div>
	<div id="faldon">
		<div id="firma">
		Dardos Barcelona 2011 ::
		</div>
		<div id="links">
			<ul>  
				<li><a class="faldon" href="">Inicio</a></li>  
				<li><a class="faldon" href="">Clasificaciones</a></li>  
				<li><a class="faldon" href="">Jornadas</a></li>  
				<li><a class="faldon" href="">Eventos</a></li>
				<li><a class="faldon" href="">Calendario</a></li>
				<li><a class="faldon" href="">Galeria</a></li>
			</ul> 
		</div>
	</div>
</div>

</body>
</html>
  #2 (permalink)  
Antiguo 19/12/2010, 13:11
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con las capas

Primero y más importante: pase sus códigos (css y html) por el validador y corrija los problemas que le marque.
Segundo: utilice un reset css (busque en google o en foro) es un tema muy desarrollado y muy bien explicado.
Tercero: a su #faldon añádale overflow: hidden;

Y para manejarse y pillar soltura con css le recomiendo se pase por www.librosweb.es y sus manuales
  #3 (permalink)  
Antiguo 19/12/2010, 13:13
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Problema con las capas

Hola!

Mira, por tu forma de expresar tu problema, no te entiendo. Sería mejor si explicas tu problema con el nombre de los divs, ya que dices que "el bottom me deja un espacio" Pero en tu codigo, no hay nada que diga bottom (A excepcion de ese bottom:0px que no te está sirviendo para nada).

Porqué no mejor, subes un screenshot de tu página para que podamos ver de donde está separado, o mejor aun, subes tu sitio a un servidor, nos das la URL y con gusto te colaboramos.

Hasta Luego!!

EDITO Ya que el Sabio amigo Kseso? Ha contestado, retiro mi petición.
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #4 (permalink)  
Antiguo 19/12/2010, 13:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con las capas

Cita:
Iniciado por Calizman Ver Mensaje
EDITO Ya que el Sabio amigo Kseso? Ha contestado, retiro mi petición.
Sólo lo intuí tras copiar y ejecutar el código, Calizman. Mi primera intención fue la misma: pedirle que pusiese un poco más de empeño en exponer el problema. Pero por hoy ya he metido bastante caña.
Pero con todo, no se si habré acertado en mi suposición. Vamos a esperar a ver.
  #5 (permalink)  
Antiguo 22/12/2010, 14:36
 
Fecha de Ingreso: septiembre-2007
Mensajes: 152
Antigüedad: 10 años, 3 meses
Puntos: 1
Respuesta: Problema con las capas

Ei hola siento tardar tanto en contestar.

Decir que teneis razon deveria haber expresado mi problema con un poco mas de claridad,
con la respuesta de kseso? con el reset del css y tal lo he solucionado, lo que me estava pasado es que donde la web terminava en la parte de abajo, no me llegaba al fin del espacio del navegador! de todas maneras lo arregle

un saludo y anoto lo dicho para los siguientes POST!

feliz navidad

Etiquetas: capas
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 23:14.