Margin right non appliqué avec un width à 100%

Bonsoir à tous,

J'ai parcouru tous les posts du forum et n'ai pas trouvé de réponse à mon problème qui est le suivant.

Pour mieux comprendre, voici d'abord le template de mon blog :

http://www.blog.fr/srv/design/templates/structure.html

Lorsque j'applique un width:100% avec un float: left au div outer-left, le margin de droite ne s'applique pas. J'ai tout essayé, rien à faire. Par contre les autres margin pour ce même div sont bien appliqués.

Que faire ?

Merci pour votre aide, parce que moi, je n'en peux plus !

Trombines a écrit :
Lorsque j'applique un width:100% avec un float: left

Où est l'intérêt d'appliquer une largeur de 100% à un flottant? Auquel cas, autant ne pas le faire flotter. Et s'il n'est pas flottant, pas la peine d'utiliser width: 100% non plus, vu que les éléments de type bloc prennent par défaut toute la largeur disponible dans leur conteneur.

Trombines a écrit :
le margin de droite ne s'applique pas

Il me semble qu'il s'applique, mais qu'il est «hors champ» (et que le navigateur l'ignore pour ne pas créer de barre de défilement horizontale alors qu'il n'y a pas de contenu à droite).

Trombines a écrit :
Merci pour votre aide, parce que moi, je n'en peux plus !

C'est surtout que tu essayes probablement de faire quelque chose avec une méthode erronée. Que veux-tu réaliser exactement?

Bonjour Florent,

Le problème est le suivant. Abonné à blog.fr sur un compte pro, il m'est donné la posibilité de modifier la feuille de style mais pas le template. Hors le template poposé ne me plait pas du tout.

Je voudrais donc mettre le outer-left en haut pour faire "un menu". Car une option me permet de faire glisser des widgets dans le outer-left.

J'ai dessiné un template de ce que je veux, disponible à cette adresse :

http://www.dixconseils.fr/trombines/template.gif

Merci pout ton aide, si tu as une suggestion. Guillaume.

Ça donnerait quelque chose dans ce style-là?

Réalisé sans trucages, en modifiant trois-quatre propriétés dans la feuille de style.

Pour le outer-left: si tu veux qu'il prenne toute la largeur, il ne faut pas le faire flotter, ne pas lui donner de largeur fixe... et voilà.
Pour le outer-right: comme il arrive dans le code avant le bloc de contenu central, on peut facilement le faire flotter à gauche plutôt qu'à droite.
Enfin, il s'agira de corriger les marges latérales du bloc central (virer celle de droite, notamment).

Yes Yes Yes Yes

C'est exactement ce que je veux faire ! Mais par contre, j'ai remarqué que pour éléments que ne modifie pas dans la feuille de style, une autre feuille de style s'applique. Et je n'ai pas accès à celle là .

Comment as-tu fais celà ? Parce que si je supprime le float et le width, il applique les balises contenues dans une autre feuille de style. Et je ne sais comment faire pour qu'il ne les applique pas !

Merci en tout cas sincèrement de ton aide. Parce que je suis en train de devenir fou ! ! ! ! (Ah ? Je suis déjà fou ? Alors vite, c'est la preuve que c'est urgent !).

Trombines a écrit :
Comment as-tu fais celà ?

Avec Firebug (extension Firefox), en modifiant les styles à la volée.

Trombines a écrit :
Parce que si je supprime le float et le width, il applique les balises contenues dans une autre feuille de style.

Ça se passe comme ça sur le site réel, ou également sur la page HTML que tu as indiquée? Sur la page HTML indiquée, une seule feuille de style est appelée.

Trombines a écrit :
Et je ne sais comment faire pour qu'il ne les applique pas !

Là, si c'est la cuisine interne de blog.fr, ça me dépase. Soit tu trouves un moyen pour éviter que ces styles «de secours» ne s'appliquent, soit tu devras les annuler:

#wrap div#outer-left {
float: none;
width: auto;
}

On notera le sélecteur #wrap div#outer-left, à forte priorité (priorité 0201), pour être raisonnablement sûr que ces styles auront bien la priorité sur d'éventuels styles par défaut. On pourra, pour d'autres sélecteurs, commencer toujours par #wrap, afin de renforcer la priorité du sélecteur. (Pour plus d'infos, voir sur Openweb.)
Modifié par Florent V. (12 Sep 2007 - 15:21)

Merci de ces explications, mais...
Ca ne résoud pas mon problème, car je n'ai pas accès au template que tu as modifié. Seulement à la feuille de style qui le concerne. Donc je tourne en rond.

Il me semblait avoir lu que l'on pouvait donner la priorité aboslue à une feuille de style par rapport aux autres, mais je ne trouve pas comment. Et c'est pas faute de chercher.

Voici la feuille de style à laquelle j'ai accès :

#wrap{
width:100%;
background-color:#990000;
padding: 0px 0px 0px 0px;
}

#header{
background-color:#ffffcc;
background-image:url(http://www.dixconseils.fr/trombines/coinhaut.gif);
background-position: top left;
padding:0px 0px 0px 0px;
margin: 20px 20px 20px 20px;
height:200px;
}

#header-image{
background-color:#ffffcc;
background-image:url(http://www.dixconseils.fr/trombines/trombines.jpg);
background-position: top center;
background-repeat:no-repeat;
padding:0px 0px 0px 0px;
margin: 20px 20px 0px 20px;
height:150px;
}

#content{
width:100%;
background-color:#990000;
}

#outer-middle {
background-color:#990000;
margin: 0px 10px 0px 280px;
}

#middle {
background-color:#990000;
padding: 0px 10px 10px 10px;
}

#posts .post {
background-color:#99000;
}

#posts .post-title {
background-color:#ffffcc;
background-image:url(http://www.dixconseils.fr/trombines/coinhaut.gif);
background-repeat:no-repeat;
padding 0px 0px 0px 0px;
font-family:Trebuchet MS,Verdana,sans-serif;
border-bottom:0px dotted #D9D9D9;
color:#43535D;
font-family:Trebuchet MS,Verdana,sans-serif;
font-size:15px;
font-style:normal;
font-weight:bold;
text-align:left;
text-decoration:none;
}

.post-title {
margin:0pt;
padding:7px 0px 0px 30px;

}

#posts .post-body {
background-color:#ffffcc;
padding: 20px 20px 20px 20px;
text-align:justify;

}

#posts .post-footer {
background-color:#ffffcc;
}

.post-footer {
background-color:#ffffcc;
background: url(http://www.dixconseils.fr/trombines/coinbas.gif) no-repeat bottom right;
padding 0px 0px 0px 0px;
}

.post-item-tags {
visibility: hidden;
height:0px;
margin: 0px 0px 0px 0px;
}

#outer-left { 
background-color:#ffffcc;
float:none;
margin:0px 20px 0px 20px;
padding:0px 0px 0px 0px;
}


#left {
background-color:#ffffcc;
width:200;
float:center;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#outer-right { 
background-color:#990000;
float:right;
width:220px;
margin-right:20px;
}

#right {
background-color:#ffffcc;
width:200px;
float:center;
padding:0px 0px 0px 0px;
margin-left:20px;
}

Et il faut que je fasse avec ça, sachant que si je ne précise pas certains attributs, le navigateur va les chercher dans une autre feuille de style, apparement...

Merci à nouveau pour ton aide en tout cas. Guillaume

ps : adresse du blog : http://trombines.blog.fr
Modifié par Florent V. (12 Sep 2007 - 17:41)

Heu... je regarde le blog, et ça a l'air de très bien marcher tout ça. div#outer-left est bien en horizontal sur toute la largeur, div#outer-right est bien flottant à gauche. Il y a juste div#outer-middle qui a une marge à gauche à priori trop grande (420px au lieu d'un plus raisonnable 220px, non?).

Pas vu trace de la feuille de style fantôme.

Est-ce que tu n'aurais pas été victime d'un bête problème de cache?
Pense à vider le cache du navigateur, ou rafraichis la page en faisant Ctrl+F5.

Trombines a écrit :
Ca ne résoud pas mon problème, car je n'ai pas accès au template que tu as modifié. Seulement à la feuille de style qui le concerne.

Il me semble avoir tenu compte de cette contrainte, vu que:
- je propose uniquement des modifications de la feuille de style (pas du code HTML, sur lequel tu n'as pas la main);
- je t'ai indiqué un moyen d'être à peu près sûr que tes styles auront la priorité sur d'hypothétiques styles «de secours» mis en place par la plateforme de blog.

Sur ce dernier point, j'indiquais un article d'Openweb qui est une référence:
http://openweb.eu.org/articles/cascade_css/

Mais comme dit dans mon message ci-dessus, même sur le blog lui-même je n'ai pas vu trace de ces fameux styles parasites sur lesquels il faudrait prendre la priorité.