Foros del Web » Creando para Internet » CSS »

posicionamiento fijo dentro de capa relativa

Estas en el tema de posicionamiento fijo dentro de capa relativa en el foro de CSS en Foros del Web. tengo esto (mejor dicho, necesito tener esto): y quisiera que esa imagen que esta dentro de la capa sidebar (que esta flotando) se mantuviera fija ...
  #1 (permalink)  
Antiguo 18/05/2006, 09:45
 
Fecha de Ingreso: octubre-2004
Mensajes: 48
Antigüedad: 13 años, 1 mes
Puntos: 0
posicionamiento fijo dentro de capa relativa

tengo esto (mejor dicho, necesito tener esto):



y quisiera que esa imagen que esta dentro de la capa sidebar (que esta flotando) se mantuviera fija respecto a su capa contenedora, pero cuando se redimensiona la ventana, obtengo esto:



la imagen se queda fija (toma sus puntos de referencia totales), no se si me explico...

el codigo HTML es:

Código:
<div id="page-container">
	<div id="header-top">
	</div>
	<div id="bloquecentral">
		<div id="sidebar-a">
				<div id="logo">
					<img src="Images/logo.jpg">
				</div>
                                <div class="sinmargen">
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	  </div>
  	</div>
		
	<div id="navigation">
		  <dl class="hidden">
			  <dt id="about"><a href="#">About</a></dt>
			  <dt id="services"><a href="#">Services</a></dt>
			  <dt id="portfolio"><a href="#">Portfolio</a></dt>
			  <dt id="contact"><a href="#">Con</a></dt>
		  </dl>
	</div>
	<div id="content">
		<div class="padding">
			<h2>¿QUIÉNES SOMOS?</h2>
                </div>
	</div>
  </div>
  <div id="pie"></div>
  <div id="footer">
		<div id="altnav">
			<a href="#">Empresa</a> - 
			<a href="#">Delegaciones</a> - 
			<a href="#">Productos</a> - 
			<a href="#">Qué es el Potón</a> - 
			<a href="#">Contacte</a>
		</div>
		<div id="credits">
		</div>
  </div>

</div>
y su CSS es:

Código:
/* CSS Document */
html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
        background: #317893;
	background-image: url(../images/fondoazul.jpg); background-repeat: repeat-x;
}
.hidden {
	display: none;
}

h1 {
	margin: 0;
	padding: 0;
}

/*CONTAINERS*/

#page-container {
	width: 1024px;
	margin: auto;
}

#header-top {
	height: 51px;
	background: #317893
	            url(../images/header-top.jpg);
}

#logo {
        position: absolute;
        left: 186px;
        top: 51px;
}

#bloquecentral {
        background: #317893
	            url(../images/fondo_central.jpg);
}

#navigation {
	height: 62px;
	margin-left: 361px;
	background: #db6d16
	            url(../images/nav-bar.jpg);
}

#sidebar-a {
	float: left;
	margin-left: 0px;
	width: 361px;
	line-height: 18px;
	background: #317893
	            url(../images/fondo-sidebar.jpg); background-repeat: repeat-y;
}

#sidebar-a .sinmargen {
	margin: 0;
	padding: 0;
}

#footer {
	height: 66px;
	clear: both;
	font-family: Tahoma, Arial, Helvetica, Sans-serif;
	font-size: 10px;
	color: #46A4C8;
	padding: 13px 25px;
	line-height: 18px;
}

#footer #altnav {
	width: 350px;
	float: right;
	text-align: right;
	margin-right: 45px;
}

#footer #credits {
	width: 350px;
	float: left;
	text-align: left;
	margin-left: 70px;
}

#footer a {
	color: #46A4C8;
	text-decoration: none;
}

#footer a:hover {
	color: #ffffff;
}

#pie {
	height: 261px;
	clear: both;
	background: #317893
	            url(../images/fondopie.jpg);
}

#content {
	background: #ffffff
	            url(../images/fondo_contenido.jpg);
	margin-left: 361px;
}

#content .padding {
	padding: 35px;
	padding-right: 25px;
}

#content h2 {
	font-family: Times New Roman, Times, serif;
	font-weight: bold;
	font-size: 12px;
	color: #2E6F86;
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	padding-right: 100px;
}

#content p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	padding-right: 100px;	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #9B7E31;
}

#content .creditos {
	font-family: Arial, Helvetica, sans-serif;
	font-size: xx-small;
	color: #72B6CF;
}
A ver si alguien me ilumina, porque he intentado lo de poner esa capa dentro de otra que sea relativa (como en: http://www.stopdesign.com/articles/absolute/, y no funciona...

Última edición por OrgasmUs; 18/05/2006 a las 10:02
  #2 (permalink)  
Antiguo 18/05/2006, 09:50
 
Fecha de Ingreso: noviembre-2005
Mensajes: 117
Antigüedad: 12 años, 1 mes
Puntos: 0
para poder posicionar algo absoluto debe estar en un contenedor relative. Una vez hecho eso a lo que queres que posicionar lo haces absolute

Código:
#sidebar-a {
position:relative;
}

#logo {
position: absolute;
top: XXXpx;
left: XXXpx;
}
  #3 (permalink)  
Antiguo 18/05/2006, 10:12
 
Fecha de Ingreso: octubre-2004
Mensajes: 48
Antigüedad: 13 años, 1 mes
Puntos: 0
Cita:
pues probando eso, no funciona. No se si es quizas porque ambas capas (#sidebar-a y #logo) estan a su vez dentro de otra capa #bloquecentral,

pero incluso poniendole a #bloquecentral el position:relative también, tampoco funciona, al revés, incluso me desplaza mucho más el logo
EDITO: OLÉ, FUNCIONA, pues es exactamente lo que decia Bowman, en el link que he puesto, pero no se porqué no lo veía...

GRACIAS MIL RKPOST

Última edición por OrgasmUs; 18/05/2006 a las 10:18
  #4 (permalink)  
Antiguo 18/05/2006, 10:19
 
Fecha de Ingreso: noviembre-2005
Mensajes: 117
Antigüedad: 12 años, 1 mes
Puntos: 0
que raro, a menos que bloquecentral este absoluto no deberia presentarte problemas.
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:26.