Cómo crear borde que ocupe toda la pantalla sin exceder el ancho del monitor

  • Autor Autor Lucas23
  • Fecha de inicio Fecha de inicio
Lucas23

Lucas23

1
Zeta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Suscripción a IA
Hola betas, agradecería mucho a quien me pueda dar una mano con lo siguiente:

Estoy editando un theme el cual tiene un ancho determinado de 900 px, y quiero agregar una linea que sea mayor a 900px, (dependiendo de la resolucion de cada monitor) que se pueda ver en toda la pantalla.

<div style="width:900px;">

Borde que ocupe toda la pantalla (el mismo ancho que la resolucion del monitor)

</div>

Si agrego <div style="border: solid 1px #000000; width:100%"></div> el borde toma un ancho de 940 px, y no quiero que pase eso.

Alguien podría darme una mano?
Desde ya muchas gracias.
Saludos
 
Tendrías que ponerle el borde a otro elemento fuera del div de 900px.
 
No entiendo lo que necesitas. Pero segun yo con un DIV dentro de otro DIV, el contenedor debe tener un width de 100% y para poder ayudarte mas, plasmalo en una imagen.
 
Mm creo que no debes tener un div que encierre todo el contenido, osea que no haya un div principal y dentro de ese div, se encuentren todos los demás divs y elementos del sitio.

Al no haber un div "principal" cuando al otro div le agregues la línea, le das la propiedad de widht:100%; así abarcara el ancho de la pantalla y no el ancho del div principal.

Pruébalo, no se sí estoy en lo correcto.

Otra puede ser, que insertes un div independiente de toda la estructura, me refiero que esté fuera del div principal y con el css le agregas la posición abosoluta y el padding-top para que quede a la altura que quieres........

Otra posible solución que se me ocurre, con javascript que reconozca la resolución de cada pantalla y asigne el ancho al div.
 
Última edición:
utiliza jquery y obten el valor del ancho maximo con $(document).width() y le restas los pixeles de los bordes, algo así como:
Insertar CODE, HTML o PHP:
$(document).ready(function(){
    $('#div_texto').width(
        $(document).width() - $('#borde').width()
    );
});

Recuerda que debes hacer esto dentro de la etiqueta head y también puedes agregar esta misma función en el evento cuando redimensionas la pantalla.

Desde css es imposible hacer calculos a modo de pixeles en todos los exploradores, lo que deberias hacer es poner un ancho de 95% y el borde de 5% y el document body con margin a 0px y border a 0px.
 
¿No tendrás un padding a los lados? por ejemplo: padding:0 20px;. Como bien comenta @wsoul, sería bueno ver una imagen de lo que quieres lograr o como lo tienes.
 
Atrás
Arriba