Bonjour à vous,
mon problème est directement visible à cette adresse : http://www.designspartan.com/. en fait je met en place un nouveau design, donc j'ai encore quelques petits bugs mais le truc qui me fait vraiment ch*er c'est que travaillant avec une résolution de 1680*1050 je ne me suis pas rendu compte que sur une plus petit résolution le design merdait totalement, en réalité c'est assez compliqué, mais regardez par vous même en redimensionnant votre navigateur...
La plupart des images de fond restent fixes au lieu de se déplacer vers la gauche et être partiellement cachée, pour j'ai mis "center top" dans les background... bref voila des bouts de code qui devraient vous aider a comprendre... avec de la chance une solution facile a appliquer permettrait au images de se déplacer en meme temps que le navigateur se redimensionne.
Sinon je suis mal...
En HTML :
Merci d'avance... hésitez pas a demander plus de code, j'ai fait une sélection du principal.
Modifié par spartouille (04 Jul 2008 - 18:02)
mon problème est directement visible à cette adresse : http://www.designspartan.com/. en fait je met en place un nouveau design, donc j'ai encore quelques petits bugs mais le truc qui me fait vraiment ch*er c'est que travaillant avec une résolution de 1680*1050 je ne me suis pas rendu compte que sur une plus petit résolution le design merdait totalement, en réalité c'est assez compliqué, mais regardez par vous même en redimensionnant votre navigateur...
La plupart des images de fond restent fixes au lieu de se déplacer vers la gauche et être partiellement cachée, pour j'ai mis "center top" dans les background... bref voila des bouts de code qui devraient vous aider a comprendre... avec de la chance une solution facile a appliquer permettrait au images de se déplacer en meme temps que le navigateur se redimensionne.
Sinon je suis mal...
body {
background: #251e32 url(images/fond_body.jpg) repeat-y center top;
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Sans-Serif;
color: #000;
text-align: center;
}
#astuce {
margin: auto;
margin-top: -20px;
width:1430px;
height:954px;
background: url(images/diz_body.jpg) no-repeat center top;
}
#page {
background: none;
text-align: left;
margin: 20px auto;
padding: 0 0 0 80px;
padding-top: 20px;
width: 890px;
}
En HTML :
</head>
<body>
<div id="astuce">
<div id="page">
<div id="header">
<div id="menu_header">
<ul id="menu">
<li><a id="menu-home" href="http://www.designspartan.com/">Accueil<span></span></a></li>
<li><a id="menu-tuto" href="http://www.designspartan.com/tag/tuto-par-spartan/">Tutoriels de Spartan<span></span></a></li>
<li><a id="menu-archives" href="http://www.designspartan.com/archives-du-blog/">Archives<span></span></a></li>
<li><a id="menu-about" href="http://www.designspartan.com/a-propos-de/">About<span></span></a></li>
<li><a id="menu-contact" href="http://www.designspartan.com/a-propos-de#contact">Contact<span></span></a></li>
</ul>
<ul id="menu2">
<li><a id="menu-rss" href="?feed=rss2">RSS<span></span></a></li>
</ul>
</div>
</div>
<hr />
<div id="content" class="narrowcolumn">
le contenu..
</div>
<div id="sidebar">
<ul>
<li id="search" class="widget widget_search"> <form id="searchform" method="get" action="http://www.designspartan.com">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" value="Recherche" />
</div>
</form>
</li><li id="categories-1" class="widget widget_categories"><h2 class="widgettitle">Catégories</h2> <ul>
<li class="cat-item cat-item-3"><a href="http://www.designspartan.com/category/general/" title="Voir tous les articles classés dans Général">Général</a>
</li>
<li class="cat-item cat-item-5"><a href="http://www.designspartan.com/category/presentation/" title="Voir tous les articles classés dans Présentations">Présentations</a>
</li>
<li class="cat-item cat-item-4"><a href="http://www.designspartan.com/category/tutoriels/" title="Voir tous les articles classés dans Tutoriels">Tutoriels</a>
</li>
</ul>
</li><li id="get-recent-comments" class="widget widget_get_recent_comments"><h2 class="widgettitle">Recent Comments</h2><div id="get_recent_comments_wrap"><ul> <li><a href="http://www.designspartan.com/general/nouveau-design-sur-design-spartan/#comment-265" title="Nouveau Design sur Design Spartan !, 4 juillet 2008">Design Spartan</a>: Merci Bass, je suis au courant, ça fait partie des bugs à régler...</li>
<li><a href="http://www.designspartan.com/general/nouveau-design-sur-design-spartan/#comment-264" title="Nouveau Design sur Design Spartan !, 4 juillet 2008">Bass</a>: sympa comme design mais tu as un soucis, le bas est décalé, la partie juste au...</li>
<li><a href="http://www.designspartan.com/tutoriels/tutoriel-photoshopcreer-un-animal-hybride-par-spartan/#comment-263" title="Tutoriel Photoshop : Créer un animal hybride par Spartan, 29 juin 2008">Design Spartan</a>: toujours le plus grand possible, on réduit tout à la fin ^^</li>
<li><a href="http://www.designspartan.com/tutoriels/tutoriel-photoshopcreer-un-animal-hybride-par-spartan/#comment-262" title="Tutoriel Photoshop : Créer un animal hybride par Spartan, 29 juin 2008">kevin</a>: ouais j’avais trouveR [langue]….un gros merci [langue]!!! derniere...</li>
<li><a href="http://www.designspartan.com/tutoriels/tutoriel-photoshopcreer-un-animal-hybride-par-spartan/#comment-261" title="Tutoriel Photoshop : Créer un animal hybride par Spartan, 29 juin 2008">Design Spartan</a>: lol c’était marqué au début du tuto, tiens revoilà le lien :...</li>
</ul></div></li><li id="polls" class="widget widget_polls"><h2 class="widgettitle">Sondage</h2><div id="polls-2" class="wp-polls">
<p style="text-align: center;"><strong>Préférez-vous un tuto vidéo ou écrit ?</strong></p><div id="polls-2-ans" class="wp-polls-ans"><ul class="wp-polls-ul">
<li>Un tuto écrit <small>(60%, 42 Votes)</small><div class="pollbar" style="width: 60%;" title="Un tuto écrit (60% | 42 Votes)"></div></li>
<li><strong><i>Un tuto vidéo <small>(40%, 28 Votes)</small></i></strong><div class="pollbar" style="width: 40%;" title="You Have Voted For This Choice - Un tuto vidéo (40% | 28 Votes)"></div></li>
</ul><p style="text-align: center;">Total Voters: <strong>70</strong></p></div>
</div>
<div id="polls-2-loading" class="wp-polls-loading"><img src="http://www.designspartan.com/wp-content/plugins/wp-polls/images/loading.gif" width="16" height="16" alt="Loading ..." title="Loading ..." class="wp-polls-image" /> Loading ...</div>
<ul><li><a href="http://www.designspartan.com/pollsarchive/">Polls Archive</a></li></ul></li><li id="linkcat-2" class="widget widget_links"><h2 class="widgettitle">Blogoliste</h2>
<ul>
<li><a href="http://www.di4art.net/" rel="friend colleague neighbor" title="Di4art - Say something for art" target="_blank">Di4art</a></li>
<li><a href="http://dianeozdamar.over-blog.com" title="Diane Özdamar - Peintures, Illustration et Concept Art">Diane Özdamar</a></li>
<li><a href="http://graphistes-world.com" title="Communauté graphique Graphistes World">Graphistes World</a></li>
<li><a href="http://hell4children.com/" title="Le blog de l’enfer !">Hell 4 Children</a></li>
<li><a href="http://www.lazyheart.com/blog/">Lazyheart</a></li>
<li><a href="http://www.rootsarts.net/V7/" title="Le magazine des communautés graphiques" target="_blank">Rootsarts</a></li>
<li><a href="http://www.saelblog.com/">SAel Blog</a></li>
<li><a href="http://sylviusart.over-blog.com/" title="Sylviusart - le blog de Sylvius">Sylvius</a></li>
<li><a href="http://takkartwork.blogspot.com/" title="L’art de Takk">Takk</a></li>
<li><a href="http://www.evasion.cc/blog/" title="Le blog de Jérémie Werner">Visual Evasion</a></li>
</ul>
</li>
</ul>
</div>
<div style="clear:both"></div>
</div>
<div id="footer">
<li><h2>:</h2>
<ul><li id="get-recent-comments" class="widget widget_get_recent_comments"><h2 class="widgettitle">Recent Comments</h2><div id="get_recent_comments_wrap"><ul> <li><a href="http://www.designspartan.com/general/nouveau-design-sur-design-spartan/#comment-265" title="Nouveau Design sur Design Spartan !, 4 juillet 2008">Design Spartan</a>: Merci Bass, je suis au courant, ça fait partie des bugs à régler...</li>
<li><a href="http://www.designspartan.com/general/nouveau-design-sur-design-spartan/#comment-264" title="Nouveau Design sur Design Spartan !, 4 juillet 2008">Bass</a>: sympa comme design mais tu as un soucis, le bas est décalé, la partie juste au...</li>
<li><a href="http://www.designspartan.com/tutoriels/tutoriel-photoshopcreer-un-animal-hybride-par-spartan/#comment-263" title="Tutoriel Photoshop : Créer un animal hybride par Spartan, 29 juin 2008">Design Spartan</a>: toujours le plus grand possible, on réduit tout à la fin ^^</li>
<li><a href="http://www.designspartan.com/tutoriels/tutoriel-photoshopcreer-un-animal-hybride-par-spartan/#comment-262" title="Tutoriel Photoshop : Créer un animal hybride par Spartan, 29 juin 2008">kevin</a>: ouais j’avais trouveR [langue]….un gros merci [langue]!!! derniere...</li>
<li><a href="http://www.designspartan.com/tutoriels/tutoriel-photoshopcreer-un-animal-hybride-par-spartan/#comment-261" title="Tutoriel Photoshop : Créer un animal hybride par Spartan, 29 juin 2008">Design Spartan</a>: lol c’était marqué au début du tuto, tiens revoilà le lien :...</li>
</ul></div></li></ul>
</li>
</div>
<!-- Design par Gaétan WELTZER/ -->
</body>
</html>
Merci d'avance... hésitez pas a demander plus de code, j'ai fait une sélection du principal.
Modifié par spartouille (04 Jul 2008 - 18:02)
) mais pour te faciliter les tests sous différents navigateurs dans les résolutions habituelles (1024x768, 800x600, ...) je te conseille un minuscule logiciel: 