la forma de un centro más amplio-que-bandera navegador gráfico?

  • Matthew
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Jul 07, 2005
  • Mensajes: 266
  • Loc: Canada
  • Status: Offline

Nota Junio 19th, 2009, 6:34 am

¿Puedo centro de un banner gráfico, thats más amplio que el navegador, sin la ampliación de la anchura de mi sitio web?

La bandera es de 1.280 píxeles de ancho. Quiero que aunque centrada en los visitantes de resolución es de 1024 o 800 píxeles de ancho, más quiero que la página web para no introducir un izquierda-derecha barra de desplazamiento.

¿Es esto posible?
Matthew Doucette, Xona Games
Award winning indie game studio.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Junio 19th, 2009, 6:34 am

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de Usuario
  • Registrado: Jul 25, 2005
  • Mensajes: 2735
  • Loc: Nashville, TN
  • Status: Offline

Nota Junio 19th, 2009, 6:35 am

Tienes un ejemplo de lo que usted está viendo? No entiendo qué quieres decir con que si centrar su targer más ancho que el ancho de la resolución?
I'd love to change the world, but they won't give me the source code.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Registrado: Feb 10, 2004
  • Mensajes: 13455
  • Loc: Florida
  • Status: Offline

Nota Junio 19th, 2009, 6:38 am

Fijar la imagen como fondo de una <div>, a la <div> uno centrado CSS background-posición y una anchura de lo que quiera.
Strong with this one, the sudo is.
  • Matthew
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Jul 07, 2005
  • Mensajes: 266
  • Loc: Canada
  • Status: Offline

Nota Junio 19th, 2009, 6:40 am

No tengo un ejemplo. Pero quiero un banner gráfico thats realmente amplia (1280p) que se mantiene centrado en el navegador que escala grandes y pequeños. ¿Qué sucede ahora es que se mantiene centrada cuando el navegador es más ancha que la gráfica, sino que se alinea la izquierda cuando el navegador es más pequeña que la gráfica (así como introduce la izquierda-derecha barra de desplazamiento, lo que significa que el sitio web se ve obligado a ser 1280 píxeles de ancho).

Espero que lo explica.

No tengo un ejemplo en ejecución, sólo se trata de saber cómo funciona squishing de mi propio sitio web: http://dualityzf.com/ Imagínese que si el centro el logotipo gráfico se suponía que iba a permanecer centrado cuando Squish los sitios web anchura muy pequeña. Eso es un ejemplo perfecto de lo que quiero.
Matthew Doucette, Xona Games
Award winning indie game studio.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de Usuario
  • Registrado: Jul 25, 2005
  • Mensajes: 2735
  • Loc: Nashville, TN
  • Status: Offline

Nota Junio 19th, 2009, 6:54 am

joeberts tiene la sugerencia correcta para usted entonces. Tal vez algo como esto...

Código: [ Select ]
 
<style>
body {
     margin: 0px;
}
 
#myDiv {
     background:url(/path/to/img.jpg) no-repeat center;
     width: 100%;
     height: [specify this to same as image height]px;
     position: absolute;
     top: 0px;
     left: 0px;
}
</style>

[and then at top of body]
<div id="myDiv">&nbsp;</div>
  1.  
  2. <style>
  3. body {
  4.      margin: 0px;
  5. }
  6.  
  7. #myDiv {
  8.      background:url(/path/to/img.jpg) no-repeat center;
  9.      width: 100%;
  10.      height: [specify this to same as image height]px;
  11.      position: absolute;
  12.      top: 0px;
  13.      left: 0px;
  14. }
  15. </style>
  16. [and then at top of body]
  17. <div id="myDiv">&nbsp;</div>
I'd love to change the world, but they won't give me the source code.
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de Usuario
  • Registrado: Jul 11, 2005
  • Mensajes: 1828
  • Loc: In the Great White North
  • Status: Offline

Nota Junio 19th, 2009, 9:39 am

siempre que el div está en el lugar correcto en el flujo de la página no necesita realmente la posición, arriba, izquierda o valores.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • Matthew
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Jul 07, 2005
  • Mensajes: 266
  • Loc: Canada
  • Status: Offline

Nota Junio 19th, 2009, 1:40 pm

Esto es trabajo. Gracias. Malos le permiten conocer los resultados pronto!
Matthew Doucette, Xona Games
Award winning indie game studio.
  • Matthew
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Jul 07, 2005
  • Mensajes: 266
  • Loc: Canada
  • Status: Offline

Nota Junio 21st, 2009, 7:10 pm

Esto funciona muy bien. Malos mostrar el resultado pronto.

¿Cómo debo hacer para que la imagen (el div) hacer clic en? Envolviéndolo con un "a href" es hacer clic, pero el cursor del ratón no cambia cuando se cierne sobre. ¿Hay una mejor manera de hacer esto?
Matthew Doucette, Xona Games
Award winning indie game studio.
  • Matthew
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Jul 07, 2005
  • Mensajes: 266
  • Loc: Canada
  • Status: Offline

Nota Junio 21st, 2009, 7:30 pm

Bueno, Heres el resultado:
http://xona.com/

El "XONA JUEGOS" banner en la parte superior, con los ocho combatientes, debe llenar una amplia 1280p navegador, y permanecer centrado con un mayor y menor tamaño navegar...y funciona! :)

A continuación, sólo quiero hacer hacer clic donde se puede ver el cursor del ratón sobre el cambio mouseover.
Matthew Doucette, Xona Games
Award winning indie game studio.
  • Matthew
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Jul 07, 2005
  • Mensajes: 266
  • Loc: Canada
  • Status: Offline

Nota Junio 21st, 2009, 7:50 pm

Resulta que envolver div con un "a href" funciona en IE 8.0, pero no en Firefox, que se limitan a los vínculos que no romper el espacio, no todo el div. Si usted sabe de una elegante solución para hacer que div hacer clic, hágamelo saber! Gracias...
Matthew Doucette, Xona Games
Award winning indie game studio.
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Registrado: Mar 28, 2009
  • Mensajes: 305
  • Loc: AFK
  • Status: Offline

Nota Junio 21st, 2009, 9:33 pm

ponga esto en su archivo css

#bannerTop span (
position: absolute;
ancho: 100%;
altura: 242px;
)

Luego, en su html en que bannerTop div...agregar

<a href="addalinkhere.com"> <span> </ span> </ a>

Podría haber una forma más fácil, pero funciona para mí
Custom Web Design
  • Matthew
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Jul 07, 2005
  • Mensajes: 266
  • Loc: Canada
  • Status: Offline

Nota Junio 22nd, 2009, 6:59 am

Gracias por la sugerencia, malos probarlo...

¿Cuál es la diferencia entre div y span? ¿Cómo debo usar uno y otro? Sé que se puede utilizar la misma manera, pero son para cosas diferentes. div es para las pequeñas cosas y se extienden para grandes cosas? Acabo de leer en él y dice que abarcan también incluye el apartado de su propio formato, que abarcan no. Por lo tanto, me parece que div sería utilizado para los grandes bloques de código html y espacio para los pequeños trozo de html, como el formato, incluso una sola palabra en una frase. Estoy en el camino correcto?
Matthew Doucette, Xona Games
Award winning indie game studio.
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de Usuario
  • Registrado: Jul 11, 2005
  • Mensajes: 1828
  • Loc: In the Great White North
  • Status: Offline

Nota Junio 22nd, 2009, 7:43 am

bien la diferencia en este caso es que el permitido para envolver un código span con una etiqueta de ancla para que sea un enlace. La mayoría de los navegadores no me gusta si intenta adjuntar elementos de contenedores como un div dentro de un ancla (como ha descubierto).

Sin embargo, debo señalar que realmente no necesita de los códigos span para hacer el clic que todo poder.

Usted puede convertir su esencia div cabecera completa en una etiqueta de anclaje con un poco de astucia CSS.
El HTML
Código: [ Select ]
<a class="header" href="someURL"></a>
y el CSS
Código: [ Select ]
a.header{
display:block;
background:url(/path/to/img.jpg) no-repeat center;
width: 100%;
height: [specify this to same as image height]px;
}
  1. a.header{
  2. display:block;
  3. background:url(/path/to/img.jpg) no-repeat center;
  4. width: 100%;
  5. height: [specify this to same as image height]px;
  6. }


el "display: block" básicamente convierte su etiqueta de anclaje en un objeto que va a cambiar el orden de flujo al igual que el div tiene en la actualidad.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Registrado: Mar 28, 2009
  • Mensajes: 305
  • Loc: AFK
  • Status: Offline

Nota Junio 22nd, 2009, 7:47 am

Gracias Graphixboy. Aprender algo nuevo cada día. Siempre más de una forma a la piel de un gato.
Custom Web Design
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Registrado: Feb 10, 2004
  • Mensajes: 13455
  • Loc: Florida
  • Status: Offline

Nota Junio 22nd, 2009, 8:08 am

El método en el ejemplo que se adjunta ha trabajado bien para mí en los navegadores, lectores de pantalla, y los motores de búsqueda desde hace bastante tiempo.

Sé que sugiere una <div> antes, pero que estaba bajo el supuesto de que se trataba de una función genérica sin bandera y no una cabecera. :)
Attachments:
banner.html.zip

(540 Bytes) 294 veces

Example

Strong with this one, the sudo is.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Junio 22nd, 2009, 8:08 am

Publicar Información

  • Total de mensajes en este tema: 23 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 114 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC