[SOLUCIONADO] Diseño inestable en Pcs

[elafrikano]

Hola! Soy nuevo aca en el foro como usuario ya que siempre leo mucho por aca, pero hasta ahora fue que decidi a integrarme. Espero poder ayudar en lo que pueda y alcancen mis conocimientos.

Quiero empezar publicando sobre un proyecto que estoy realizando un problema que tengo ya que como no tengo laptop estoy realizando el proyecto en una pc de escritorio, pero cuando lo paso a una laptop sea del tamaño que sea todo cambia por mas que trato de llevar todas las medidas en % con el CSS.

Entonces les voy a dejar las fotos que abajo veran para que me recomienden que podria hacer, a mi parecer es mas que todo el texto que me esta haciendo inestable el diseño de la pagina. He leido algo sobre responsive desing pero me parece que es como exagerar ya que hasta donde se es usado cuando la pagina sera visualizada desde tablets y telefonos inteligentes. Pero bueno estoy seguro de que aqui estan muchos que saben mas sobre el tema y espero puedan ayudarme. Recuerden solo necesito una recomendacion general para yo investigar sobre ello.

Asi es como se ve en mi monitor de 17':



Asi se ve en una laptop:

[pzin]

Bienvenido al foro.

Habría que ver el código o la página en si misma.

Una buena práctica es, mientras estás desarrollando, reducir el ancho del navegador para ver cómo se comporta el contenido. Porque así vas viendo el comportamiento del propio diseño en diferentes escenarios y ajustando cada cosa en su momento.

[elafrikano]

Hola pzin! Gracias por responder, bueno este es el codigo del menu que por mas que intento con medidas en %, em y rem no logro que se vea bien. Si se ve bien en las laptops se ve pequeño en las de escritorio y si lo dejo bien en las de escritorios es la historia que ya te conte anteriormente.

Código CSS:

#menu {
  background: #0e7cae;
  list-style: none;
  margin: 0;
  margin-top: -7%;
  padding: 0;
  width: 100%;
}
#menu li {
  font: 67.5%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu img {
  width: 15%;
  height: 5%;
  margin-right: 5%;
  margin-bottom: -5%;
  padding: 0; 
}
#menu a {
  background: #0e7cae;
  border-bottom: 1px solid #797272;
  color: white;
  display: block;
  margin: 0;
  padding: 5% 1%;
  text-decoration: none;
  font-weight: bold;
  font-size: 100%;
}
#menu a:hover {
  background: #B0C4DE left center no-repeat;
  color: black;
  padding-bottom: 5%;
}
 

[alzacon]

Ese código css sólo es del menú. Y no pareces que uses responsive design.

Dices que has probado em y rem. ¿Lo has usado tanto en los font-size como en los width, margin, padding, etc?


Pero el problema con los % es muy sencillo.
- % toma como valor de referencia el del elemento padre, en su defecto "abuelo", "bisabuelo",... , elemento body y en ultimo termino del html.
- la anchura viene determinada por la anchura del display del navegador. El 100% del html por defecto será prácticamente el ancho de la resolución de tu monitor (con el navegador maximizado)
- El tamaño de la fuente si no lo indicas toma el que tenga el navegador por defecto, suele ser 16px, para el elemento html.
Ahora toca hacer cuentas de cuanto ocupa por ejemplo donde está el texto "Menu Principal" en cada pantalla y comparar con lo que ocupa de ancho el texto en una linea (con el mismo tamaño de fuente, como creo que tienen).

[elafrikano]

Hola alzacon! No como dije anteriormente como no estoy tan diestro en css no se si sera mucho exegerar trabajar con responsive desing.

Los em y rem solo los he provado en los font-size, es mas nada en el codigo no sale porque preferi dejarlo como lo tenia cuando me di cuenta del problema.

Aca te dejo lo que me pides, el texto menu principal esta en el id="barra" que su vez esta dentro del nav, el nav dentro de la etiqueta general y la general dentro del body. Saludos!

Código CSS:

body{
 
    margin: 0px;
    background-image: url(../imagenes/textura.png);
    font-family: arial;
}
 
#general {
 
    margin: auto;
    height: 86%;
    width:  92%;
    box-shadow: 2px 10px 10px #333;
    border-bottom-right-radius: 20px;  
    border-bottom-left-radius: 20px;
    
}
 
nav{
 
    float: left;
    width: 20%;
    height: 70%;
    background: #0e7cae;
}
 
#barra{
 
    width:90%;
    height:5%;
    background:white;
    color: black;
    padding-top: 4%;
    border-bottom-right-radius: 20px; 
    border-top-right-radius: 20px; 
    box-shadow: 2px 2px 10px #333;
    font-weight: bold;
    
}
 

[elafrikano]

Bueno la verdad ya resolvi el problema. Se acomodo colocando min-width, min-height, a la etiqueta general y ya por mas zoom que tenga no se desorganiza la pagina. Leyendo un problema parecido aca el foro di con la solucion. Gracias a todos por sus respuestas!