Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Duda pagina web
#1
Pregunta 
Buenas!
Tengo un problema con una página web cuando el monitor tiene mucha resolución. Aparece esto:
[spoiler]
[Imagen: Ll1aptU.jpg]
[/spoiler]
Alguna idea de que puede ser? El problema es la franja gris a la derecha...
Muchisimas gracias
#2
Las imágenes de Taringa (kn3.net) no funcionan fuera de dicho sitio, así que te recomendaría cambiaras de sitio de alojamiento de imágenes para mostrar tu problema. Por única vez he cambiado tu imagen.

Con respecto a tu consulta, por lo visto estas repitiendo la imágen de manera horizontal, puedes hacer dos cosas:

1. Cambiar el ancho para que este ocupe el mismo espacio que el demás contenido.
2. Incluir ese elemento que contiene la imágen dentro de otro que ocupe el espacio de tu contenido.

De nuevo, sin código (o el enlace) no es posible ayudar demasiado.
WWW
#3
(09-05-2014, 10:12 PM)AbaddonOrmuz escribió: Las imágenes de Taringa (kn3.net) no funcionan fuera de dicho sitio, así que te recomendaría cambiaras de sitio de alojamiento de imágenes para mostrar tu problema. Por única vez he cambiado tu imagen.

Con respecto a tu consulta, por lo visto estas repitiendo la imágen de manera horizontal, puedes hacer dos cosas:

1. Cambiar el ancho para que este ocupe el mismo espacio que el demás contenido.
2. Incluir ese elemento que contiene la imágen dentro de otro que ocupe el espacio de tu contenido.

De nuevo, sin código (o el enlace) no es posible ayudar demasiado.

Perdón de nuevo, el apuro me llevó a obviar información de nuevo.
El problema original ya lo solucioné dándole valores "max-width: 100%" a lo que sostenía al menú y al menú en sí.
El problema ahora radica en otro punto:
Cuando aumento mucho el zoom (175% por ejemplo) aparece esto a la derecha:
[Imagen: 2gt55kz.jpg]
Y esto a la izquierda:
[Imagen: vidlt.jpg]
Adjunto los códigos de cada parte:
Código:
.wrapper{
    width: 1120px;
    margin: 0px auto;
    position: relative;
Código:
#header{
    height: 305px;
    position: relative;
    z-index: 10;
    background-image: url(../Datos/banner%20FINAL.jpg);
    background-size: cover;
    width: 100%;
Código:
#main{
    width: 100%;
Código:
#menu{
    width: 100%;
    padding-top: 1px;
    margin-bottom: 0px;
Código:
#menu-holder{
    width: 1280px;
    height: 79px;
    background: url(../img/menu-bg.png) repeat-x;
Código:
#nav{
    display: block;
    position: left;
    top: 0px;
    left: auto;
    height: 79px;
    width: 1120px;
El "header" corresponde a la imagen de arriba, el "#menu" y el "#menu-holder" hacen referencia a lo que sostiene al menú y el "#nav" corresponde al menú en sí! Perdón de antemano si olvide algún dato y muchas gracias por la buena onda!Gran sonrisa
#4
Ya veo el problema, es que usas posiciones absolutas y con pixeles.

En tu div #page-title agregale la clase "clearfix" que por lo regular ya esta incluido en las plantillas para "normalizar" las hojas de estilos.

Con tus enlaces (de las banderas) podrías usar, en lugar de usar una posición absoluta a la izquierda, deberías hacerlo a la derecha (right: 5px) o mucho mejor usar una lista que "flote" a la derecha. Ejemplo:

HTML
Código:
<div id="page-title" class="clearfix">

    <span class="title">Últimas noticias</span>

    <ul class="list-inline float-right">
        <li>
            <a href="index1.html">
                <img src="img/spain.png" width="50" height="50" />
            </a>
        </li>
        <li>
            <a href="index2.html">
                <img src="img/english.png" width="50" height="50" />
            </a>
        </li>
        <li>
            <a href="index3.html">
                <img src="img/aleman.png" width="50" height="50" />
            </a>
        </li>
    </ul>

</div>

CSS
Código:
.list-inline,
.list-inline li,
.list-inline li a {
    display: inline-block;
}
.list-inline {
    list-style: none;
}
.list-inline,
.list-inline li {
    margin: 0;
    padding: 0;
}
.list-inline li a img {
    display: block;
}
.float-right {
    float: right;
}

Lo demás, seríe cuestión de cerrar el #wrapper después de cerrar #content, para que este último tenga el mismo ancho.
WWW
#5
(10-05-2014, 04:03 AM)AbaddonOrmuz escribió: Ya veo el problema, es que usas posiciones absolutas y con pixeles.

En tu div #page-title agregale la clase "clearfix" que por lo regular ya esta incluido en las plantillas para "normalizar" las hojas de estilos.

Con tus enlaces (de las banderas) podrías usar, en lugar de usar una posición absoluta a la izquierda, deberías hacerlo a la derecha (right: 5px) o mucho mejor usar una lista que "flote" a la derecha. Ejemplo:

HTML
Código:
<div id="page-title" class="clearfix">

    <span class="title">Últimas noticias</span>

    <ul class="list-inline float-right">
        <li>
            <a href="index1.html">
                <img src="img/spain.png" width="50" height="50" />
            </a>
        </li>
        <li>
            <a href="index2.html">
                <img src="img/english.png" width="50" height="50" />
            </a>
        </li>
        <li>
            <a href="index3.html">
                <img src="img/aleman.png" width="50" height="50" />
            </a>
        </li>
    </ul>

</div>

CSS
Código:
.list-inline,
.list-inline li,
.list-inline li a {
    display: inline-block;
}
.list-inline {
    list-style: none;
}
.list-inline,
.list-inline li {
    margin: 0;
    padding: 0;
}
.list-inline li a img {
    display: block;
}
.float-right {
    float: right;
}

Lo demás, seríe cuestión de cerrar el #wrapper después de cerrar #content, para que este último tenga el mismo ancho.

No entendí muy bien a que te referís con cerrar el wrapper y el content, lo demas ya lo hice, pero sigue siendo lo mismo cuando pongo mucho zoom.
Te comento lo que hice:
-Reemplace en menu holder y el nav los datos absolutos por "width: 100%" y eso fue lo que soluciono lo de los monitores con mucha resolución.
- Agregue lo que me pasaste para sacar la posición absoluta de las banderas y agregue su componente en style.css
Muchas gracias por la paciencia y la comprensión!
#6
(10-05-2014, 06:47 AM)othgeg escribió: No entendí muy bien a que te referís con cerrar el wrapper y el content, lo demas ya lo hice, pero sigue siendo lo mismo cuando pongo mucho zoom.

Para que se adapte a todas las resoluciones, es necesario usar porcentajes o em's en lugar de pixélesx o púntos.

Lo demás, olvida lo que dije Gran sonrisa era cuestión de editar la estructura, pero con CSS también lo puedes hacer, siguiendo tu diseño:

Código:
.wrapper,
#content {
    width: 100%;
    max-width: 1120px;
}
#content {
    margin: 0 auto 40px !important;
}

Lo de las banderas, se soluciona usando la lista del código que dejé anteriormente.

Personalmente te recomendaría reestructurar el sitio.
WWW
#7
(10-05-2014, 04:36 PM)AbaddonOrmuz escribió:
(10-05-2014, 06:47 AM)othgeg escribió: No entendí muy bien a que te referís con cerrar el wrapper y el content, lo demas ya lo hice, pero sigue siendo lo mismo cuando pongo mucho zoom.

Para que se adapte a todas las resoluciones, es necesario usar porcentajes o em's en lugar de pixélesx o púntos.

Lo demás, olvida lo que dije Gran sonrisa era cuestión de editar la estructura, pero con CSS también lo puedes hacer, siguiendo tu diseño:

Código:
.wrapper,
#content {
    width: 100%;
    max-width: 1120px;
}
#content {
    margin: 0 auto 40px !important;
}

Lo de las banderas, se soluciona usando la lista del código que dejé anteriormente.

Personalmente te recomendaría reestructurar el sitio.

Te comento mi situación. Yo hice varias páginas en html pero soy relativamente nuevo en css. Me maneje bastante bien modificando para que mi menú entre en su holder y quizás modifique mas de lo que debía. No te quiero molestar ni sacar mas tiempo! Cuando tengas un rato libre mandame por privado como podría reestructurar el sitio. Las ganas de aprender no faltan! Desde ya muchísimas gracias por toda la ayuda. Si no hubiera sido por vos hubiera tenido muchos problemas con la persona que me encargó el sitio!
EDIT: Ya logre hacer que cambie depende la resolución... pero quedo un pequeñisimo detalle que te muestro:
[Imagen: rcll7a.jpg]

Alguna idea de la franja sin relleno de la derecha? lo demas está al 100%
#8
te recomiendo que las tablas lo hagas por porcentajes
ya que todas las personas no utilizan la misma resolucion de sistema en sus computadoras

busca infromacion sobre standares en paginas webs eso te ayudaria muxo
#9
no creo que nadie vaya ha visualizar tu sitio a 175% de zoom o a una resolución equiparable. mi consejo es que establezcas tanto el max-width y min-width a valores fijos(1980px no es una mala medida para el maximo) si es que quieres un width fexible al 100% y unos magenes bien definidos te quitaran la mayoria de los problemas de visualizacion.

recuerda que aunque tu tema se ajuste perfectamente al monitor el contenido generalmente no lo hace, y una plantilla con limites te ahorrara muchas molestias vigilando la estructura de tus publicaciones.
Crear tipo de nodo. Agregar campos CCK. Crear Vista. Enjuague. Y repita.
WWW
#10
(21-05-2014, 03:23 AM)joksan escribió: no creo que nadie vaya ha visualizar tu sitio a 175% de zoom o a una resolución equiparable. mi consejo es que establezcas tanto el max-width y min-width a valores fijos(1980px no es una mala medida para el maximo) si es que quieres un width fexible al 100% y unos magenes bien definidos te quitaran la mayoria de los problemas de visualizacion.

recuerda que aunque tu tema se ajuste perfectamente al monitor el contenido generalmente no lo hace, y una plantilla con limites te ahorrara muchas molestias vigilando la estructura de tus publicaciones.
Muchísimas gracias por el consejo, lo tendré en cuenta!
EDIT: Poniéndole valores al header, menu holder, etc, del 100% y mas lo que me paso Abbadon logre solucionar todos los problemas! Muchisimas gracias a todos por su paciencia y su información!


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
Ladrillo [Aporte] pagina con vídeo de fondo gamemaster94 18 375 02-03-2018, 05:43 PM
Último mensaje: ArtuGar
  Solucionado: Pagina carga como no segura diana30dom 3 138 08-01-2018, 09:15 AM
Último mensaje: Vicen
  PRIMER PAGINA WEB HTML DEL MUNDO Smithcanal 27 912 21-10-2017, 01:47 AM
Último mensaje: ReyNexo23
Pregunta Solucionado: Ayuda con página TamiGantcheff 4 250 02-08-2017, 04:17 PM
Último mensaje: Vicen
  duda.. Roby 1 275 30-12-2016, 09:03 PM
Último mensaje: garcon
  Trucos y efectos de Javascript para tu página web CarlosAlberto 0 571 05-01-2016, 03:51 PM
Último mensaje: CarlosAlberto
  Duda con PHP y JSON Sugoi 9 539 01-10-2015, 11:26 PM
Último mensaje: 23r7190
  [Duda] COPIA DE SEGURIDAD PÁGINA WEB pedrovillarraga 8 518 02-08-2015, 04:12 PM
Último mensaje: YamaT
  Proteger pagina con login sin Base de datos zodiaco 12 2,215 04-07-2015, 11:38 AM
Último mensaje: davilro
  Personalizar el cursor de la pagina aerotuning 6 669 30-04-2015, 10:07 PM
Último mensaje: Minikole



Usuarios navegando en este tema: 1 invitado(s)