comment un plus grand centre que la bannière navigateur graphique?

  • Matthew
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Juil 07, 2005
  • Messages: 266
  • Loc: Canada
  • Status: Offline

Message Juin 19th, 2009, 6:34 am

Puis-je centre de la bannière graphique, thats plus large que le navigateur, sans augmenter la largeur de mon site Web?

La bannière est de 1280 pixels de large. Je veux qu'il centré même si les visiteurs de résolution est de 1024 ou 800 pixels de large, plus je veux que le site à ne pas introduire un droite-gauche barre de défilement.

Est-ce possible?
Matthew Doucette, Xona Games
Award winning indie game studio.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juin 19th, 2009, 6:34 am

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juil 25, 2005
  • Messages: 2735
  • Loc: Nashville, TN
  • Status: Offline

Message Juin 19th, 2009, 6:35 am

Vous avez un exemple de ce que vous regardez? Je ne comprends pas ce que vous entendez par la centrant si sa plus large que la largeur targer résolution?
I'd love to change the world, but they won't give me the source code.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Juin 19th, 2009, 6:38 am

Définir l'image comme arrière-plan d'un <div>, donner l'une centrée <div> CSS background-position et d'une largeur de ce que vous voulez.
Strong with this one, the sudo is.
  • Matthew
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Juil 07, 2005
  • Messages: 266
  • Loc: Canada
  • Status: Offline

Message Juin 19th, 2009, 6:40 am

Je n'ai pas un exemple. Mais je veux une bannière graphique thats vraiment large (1280p), qui reste centrée sur l'échelle comme vous le navigateur plus grands et plus petits. Qu'est-ce qui arrive maintenant est qu'il reste centré lorsque le navigateur est plus large que le graphique, mais il s'aligne à gauche lorsque le navigateur est plus petite que l'image (ainsi que présente la droite-gauche barre de défilement, ce qui signifie que le site est obligé d'être 1280 pixels de large).

J'espère que l'explique.

Je n'ai pas un exemple en cours d'exécution, je sais c'est ainsi que ça fonctionne squishing de mon propre site web: http://dualityzf.com/ Imaginez si ce centre de logo graphique était censé rester centré lorsque je Squish les sites largeur très faible. Voilà un parfait exemple de ce que je veux.
Matthew Doucette, Xona Games
Award winning indie game studio.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juil 25, 2005
  • Messages: 2735
  • Loc: Nashville, TN
  • Status: Offline

Message Juin 19th, 2009, 6:54 am

joeberts obtenu la suggestion pour vous alors. Peut-être quelque chose comme ça...

Code: [ 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 l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Juin 19th, 2009, 9:39 am

à condition que la div est au bon endroit dans la page de flux, vous n'avez pas vraiment besoin de la position, en haut, de gauche ou de valeurs.
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 l’utilisateur
  • Inscription: Juil 07, 2005
  • Messages: 266
  • Loc: Canada
  • Status: Offline

Message Juin 19th, 2009, 1:40 pm

Cela fonctionne. Merci. Ill vous faire part des résultats bientôt!
Matthew Doucette, Xona Games
Award winning indie game studio.
  • Matthew
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Juil 07, 2005
  • Messages: 266
  • Loc: Canada
  • Status: Offline

Message Juin 21st, 2009, 7:10 pm

Cela fonctionne très bien. Ill vous montrer le résultat plus rapidement.

Comment puis-je faire de l'image (le div) cliquables? Wrapping avec un "a href", il est cliquable, mais le curseur de la souris ne change pas quand il plane sur. Existe-t-il une meilleure façon de le faire?
Matthew Doucette, Xona Games
Award winning indie game studio.
  • Matthew
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Juil 07, 2005
  • Messages: 266
  • Loc: Canada
  • Status: Offline

Message Juin 21st, 2009, 7:30 pm

Ok, voici le résultat:
http://xona.com/

Le "XONA JEUX" bannière en haut, avec les huit combattants, doivent remplir une large 1280p navigateur, et de rester centré à la fois une plus grande et la petite taille parcourir...et ça marche! :)

Ensuite, je veux juste faire cliquable où l'on peut voir le curseur de la souris sur le changement mouseover.
Matthew Doucette, Xona Games
Award winning indie game studio.
  • Matthew
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Juil 07, 2005
  • Messages: 266
  • Loc: Canada
  • Status: Offline

Message Juin 21st, 2009, 7:50 pm

S'avère que l'emballage div avec un "a href" fonctionne dans IE 8.0, mais pas dans Firefox, qui, tout simplement, des liens que la non-rupture d'espace, pas l'ensemble div. Si vous connaissez une solution élégante pour faire de ce div cliquable, faites le moi savoir! Merci...
Matthew Doucette, Xona Games
Award winning indie game studio.
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Inscription: Mar 28, 2009
  • Messages: 305
  • Loc: AFK
  • Status: Offline

Message Juin 21st, 2009, 9:33 pm

mettre ceci dans votre fichier CSS

#bannerTop span (
position: absolute;
width: 100%;
height: 242px;
)

Ensuite, dans votre code html en vous bannerTop div...ajouter

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

Il pourrait y avoir un moyen plus simple, mais ça fonctionne pour moi
Custom Web Design
  • Matthew
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Juil 07, 2005
  • Messages: 266
  • Loc: Canada
  • Status: Offline

Message Juin 22nd, 2009, 6:59 am

Merci pour la suggestion, Ill try it...

Quelle est la différence entre div et span? Comment dois-je utiliser l'un et l'autre? Je sais qu'ils peuvent être utilisés de la même façon, mais ils sont destinés à des choses différentes. div est pour les petites choses et ce pour de grandes choses? Je viens de lire sur place et il a dit span paragraphe comprend également la mise en forme qui lui est propre, où ne couvrent pas. Donc, il me semble que div serait utilisé pour les gros bloc de code html et la portée pour les petites pièces de html, comme le formatage, même un seul mot dans une phrase. Suis-je sur la bonne voie?
Matthew Doucette, Xona Games
Award winning indie game studio.
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Juin 22nd, 2009, 7:43 am

bien la différence dans ce cas, c'est que votre permis d'envelopper une balise span avec une balise d'ancrage pour en faire un lien. La plupart des navigateurs ne l'aimez pas si vous essayez de joindre les éléments conteneur comme un div à l'intérieur d'une ancre (comme vous découvert).

Cependant, je tiens à souligner que vous n'avez pas vraiment besoin des balises span de faire tout cela cliquez sur mesure.

Vous pouvez transformer votre essentiellement div tête entière dans une balise d'ancrage avec un peu de ruse css.
Le code HTML
Code: [ Select ]
<a class="header" href="someURL"></a>
et le CSS
Code: [ 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. }


l'affichage ": bloc» s'avère fondamentalement votre balise d'ancrage dans un objet qui va changer l'ordre des flux, tout comme la div vous avez actuellement.
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
  • Inscription: Mar 28, 2009
  • Messages: 305
  • Loc: AFK
  • Status: Offline

Message Juin 22nd, 2009, 7:47 am

Merci Graphixboy. Apprendre quelque chose de nouveau chaque jour. Toujours plus d'une façon à la peau d'un chat.
Custom Web Design
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Juin 22nd, 2009, 8:08 am

La méthode dans l'exemple ci-joint a bien fonctionné pour moi dans les navigateurs, les lecteurs d'écran, et les moteurs de recherche depuis un certain temps maintenant.

Je sais que j'ai proposé un <div> plus tôt, mais qui était sous l'hypothèse qu'il s'agissait d'une fonction générique, pas moins de bannière et un en-tête. :)
Attachments:
banner.html.zip

(540 Octets) Téléchargé 294 fois

Example

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

Message Juin 22nd, 2009, 8:08 am

Afficher de l'information

  • Total des messages de ce sujet: 23 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 89 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC