28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je développe un site web pour mon lycée, jusqu'ici tout allait bien, le site s'affichait normallement sur IE7 et Firefox.
Seulement j'ai voulu tester sur IE6 pour vérifier que mon site soit bien compatible et ben misère, une catastrophe ! ^^

Le problème est que ma div menu, corps et actu doivent être alignés sur une même ligne avec un float:left mais sous IE6 ca ne marche pas, chaque block revient à la ligne ;(

Après quelques recherche sur internet, j'ai tenté plusieurs solutions (display:inline, position:relative etc...) mais rien ne marche Smiley decu

Voici l'adresse du site concerné : www.vedrillan.com/bahuet

J'éspère que vous pourez m'aider Smiley lol

Merci d'avance ^^
Salut,

Bon à vue de nez, dans ton code dans l'ordre:
menu en float: left
actualite en float right
et en dernier corps

pour ton css, je verrais:

#corps {
	position:relative;/* si besoin ultérieur*/
	padding : 0px 5px 0 5px;
overflow: auto;/* pour Firefox */
	text-align : justify;
	margin-top : 20px;
width : 582px;/* Le min-width ne sert à rien l'ensemble de tes blocs ont des width fixes*/

}


Enfin c'est juste une piste Smiley cligne
Merci pour ta réponse,

Quand je fais ca, l'actualité passe à la ligne donc ca ne va pas ^^

Je désespère Smiley langue m'enfin je crois que ca va etre tant pis pour IE6, j'ajouterais un lien vers Firefox ou windows update pour les utilisateur d'IE6 et pis voila Smiley lol

Merci quand meme pour ton aide =)
Arf ... Smiley cligne
<div id="background">

    <!-- div globale -->
    <div id="main">

        <!-- La partie gauche de la page, le menu -->
        <div id="menu">
<a href="index.php"><h3>Accueil</h3></a>
<h3>Présentation</h3>
<ul>
  <li><a href="index.php?page=situation_geo">Situation géographique</a></li>

  <li><a href="index.php?page=histoire">Histoire</a></li>
  <li><a href="index.php?page=visiste_lieux">Visite des lieux</a></li>
  <li><a href="index.php?page=photo">A travers des photos</a></li>
  <li><a href="visite/index.html">Se promener dans le lycée</a></li>
  <li><a href="index.php?page=galerie">Galerie photos</a></li>
</ul>

<h3>Formation</h3>
<ul>
  <li><a href="index.php?page=enseignement_sup">Ens. supérieur</a></li>
  <li><a href="index.php?page=lycee_tech">Lycée technique</a></li>
  <li><a href="index.php?page=lycee_pro">Lycée professionnel</a></li>
</ul>
<h3>Inscription</h3>

<ul>
  <li><a href="index.php?page=inscription">Formulaire d'inscription</a></li>
  <li><a href="index.php?page=tarifs">Tarifs Scolarité</a></li>
</ul>
<h3>Infos diverses</h3>
<ul>
  <li><a href="index.php?page=logement">Logement étudiant</a></li>
  <li><a href="index.php?page=offre_emplois">Offre d'emplois</a></li>

  <li><a href="http://www.cftaco.fr/ftp/FR_libre8/horaires%20B.pdf" target="_blank">Le lycée en bus</a></li>
  <li><a href="index.php?page=resultat">Résultats aux examens</a></li>
  <li><a href="ancien/index.htm">Anciens élèves</a></li>
  <li><a href="index.php?page=liens">Liens</a></li>
  <li><a href="mailto:direction@bahuet.com">Ecrivez-nous</a></li>

</ul>
<h3>Accès réservé</h3>
<!--<ul>
  <li><a href="http://193.251.88.21/notesweb/index.php">Acc&egrave;s professeur</a></li>
  <li><a href="index.php?page=parent_cm">Acc&egrave;s parents</a></li>
  <li><a href="index.php?page=echange">Acc&egrave;s &eacute;space d'&eacute;change</a></li>
</ul>-->
		</div>



<!-- La partie droite de la page, les actualités -->
<div id="actu">
	<a href="index.php?page=actu"><h3>Actualité</h3></a>
    <form method="post" action="index.php?page=actu">
      <table border="0">
        <tr>
          <td><input type="text" name="motclef" size="18" /><br /><input type="submit" value="Rechercher" /></td>
        </tr>

      </table>
    </form>
    </div>
	
<!-- Partie centrale de la page -->
<div id="corps">


    </div>
	
<div id="pied_de_page"></div>
</div>
</div>


body {
	margin-top : 5px;
	margin-left:2px;
	margin-right:0px;
	margin-bottom : 5px;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size : 12px;
	color : #000000;
	background : url(../images/fond.gif);
}
a {
	text-decoration : none;
	color : #000000;
}
a:hover {
	text-decoration : underline;
	color : #000000;
}
h3 {
	color : #800000;
	height : 2px;
}
a h3 {
	color : #800000;
	text-decoration : none;
}
#background {
	margin : auto;
	width : 990px;
	background-image : url(../images/aerien.jpg);
	background-color : lime;
	background-repeat : no-repeat;
}
#main {
	margin : auto;
	padding-top : 120px;
	width : 990px;
	background: yellow;
	background-position : top 0%;
	background-repeat : no-repeat;
}
#menu {
	float:left;
	position:relative;
	width : 210px;
	padding-top : 35px;
	padding-left : 5px;
}
#menu ul {
	list-style : none;
}
#menu ul a {
	color : #008000;
}
#menu a:hover {
	text-decoration : underline;
	color : #008000;
}
#corps {
	position:relative;
	padding : 0px 5px 0 5px;
overflow: auto;
	text-align : justify;
	margin-top : 20px;
width : 582px;
	background-color : lime;
height: 500px;
}
#actu {
	float:right;
	position:relative;
	width : 170px;
	padding-right : 5px;
}
#pied_de_page {
	margin : auto;
	width : 990px;
	height : 138px;
	background-image : url(../images/bas.gif);
	background-position : bottom 0%;
	background-repeat : no-repeat;
	clear : both;
}
#tableInbox {
	width : 100%;
}
#tableInbox th {
	background-color : #800000;
	line-height : 25px;
	color : #ffffff;
	padding-left : 5px;
}
#tableInbox td {
	background-color : #008000;
}
#tableInbox td a {
	display : block;
	text-decoration : none;
	line-height : 20px;
	background-color : #008000;
	padding-left : 3px;
	color : #ffffff;
}
#tableInbox td a:hover {
	display : block;
	text-decoration : none;
	line-height : 20px;
	background-color : #00cc66;
}
.text {
	margin : 5px 5px 5px 5px;
	text-indent : 1.5cm;
	font-size : 13px;
}
.img1 {
	position : absolute;
	margin : 70px 0 0 40px;
}
.img2 {
	position : absolute;
	margin : 80px 0 0 350px;
}
.img3 {
	position : absolute;
	margin : 170px 0 0 190px;
}
.logo_corps {
	position : absolute;
	margin : 370px 0 0 190px;
}
.new a {
	color : #008000;
}
.new a:hover {
	text-decoration : underline;
	color : #008000;
}
.erreur {
	text-align : center;
	color : #ff0000;
	font-size : 11px;
}
.transfert {
	color : #800000;
	font-size : 16px;
	text-align : center;
	padding-top : 50px;
	font-weight : bolder;
}
.tableParent td {
	background-color : #800000;
	border : 1px solid #000000;
	color : #ffffff;
	padding : 3px 5px 3px 5px;
}
.tableParent th {
	border : 1px solid #000000;
}
.tableParent tr {
	background-color : #ffffff;
}
J'aime beaucoup le font vert fluo Smiley lol

Sans float au #corps la div de l'actu revient a la ligne (c'est justement ce que je veux éviter =D )
J'ai donc remis un float au corps, seulement la j'ai pas la possibilité de tester avec IE6, j'avais déjà essayé avec des position:relative et ca n'avais pas marché seulement c'était peu etre une histoire de pixel, je testerais surrement cette apres-midi.

Encore merci pour ton aide Smiley smile
upload/16262-roidupaint.jpg

Voila ce qu'est un retour a la ligne pour moi Smiley lol
L'actu devrait s'afficher a coté du corps mais sans le float l'actu passe en dessous.

J'éspère être assez clair ^^
Mwoui,

Sauf erreur ou omission avec les codes joints, chez moi j'ai ça sous FF, IE6&7 et opera upload/5854-test.jpg
Je viens de tester sous IE6 et ca marche ^^

J'ai repris ton code en ajoutant un float:left au #corps, bizarement chezm oi sans le float sous IE7 l'actu repasse a la ligne comme t'as pu le voir dans le screen.

Ca m'intrigue un peu que chez toi ca marche et pas chez moi, donc jvais trifouillé un peu pour essayer de comprendre, m'enfin pour l'instant ca marche alors c'est le principal Smiley smile

Tu peux retourner voir sur le site si tu veux par curieusité.

donc un grand merci a toi, mon site est enfin pret à etre mis en ligne sur l'hebergement définitif =)

Merci merci merci !! Smiley smile
Encore un pti souci sous FF et opera
Tu devrais éliminer le height de ton bloc .titreMenu sinon ça ne vas pas le faire Smiley cligne

Puis les height sauf si on ne peut vraiment pas s'en passer, ça cause plus de dégâts que ça peut se rendre utile (Ce pourrait être une citation de Maître Florent Smiley lol )
Je sais tout a fait d'accord avec toi pour les height mais mon directeur est très chiant, il veut que le site entre en hateur sur des résolutions de 1024x768 donc j'ai du tout réduire au minimum et pour réduire les marge entre les titre du menu et les liste de liens ben j'ai trouvé que le height.

Si je pouvais je les enleverais mais malheureusement j'ai pas mon mot a dire avec mon directeur, quand il a une idée dans la tete ben il l'a pas ailleur ^^

Si globalement ca marche ca ira, les exigeances était de faire un site compatible IE, mais bon c'est pas dans mes habitude, je développe toujours sur IE et firefox en paralelle Smiley langue

Bon, quoi qu'il en soit encore merci pour ton attention Smiley smile