Foros del Web » Creando para Internet » CSS »

Capa se desplaza

Estas en el tema de Capa se desplaza en el foro de CSS en Foros del Web. Buenas tengo un pequeño problema con una capa, es el siguiente: tengo una capa lateral con el menu, que cuando se redimensiona la pantalla se ...
  #1 (permalink)  
Antiguo 24/01/2006, 07:09
 
Fecha de Ingreso: abril-2005
Ubicación: Santiago Compostela
Mensajes: 213
Antigüedad: 12 años, 7 meses
Puntos: 0
Capa se desplaza

Buenas tengo un pequeño problema con una capa, es el siguiente:

tengo una capa lateral con el menu, que cuando se redimensiona la pantalla se desplaza al final de la capa central, aqui tengo el codigo css y html:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Xestión Banco</title>
<link href="/Rediseño/EstilosIndex2.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="contenedor">
		<div id="cabecera"><img src="/Rediseño/imagenes/logo.jpg" border="0"></div>
			<div id="sesion">
				<a href="#"> Inicio </a> | <a href="#"> Cerrar Sesión </a>
		</div>	
	
		<div id="cuerpo">	
			<div id="cuerpotexto">
			  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
    Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis
    nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.
    Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo.
    Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a
    mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad
    litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus.
    Mauris magna eros, semper a, tempor et, rutrum et, tortor.
    </p> 
      			</div>
		</div>
		
		<div id="navegador">
			<div id="secionesnav">
				<h2>PERSONAS</h2>
				<ul>
					<li><a href="#">Alta Personas</a></li>
					<li><a href="#">Listado Personas</a></li>
				</ul>
			</div>
		
			<div id="secionesnav">
				<h2>EMBARCACIÓNS</h2>
				<ul>
					<li><a href="#">Alta Embarcación</a></li>
					<li><a href="#">Listado Embarcacións</a></li>
				</ul>
			</div>		
		</div>
	</div>
</body>
</html

Y el css es:

Código:
/* CSS Document */
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8px;
color:#0A9DE6;
padding:0px;
margin:0px;
}

a{
color:#006699;
text-decoration:none;
}
a:link{
color:#006699;
text-decoration:none;
}
a:viseted{
color:#006699;
text-decoration:none;
}
a:hover{
color:#006699;
text-decoration:none;
}

#contenedor{
	text-align:left;
	width:100%;
	height:100%;
	margin:0px;
	background-color:#FFFFFF;
}

#cabecera{
	width:100%;
	background-color:#FFFFFF;
}
#sesion{	
	width:100%;
	background-color:#FED966;
	text-align:right;
	padding:3px 0px 3px 0px;
	font-size:8pt;
}

#navegador{
	margin:0 83% 0 0;
	padding:0px;
	background-color:#99cdff;
	height:400px;
}
#secionesnav{
	position:relative;
	margin:0px;
	padding:0px;
	font-size:120%;
}
#secionesnav h2{
	background-color:#0A9DE6;
	color:#FFFFFF;
	font-size:110%;
	padding: 5px 0px 5px 5px;
	margin: 0px;
}

#secionesnav ul{
	padding: 2px 0px 2px 5px;
	margin: 0px 0px 0px 0px;
	font-size:120%;
	list-style-type:none;
}
#cuerpo{
	margin:0 auto;
	float:right;
	width:83%;
	background-color:#FFFFFF;
	font-size:120%;
}
#cuerpotexto{
	padding:0px 10px 0px 0px;
	font-size:120%;
}

En otras pagina que visite, al hacer lo mismo, el menu de navegacion no se mueve del sitio, por ejemplo:
http://www.opensuse.org/Welcome_to_openSUSE.org

el menu de de la izquierda donde esta el search, use Suse Linux, ... al redimensonar la pantalla siempre esta en el mismo sitio, y ocupa lo mismo.

un saludo
  #2 (permalink)  
Antiguo 24/01/2006, 08:47
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
En el documento debe existir un flujo de datos logico. De arriba a abajo y de izquierda a derecha ( no estas trabajando con valores absolutos).

IMPORTANTE:
En el codigo HTML debes situar la capa que contiene el menu, antes que la que tiene el texto.

Despues puedes dejarlo asi:
#navegador{
margin:0 0 0 0;
padding:0px;
background-color:#99cdff;
height:400px;
float: left;
}


#cuerpo{
margin:0 auto;
float:right;
background-color:#FFFFFF;
font-size:120%;
}

Le he quitado el margin a la capa navegador y le he puesto un float:left, despues a la capa cuerpo le quite el width
  #3 (permalink)  
Antiguo 24/01/2006, 08:51
Tew
 
Fecha de Ingreso: enero-2006
Mensajes: 1.562
Antigüedad: 11 años, 11 meses
Puntos: 17
Mira esto: http://www.forospc.com/vbulletin/sho...d.php?t=110978 Ahi lo tendras mas "relativo" a la tabla ke las contiene.

El uso ke le di es el menu/directorio de la primera pagina de mi firma.
  #4 (permalink)  
Antiguo 30/01/2006, 06:23
 
Fecha de Ingreso: abril-2005
Ubicación: Santiago Compostela
Mensajes: 213
Antigüedad: 12 años, 7 meses
Puntos: 0
Bueno, gracias por responder, tu ejemplo me funciono, lo que me pasa ahora, es que quiero que en la capa cuerpo, le introduzco un formulario, y me tiene de ancho lo que ocupa la linea de texto que le pongo, como puedo hacer que me ocupe siempre el 85% de la capa cuerpo.
un saludo
  #5 (permalink)  
Antiguo 30/01/2006, 08:25
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Cita:
Iniciado por acrego
Bueno, gracias por responder, tu ejemplo me funciono, lo que me pasa ahora, es que quiero que en la capa cuerpo, le introduzco un formulario, y me tiene de ancho lo que ocupa la linea de texto que le pongo, como puedo hacer que me ocupe siempre el 85% de la capa cuerpo.
un saludo
"me tiene de ancho lo que ocupa la linea de texto que le pongo", no entiendo que significa...





Mete el formulario dentro de un div que tenga como width:85%
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 08:51.