28220 sujets

CSS et mise en forme, CSS3

Bonsoir tout le monde!
Je viens faire appel a vous, car j'ai un petit probleme de mise en page,
apres pas mal d'essai,de prises de tetes, vous etez peut etre LA solution!

Voyez par vous meme : http://www.20syl.com/alsa/index2.html
En l'ouvrant avec IE bizarement sa marche impec!
mais avec firefox, rien ne marche comme il faut!

Je vous met le code source de la page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>20syl blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>

<BODY>
<DIV id=conteneur>
<DIV class=haut_gauche>
<DIV class=haut_droit>
<DIV class=bas_gauche>
<DIV class=bas_droite>
<DIV id=haut>

</DIV>
<DIV id=banniere></DIV>
<DIV id=milieu></DIV>

<DIV id="contenu"><DIV id=g>

menu<br/> menu2
</DIV>

<DIV id=c>
 partie centrale qui "pousse" les colones vers le bas.<BR>
    partie 
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer feugiat, mauris in venenatis aliquam, lacus neque commodo lorem, a tristique erat nulla imperdiet tortor. Donec ante libero, interdum ut, pharetra id, imperdiet posuere, sapien. Nulla facilisi. Sed ullamcorper. Morbi scelerisque dolor eu dolor. Pellentesque tincidunt lobortis justo. Cras non ante eu risus hendrerit pellentesque. Vestibulum ultrices. Mauris accumsan, felis ut tristique tempus, eros mauris vehicula velit, id gravida libero lectus at nulla. Maecenas sagittis. Aenean vel nulla sit amet ipsum pellentesque aliquam. Cras varius. Vivamus turpis enim, porttitor nec, facilisis sed, varius nec, diam. Proin posuere velit et diam. Maecenas consectetuer, mauris quis molestie pharetra, ante lectus vulputate tortor, at ultricies nunc pede sed odio. Sed pellentesque diam pretium quam. Mauris nec eros eget nulla bibendum venenatis. Aenean a est. Sed gravida ornare nisl. Vestibulum porta risus. 

Nullam gravida. Fusce facilisis libero quis nulla. Fusce et dui vitae lacus imperdiet laoreet. Suspendisse lacus massa, porta nec, tincidunt et, lobortis id, enim. Aliquam dignissim tincidunt augue. Curabitur hendrerit mauris lacinia sem. Duis justo nisi, fermentum ut, ultricies vitae, viverra et, massa. Sed eu pede a nibh hendrerit gravida. Ut pellentesque, magna eget adipiscing tincidunt, magna arcu tristique mauris, et blandit ligula eros porta leo. Aenean orci metus, laoreet bibendum, semper eget, facilisis eget, elit. Integer eget nibh. Quisque vitae mi. Maecenas condimentum, velit nec condimentum pharetra, neque ipsum fringilla eros, blandit ultricies pede metus at lacus. Maecenas eleifend, velit in sagittis ornare, eros nisl porttitor libero, in mattis lorem ipsum nec eros. Praesent interdum consequat dui. Maecenas bibendum hendrerit massa. Donec leo eros, tincidunt et, semper in, fringilla ac, nisi. In pulvinar. Cras luctus blandit metus. 

Integer ultrices nunc ut purus. Integer vel dui. In vulputate, erat ac posuere pulvinar
 </DIV>
</div>
</DIV>
</DIV></DIV></DIV>
<DIV id=footer>
<DIV class=foot_bas_gauche>
<DIV class=foot_bas_droite>

</DIV></DIV></DIV></DIV></DIV></BODY></HTML>



Et le css:

body{
	margin:0;
	padding:0;
	text-align:center;
	background:#888;
	font-family:Arial,Geneva;
	font-size:9pt;
}

#conteneur{	
	width:510px;
	margin-top:20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	text-align:left;
    background-color : #fff;
	
	}

.haut_gauche{
	background-image :  url(images/tl.gif);
	background-repeat : no-repeat;
	background-position : top left;
}
.haut_droit{
	background-image :  url(images/tr.gif);
	background-repeat : no-repeat;
	background-position : top right;
}
.bas_droite{
	
	padding : 15px 15px 15px 15px;
}
#haut{
	border-bottom:0px solid #fff;
	height:40px;
	background:#6C0DB1;}
#banniere{
    background: #6C4FB1;
	border-top:10px solid #fff;
	border-bottom:10px solid #fff;
	height:250px;
	}
#milieu{
	border-bottom:10px solid #fff;
	height:50px;
	background:#6C0DB1;
    }

#contenu{
	
	height:300px;
	background:#BDA1DC;}
#footer{
	border-bottom:10px solid #888;
    height:30px;
	background:#595955;}

.foot_bas_gauche{
    background:#595955;
	background-image :  url(images/fbl.gif);
	background-repeat : no-repeat;
	background-position : bottom left;
}

.foot_bas_droite{
	
    background-image :  url(images/fbr.gif);
	background-repeat : no-repeat;
	background-position : bottom right;
	
	padding : 15px 15px 15px 15px;
}
.menu
{

	height:auto;
	background:#BDA1DC;}
.post
{	
	
	height:auto;
	background:#BDA1DC;}


#c {
	float: right; MARGIN-LEFT: 0px;  MARGIN-RIGHT:0px; BACKGROUND-COLOR: #9999cc
}
#g {
	float: left; MARGIN-LEFT: 0px;  WIDTH: 150px;
}



Je vous remerci d'avance d'eclairer un peu ma lanterne, et de me donner un ptit coup de pouce!
Modifié par 20syl (19 Jan 2006 - 21:58)
Bonjour 20syl.
20syl a écrit :

En l'ouvrant avec IE bizarement sa marche impec!
mais avec firefox, rien ne marche comme il faut!

C'est normal dans la mesure ou tu as probablement travaillé avec IE puis ensuite regardé le résultat sur Firefox, avec le résultat qu'on connait.

IE interprète à peu près n'importe quel code un peu pourri (désolé).

Avant de soumettre ton problème tu dois :

1- Doter ton document d'un DOCTYPE approprié.

2- Fournir un code valide.

Sinon, le mode de rendu de ta page est laissé au hasard.
Modifié par Stephan (19 Jan 2006 - 02:54)
Salut,
j'ai fait les modifs necessaires,la page est valide
pour le doctype, c'est juste un probleme de copier coller, il etait declaré sur la page en ligne Smiley cligne

Enfet, j'ai essayé d'adapté ce modele la
Et je regardai le resultat sur Firefox, qui donc ne donnait pas ce que je voulais.
Et j'ai donc eté etonné de voir qu'avec IE cela ne marchait plus!
Bonjour 20syl.

IE interprètre la propriété height comme si c'était min-height (IE ne reconnait pas min-height).

En figeant ton bloc contenu à 300px, Firefox déborde de celui-ci (comme prévu) mais IE étire le bloc (ce qu'il ne devrait pas faire).

Enlever la hauteur du bloc contenu (il n'en a pas besoin).
Lui assigner un overflow: auto; (lui permet de s'étirer).


#contenu {
	overflow: auto;
	/* height:300px; */
	background:#BDA1DC;
}

(Pas testé sous IE)
Modifié par Stephan (19 Jan 2006 - 16:45)
Je te remerci bcp pr ton aide!
Sur firefox, sa marche a present tres tres bien!
C'est au tour de IE de deconner (ah celui la)
c'est demoralisant!
Donc maintenant tu sais que tu dois servir un height: 300px; à IE et un overflow: auto; pour les autres. Smiley cligne

Reste à savoir comment tu vas t'y prendre.

Juste à titre d'expérience, essais ceci :

#contenu {
	overflow: auto;
	_height:300px; /* seulement IE peut lire ceci */
	background:#BDA1DC;
}

Si l'overflow: auto; est inoffensif dans IE, alors tu pourras servir le height:300px; avec un commentaire conditionnel (voir FAQ). Sinon, il faudra le masquer.

PS : Attention à ton écriture (bcp, pr), tu as amplement le temps pour rédiger tes messages. Pense à ceux qui utilisent un lecteur d'écran. Smiley cligne
Tout est rentré dans l'ordre!
Merci de m'avoir aidé aussi rapidement et efficacement!
C'est plutot bien de pouvoir compter sur un forum et une FAQ comme cela!
Bonne soirée!