Problemas de dimensiones en mi web al trabajar con margenes del programa

arrones · 31 Dic 2014

Hola Hola! llevo apenas unos dias trabajando con mi web / script de YouTube con un programa y trabajo con las dimensiones exactas del programa sin salirme del margen, pero aun asi mi web se ve exageradamente mal, con dimensiones erroneas, no se ajusta a la pantalla y salen las barras de dezplazamiento donde no deben de salir! en cada navegador se ve diferente, no se que será y me frustra porque estoy trabajando con los margenes del programa! esta es mi web:

Mira porque no debes tomar COCA-COLA - YouTube

Espero me puedan dar una mano! :encouragement:

Vzk91 · 31 Dic 2014

No se que medidas dices que estas respetando. Mira:

El contenedor general con id #page tiene un width: 960px.
El estilo para el id #u191 tiene un width de 1358px.

Si le añades al estilo #page overflow: hidden; veras como te corta todo lo que se sale.

Te recomiendo que si trabajas con un contenedor padre a tamaño fijo, todas las clases interiores que uses que cojan el tamaño tontal del contenedor padre les pongas width: 100%;

Un saludo

arrones · 31 Dic 2014

Cuando uno no sabe y no es programador, no se. Entiende nada! Haha gracias! Buscaré en Google con lo que me dijiste! :encouragement:

Vzk91 dijo:
No se que medidas dices que estas respetando. Mira:

El contenedor general con id #page tiene un width: 960px.
El estilo para el id #u191 tiene un width de 1358px.

Si le añades al estilo #page overflow: hidden; veras como te corta todo lo que se sale.

Te recomiendo que si trabajas con un contenedor padre a tamaño fijo, todas las clases interiores que uses que cojan el tamaño tontal del contenedor padre les pongas width: 100%;

Un saludo

Vzk91 · 31 Dic 2014

[MENTION=39089]arrones[/MENTION] lo que te he estado contando, son reglas CSS, se encuentran en el archivo index.css de tu scrpit.

Si te fijas ( pulsa F12 en el navegador, y utiliza el analziador de HTML ) tienes una estructura parecida a esta:

Insertar CODE, HTML o PHP:

<html>
<head>cosas del head que no nos interesan ahora</head>
<body>
[B][COLOR="#FF0000"]<div id="page" class="clearfix">[/COLOR][/B]
<div id="page_position_content" class="position_content">
[B][COLOR="#0000FF"]<div id="pu191" class="clearfix colelem">
contenido
</div>[/COLOR][/B]
</div>
[B][COLOR="#FF0000"]</div>[/COLOR][/B]
</body>
</html>

Lo que te he resaltado en rojo es tu contenedor padre. Tiene un id="page". Con esto desde tu hoja de estilos index.css encontraras algo asi:

Insertar CODE, HTML o PHP:

#page {
reglas aqui
}

Hay le estas especificando un ancho (width) de 960px. Pero sin embargo dentro del contenedor tienes en azul el contenedor con id="pu191". Este contenedor tiene unas reglas en la misma hoja de estilos tal que asi:

Insertar CODE, HTML o PHP:

#pub191 {
reglas aqui
}

Hay en las reglas le estas especificando un ancho (width) de 1358px. Por eso te sale el scroll horizontal.
Como el contenedor padre #page ya tiene un ancho fijo (960px) todos los contenedores interiores tipo #pu191 que quieras que tengan el ancho tope debes colocarlos con ancho 100%, quedando:

Insertar CODE, HTML o PHP:

#pub191 {
width: 100%;
mas reglas aqui
}

De esta manera nunca tendran mayor anchura que el contenedor padre. Tambien es una buena practica añadir a la hoja de estilos el codigo:

Insertar CODE, HTML o PHP:

* {
box-sizing: border-box;
}

Con esto consigues que las reglas de relleno (padding) no afecten al ancho de los elementos.

Espero habertelo dejado un poco mas claro jejeje

Un saludo

arrones · 31 Dic 2014

Excelente! Apenas llegó a la casa lo pruebo! Si se un poco de css, bueno lo he visto y tocado pero no mucho! Los términos que usaste me dejaron confundido Hehe, apenas llegue a la casa lo pruebo! Gracias por la ayuda! :encouragement:

Vzk91 dijo:
[MENTION=39089]arrones[/MENTION] lo que te he estado contando, son reglas CSS, se encuentran en el archivo index.css de tu scrpit.

Si te fijas ( pulsa F12 en el navegador, y utiliza el analziador de HTML ) tienes una estructura parecida a esta:

Insertar CODE, HTML o PHP:

<html> <head>cosas del head que no nos interesan ahora</head> <body> [B][COLOR="#FF0000"]<div id="page" class="clearfix">[/COLOR][/B] <div id="page_position_content" class="position_content"> [B][COLOR="#0000FF"]<div id="pu191" class="clearfix colelem"> contenido </div>[/COLOR][/B] </div> [B][COLOR="#FF0000"]</div>[/COLOR][/B] </body> </html>

Lo que te he resaltado en rojo es tu contenedor padre. Tiene un id="page". Con esto desde tu hoja de estilos index.css encontraras algo asi:

Insertar CODE, HTML o PHP:

#page { reglas aqui }

Hay le estas especificando un ancho (width) de 960px. Pero sin embargo dentro del contenedor tienes en azul el contenedor con id="pu191". Este contenedor tiene unas reglas en la misma hoja de estilos tal que asi:

Insertar CODE, HTML o PHP:

#pub191 { reglas aqui }

Hay en las reglas le estas especificando un ancho (width) de 1358px. Por eso te sale el scroll horizontal.
Como el contenedor padre #page ya tiene un ancho fijo (960px) todos los contenedores interiores tipo #pu191 que quieras que tengan el ancho tope debes colocarlos con ancho 100%, quedando:

Insertar CODE, HTML o PHP:

#pub191 { width: 100%; mas reglas aqui }

De esta manera nunca tendran mayor anchura que el contenedor padre. Tambien es una buena practica añadir a la hoja de estilos el codigo:

Insertar CODE, HTML o PHP:

* { box-sizing: border-box; }

Con esto consigues que las reglas de relleno (padding) no afecten al ancho de los elementos.

Espero habertelo dejado un poco mas claro jejeje

Un saludo