Orientación con CSS se cambia de posición

ecosysonidos · #1 (**permalink**) 13/08/2013, 22:15

hola espero puedan orientarme en este problema que me ha surgido

que propiedades debo cambiar en el container de tal forma que se adapte al ancho de resolucion de cualquier pantalla y no se modifique nada.

tengo un div que contiene a otros tres
basicamente son dos columnas una donde ira mi menu en la parte izquierda(la cual no quiero que se mueva y permanezca fija a la izquierda en la misma posicion)

luego tengo el div del contenido al lado del menu el cual contenera toda la informacion de la pagina
al lado de este intente poner una cabecera esta es mi verdadero problema
porque en mi pantalla se ve bien, sobre la posicion que deberia ir
pero en pantallas mas grandes o mas pequeñas a la mia se mueve de la posicion
y debe ir sobre el id del contenido en una posicion de top que yo elijo...

que debo de modificar de tal forma que siempre se quede sobre la misma posicion sin importar la resolucion?...
o por que es que se modifica?

Código HTML:

<html>
<body>	
<div id="container">
<div id="menu"></div><!-- menu-->
<div id="contenido"></div><!-- contenido-->
<div id="cabecera"><h1 class="derecha"> "############"<span class="forma"> </span></h1></div><!-- cabecera-->
</div><!--container-->

</body>
</html>

Código:

body, html{
background: #ddd url(../imagenes/bg.jpg);
-webkit-font-smoothing: antialiased;
	margin:0;
}
		
	#container{
		width:100%;
		height:800px;
		margin:0 auto;
		background-color:#333;
	}

/*--------------------------------- menu--------------------------*/
#menu{
	position:relative;
	float:left;
	height:700px;
	background-color:#096;
	width:200px;
	clear:both;
}
/*------------<<<<<<<<<<< contenido >>>>>>>>>>><-------------*/
#contenido{
position:relative;
float:left;
width:980px;
border-radius:10px 0 10px 0;
background-color:#D2D2D2;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
height:100%;
}
/*---------------<<<<<<<<<<< cabecera >>>>>>>>>---------------------*/
#cabecera{
	width: 504px;
	position: absolute;
	z-index: 50;
	right: 317px;
	top: 163px;
	height: 64px;
}

.derecha{
color:#fff;
background-color:#09f; 
padding:10px 10px; 
font-size:18px; 
margin-right:-20px;
float:right; 
position:relative; 
width:40%; 
box-shadow:1px 1px 5px #000;
 -moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
}

.forma{
width:0px; 
height:0px; 
line-height:0px; 
border-right:20px solid transparent; 
border-top:10px solid #03f; 
position:absolute;
top:100%; right:0px;

}

mi idea es hacer algo parecido a esto http://www.w3.org/Style/Examples/011/firstcss.es.html solo que mi menu iria al lado izquierdo

la cabecera va sobre la columna dos, no se si deba ir dentro del mismo container para que no se mueva o fuera de este

lbenz · #2 (**permalink**) 14/08/2013, 11:08

PROBA CON ESTO AMIGO !!!

Código CSS:

Ver original#menu555 {
    position:fixed;
    display:block;
    float:left;
    background:#069;
    width:200px;
}

ecosysonidos · #3 (**permalink**) 14/08/2013, 12:48

mi problema es este

en mi computadora puedo ver las cabeceras (color azul), correctamente
asi

[IMG]ftp://[email protected]@ftp.manchesterusale ague.com/original.JPG[/IMG]

Rafael · #4 (**permalink**) 14/08/2013, 13:00

Pon un link normal, no una descarga extraña ftp por favor.

Usa este sitio http://multifoto.es.vu o este http://imgur.com/

ecosysonidos · #5 (**permalink**) 14/08/2013, 13:03

Cita:

Iniciado por lbenz

PROBA CON ESTO AMIGO !!!

Código CSS:

Ver original#menu555 {
    position:fixed;
    display:block;
    float:left;
    background:#069;
    width:200px;
}

sorry por el link no se porque aparece asi

mi problema es este

en mi computadora puedo ver las cabeceras (color azul), correctamente pero si lo veo en un ordenador mas pequeño o mas grande las cabeceras se mueven
como en esta pagina
[URL="http://www.runtimewifi.com"]http://www.runtimewifi.com[/URL]

puedes hacer zoom sobre la pagina y veras que las cabeceras se mueven
la propiedad de estas es absolut con z index para que esten por encima del contenedor de la pagina entonces si la pantalla es mas grande cambian de posicion por que?

pzin · #6 (**permalink**) 14/08/2013, 14:40

Es curioso que en estos casos la gente siempre dice que "se mueven" cuando realmente pasa justo lo contrario, que al estar en posiciones absolutas se quedan siempre en la misma posición.

Pues lo que tienes que hacer, es no trabajar con posicionamiento absoluto para la maquetación de un sitio. Es un error bastante común entre la gente que empieza y/o viene de Dreamweaver.

ecosysonidos · #7 (**permalink**) 14/08/2013, 22:11

Cita:

Iniciado por pzin

Es curioso que en estos casos la gente siempre dice que "se mueven" cuando realmente pasa justo lo contrario, que al estar en posiciones absolutas se quedan siempre en la misma posición.

Pues lo que tienes que hacer, es no trabajar con posicionamiento absoluto para la maquetación de un sitio. Es un error bastante común entre la gente que empieza y/o viene de Dreamweaver.

entiendo que no se mueve ya que queda en la posicion absoluta que se le esta dando respecto a el lado derecho a lo que voy es cual seria el consejo aparte de no maquetar en esa forma..

pzin · #8 (**permalink**) 14/08/2013, 22:34

Sé que parecerá una ayuda muy pobre, pero es que la mejor y única solución es la de no usar posiciones absolutas.

Si necesitas sacar esos elementos un poco de su contenedor, puedes ajustarlos a los bordes primero, seguramente flotándolos, y una vez que consigas eso, terminar de sacarlos usando una posición relativa:

Código CSS:

Ver originalposition: relative;
left: -20px;