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