html - posicion - Evita que div se mueva mientras redimensiona la página
ordenar div css (4)
Soy bastante nuevo en CSS y estoy tratando de tener una página en funcionamiento. Logré producir con éxito lo que pensé que era una buena página hasta que cambié el tamaño de la ventana del navegador y luego todo comenzó a moverse. ¡No tengo idea de por qué esto está sucediendo!
¿Podría alguien ofrecerme algún consejo por favor? Cuando cambie el tamaño de la ventana, me gustaría que los ''objetos'' permanezcan donde están, pero que la ventana cambie de tamaño. por ejemplo, si arrastro la esquina inferior de una ventana hacia arriba y hacia la izquierda, espero ver desaparecer las barras de la derecha inferior y aparecerán las barras de desplazamiento, pero el objeto en la esquina superior izquierda permanecerá exactamente donde está .
¿Estoy haciendo sentido?
Eche un vistazo a las condiciones de trabajo de mi página: http://aimmds1.estheticdentalcare.co.in/
luego intente cambiar el tamaño de la ventana del navegador arrastrando el tamaño correcto hacia la izquierda. y mire el contenido en el encabezado, y también la barra de menú ... saltan hacia abajo, el contenido del encabezado también saltó hacia abajo y luego hago desbordamiento: oculto; .. pero como entiendo todo esto no es el camino correcto.
Encuentre el html y el CSS aquí: http://jsfiddle.net/swati/hCDas/
Ya he intentado evitar que div se mueva en el tamaño de la ventana , he intentado configurar min-width: 820px; para el encabezado div, que el principal contiene div .. pero eso no lo resuelve.
Gracias en anticipación de su ayuda.
1 - Eliminar el margen de su BODY CSS.
2: envuelve todo tu html en un envoltorio <div id="wrapper"> ... all your body content </div>
3 - Definir el CSS para el contenedor:
Esto mantendrá todo junto, centrado en la página.
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Hay dos tipos de medidas que puede utilizar para especificar anchos, alturas, márgenes, etc.: relativos y fijos.
Relativo
Un ejemplo de una medida relativa son los porcentajes que ha utilizado. Los porcentajes son relevantes para su elemento que contiene. Si no hay ningún elemento contenedor, son relativos a la ventana.
<div style="width:100%">
<!-- This div will be the full width of the browser, whatever size it is -->
<div style="width:300px">
<!-- this div will be 300px, whatever size the browser is -->
<p style="width:50%">
This paragraph''s width will be 50% of it''s parent (150px).
</p>
</div>
</div>
Otra medida relativa es ems que son relativos al tamaño de fuente.
Fijo
Un ejemplo de una medición fija son los píxeles, pero una medición fija también puede ser pt (puntos), cm (centímetros), etc. Las mediciones fijas (a veces llamadas absolutas) son siempre del mismo tamaño. Un píxel es siempre un píxel, un centímetro es siempre un centímetro.
Si tuviera que usar medidas fijas para sus tamaños, el tamaño del navegador no afectaría el diseño.
Hola, en primer lugar, parece que hay muchos ''errores'' en su html en los que faltan etiquetas de cierre, podría intentar ajustar el contenido de su <body> en un ancho fijo <div style="margin: 0 auto; width: 900px> logra lo que has hecho con el body {margin: 0 10% 0 10%}
Prefiero usar anchos estáticos y si desea cambiar el tamaño de la página según el tamaño de la pantalla, puede consultar las consultas de los medios .
O bien, puede establecer un ancho mínimo en elementos como encabezado, navegación, contenido, etc.