Centrer une bannière pour toutes résolutions
Sw4n
Messages postés
10
Date d'inscription
Statut
Membre
Dernière intervention
-
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention -
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour à tous,
Alors voilà, j'ai un léger souci au niveau d'une bannière sur la page Myspace de mon projet solo (www.myspace.com/versaill3s). Je ne sais pas si vous pouvez le constater mais sous certaines résolutions la bannière top se retrouve tout à gauche alors que j'ai rentré tout les codes nécessaires à son centrage. J'aimerais régler ce petit problème qui nuit un peu au sérieux de ma page.
Cordialement.
Alors voilà, j'ai un léger souci au niveau d'une bannière sur la page Myspace de mon projet solo (www.myspace.com/versaill3s). Je ne sais pas si vous pouvez le constater mais sous certaines résolutions la bannière top se retrouve tout à gauche alors que j'ai rentré tout les codes nécessaires à son centrage. J'aimerais régler ce petit problème qui nuit un peu au sérieux de ma page.
Cordialement.
A voir également:
- Centrer une bannière pour toutes résolutions
- Créer une bannière instagram - Guide
- Logiciel de bannière - Télécharger - Divers Web & Internet
- Supprimer bannière freebox révolution - Forum Box et Streaming vidéo
- Faire une bannière twitch - Forum Twitch
- Créer une bannière minecraft ✓ - Forum Graphisme
15 réponses
Bonjour,
Dans la construction complètement déstructurée de ce genre de page, je te propose de tester ça.
Quelque part dans cette page on trouve
++
Si tu mets des images dans tes pages indique, au moins, leurs dimensions.
--
Dans la construction complètement déstructurée de ce genre de page, je te propose de tester ça.
Quelque part dans cette page on trouve
<style type="text/css">
body{ background-position:top center;margin-top: 353;}
div.topbanner { top: 0; left: 0%; margin-left:0px;width: 100%;
height: 30px; position: absolute; }
</style>
<div class="topbanner" align="center"><img
src="http://stateproject.free.fr/Fichiers/Vers.jpg" border="0"></div>
Essaye de le remplacer par<style type="text/css">
body{ background-position:top center;margin-top: 353;}
div.topbanner {position : absolute; top : 0; left : 0; width : 100%; height : 353px; background : url(http://stateproject.free.fr/Fichiers/Vers.jpg 50% 50% no-repeat;}
</style>
<div class="topbanner">
</div>
++
Si tu mets des images dans tes pages indique, au moins, leurs dimensions.
<img src="http://stateproject.free.fr/Fichiers/Vers.jpg" width="584" height="353">Remarque au passage que tu places une images de 353px de haut dans un élément défini avec 30px de hauteur.
--
Je te remercie pour ton aide. J'ai remplacé le code de la bannière par celui que tu m'as donné, est-ce que tu as vu un changement ou pas?
Oui.
Chez moi,ça reste centré quelle que soit la largeur de la fenêtre.
À tester dans IE.
Il est possible de faire mieux.
--
Chez moi,ça reste centré quelle que soit la largeur de la fenêtre.
À tester dans IE.
Il est possible de faire mieux.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>V centré</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
text-align: center;
background-color: #000;
}
#conteneur {
position: relative;
margin: 0 auto;
width: 760px;
height: 800px;
text-align: left;
border : 1px solid #fff;
background-color: #000;
font-family: sans-serif;
}
div.topbanner {position : absolute; top : 0; left : 0; width : 100%; height : 353px; background : url(http://stateproject.free.fr/Fichiers/Vers.jpg 50% 50% no-repeat; border : 1px dashed #ff0; }
</style>
</head>
<body>
<div id="conteneur">
<div class="topbanner"></div>
</div>
</body>
</html>Mais je n'ai franchement pas envie de chercher où.
--
En fait quand je passe sous Internet Explorer je vois aussi la bannière sur la gauche, alors que cela ne le fait pas sous Firefox. Apparement ton code ne l'arrange pas, j'ai vu qu'elle se rognait meme sur les bords, j'ai remis le vieux en attendant. Tu n'aurais pas une solution?
Je comprends pas trop d'où vient ce problème.
Je te remercie.
Je comprends pas trop d'où vient ce problème.
Je te remercie.
Il y a una solution qui peut fonctionner dans IE.
C'est d'aligner au centre l'ensemble de la page
On encore de déplacer la “<div class="topbanner">”. Mais où ?
Dans cette page faite un peu n'importe comment il est impossible de décider de choses nettes et efficaces.
Un ajout quelque part peut être annulé par un autre ailleurs. Les deux n'étant pas à leur place de toute façon (des styles sont définis à 7 endroits différents sans compter les 5 feuilles de styles externes).
Il faudrait la reprendre du début et pouvoir accéder au code de base.
--
C'est d'aligner au centre l'ensemble de la page
<body style="text-align:center;">Mais ça risque de chambouler le reste de la page.
On encore de déplacer la “<div class="topbanner">”. Mais où ?
Dans cette page faite un peu n'importe comment il est impossible de décider de choses nettes et efficaces.
Un ajout quelque part peut être annulé par un autre ailleurs. Les deux n'étant pas à leur place de toute façon (des styles sont définis à 7 endroits différents sans compter les 5 feuilles de styles externes).
Il faudrait la reprendre du début et pouvoir accéder au code de base.
--
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Il y a une solution qui peut fonctionner dans IE.
C'est d'aligner au centre l'ensemble de la page
On encore de déplacer la “<div class="topbanner">”. Mais où ?
Dans cette page faite un peu n'importe comment il est impossible de décider de choses nettes et efficaces.
Un ajout quelque part peut être annulé par un autre ailleurs. Les deux n'étant de toute façon pas à leur place (des styles sont définis à 7 endroits différents sans compter les 5 feuilles de styles externes).
Il faudrait la reprendre du début et pouvoir accéder au code de base.
--
C'est d'aligner au centre l'ensemble de la page
<body style="text-align:center;">Mais ça risque de chambouler le reste de la page.
On encore de déplacer la “<div class="topbanner">”. Mais où ?
Dans cette page faite un peu n'importe comment il est impossible de décider de choses nettes et efficaces.
Un ajout quelque part peut être annulé par un autre ailleurs. Les deux n'étant de toute façon pas à leur place (des styles sont définis à 7 endroits différents sans compter les 5 feuilles de styles externes).
Il faudrait la reprendre du début et pouvoir accéder au code de base.
--
Yes ben écoute, là j'ai déplacé “<div class="topbanner">” dans une autre section, maintenant il faudrait voir ça au niveau du code peut-etre?
Ouais j'imagine que ça doit être assez chaotique tout ça mais ça reste bien pratique.
Merci de prendre un peu de ton temps pour m'aider.
Ouais j'imagine que ça doit être assez chaotique tout ça mais ça reste bien pratique.
Merci de prendre un peu de ton temps pour m'aider.
Bon j'ai retravaillé un peu la mise en forme et j'arrive enfin à avoir un truc à peu près centré sous Firefox comme sous IE. A ton avis cela est-il bon?
A la ligne "div.topbanner { top: 0; left: 20%; margin-left:0px;width: 75%", j'ai mis 75% car ca évitait d'avoir une page super grande sous Firefox; avec cette valeur j'ai une page normale sous IE et sous Firefox... Mais mis à part ça je ne sais pas exactement ce que cela change. Concretement, j'y laisse comme c'est?
A la ligne "div.topbanner { top: 0; left: 20%; margin-left:0px;width: 75%", j'ai mis 75% car ca évitait d'avoir une page super grande sous Firefox; avec cette valeur j'ai une page normale sous IE et sous Firefox... Mais mis à part ça je ne sais pas exactement ce que cela change. Concretement, j'y laisse comme c'est?
Je suppose que ta banner est faite dans les options d'en-tête personnalisée du blog.
Le code, quel est-il ?
--
Le code, quel est-il ?
--
Ben un code tout con que j'ai choppé sur un forum et que j'ai modifié :
<style type="text/css">
body{ background-position:top center;margin-top: 353;}
div.topbanner { top: 0; left: 20%; margin-left:0px;width: 75%;
height: 353px; position: absolute; }
</style>
<div class="topbanner">
<IMG SRC="http://stateproject.free.fr/Fichiers/Vers.jpg" border="0"></a></div><br>
J'ai encore reçu un message comme quoi c'était encore décentré apparement; tu le vois comment?
<style type="text/css">
body{ background-position:top center;margin-top: 353;}
div.topbanner { top: 0; left: 20%; margin-left:0px;width: 75%;
height: 353px; position: absolute; }
</style>
<div class="topbanner">
<IMG SRC="http://stateproject.free.fr/Fichiers/Vers.jpg" border="0"></a></div><br>
J'ai encore reçu un message comme quoi c'était encore décentré apparement; tu le vois comment?
bonjour tout le monde, j'ai crée un portfolio récemment, et j'ai un souci avec IE c'est qu'il me décale la page a gauche alors que firefox me l'a centre bien. j'ai cherché mais je sais pas à koi cela peut etre dû. VOICI LE site testez le sur les seux navigateurs; vous n'aurez pas le même rendu : http://folio-integrateur.ifrance.com/
Merci d'Avance.
Merci d'Avance.
“tu le vois comment?”
Je le vois autonome, ayant sa propre position.
Même si je ne peux pas utiliser IE.
Il est impossible qu'il en soit autrement. De l'absolute en dehors d'un bloc centré, je ne sais pas centrer.
Bon, je me suis créé un mySpace.
Et j'ai ajouté “mon en-tête HTML personnelle”.
À l'endroit prévu à cet effet. Ça apparaît sous la pub, mais c'est plus simple.
Elle se compose de
C'est à sa place, centré, ça le reste.
Pour IE, j'ai ajouté “text-align:center;” dans le “body {”.
À adapter.
--
Je le vois autonome, ayant sa propre position.
Même si je ne peux pas utiliser IE.
Il est impossible qu'il en soit autrement. De l'absolute en dehors d'un bloc centré, je ne sais pas centrer.
Bon, je me suis créé un mySpace.
Et j'ai ajouté “mon en-tête HTML personnelle”.
À l'endroit prévu à cet effet. Ça apparaît sous la pub, mais c'est plus simple.
Elle se compose de
<div style="margin:0 auto; width:880; height:100; background-image:url(http://chemin/vers/l/image.jpg) ; background-position:center; background-repeat:no-repeat; background-color:000000;"> </div>mySpace la place à un endroit plus près du haut (ligne 184 et pas ligne 548).
C'est à sa place, centré, ça le reste.
Pour IE, j'ai ajouté “text-align:center;” dans le “body {”.
À adapter.
--
Ben j'ai essayé et ça me place l'image dans la partie Bio, et pas en dessous de la pub. Alors après peut-etre qu'il faut mettre le code à un endroit spécifique?
Avec les infos que je t'ai données, https://myspace.com/pages/blog
C'est tout ce que je peux faire.
--
C'est tout ce que je peux faire.
--
