Creé un sitio web con una barra de navegación horizontal fija que está a la derecha de la pantalla, con el logotipo a la izquierda. Todo con él funciona bien hasta que el monitor se extiende más de 1240px de ancho. En ese punto, la barra de navegación se extiende demasiado hacia la derecha en comparación con el resto del contenido (que tiene un ancho máximo de 1024 px).
Ahora, sé exactamente por qué hace esto, lo he codificado para hacerlo usando right: 0 , sin embargo, todavía no quiero que se extienda más allá de los 1024 px que configuré para el resto del contenido y yo no tengo idea de cómo resolver el problema. Intenté establecer un max-width del div-element y no hace nada, intenté crear otros elementos con max-width: 1024px y position: relative (como me sugirieron esta opción), pero sin suerte.
La única forma larga de solucionar el problema que puedo encontrar es tener una consulta de medios para cada resolución y usar márgenes en lugar de right: 0 aunque esto parece una solución innecesariamente larga y complicada. Tampoco soy desarrollador de ninguna manera, esta es la primera vez que codifico, por lo que mi conocimiento es muy limitado.
main, header { max-width: 1024px; margin: auto; } @media screen and (min-width: 780px) { .navbar { background-color: #ffffffde; position: fixed; padding: 3px; max-width: 1024px; z-index: 50; right: 0; margin-right: 2rem; } .navbar a { float: left; display: block; color: #000000; text-align: center; padding: 8px; text-decoration: none; font-size: 17px; top: 15px; } .navbar .icon { display: none; } } .dropdown { float: left; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: black; padding: 8px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9d3; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 50; } .dropdown-content a { float: none; color: black; padding: 8px; text-decoration: none; display: block; text-align: left; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: rgba(224, 222, 222, 0.705); } .dropdown-content a:hover { background-color: rgba(224, 222, 222, 0.705); color: black; } .dropdown:hover .dropdown-content { display: block; } <header> <a href="/en/index.html"> <div class="logo">Logo</div> </a> <div class="navbar" id="myNavbar"> <a href="#about">About</a> <div class="dropdown"> <button class="dropbtn">Services <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#services and solutions">Services and Solutions</a> <a href="#training">Training and Workshops</a> </div> </div> <a href="#partners">Partners</a> <a href="#contact">Contact</a> <a href="/sv/index.html" style="color: rgb(138, 138, 138)">Svenska</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> </header> (He excluido el CSS para tabletas y dispositivos móviles, ya que funcionan, así como el JS, ya que no es relevante para el problema y no quería que ocupara un espacio innecesario en la publicación)
Si alguien tiene alguna solución posible a mi problema, estoy dispuesto a probar la mayoría de las cosas, ya que ya he buscado por todas partes una respuesta a mi pregunta.
Los elementos de posición fija se eliminan del flujo DOM normal. Por lo tanto, los elementos de posición fija siempre son relativos a la ventana gráfica e ignoran todo lo demás en la página.
Sin embargo, dado que sabe que el ancho del contenido <main> es 1024px, puede usar calc() para ajustar la posición right de la barra de navegación fija...
El ancho del espacio en blanco a la izquierda/derecha del contenido principal es: 100 % (el ancho de la página) menos 1024 px (el ancho del contenido principal) dividido por la mitad (lados izquierdo y derecho). Por lo tanto, esto le dará el borde derecho del contenido principal.
right: calc((100% - 1024px)/2);
.navbar { background-color: #ffffff; position: fixed; padding: 3px; max-width: 1024px; z-index: 50; right: calc((100% - 1024px)/2); margin-right: 2rem; }Una cosa que podrías hacer es colocar los elementos con coordenadas en un nivel absoluto: Por supuesto pondrás los valores en función de la posición
position: absolute; top: 0; left: 20px div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; }Siempre trate de usar:
* { box-sizing: border-box; padding: 0; margin: 0; } De modo que la mayoría de los problemas de área de expansión más que definida o desbordamiento del contenedor pueden eliminarse.
Ver esto para el tamaño de la caja
Aquí padding/margin = 0 elimina los valores predeterminados del elemento que a veces también son motivo de problema.
Ahora todavía se está renderizando fuera de dar los valores de acuerdo con el tamaño de la pantalla e intentar eliminar un margin adicional
* { box-sizing: border-box; padding: 0; margin: 0; } main, header { max-width: 1024px; margin: auto; } @media screen and (min-width: 780px) { .navbar { background-color: #ffffffde; position: fixed; padding: 3px; max-width: 1024px; z-index: 50; right: 0; margin-right: 2rem; } .navbar a { float: left; display: block; color: #000000; text-align: center; padding: 8px; text-decoration: none; font-size: 17px; top: 15px; } .navbar .icon { display: none; } } .dropdown { float: left; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: black; padding: 8px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9d3; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 50; } .dropdown-content a { float: none; color: black; padding: 8px; text-decoration: none; display: block; text-align: left; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: rgba(224, 222, 222, 0.705); } .dropdown-content a:hover { background-color: rgba(224, 222, 222, 0.705); color: black; } .dropdown:hover .dropdown-content { display: block; } <header> <a href="/en/index.html"> <div class="logo">Logo</div> </a> <div class="navbar" id="myNavbar"> <a href="#about">About</a> <div class="dropdown"> <button class="dropbtn">Services <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#services and solutions">Services and Solutions</a> <a href="#training">Training and Workshops</a> </div> </div> <a href="#partners">Partners</a> <a href="#contact">Contact</a> <a href="/sv/index.html" style="color: rgb(138, 138, 138)">Svenska</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> </header>