El problema es que mis divs se muestran correctamente siempre que mi navegador esté en pantalla completa, pero cuando reduzco la resolución, los divs se superponen, ¿cómo obtengo una posición relativa entre sí?
#curve_temp { position: absolute; top: 300px; left: 30px; margin-right: 100px; } #curve_vibr { position: absolute; top: 300px; right: 220px; } #curve_laut { position: absolute; top: 600px; left: 30px; padding-right: 100px; } #curve_rpm { position: absolute; top: 600px; right: 220px; } #curve_quali { position: absolute; top: 900px; left: 30px; padding-right: 100px; } <div class="user-dashboard"> <h1>Hallo, User!</h1> <div id="logo_eg"> <center><img src="logo.png" alt="engineguru_logo" class="our_logo" width="476" height="191"></center></div> <div id="curve_quali" style="width: 535px; height: 268px; vertical-align: right" ></div> <div id="curve_rpm" style="width: 535px; height: 268px; vertical-align: right" ></div> <div id="curve_laut" style="width: 535px; height: 268px; vertical-align: right" ></div> <div id="curve_temp" style="width: 535px; height: 268px; vertical-align: right" ></div> <div id="curve_vibr" style="width: 535px; height: 268px; vertical-align: right" ></div> <div id="flaticon"><a href="https://www.flaticon.com/free-icons/home" title="home icons">Home icons created by Freepik - Flaticon</a></div> </div>Esto podría hacer el truco. Usaría consultas de medios para establecer los puntos de interrupción de tamaño de pantalla deseados. Además, puede ser útil usar rem or em en lugar de px , ya que ayudan con el diseño receptivo en la escala del tamaño de la pantalla.
Puede configurar los estilos css para que estén entre dos anchos, por ejemplo, con una tableta:
@media (min-width: 475px) and (max-width: 768px) { /* Insert screen size styles for these breakpoints here. */ }O use configuraciones que especifiquen estilos hasta una dimensión de tamaño de pantalla específica:
@media only screen and (max-width: 320px) /* For mobile phones: */ { /* Insert screen size styles for these breakpoints here. */ }Con su código compartido anteriormente, podría verse así:
@media only screen and (max-width: 320px){ /* For mobile phones: */ /* Adjust values to the appropriate px dimension. */ #curve_temp { position: absolute; top: 300px; left: 30px; margin-right: 100px; } } @media only screen and (max-width: 768px){ /* For tablet screens: */ /* Adjust values to the appropriate px dimension. */ #curve_temp { position: absolute; top: 300px; left: 30px; margin-right: 100px; } } @media only screen and (max-width: 1920px){ /* For desktop screen: */ /* Adjust values to the appropriate px dimension. */ #curve_temp { position: absolute; top: 300px; left: 30px; margin-right: 100px; } }En primer lugar, el uso del posicionamiento absoluto es mucho más rígido y dificulta escribir diseños que respondan bien al contenido cambiante. más información aquí
Puede usar flexbox, coloque los divs que desea que respondan correctamente en un contenedor flexible de la siguiente manera.
html:
<div class="flex-container"> /*put your divs here*/ </div>CSS:
.flex-container { display: flex; flex-wrap: wrap; } Puede obtener el diseño que desee con estas propiedades de flexbox además de la manipulación del espaciado.
Una mejor manera de dar a varios divs el mismo estilo es darles la misma clase y diseñarlos con css.
Tu antiguo código:
<div id="curve_quali" style="width: 535px; height: 268px; vertical-align: right" ></div> <div id="curve_rpm" style="width: 535px; height: 268px; vertical-align: right" ></div> <div id="curve_laut" style="width: 535px; height: 268px; vertical-align: right" ></div> <div id="curve_temp" style="width: 535px; height: 268px; vertical-align: right" ></div> <div id="curve_vibr" style="width: 535px; height: 268px; vertical-align: right" ></div>mejor manera de codificar:
<div id="curve_quali" class="class_name" ></div> <div id="curve_rpm" class="class_name"</div> <div id="curve_laut" class="class_name"</div> <div id="curve_temp" class="class_name"</div> <div id="curve_vibr" class="class_name"</div>reescribes el mismo estilo que diste en tu atributo de estilo de la siguiente manera:
.class_name { /* your styling over here */ }