Entête avec deux images et texte

Salux à tous,

Dans mon entête, je voudrais insérer deux images, l'une à droite et l'autre à gauche.
Entre, je voudrais y inscrire le titre du site.
Cependant, je rencontre un souci sur le positionnement.
L'image de gauche passe dans le bas.
Je ne comprends pas quelle est l'erreur.

De plus, quand je réduis la page, les deux logos passe tous les deux en-dessous.


Merci de m'aider à résoudre ces problèmes.
Voici l'adresse du site : http://www.boisbievre.fr/Site-mombert/index.html

Le css :

/*Feuille de style du site menuiserie scierie mombert.*/

/*style du body*/
body {
 width: 80%;
 margin-left: auto;
 margin-right: auto;
 max-width: 1440px; /*style maximum de largeur*/
 min-width: 900px;  /*styles minimum de largeur*/
 background: white/*#dcd6c3*/;
 font-family: Arial, Georgia, verdana, sans-serif;
 font-size: 100%;
}

/*Style entête et titre */
#logos {
 height: 226px;
 
 background: #dcd6c3;
}
#logomenui {
 float: left;
 
}
#logoscierie {
 float: right;
 
}
#titre h1 {
 padding-top: 70px;
 text-align: center;
 color: #493111;
 font-weight: bolder;
 
}


/*style arrondi de la bannière. */
.arrondi { 
 -moz-border-radius: 13px; 
 -webkit-border-radius: 13px; 
 -khtml-border-radius: 13px; 
 border-radius: 13px; 
 behavior: url(border-radius.htc); 
}

/*Le corps */
#corps {
 
 margin-top: 10px;
 padding: 10px;
 color: #412909;
 
 text-align: justify;
}

/* le titre h2*/
#corps h2 {
 text-align: center;
 
}

/* le pied de page */
#pied_de_page {
 clear:left;
 margin-top: 10px;
 
 margin-left: auto;
 margin-right: auto;
 margin-top: 10px;
 margin-bottom: 15px;
}

/* Navigation dans le site en bas de page. */
#remonter {
 margin-bottom: 50px;
 text-align: center;
 list-style-type: none; 
}
#gauche {
 text-align: left;
 width: 40%;
 height: 2em;
 float: left;
}
#droite {
 text-align: right;
 width: 40%;
 height: 2em;
 float: left;
}
#vers_haut {
 text-align: center;
 width: 20%;
 height: 2em;
 float: left;
}

/*navigation bas dans le corps*/
.navigation_bas a {
 color: black;
}
.navigation_bas ul {
 margin-top: 0;
 padding: 0;
 text-align: center;
 list-style: none;
}

.navigation_bas a:hover, #navigation a:focus {
 -moz-border-radius: 10px 10px 0 0; 
 -webkit-border-radius: 10px 10px 0 0; 
 border-radius: 10px 10px 0 0;         
 -webkit-border-top-left-radius: 10px; /* pour Chrome */ 
 -webkit-border-top-right-radius: 10px; /* pour Chrome */ 
 border-bottom: 4px solid #ffffcc;
 background: #87663c;
}
.navigation_bas a:visited {
 color: #5f4625;
}

/* positionnement */
.navigation_bas {
 height: 40px;
 padding-top: 15px;
 padding-bottom: 5px;
 margin-bottom: 10px;
}

.navigation_bas li {
 display: inline;  /* liens horizontaux */
}
.navigation_bas ol {
 display: none;
}
.navigation_bas a {
 padding: 8px; /* écart entre les liens */
 font-size: .9em;
 text-decoration: none;
}

/* le pied de page class navigation */
/* positionnement */
.navigation {
 height: 40px;
 padding-top: 15px;
 padding-bottom: 5px;
 margin-bottom: 10px;
 margin-top: 10px;
}

.navigation li {
 display: inline;  /* garde les liens sur une ligne */
}

.navigation a {
 padding: 6px; /* écart entre les liens */
 font-size: .9em;
 text-decoration: none;
 
}

/* couleur */
.navigation {
 background: #d9ca95; /* couleur de la bande du bas */
}
.navigation a {
 color: black;
}
.navigation ul {
 margin-top: 0;
 padding: 0;
 text-align: center;
 list-style: none;
}

.navigation a:hover, #navigation a:focus {
 -moz-border-radius: 10px 10px 0 0; 
 -webkit-border-radius: 10px 10px 0 0; 
 border-radius: 10px 10px 0 0;         
 -webkit-border-top-left-radius: 10px; /* pour Chrome */ 
 -webkit-border-top-right-radius: 10px; /* pour Chrome */ 
 border-bottom: 4px solid #ffffcc;
 background: #9b7a50; /*couleur de passage sur le lien */
}
.navigation a:visited {
 color: #5f4625;
}

Modifié par Muad'Dib (09 Aug 2010 - 18:12)

bon, après des essais, je pense avoir trouvé une solution.

Merci de me dire si le CSS est correcte dans la partie "Style entête et titre" pour la résolution de mon souci.

Bonjour

J'avoue ne pas comprendre ce que tu entends par "correcte" pour un css, mais il existe un validateur css comme le validateur html.
Voilà ta page passée au validateur. Comme tu peux le voir il y a des erreurs MAIS, et je mets le MAIS en grand, elles sont surtout dues à l'utilisation des border-radius etc. Tu ne pourras hélas jamais valider un css avec des propriété navigateur à l'intérieur.

Par contre niveau validation html tu as une toute petite erreur facile à corriger :
Line 42, Column 33: duplicate specification of attribute "class"
<div class="navigation" class="arrondi">

En fait quand on veut mettre deux classes à un élément, on les met à la suite, ce qui donne

<div class="navigation arrondi">

saiko_sama a écrit :
Bonjour

J'avoue ne pas comprendre ce que tu entends par "correcte" pour un css, mais il existe un validateur css comme le validateur html.
Voilà ta page passée au validateur. Comme tu peux le voir il y a des erreurs MAIS, et je mets le MAIS en grand, elles sont surtout dues à l'utilisation des border-radius etc. Tu ne pourras hélas jamais valider un css avec des propriété navigateur à l'intérieur.

Par contre niveau validation html tu as une toute petite erreur facile à corriger :
Line 42, Column 33: duplicate specification of attribute "class"
<div class="navigation" class="arrondi">

En fait quand on veut mettre deux classes à un élément, on les met à la suite, ce qui donne

<div class="navigation arrondi">

ok, merci pour tes infos, c'est corrigé.
Pour les border radius et autre, elles ne seront pas introduites dans le CSS3 ?
Parce que c'est vrai que ce n'est pas "vraiment" une erreur.

J'ai modifié la page, j'ai trouvé que c'était un sombre.

a écrit :
Pour les border radius et autre, elles ne seront pas introduites dans le CSS3 ?

Si si pour la propriété en tant que telle, mais pas les préfixes webkit, moz etc puisque ce sont les préfixes propres au navigateur, du moins il ne me semble pas que celà soit prévu, puisque ces préfixes sont voués à disparaitre au fur et à mesure de l'implantation du css3