Le menu droit décale tout : contenu trop large ou problème de syntaxe ?
Francoise


Site/blog

1703 messages

posté le 2012-02-02 à 15:59:53



Après avoir uniformisé les modules ajoutés dans mon menu gauche avec ceux gérés directement par le modèle, je souhaiterais faire la même chose avec mon menu droit.

Hélas, mes essais ne sont pour l'instant pas concluants : si la colonne est bien à la bonne place, la page d'accueil est complètement décalée [lien].


<Actuellement, mes valeurs sont les suivantes :
#cadre => width : 1100px;
#barre => width : 610px;
#menu => width : 180px;
#menu2 => width : 180px;
#contenu => width : 700px;
#contenu h3 => width : 600px;
<

Vu que ça rentre normalement lorsque les éléments de la colonne de droite sont dans la bordure de page, je me demande si le problème est uniquement dû à la largeur de mon contenu (comme j'ai pu le lire dans le blog de [lien]) ou bien si le problème serait uniquement dû à une erreur de syntaxe : en effet, je ne sais pas trop comment caser l'horloge et le calendrier par rapport au menu...

Après avoir supprimé les éléments de la bordure droite, j'avais ajouté ceci dans la structure du blog :


<div>
<ul>
<center>
<li><EMBED height=160 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=160 src=http://static.blog4ever.com/2010/10/441646/artfichier_441646_195931_20110103400118.swf border="0" WMode="Transparent"></li>
<br>
<li><script language="JavaScript"
src="http://www.kissdesign.net/calendriers/004/code.js"></script></li>
</center>
</ul>
</div>
<div id="menu2">
<div id="menu_traduction" class="menu_bloc">
<h2>Traduction</h2>
<ul>
<center>
<li><img src=http://serveur1.archive-host.com/membres/images/453291001/Blog-Info-Deco/Google-Translate.jpg border=0><a title="English" href="http://translate.google.com/translate?u=http://fm-info.blog4ever.com/&&hl=fr&ie=UTF-8&sl=fr&tl=en" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Blog-Info-Deco/Anglais3.gif"></a></li>
</center>
</ul>
</div>
<div id="menu_météo" class="menu_bloc">
<h2>Météo</h2>
<ul>
<center>
<li><font size="3">Paris</font></li>
<li><a href="http://french.wunderground.com/global/stations/07157.html?bannertypeclick=miniWeather01" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/miniWeather01_metric/language/french/global/stations/07157.gif" alt="Click for Paris, France Forecast" border="0" height="50" width="150" /></a></li>
<br>
<li><font size="3">Lyon</font></li>
<li><a href="http://french.wunderground.com/global/stations/07480.html?bannertypeclick=miniWeather01" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/miniWeather01_metric/language/french/global/stations/07480.gif" alt="Click for Lyon, France Forecast" border="0" height="50" width="150" /></a></li>
<br>
<li><font size="3">Tours</font></li>
<li><a href="http://french.wunderground.com/global/stations/07240.html?bannertypeclick=miniWeather01" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/miniWeather01_metric/language/french/global/stations/07240.gif" alt="Click for Tours, France Forecast" border="0" height="50" width="150" /></a></li>
<br>
<li><font size="3">Bristol</font></li>
<li><a href="http://french.wunderground.com/cgi-bin/findweather/getForecast?query=Bristol, UK" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/miniWeather01_metric/language/www/global/stations/03724.gif" /></a></li>
</center>
</ul>
</div>
<div id="menu_bannière" class="menu_bloc">
<h2>Ma bannière</h2>
<ul>
<center>
<li><a href="http://serveur1.archive-host.com/membres/images/453291001/Blog-Info-Deco/0-FM-Deco/1-Deco-classique/Banniere-info_mini.jpg" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-info.gif" title="My banner"></li>
</center>
</ul>
</div>
<div id="menu_blogs" class="menu_bloc">
<h2>Mes blogs</h2>
<ul>
<center>
<li><a href="http://fm-photos.blog4ever.com/blog/index-192920.html" target="_blank"><img src="
http://serveur1.archive-host.com/membres/images/453291001/Bouton-photos.gif" title="My photos"</a></li>
<li><a href="http://fm-dolls.blog4ever.com/blog/index-285822.html" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-dolls.gif" title="My dolls"></a></li>
</center>
</ul>
</div>
<div id="menu_liens" class="menu_bloc">
<h2>Mes liens</h2>
<ul>
<center>
<li><a href="http://www.youtube.com/user/rollingstones01" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-Youtube.gif" title="Youtube"</a>&nbsp<a href="http://www.flickr.com/photos/7387501@N07/sets/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-Flickr.gif" title="Flickr"</a>&nbsp<a href="http://copainsdavant.linternaute.com/membre/5101736/1392167978/francoise_marandin/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-Copains.gif" title="Copains d'avant"</a></li>
</center>
</ul>
</div>
<div id="menu_amis" class="menu_bloc">
<h2>Liens amis</h2>
<ul>
<center>
<li><a href="http://www.blog4ever.com/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/B4E-mini.gif" title="La meilleure plate-forme"</a></li>
<li><a href="http://www.archive-host.com/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Archive-Host-mini.gif" title="Le meilleur hébergeur"</a></li>
<li><a href="http://florencevoyance.blog4ever.com/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Divers-Blog/Blog-Flo/Florence-mini.gif"</a></li>
<li><a href="http://www.chrisjaggeronline.com/index.html" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Chris-mini.gif"</a></li>
<li><a style="font-size:14pt;text-decoration:none;font-family:Arial,Helvetica,sans-serif;" href="http://fm-info.blog4ever.com/blog/articles-cat-441646-478152-_liens_amis.html" target="_blank">et plein d'autres ICI</a><li>
</center>
</ul>
</div>


de votre aide
Fanfan
PapyClic


Site/blog

7329 messages

posté le 2012-02-02 à 19:04:03

Fanfan,

C'est que tu n'as pas compris le système du menu supplémentaire...

#menu est un bloc qui contient tous les blocs modules et les objets que tu veux afficher à gauche.

#menu2 c'est pareil, ce bloc peut contenir d'autres menus listes ou objets.

Donc ton horloge et ton calendrier, tu dois les mettre dans le bloc #menu2



<div id="menu2">

<div id="horloge" style="width:160px; margin: 10px auto;">
<EMBED height=160 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=160 src=http://static.blog4ever.com/2010/10/441646/artfichier_441646_195931_20110103400118.swf border="0" WMode="Transparent">
</div>

<div id="calendrier" style="width:164px; margin: 10px auto;">
<s cript language="JavaScript"
src="http://www.kissdesign.net/calendriers/004/code.js"></script></li>
</div>

... et mettre à la suite les blocs des modules céés.


Tu essaies ça et si tu as des problèmes j'irai dans ta gestion.

Bonne soirée

Francoise


Site/blog

1703 messages

posté le 2012-02-02 à 19:17:21

,

C'est vrai que je ne savais pas trop comment gérer les modules "Horloge" et "Calendrier" dans le contexte d'un menu...
pour ton avis éclairé Je vais refaire un essai à partir de là.

Fanfan
PapyClic


Site/blog

7329 messages

posté le 2012-02-02 à 19:28:05

...

Essai sur mon test myDesign :

>>>

ce qui donne >>>

Francoise


Site/blog

1703 messages

posté le 2012-02-02 à 19:50:01

Je ne sais pas ce que j'ai fait, mais c'est la cata : tout part en vrille ! Cette fois, les titres dans le menu droit n'ont même plus la même police que les autres et l'image qui est derrière est rognée [lien]

Je vais me restaurer un brin pour reprendre des forces.
Fanfan
PapyClic


Site/blog

7329 messages

posté le 2012-02-02 à 20:30:11

...

J'ai vu des balises img non fermée >>> <img src="adresse de l'image" />

tu avais oublié />

Malheureusement ça n'a rien fait de mieux.

Je vais souper, je regarderez si tu as trouvé après.

BonAP

Francoise


Site/blog

1703 messages

posté le 2012-02-02 à 21:24:06

...
Lorsque je mets mon menu droit dans les bordures de pages, ça s'affiche correctement (même avec mon contenu de 700 px de large), mais je crée les titres des rubriques que j'ajoute avec Photofiltre :


<!-- ***************** -->
<!-- CSS ID Bloc Droit -->
<!-- ----------------- -->
<style type="text/css">
<!--
#blocdroit
{
position : absolute;
top : 505px;
right : 5px;
width : 180px;
margin-left : auto;
border : 0px;
color:#;
list-style-type : none;
}
-->
</style>
<!-- -- Fin CSS blocdroit --- -->

<!-- ************************ -->
<!-- -- HTML du bloc droit -- -->
<!-- ------------------------ -->
<div id="blocdroit">
<center>
<br><br><br>
<li><P><EMBED height=160 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=160 src=http://static.blog4ever.com/2010/10/441646/artfichier_441646_195931_20110103400118.swf border="0" WMode="Transparent"></li>
<br>
<li><script language="JavaScript"
src="http://www.kissdesign.net/calendriers/004/code.js"></script></li>
<br><br><br><br>
<li><img src="http://serveur1.archive-host.com/membres/images/453291001/Blog-Info-Deco/0-FM-Deco/Deco-St-Valentin/2012/Traduction-st-val.gif" title="Translation"></li>
<li><img src=http://serveur1.archive-host.com/membres/images/453291001/Blog-Info-Deco/Google-Translate.jpg border=0><a title="English" href="http://translate.google.com/translate?u=http://fm-info.blog4ever.com/&&hl=fr&ie=UTF-8&sl=fr&tl=en" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Blog-Info-Deco/Anglais3.gif"></a></li>
<br><br><br><br>
<li><img src="http://serveur1.archive-host.com/membres/images/453291001/Blog-Info-Deco/0-FM-Deco/Deco-St-Valentin/2012/Meteo-st-val.gif" title="Weather"></li>
<br>
<li><font size="3">Paris</font></li>
<li><a href="http://french.wunderground.com/global/stations/07157.html?bannertypeclick=miniWeather01" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/miniWeather01_metric/language/french/global/stations/07157.gif" alt="Click for Paris, France Forecast" border="0" height="50" width="150" /></a></li>
<br>
<li><font size="3">Lyon</font></li>
<li><a href="http://french.wunderground.com/global/stations/07480.html?bannertypeclick=miniWeather01" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/miniWeather01_metric/language/french/global/stations/07480.gif" alt="Click for Lyon, France Forecast" border="0" height="50" width="150" /></a></li>
<br>
<li><font size="3">Tours</font></li>
<li><a href="http://french.wunderground.com/global/stations/07240.html?bannertypeclick=miniWeather01" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/miniWeather01_metric/language/french/global/stations/07240.gif" alt="Click for Tours, France Forecast" border="0" height="50" width="150" /></a></li>
<br>
<li><font size="3">Bristol</font></li>
<li><a href="http://french.wunderground.com/cgi-bin/findweather/getForecast?query=Bristol, UK" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/miniWeather01_metric/language/www/global/stations/03724.gif" /></a></li>
<br><br><br><br>
<li><a href="http://serveur1.archive-host.com/membres/images/453291001/Blog-Info-Deco/0-FM-Deco/1-Deco-classique/Banniere-info_mini.jpg" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Blog-Info-Deco/0-FM-Deco/Deco-St-Valentin/2012/Banniere-st-val.gif" title="My banner"></li>
<br><br><br><br>
<li><img src="http://serveur1.archive-host.com/membres/images/453291001/Blog-Info-Deco/0-FM-Deco/Deco-St-Valentin/2012/Blogs-st-val.gif" title="My blogs"></li>
<br>
<li><a href="http://fm-photos.blog4ever.com/blog/index-192920.html" target="_blank"><img src="
http://serveur1.archive-host.com/membres/images/453291001/Bouton-photos.gif" title="My photos"</a></li>
<li><a href="http://fm-dolls.blog4ever.com/blog/index-285822.html" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-dolls.gif" title="My dolls"></a></li>
<br><br><br><br>
<li><img src="http://serveur1.archive-host.com/membres/images/453291001/Blog-Info-Deco/0-FM-Deco/Deco-St-Valentin/2012/Liens-FM-st-val.gif" title="My links"></li>
<br>
<li><a href="http://www.youtube.com/user/rollingstones01" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-Youtube.gif" title="Youtube"</a>&nbsp<a href="http://www.flickr.com/photos/7387501@N07/sets/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-Flickr.gif" title="Flickr"</a>&nbsp<a href="http://copainsdavant.linternaute.com/membre/5101736/1392167978/francoise_marandin/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-Copains.gif" title="Copains d'avant"</a></li>
<br><br><br><br>
<li><img src="http://serveur1.archive-host.com/membres/images/453291001/Blog-Info-Deco/0-FM-Deco/Deco-St-Valentin/2012/Liens-amis-st-val.gif" title="Friends' links"></li>
<br>
<li><a href="http://www.blog4ever.com/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/B4E-mini.gif" title="La meilleure plate-forme"</a></li>
<li><a href="http://www.archive-host.com/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Archive-Host-mini.gif" title="Le meilleur hébergeur"</a></li>
<li><a href="http://florencevoyance.blog4ever.com/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Divers-Blog/Blog-Flo/Florence-mini.gif"</a></li>
<li><a href="http://www.chrisjaggeronline.com/index.html" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Chris-mini.gif"</a></li>
<li><a style="font-size:14pt;color:#FFCC66;text-decoration:none;font-family:Arial,Helvetica,sans-serif;" href="http://fm-info.blog4ever.com/blog/articles-cat-441646-478152-_liens_amis.html" target="_blank">et plein d'autres ICI</a><li>
<br>
</center>
</div>
<!-- -- fin HTML bloc droit -- -->



Après suppression de ces éléments, voilà ce que j'ai mis dans MyDesign :


<div id="menu2">
<div id="horloge" style="width:160px; margin: 10px auto;">
<EMBED height=160 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=160 src=http://static.blog4ever.com/2010/10/441646/artfichier_441646_195931_20110103400118.swf border="0" WMode="Transparent">
</div>
<div id="calendrier" style="width:164px; margin: 10px auto;">
<script language="JavaScript"
src="http://www.kissdesign.net/calendriers/004/code.js"></script></li>
</div>
<div id="menu_météo" class="menu_bloc">
<h2>Météo</h2>
<ul>
<center>
<li><font size="3">Paris</font></li>
<li><a href="http://french.wunderground.com/global/stations/07157.html?bannertypeclick=miniWeather01" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/miniWeather01_metric/language/french/global/stations/07157.gif" alt="Click for Paris, France Forecast" border="0" height="50" width="150" /></a></li>
<br>
<li><font size="3">Lyon</font></li>
<li><a href="http://french.wunderground.com/global/stations/07480.html?bannertypeclick=miniWeather01" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/miniWeather01_metric/language/french/global/stations/07480.gif" alt="Click for Lyon, France Forecast" border="0" height="50" width="150" /></a></li>
<br>
<li><font size="3">Tours</font></li>
<li><a href="http://french.wunderground.com/global/stations/07240.html?bannertypeclick=miniWeather01" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/miniWeather01_metric/language/french/global/stations/07240.gif" alt="Click for Tours, France Forecast" border="0" height="50" width="150" /></a></li>
<br>
<li><font size="3">Bristol</font></li>
<li><a href="http://french.wunderground.com/cgi-bin/findweather/getForecast?query=Bristol, UK" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/miniWeather01_metric/language/www/global/stations/03724.gif" /></a></li>
</center>
</ul>
</div>
<div id="menu_bannière" class="menu_bloc">
<h2>Ma bannière</h2>
<ul>
<center>
<li><a href="http://serveur1.archive-host.com/membres/images/453291001/Blog-Info-Deco/0-FM-Deco/1-Deco-classique/Banniere-info_mini.jpg" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-info.gif" title="My banner"></li>
</center>
</ul>
</div>
<div id="menu_blogs" class="menu_bloc">
<h2>Mes blogs</h2>
<ul>
<center>
<li><a href="http://fm-photos.blog4ever.com/blog/index-192920.html" target="_blank"><img src="
http://serveur1.archive-host.com/membres/images/453291001/Bouton-photos.gif" title="My photos"</a></li>
<li><a href="http://fm-dolls.blog4ever.com/blog/index-285822.html" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-dolls.gif" title="My dolls"></a></li>
</center>
</ul>
</div>
<div id="menu_liens" class="menu_bloc">
<h2>Mes liens</h2>
<ul>
<center>
<li><a href="http://www.youtube.com/user/rollingstones01" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-Youtube.gif" title="Youtube"</a> <a href="http://www.flickr.com/photos/7387501@N07/sets/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-Flickr.gif" title="Flickr"</a> <a href="http://copainsdavant.linternaute.com/membre/5101736/1392167978/francoise_marandin/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Bouton-Copains.gif" title="Copains d'avant"</a></li>
</center>
</ul>
</div>
<div id="menu_amis" class="menu_bloc">
<h2>Liens amis</h2>
<ul>
<center>
<li><a href="http://www.blog4ever.com/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/B4E-mini.gif" title="La meilleure plate-forme"</a></li>
<li><a href="http://www.archive-host.com/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Archive-Host-mini.gif" title="Le meilleur hébergeur"</a></li>
<li><a href="http://florencevoyance.blog4ever.com/" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Divers-Blog/Blog-Flo/Florence-mini.gif"</a></li>
<li><a href="http://www.chrisjaggeronline.com/index.html" target="_blank"><img src="http://serveur1.archive-host.com/membres/images/453291001/Chris-mini.gif"</a></li>
<li><a style="font-size:14pt;text-decoration:none;font-family:Arial,Helvetica,sans-serif;" href="http://fm-info.blog4ever.com/blog/articles-cat-441646-478152-_liens_amis.html" target="_blank">et plein d'autres ICI</a><li>
</center>
</ul>
</div>



Pour MyDesign, à part les <div> et les <h2> (titres), je ne vois pas bien ce qu'il faut que j'ajoute par rapport à la configuration que j'utilise dans les bordures de page...
Fanfan
PapyClic


Site/blog

7329 messages

posté le 2012-02-02 à 23:07:55

...

En principe comme dans le CSS le style du menu et menu2 est identique...

#menu, #menu2

Le style des titres et les textes devrait être identique, mais tu as mis du style pour les différents modules >>> #menu_partenaires #menu_sondage etc...
En plus il me semble avoir vu du style direct dans les blocs du menu2.

Normal qu'il y ait des différences.

Mais pour moi ce qui me gêne c'est le décalage du contenu.
Quand j'enlève le menu2, le contenu se place bien donc il y a quelque chose qui empêche le contenu de bien se positionner. Il faudrait vider ce menu et mettre les objets et les différents blocs un par un pour peut-être voir ce qui va pas.

Tu le fais ou je le ferai, dis-moi.







Francoise


Site/blog

1703 messages

posté le 2012-02-03 à 00:20:36

...

Pour l'instant, j'ai remis mon bricolage d'origine.
Je referai peut-être une tentative demain, autrement je réessaierai après le concours.

Fanfan
PapyClic


Site/blog

7329 messages

posté le 2012-02-03 à 00:25:25

...

Ok!tu me feras signe si tu as besoin.

Francoise


Site/blog

1703 messages

posté le 2012-02-03 à 15:57:38



J'ai refait quelques essais en ne mettant qu'un ou deux modules et c'est toujours pareil : la page d'accueil et les gifs installés en bordure de page avec la balise <span> se décalent, les images du menu droit sont rognées et la police des titres change...

Pour l'instant, je vais donc laisser mon blog en l'état : je me re-pencherai sur la question après le concours.
Fanfan
PapyClic


Site/blog

7329 messages

posté le 2012-02-03 à 17:56:47

Bonjour Fanfan,

J'aimerai trouver ce qui cloche, peut-être la partie barre ou les images de décor mises en position absolute.

Donc je ferme ce sujet tu en ouvriras un nouveau quand du voudras.

Bonne continuation

Ce sujet est fermé, vous ne pouvez pas y répondre

Il faut être membre de ce forum pour ajouter un nouveau sujet ou répondre à un sujet, dans cette catégorie



Cliquez sur la carte :
dashboard ===> Nombre d'utilisateurs en ligne===> Nombre de personnes sur chaque page
lecteurs ===> Une liste des pages les plus consultées, avec le nombre de visiteur sur chaque page.
cartes ===>Le mode normal vous montre d'où viennent les visiteurs. Les cibles clignotent pour les personnes qui viennent de se connecter.
Historique :
lines => 24 h day ===>Un graphique des visiteurs durant les dernières 24 heures.

Recommander ce blog | Contacter l'auteur | Signaler un contenu | S'abonner au blog Flux RSS du blog | Espace de gestion | Annuaire des blogs