Foros del Web » Creando para Internet » CSS »

Lio con divs

Estas en el tema de Lio con divs en el foro de CSS en Foros del Web. Hola, tengo una idea en la cabeza pero no consigo sacarla adelante, y creo que cada vez estoy liando más y más el código. Os ...
  #1 (permalink)  
Antiguo 31/05/2011, 02:18
Avatar de gines86  
Fecha de Ingreso: abril-2011
Ubicación: Murcia
Mensajes: 20
Antigüedad: 6 años, 1 mes
Puntos: 2
Lio con divs

Hola, tengo una idea en la cabeza pero no consigo sacarla adelante, y creo que cada vez estoy liando más y más el código.

Os pongo una imagen de que es lo que quiero, y luego el código que tengo hecho...



El nº1, 2, 5 y 7 son común en todás las páginas que pondré.
El nº3 y 4 son un menu vertical y el contenido que tienen una altura variable.

Lo que quiero y es donde está mi lio, es en el nº5 y 6, quiero que estén pegados al nº7 (pie de pagina).
El nº5 (piemenu) es común a todos y es una imagen.
El nº6 (piecontenido) es una imagen que varia segun la pagina en la que estemos.

Yo consigo que una de las dos este pegada abajo que es la nº6, pero la del menu no se queda pegada abajo, pues el menú solo tiene 4 lineas y no llega abajo del todo.



Código:
body {
	font-family:"futura Bk BT", Verdana, Arial;
	text-align:justify;
	font-size: 110%;
	font-weight:bolder;
	letter-spacing: 3px;
	background: url(images/fondo.jpg) repeat-x top #93b2cd;
	color: #FFF;}

#contenedor{
	background:#FFF;
	width:950px;
	margin: auto;
	margin-top: -11px;
	text-align:left; 
	border: 3px #FFF solid;}

#cabecera {
	background: url(images/header.png);
    width:950px;
    height:165px;}

#menuh {
	font-size: 14px;
	font-weight: 550;
	letter-spacing:normal;
	background: #92b1cd;
    width:755px;
    height:30px;
	float: right;
	text-align: center;
	padding-right: 15px;
	background: url(images/menubar.jpg) no-repeat;}

#cabecera h1 {
	float: right;
	font-size: 2.8em;
	padding-right: 10px;
	font-variant:small-caps;
	color: #C91F16;}

#piemenu {width: 180px;
	float: left;
	height: 375px;
	background: #fbf5dd;
	position: absolute;
	bottom: 0px;}
	
#piecontenido {width: 770px;
	float: right;
	height: 190px;}
	
#pie {
	background: url(images/pie.jpg) bottom;
    width:950px;
    height:27px;
    clear: both;
	text-align: center;
	padding-top: 10px;
	border-top: 2px solid #FFF;
	font-weight: bold;
	font-size: 16px;
	letter-spacing: normal;}

#pie * {
	color: #666;
	text-decoration: none;}

#contenido {
    float:right;
    width:758px;
    height:auto;
	min-height: 400px;
	padding: 5px;
	margin-top: -2px;
	background: #f4f4f4;}

#vertmenu {
font-size: 16px;
font-weight:normal;
letter-spacing:normal;
width: 180px;
height:auto;
float: left;
background: #fbf5dd}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;}

#vertmenu ul li {
margin: 0px;
padding: 0px;
background: url(images/li1.jpg) no-repeat;}

#vertmenu ul li a {
display: block;
padding: 5px;
padding-left: 40px;
text-decoration: none;
color: #92b1cd;
margin-right: 10px;}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #485866;
background: url(images/li2.jpg) no-repeat;}

h2 {background:url(images/H1.png) no-repeat;
	padding-left: 70px;
	color: #FFF;}
	
a {color: #FFF;
	text-decoration: none;}

a:hover {color:#666;
	text-decoration: none;}
	
p {color:#888;
	padding-left: 20px;}
	
img.abajo {padding-top: 100px;}

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Titulo</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>

	<div id="contenedor">
 		<div id="cabecera">

		</div>
        
		<div id="menuh">
        	<a href="portada.html">Portada</a> | <a href="nosotros.html">Nosotros</a> | <a href="informatica.html">Informática</a> | <a href="fotografia.html">Fotografía</a> | <a href="diseño.html">Diseño</a> | <a href="impresion.html">Impresión</a> | <a href="stands.html">Stands</a> |<a href="contacto.html"> Contacto</a>
        </div>
 		
		<div id="vertmenu">
			<ul class="menu">
				<li></li>
			</ul>
		</div>
        
		
		<div id="contenido">
        <h2>Nosotros</h2>
<p>....</p>
		</div>		
		 		
		<div id="piemenu">
<img src="images/menuv.jpg" alt="pie menu" />		</div>
		
		<div id="piecontenido">
<img src="images/pie_nos.jpg" alt="pie" />
		</div>
		
		<div id="pie">
Optimizada para 1024x768. Derechos Reservados 2011</div>
</div>
</body>
</html>
Creo que me he explicado bastante mal pero espero que con los dibujos lo hayais pillao un poquillo mejor y me podais ayudar


Edito: el pie del menu vertical, la imagen (nº5) no la puedo meter dentro del menú porque entonces se me queda muy arriba, justo cuando acaba el contenido del menú vertical, y yo quiero que este pegada abajo.

Edito2: He puesto el tema aqui porque creo que es error en mi css, y no sabia si ponerlo aqui o en div

Última edición por gines86; 31/05/2011 a las 02:26
  #2 (permalink)  
Antiguo 02/06/2011, 01:42
Avatar de gines86  
Fecha de Ingreso: abril-2011
Ubicación: Murcia
Mensajes: 20
Antigüedad: 6 años, 1 mes
Puntos: 2
Respuesta: Lio con divs

Ale, tema cerrado, ya lo he solucionado!

Etiquetas: divs
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 19:24.