TOUJOURS Center Background Image

  • jammer2552
  • Graduate
  • Graduate
  • Avatar de l’utilisateur
  • Inscription: Juil 23, 2006
  • Messages: 139
  • Status: Offline

Message Octobre 1st, 2009, 2:43 am

J'ai actuellement un problème avec l'effet Im essayant de réaliser sur le pied de page.

Si votre écran est plus large 1200px, alors vous ne verrez pas le bug, mais si vous redimensionnez la fenêtre de votre navigateur pour 1199px de large ou plus petite, vous remarquerez que le pied est tout simplement renversé une fois atteint l'écran 1000px. J'essaie de garder cet article centré, avec le reste de la page (ShellHeader, ShellContent).

Quelle est la méthode d'avoir cette div (ShellFooter) de rester centré sur l'écran, malgré les dimensions du navigateur? Je l'ai vu faire auparavant. Je voudrais penser que ce n'est pas juste une simple background-image dans le corps () avec background-position: bottom center...

(www) (dot) jameschurchard (dot) (com) / demo / neecetire /
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Octobre 1st, 2009, 2:43 am

  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Octobre 1st, 2009, 6:24 am

Donnez votre div footer une largeur fixe, puis lui donner une marge de 0 auto

Cela va forcer la DIV pour centre. Ainsi

Code: [ Select ]
#footer{width:800px; margin: 0 auto;}
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
  • jammer2552
  • Graduate
  • Graduate
  • Avatar de l’utilisateur
  • Inscription: Juil 23, 2006
  • Messages: 139
  • Status: Offline

Message Octobre 1st, 2009, 7:58 am

graphixboy a écrit:
Donnez votre div footer une largeur fixe, puis lui donner une marge de 0 auto

Cela va forcer la DIV pour centre. Ainsi

Code: [ Select ]
#footer{width:800px; margin: 0 auto;}


Hmm...qui ne semble pas travailler dans FF3.5 ou IE8.
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Octobre 1st, 2009, 8:06 am

Oh je vois ce qui est le problème. Essentiellement, votre pied est la partie la plus large de la page entraînant donc le défilement lorsque l'écran devient plus petit que votre pied de page. Dans ce cas vous aurez à donner le pied de page un fond qui est centrée via CSS. Ou créer un pied de plus petite taille.
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
  • jammer2552
  • Graduate
  • Graduate
  • Avatar de l’utilisateur
  • Inscription: Juil 23, 2006
  • Messages: 139
  • Status: Offline

Message Octobre 1st, 2009, 8:21 am

Création d'un pied de plus petites serait contraire à l'objectif de l'effet que je suis en train de réaliser. ;)

Code: [ Select ]
#ShellContentBottom { background:url(../i/dark/ShellFooter.gif) no-repeat top center;
    width:1200px;
    height:300px;
    color:#ffff00;
    font-size:0.8em;
    padding-top:160px;
    margin:0 auto;
}
  1. #ShellContentBottom { background:url(../i/dark/ShellFooter.gif) no-repeat top center;
  2.     width:1200px;
  3.     height:300px;
  4.     color:#ffff00;
  5.     font-size:0.8em;
  6.     padding-top:160px;
  7.     margin:0 auto;
  8. }


Peut-être une autre approche consisterait pour le background-image de déborder les limites de la div. Donc, si je devais réduire le #ShellContentBottom à 1000px, le background-image est 1200px mais montre encore tout 1200px du background-image.
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Octobre 1st, 2009, 8:30 am

est #shellcontentbottom enveloppé dans un autre div qui centre le site? Si oui vous pourriez avoir besoin de le tirer hors de cette enveloppe. Retirez ensuite la marge et la largeur de votre css et vous devriez obtenir l'effet souhaité.
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
  • mk27
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Juin 09, 2009
  • Messages: 334
  • Status: Offline

Message Octobre 1st, 2009, 11:20 am

jammer2552 a écrit:
Création d'un pied de plus petites serait contraire à l'objectif de l'effet que je suis en train de réaliser. ;)


Peut-être que vous avez besoin de repenser ce que vous faites là. Beaucoup, sinon la plupart, des gens, ne considère pas que le web à 1200px largeur, donc soit vous faites cette page juste pour vous-même sur votre propre moniteur, ou si vous prenez la réalité en compte.

Utilisez largeur: 100%, puis à bricoler avec le contenu jusqu'à ce qu'il fonctionne de manière satisfaisante pour toutes les largeurs de dire 750px jusqu'à 1400px.

Si le problème est l'image de fond, voici la façon dont il a réussi Ive: Vous créez deux divs identiques, l'un sur le dessus de l'autre. Celui du bas contient juste l'image que vous voulez comme arrière-plan "", et la DIV top:
Code: [ Select ]
.bottom { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 300px; }
.top { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
  1. .bottom { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 300px; }
  2. .top { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }


Donc la partie HTML:

Code: [ Select ]
<div class="bottom">
    <img src="../i/dark/ShellFooter.gif" width="100%" height="100%">
    <div class="top">
       [now the content]
    </div>
</div>
  1. <div class="bottom">
  2.     <img src="../i/dark/ShellFooter.gif" width="100%" height="100%">
  3.     <div class="top">
  4.        [now the content]
  5.     </div>
  6. </div>


En raison du positionnement absolu des "top", il fait exactement le chevauchement image réduite dans le fond.

Si vous voulez escalader la hauteur de l'image (pour garder ses proportions), vous aurez besoin d'obtenir la taille de la fenêtre d'abord et faire quelques routines DOM pour créer tout cela.
Image
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juil 25, 2005
  • Messages: 2735
  • Loc: Nashville, TN
  • Status: Offline

Message Octobre 1st, 2009, 11:27 am

* sigh * Im toujours une arrière-pensée à 1920. :D Même théorie s'applique, cependant. Im habitude de voir un peu d'espace juste parce thats comment les gens le faire, mais je cibler spécifiquement wouldnt 1200.
I'd love to change the world, but they won't give me the source code.
  • mk27
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Juin 09, 2009
  • Messages: 334
  • Status: Offline

Message Octobre 1st, 2009, 11:32 am

UPSGuy a écrit:
* sigh * Im toujours une arrière-pensée à 1920. :D Même théorie s'applique, cependant. Im habitude de voir un peu d'espace juste parce thats comment les gens le faire, mais je cibler spécifiquement wouldnt 1200.


Non, je suis d'accord aussi! J'aime mon salut Res 19 "widescreen (1680 largeur).

Il fait presque mal mes sentiments lorsque j'ai entendu que certaines personnes utilisent réellement leur navigateur avec une partie seulement de l'ordinateur de bureau!

Mais c'est la réalité. Allez voir votre ordinateur portable. Ya des chances que la fenêtre du navigateur Web est comme 1000-1100px. Pour moi, le point est que vous voulez, soit à être paresseux et têtu et exécuter à la maison avec votre balle quand le monde va mal, ou si vous serrez les dents et d'apprendre à coder. gif "alt =": roll: "title =" Rolling Eyes "> Les gens vont pas redimensionner leur navigateur ou d'acheter un nouveau moniteur pour faire de votre page Look Good - vous devez le faire fonctionner dans un dynamique, polyvalente manière.
Image
  • jammer2552
  • Graduate
  • Graduate
  • Avatar de l’utilisateur
  • Inscription: Juil 23, 2006
  • Messages: 139
  • Status: Offline

Message Octobre 1st, 2009, 1:17 pm

Haha, je pense graphixboy est la seule qui comprend ce que je fais.

Je ne m'attends pas le graphisme 1200px ensemble large pour être affiché. C'est pourquoi je me bats pour maintenir sa position centrale indépendamment de la largeur du navigateur. J'ai choisi 1200px car Ive a commencé à utiliser la largeur de l'emplacement de 1000px depuis 800x600 résolutions sont (heureusement) surtout une chose du passé, et 1024x768 est la faible résolution nouvelle. 100px de chaque côté de mon graphique suffisent à montrer l'effet que je ne désire pas que soit la taille de l'écran.

En réponse à votre graphixboy réponse, oui, le pied est dans une enveloppe ( #ShellContainer) qui maintient le site centré.
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Octobre 1st, 2009, 1:21 pm

Bon, vous aurez besoin pour tirer votre pied hors de cet emballage et le placer en dessous du reste de votre contenu. Cela permettra à votre pied de page pour remplir la largeur de la page. Placez ensuite votre image comme arrière-plan de cette div et centrer avec CSS. Tout contenu devrait aller dans une autre div SO (pied de page - div> -> content) thats configuration la même manière que le contenu de votre corps au centre de taille dynamique dans le pied de page.
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
  • jammer2552
  • Graduate
  • Graduate
  • Avatar de l’utilisateur
  • Inscription: Juil 23, 2006
  • Messages: 139
  • Status: Offline

Message Octobre 1st, 2009, 4:49 pm

J'ai pris le pied hors de l'enveloppe, mais rien n'a changé.

Puis sur mon propre gré, je me mis position: absolute; et largeur: 100%.

And now it works :)

Merci de m'avoir aidé le long!

Afficher de l'information

  • Total des messages de ce sujet: 12 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 81 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