28172 sujets

CSS et mise en forme, CSS3

Problème css sous IE 6 et peut être plus....résolu

Bonjour, je débute en css et j'ai un petit souci mon site s'affiche bien sous ff et IE 7 et malgré un commentaire spécifique mon div centre n'est plus entre les deux DIV colonne1 et colonne2 sous IE 6 et peut être inférieur....voila mon site
www.fclespinasse.123.fr et mon css
@charset=iso-8859-1

.conteneur {
width: 90%;
padding-top: 0px;
}


h1 {margin-top: 0;font-family: Times, sans-serif;text-align: center;color: #fff; background: #6699FF;}
		ol, ul {padding: 0; margin: 1em;}
h2 {margin-top: 0; font-family: Times, sans-serif;text-align: center;color: #fff; background: navy;}
		ol, ul, li {padding: 0; margin: 0em;}
h3 {margin-top: 0; font-family: Times, sans-serif;text-align: left;color: navy; background: white;}
	ol, ul, li {padding: 0; margin: 1em; }
h4 {margin-top: 0; font-size:x-small; font-family: Arial, sans-serif; text-align: left;color: navy; background: white;}
	ol, ul, li {padding: 0; margin: 0.8em;}	
	
div#banniere {
width="100%"
margin-top: 0;
background: #6699FF;
padding: 0px; 
margin: 0em;
}

  a:link { color:#000000; text-decoration:none; font-weight:bold; }
 a:visited { color:#FFFFAA; text-decoration:none; font-weight:bold; }
 a:hover { color:#CCCFFF; text-decoration:none; background-color:#99FFCC; font-weight:bold; }
 a:active { color:#FFFF33; background-color:##88FFFF; font-weight:bold; }
 

div#colonne1 {
	float: left;
	width:14.4%;
	margin-right:1%;
	background: #6699FF;
	color: navy;
}
div#colonne2 {
	padding: 1px;
	float: right;
	width: 25.2%;
	margin-left: 1%;
	background: #6699FF;
	color: navy;
}

div#centre {
	padding: 1px;
			width: 57%;
			margin-left: 16%;
			margin-right:12%;
			background: navy;
			color: #fff;
}

div.centrage {
		text-align: center;
	    }

.imageflottante
{
   float: left;
    margin-right: 8px;
}

p:first-letter
{
        font-size : 2em ;
        font-weight : bold ;
}

Et  un commentaire conditionnel pour Internet Explorer 6 et inférieurs :

div#colonne1 {
	margin-right: 6px;
}
div#colonne2 {
	margin-left: 5px;
}		
div#centre {
	overflow: visible;
	height: 1%;
}

Si quelqu'un peu me renseigner ce serait sympa, je suis intérressés par toute critique sur ma css étant donné que c'est ma première...;
Merci
@ndré
Modifié par tintindelacite (06 Aug 2008 - 16:35)
Bonjour, je sais que ce n'ai pas très élégant mais j'ai toujours le même souci...malgré plusieurs tentative de résolution....
cordialement
andré
Je pense que c'est du à un problème de marges, en plein écran (1280px) il n'y a pas de problème, mais si je réduis le navigateur, le div centre n'a plus assez de place et va donc se mettre en dessous.

EDIT: Au temps pour moi, le problème vient du tableau. IE 6 ne gère pas très bien le witdh 100% pour les tableau si je ne me trompe pas.
Modifié par Yasashii (04 Aug 2008 - 19:09)
Slt, merci beaucoup ,Yasashii j'avais mis ce tableau justement pour essayer de bricoler quelques choses, je vais essayer de modifier ca...que me conseillerai tu de mettre a la place s'en abuser....
cordialement
andre
le tableau est adapté, c'est sa taille qui pose problème à IE6.

J'avais rencontré le même problème. Que j'avais règlé en donnant 99% au lieu de 100% comme largeur. Après si quelqu'un pouvait expliqué exactement quel est le problème, je serais également toute ouïe.
Yasashii a écrit :
J'avais rencontré le même problème. Que j'avais règlé en donnant 99% au lieu de 100% comme largeur. Après si quelqu'un pouvait expliqué exactement quel est le problème, je serais également toute ouïe.
Je pense que tu veux parler du calcul de l'arrondi qui n'est pas le même dans IE et dans FF...


@ tintindelacite : cela dit ça ne sera pas suffisant car la structure est pour le moins fragile. Smiley cligne

Tu pourrais peut-être t'inspirer des modèles de mise en page ainsi que du tutoriel Un design fluide avec trois «colonnes», grâce au positionnement flottant qui est très complet.

A+
Slt,merci pour les conseils, surtout le lien :
a écrit :
un design fluide avec 3 colonnes
qui parait correspondre à ce que j'ai éssayé de faire....Manque juste le header? je pense?

Pour mon info qu'entend tu par
a écrit :
trop fragile?
est ce une façon poli de dire que c nul? Dois je tout reprendre a zéro?

Merci pour tous les conseils
André
Hello,

mon "trop fragile" signifiait que la structure n'a pas été prévue pour pouvoir s'adapter facilement à "toutes" les résolutions de tes visiteurs et qu'il suffit de diminuer un peu la largeur du navigateur pour que tout "explose" ! Smiley ravi

Le design fluide dont je t'ai donné le lien est au contraire robuste dans ce sens que la mise en page va s'adapter.
Re merci pour le conseil, je vais opter pour le design fluide....
Pourrai tu me conseiller pour le header sachant, que je doit mettre 2 logo aux extremites et une banniere au centre, ce qui me permettrer de virer la table que j'utilise pour l'instant.....
Merci
andre
tintindelacite a écrit :
Pourrai tu me conseiller pour le header sachant, que je doit mettre 2 logo aux extremites et une banniere au centre, ce qui me permettrer de virer la table que j'utilise pour l'instant.....

J'aurais bien vu quelque chose comme ça :

html
<div id="banniere">
	<h1><img src="banniere.png" alt="FC Lespinasse" width="540" height="48" /></h1>
</div>

css
#banniere { 
	background: #6699FF url(fcl.jpg) no-repeat scroll 2px center;
	height: 73px;
	padding-right: 2px;
}

#banniere h1 { 
	background: transparent url(fcl.jpg) no-repeat scroll right center;
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

#banniere h1 img { 
	border: none;
	display: block;
	margin: 0 auto;
	padding: 12px 0 0 0; 
}
Slt, super et merci beaucoup, j crois que je vais passer pas mal de temps a comprendre les 3 css #banniere
Encore merci j'ai fait un petit essai sur ma premiere page, sous ie 6 et hors mis un peu de texte qui sort du <div id="centre"> quand je réduit la résolution ,doc ca va....
Merci @+
Sujet clos
Aller à