salut
 
j'ai installé à sa sortie firefox 4, et il me met ma mise en page sans dessus dessous:
http://www.hk-project.fr/
c'est un wordpress avec une mise en page classic, que j'avais adapter a ce que je voulais
 
normalement le menu qui se retrouve en bas, devrais etre a droite.
alors que tout allais bien jusque la...  
 
est ce que l'un de vous a déjà rencontré le cas ? comment le résoudre ?
est ce qu'il vous faut le code du css ?
 
merci

Chez moi, ça marche en :
- plaçant le div.right avant le div.left
- passant le margin du div.right à 15px 15px 0 0

merci a toi
 
j'ai fait tes modif : pas mieux
(a moins que je les ai mal faites)
 
j'avais deja essayé de modifier les largeur des bloc mais ca changeait rien
c'est vrai que quand il n'y a pas la place de mettre a cote il balance en dessous
 
 
 
 

quelqu'un aurait un deuxième diagnostique ?
http://www.hk-project.fr/
 
allez un p'tit geste quoi...
 
/*    
Theme Name:HK theme
Theme URI:
Description:  
Author:HK-project
Tags:
*/
 
 
 
 
/***********************************************************
 
 RESET
 
***********************************************************/
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, ul, li {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: inherit;
 vertical-align: baseline;
}
:focus {
 outline: 0;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
table {
 border-collapse: separate;
 border-spacing: 0;
}
caption, th, td {
 text-align: left;
 font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
 content: "";
}
blockquote, q {
 quotes: "" "";
}
/***********************************************************
 
 GENERAL
 
***********************************************************/
 
body {
 background: #222222;
 background-image:url(img/background_hk1.jpg); <!-- patern fond -->
 background-repeat:;
 background-position:top center;
 font: 13px Arial;
 padding-bottom: 20px;
 color:#dcdcdc; <!-- couleur texte post -->
}
a {
 text-decoration: none;
 color: #44a52a; <!-- couleur texte categorie menu et post-->
}
a:hover {
 text-decoration: underline;
 color: #44a52a;
}
p {
 margin: 5px 20px;
}
.container {
 width: 950px;
 margin: auto;
}
.header {
 width: 950px;
 height: 200px;
 margin:20px 0px 20px 0px;
 float:left;
 background:  url('img/head2.png') no-repeat bottom center; <!-- image entete 950x200 -->
}
 
.header0 {
 width: 950px;
 height: 63px;
 float:left;
}
.spacer1 {
 width: 70px;
 height: 50px;
 float:left;
}
.spacer2 {
 width: 950px;
 height: 33px;
 float:left;
}
/***********************************************************
 
 Rest
 
***********************************************************/
 
.main {  
 width: 950px;  <!-- bloc principal -->
 margin:0px 0px 0px 0px;
 background:#222222;
 float:left;
 overflow: hidden;
 border: 1px solid #000000;  <!-- liseret -->
}
.right {  
 width: 190px;  
 margin:15px 15px 0px 0px;
    overflow: hidden;  
 padding:15px;
 float:right;  
 background-color: #58585a;
 border: 1px solid #000000; <!-- bloc liens,categorie -->
}  
.left {
 width: 650px;  
 margin: 15px 0px 15px 15px;  
    overflow: hidden;
 padding:15px;
 float:left;
 background-color: #58585a;
 border: 1px solid #000000; <!-- bloc post -->
}
#comment, #url, #email, #author, #submit {
 max-width:375px;
 border: 1px solid #000;
 margin:5px 0px 5px 0;
 background-color:#888;
 font-family:Arial;
 font-size:11px; <!-- formulaire commentaire -->
}
.commentlist {
 background-color:#58585a;
 margin:5px 0 5px 0;
 padding:20px; <!--  commentaire -->
}
.header h2, .header h2 a, .header h2 a:hover {
 font-family:Arial;
 font-size:0px;
 letter-spacing:-0px;
 text-decoration: none;
 color:#ffffff; <!-- titre entete -->
}
h3, h3 a, h3 a:hover {
 font-family:Arial;
 font-size:20px;
 text-decoration: none;
 margin:5px 0 10px 0;
 color:#44a52a;  <!-- titre post -->
}
h4 {
 font-family:"Arial";
 font-size:11px;
 color:#81bed6;
}
.footer {
 width: 950px;
 margin:20px 0 20px 0;
 height: 20px;
 padding:20px 0px 15px 50px;
 background:#222222;
 border: 1px solid #000000;
 float:left;
 color:#44a52a; <!-- texte pied de page -->
 border: 1px solid #000000; <!-- pied de page -->
}
.titr {
 width: 620px;
 height: 25px;
 background:#222222;
 border: 1px solid #000000;
 padding:5px 0px 10px 20px;
 margin:30px 0 5px 0;
 float:left;  <!-- cadre titre post -->
}
 
 
 
.date {
 width: 565px;
 height: 25px;
 color:#44a52a;
 margin:0px 0px 0px 20px;
 clear:both;
 font-size:11px; <!-- texte date post -->
}
.right h2, .right h3, .right h2 a, .right h3 a {
 font-size:20px;
 color:#222222;
 letter-spacing:0px;
 text-decoration: none;
 background-image:url(img/);
 background-position:left;
 background-repeat:no-repeat;
 padding:10px 0 0 0px; <!-- texte menu -->
}
.page_item ul {
 padding:0 0 0 10px;
}
.comment-author-admin {
 background-color:#a4b1a9;
}
table {
 width:100%;
 border-bottom:1px solid #333;
}
th {
 border-bottom:1px solid #333;
 text-align:left;
}
tr {
 border-bottom:1px solid #333;
 text-align:left;
}
thead {
 border-bottom:1px solid #333;
 text-align:left;
}
.wp-caption {
 border:1px solid #ddd;
 text-align:center;
 padding-top:4px;
 margin:10px;
 -moz-border-radius:3px;
 -khtml-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;
}
.wp-caption img {
 margin:0;
 padding:0;
 border:0 none;
}
.wp-caption p.wp-caption-text {
 font-size:11px;
 color:#000;
 line-height:17px;
 padding:0 4px 5px;
 margin:0;
}
h1 {
 font-family:Arial;
 font-size:36px;
 font-weight:normal;
 height:auto;
}
h2 {
 font-family:Arial;
 font-size:28px;
 font-weight:normal;
 height:auto;
}
h5 {
 font-family:Arial;
 font-size:10px;
 font-weight:normal;
 height:auto;
}
h6 {
 font-family:Arial;
 font-size:8px;
 font-weight:normal;
 height:auto;
}
pre {
 padding:5px 0;
 border-top:1px dotted #35302a;
 border-bottom:1px dotted #35302a;
}
.writer li, .writer ul {
 list-style:none;
}
 
 
/***********************************************************
 
 By Default from Wordpress.org
 
***********************************************************/
 
html>body .entry ul {
 margin-left: 0px;
 padding: 0 0 0 30px;
 list-style: none;
 padding-left: 10px;
 text-indent: -10px;
}
html>body .entry li {
 margin: 7px 0 8px 10px;
}
.entry ul li:before, #sidebar ul ul li:before {
 content: "\00BB \0020";
}
.entry ol {
 padding: 0 0 0 35px;
 margin: 0;
}
.entry ol li {
 margin: 0;
 padding: 0;
}
.postmetadata ul, .postmetadata li {
 display: inline;
 list-style-type: none;
 list-style-image: none;
}
#sidebar ul, #sidebar ul ol {
 margin: 0;
 padding: 0;
}
#sidebar ul li {
 list-style-type: none;
 list-style-image: none;
 margin-bottom: 15px;
}
#sidebar ul p, #sidebar ul select {
 margin: 5px 0 8px;
}
#sidebar ul ul, #sidebar ul ol {
 margin: 5px 0 0 10px;
}
#sidebar ul ul ul, #sidebar ul ol {
 margin: 0 0 0 10px;
}
ol li, #sidebar ul ol li {
 list-style: decimal outside;
}
#sidebar ul ul li, #sidebar ul ol li {
 margin: 3px 0 0;
 padding: 0;
}
#searchform {
 margin: 10px auto;
 padding: 5px 3px;
 text-align: center;
}
#sidebar #searchform #s {
 width: 108px;
 padding: 2px;
}
#sidebar #searchsubmit {
 padding: 1px;
}
.entry form { /* This is mainly for password protected posts, makes them look better. */
 text-align:center;
}
select {
 width: 130px;
}
#commentform input {
 width: 170px;
 padding: 2px;
 margin: 5px 5px 1px 0;
}
#commentform {
 margin: 5px 10px 0 0;
}
#commentform textarea {
 width: 100%;
 padding: 2px;
}
#respond:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
#commentform #submit {
 margin: 0 0 5px auto;
}
 
.alt {
 margin: 0;
 padding: 10px;
}
.commentlist {
 padding: 0;
 text-align: justify;
}
.commentlist li {
 margin: 15px 0 10px;
 padding: 5px 5px 10px 10px;
 list-style: none;
}
.commentlist li ul li {
 margin-right: -5px;
 margin-left: 10px;
}
.commentlist p {
 margin: 10px 5px 10px 0;
}
.children {
 padding: 0;
}
#commentform p {
 margin: 5px 0;
}
.nocomments {
 text-align: center;
 margin: 0;
 padding: 0;
}
.commentmetadata {
 margin: 0;
 display: block;
}
 
#wp-calendar {
 empty-cells: show;
 margin: 10px auto 0;
 width: 155px;
}
#wp-calendar #next a {
 padding-right: 10px;
 text-align: right;
}
#wp-calendar #prev a {
 padding-left: 10px;
 text-align: left;
}
#wp-calendar a {
 display: block;
}
#wp-calendar caption {
 text-align: center;
 width: 100%;
}
#wp-calendar td {
 padding: 3px 0;
 text-align: center;
}
#wp-calendar td.pad:hover { /* Doesn't work in IE */
 background-color: #fff;
}
 
acronym, abbr, span.caps {
 cursor: help;
}
acronym, abbr {
 border-bottom: 1px dashed #999;
}
blockquote {
 margin: 15px 30px 0 10px;
 padding-left: 20px;
 border-left: 5px solid #ddd;
}
blockquote cite {
 margin: 5px 0 0;
 display: block;
}
.center {
 text-align: center;
}
.hidden {
 display: none;
}
.screen-reader-text {
 position: absolute;
 left: -1000em;
}
hr {
 display: none;
}
a img {
 border: none;
}
.navigation {
 display: block;
 text-align: center;
 margin-top: 10px;
 margin-bottom: 60px;
}
 
.aligncenter, div.aligncenter {
 display: block;
 margin-left: auto;
 margin-right: auto;
}
.wp-caption {
 border: 1px solid #ddd;
 text-align: center;
 background-color: #f3f3f3;
 padding-top: 4px;
 margin: 10px;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}
.wp-caption img {
 margin: 0;
 padding: 0;
 border: 0 none;
}
.wp-caption p.wp-caption-text {
 font-size: 11px;
 line-height: 17px;
 padding: 0 4px 5px;
 margin: 0;
}
.textContent a {
 text-decoration: none;
 color: #134B84;
}
img.alignright {
 float:right;
 margin:0 0 1em 1em
}
img.alignleft {
 float:left;
 margin:0 1em 1em 0
}
img.aligncenter {
 display: block;
 margin-left: auto;
 margin-right: auto
}
a img.alignright {
 float:right;
 margin:0 0 1em 1em
}
a img.alignleft {
 float:left;
 margin:0 1em 1em 0
}
a img.aligncenter {
 display: block;
 margin-left: auto;
 margin-right: auto
}
 
p img {
 padding: 0;
 max-width: 100%;
}
img.centered {
 display: block;
 margin-left: auto;
 margin-right: auto;
}
img.alignright {
 padding: 4px;
 margin: 0 0 2px 7px;
 display: inline;
}
img.alignleft {
 padding: 4px;
 margin: 0 7px 2px 0;
 display: inline;
}
.alignright {
 float: right;
}
.alignleft {
 float: left;
}
.widgettitle {
 margin: 5px 0 10px 0;
}

Actuellement, sous ff4.0, si je prends le body > div.container > div.right et que je le déplace dans le body > div.container > div.main (avant ou après le div.left), ça marche.
Edit : tests faits avec firebug.

merci
 
au risque de passer pour un con : je comprends pas ta manip ?
 
pour moi le div main et le div right sont au meme niveaux je peux pas le mettre l'un dans l'autre. ou comment ?

Dans la source HTML, tu déplaces <div class="right">[...]</div> dans <div class="main">[...]</div>
 
C'est logique, le main prend toute la largeur utilisée (950px) .right prend les 190 px à droite dans le main, .left prend les 650 px à gauche.
Pourquoi laisser la place pour le .right à l'intérieur du main, si tu le places à l'extérieur ?

ah c'est pour ça que je ne comprends pas, on parle pas du même "langage"
 
la mise en page n'est pas gérée par un html dans le thème wordpress mais une feuille de style CSS, que j'ai copié dans un post précédent
 
et les container, main, right, left n'ont pas de div avant et après pour caser des éléments entre. ils sont à la suite les uns des autres.
j'ai essayé néanmoins de déplacer les éléments entre les parenthèse qui débutent et terminent ces parties mais ça fout tout en l'air...
si je supprime la partie main. le menu reviens a sa place mais le cadre autour du main n'y est plus ducoup
 
 
j'ai moins de mal avec l'html, enfin pour des mises en pages simples comme celles ci. je peux editer avec dreamweaver avec la fonction visu et code en parallèle
 
 
en tout cas merci de ton aide

Le CSS formate du HTML, non ?
Là, la structure HTML est un peu foireuse (en général, quand on a un main, un left et un right, on s'attend à ce que le main contienne le left et le right, ou à ce qu'ils soient tous les trois au même niveau).
 
Ca peut se corriger en CSS, mais il y a un problème de conception, à mon avis.
 
Du coup, tu supprimes la width sur le main, tu mets une margin de 15px sur le left, et tu vires la margin sur le right. Ca marche sur mon ff4 sans toucher au HTML.