28172 sujets

CSS et mise en forme, CSS3

FIREFOX ok car logique, mais pas sur IE

Pages :
This is mon problème :



<div id="wrapper">
   <div id="header"></div>
   <div id="content-wrapper"></div>
   <div id="footer"></div>
</div>






#wrapper {
	width: 820px;
	height: 100%; /* For IE only */
	margin: auto;
	border: 1px solid red;
}

#header {
	width: 820px;
	height: 60px;
}

#content-wrapper {
	width: 820px;
	padding: 30px 0;
	border: 1px solid black;
}

#footer {
	position: absolute;
             bottom: 0;
	width: 820px;
	border-top: 1px solid #ADCB00;
	border-left: 4px solid #ADCB00;
	text-align: center;
}


la division wrapper est centrée grace à width: 820px et margin : auto.

voici le resultat sous firefox3

upload/17977-firefox.jpg

MAIS le resultat sous IE7 :
upload/17977-ie.jpg

une solution à ce problème ?
Modifié par M3hdi (19 Oct 2008 - 17:50)
M3hdi a écrit :


une solution à ce problème ?


avec le code de la page (html + css) oui certainement
Smiley cligne

(ou un lien vers la page incriminée)
scott54 a écrit :


avec le code de la page (html + css) oui certainement
Smiley cligne

(ou un lien vers la page incriminée)


Maintenant t'as tout lol, allez aides moi Smiley cligne Smiley langue
chez moi sous ie c'est bien centré
par contre si je tronque le doctype ça se barre à gauche
donc non je n'ai pas tout Smiley langue

remplace ton doctype par ceci et tiens moi au courant

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


ou
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Modifié par scott54 (19 Oct 2008 - 18:11)
@ scott54

c'est effectivement le deuxieme doctype que j'ai ! et ca marche pas tjrs sous IE.

tandis que le premier doctype ne marche pas, et c'est moche le loose.dtd lol
Modifié par M3hdi (19 Oct 2008 - 18:13)
c'est vraiment étrange : chez moi c'est bien centré ...

je te met le code en entier pour que tu puisse vérifier

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head>

   
       <title>test</title>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css">
</head>
   
</head>
<body> 
<div id="wrapper">

   <div id="header"></div>

   <div id="content-wrapper"></div>

   <div id="footer"></div>

</div>

</body>

</html>


et css


#wrapper {

	width: 820px;

	height: 100%; /* For IE only */

	margin: auto;

	border: 1px solid red;
	
		min-height:200px;

}



#header {

	width: 820px;

	height: 60px;

}



#content-wrapper {

	width: 820px;

	padding: 30px 0;

	border: 1px solid black;
	


}



#footer {

	position: absolute;

             bottom: 0;

	width: 820px;

	border-top: 1px solid #ADCB00;

	border-left: 4px solid #ADCB00;

	text-align: center;
	
	min-height:50px;

}


j'ai fait un petit peu mumuse avec les min-height mais ce n'est pas ça qui change grand chose
ca marche pas tjrs, je te passe mes code complet, quel probleme !



body {
	margin: 0;
	padding: 0;
	background: transparent url("../images/bgs/bgindex1.jpg") top center;
	color: #000000;
	font-family: "Lucida Sans Unicode", "Century Gothic", Verdana, Arial, Tahoma, sans-serif;
	font-size: 70%;
}

a {
	color: black;
	text-decoration: none;
}

a:hover {
	color: #ADCB00;
}

/*******************WRAPPER
**********************************************/
#wrapper {
	width: 820px;
	height: 100%; /* For IE only */
	margin: auto;
	border: 1px solid red;
}

/*******************HEADER
**********************************************/
#header {
	width: 820px;
	height: 60px;
}

/*******************MENU
**********************************************/
#menu {
	width: 820px;
	height: 30px;
}

#menu ul {
	float: right;
}

#menu ul li {
	display: inline;
}

#menu ul li a {
	font-size: 1.2em;
	padding: 0 10px;
	text-decoration: none;
	color: black;
}

#menu ul li a:hover {
	border-top: 3px solid #ADCB00;
	color: #ADCB00;
}

/*******************CONTENT-WRAPPER
**********************************************/
#content-wrapper {
	width: 820px;
	padding: 30px 0;
	border: 1px solid black;
}

/*******************FOOTER-WRAPPER
**********************************************/
#footer {
	position: absolute; bottom: 0;
	width: 820px;
	border-top: 1px solid #ADCB00;
	border-left: 4px solid #ADCB00;
	text-align: center;
}

#footer p {
	margin: 0;
	font-size: xx-small;
}

#footer img {
	border: none;
}






<?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

<head>
	<title>M3hdi | </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="<?php echo "./stylesheets/$page.css"; ?>" />
</head>

<body>
	<div id="wrapper">
		<div id="header"></div>
		<div id="menu">
			<ul>
				<li><a href="./index.php">Home</a></li>
				<li><a href="./blog.php">Blog</a></li>
				<li><a href="./about.php">About me</a></li>
				<li><a href="./gallery.php">Gallery</a></li>
				<li><a href="./contact.php">Contact</a></li>
			</ul>
		</div>
		
		<div id="content-wrapper">




		</div><!--end of content-wrapper-->
		<div id="footer">
			<p>Copyright &copy; 2008 <a href="#">M3hdi</a> | <a href="./admin/">Administrer</a></p>
			<p>
				<a href="http://validator.w3.org/check?uri=referer"><img src="./images/xhtmlvalidation.png" alt="Valid XHTML 1.0 Strict" /></a>
				<a href="http://jigsaw.w3.org/css-validator/"><img src="./images/cssvalidation.png" alt="CSS Valide !" /></a>
				<a href="http://www.mozilla-europe.org/fr/firefox/"><img src="./images/getfirefox.png" alt="Get Firefox !" /></a>
			</p>
		</div>
	</div><!--end of wrapper-->
	
</body>

</html>
Bonjour M3hdi,

Est tu sur que le problème est sous IE7 car comme scott54 cela passe très bien et c'est centré sous IE7.

Pour IE6 par contre la déclaration <?xml> le fait passer en mode quirks et effectivement le contenu est collé à gauche.

Voir à ce sujet :

Faut-il-utiliser-la-declaration-XML-dans-ma-page-web
Modifié par knarf (19 Oct 2008 - 19:23)
je confirme pour ie7 : toujours aucun problème

par contre j'ai pas installé mon disque dur ou j'ai le pc virtuel pour tester ie6
knarf a écrit :


Est tu sur que le problème est sous IE7 car comme scoott54 cela passe très bien et c'est centré sous IE7.



oui knarf, tu peux même voir les captures d'ecran (en haut ...), tandis que la declaraction xml ne change rien en la metant ou not(en la metant).

Bizzar. Il faut que microsoft arrete avec ses IE :s
Page en ligne ou GTFO. Smiley lol
(Non franchement, on va pas s'en sortir si on continue à échanger des bouts de code sans jamais avoir la totalité, le code tel qu'envoyé par le serveur, le Doctype exact, la présence ou non d'une déclaration XML, etc.)
dans ce cas je continue mon travail sous firefox sans se soucier de ie ...

merci pour votre aides...
#wrapper {
	width: 820px;
	height: 100%; /* For IE only */
	margin: [b]0[/b] auto; /* une petite coquille ici */
	border: 1px solid red;
}

Modifié par knarf (19 Oct 2008 - 19:26)
sert a rien, c'est bon laisses tomber, je crois que je vais meme supprimer ce post ... qu'est ce vous en dites ?
Non pourquoi abandonner, comme te l'indique Florent donne nous un code complet pas en plusieurs partie ou une page en ligne.

Pour l'instant je travaille avec ça en essayant de recoller tous les bouts mais il manque peut être quelque chose.


<?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

<head>
	<title>M3hdi | </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="<?php echo "./stylesheets/$page.css"; ?>" />
</head>
<body>

	<div id="wrapper">
		<div id="header"></div>
		<div id="menu">
			<ul>
				<li><a href="./index.php">Home</a></li>
				<li><a href="./blog.php">Blog</a></li>
				<li><a href="./about.php">About me</a></li>
				<li><a href="./gallery.php">Gallery</a></li>
				<li><a href="./contact.php">Contact</a></li>
			</ul>
		</div>
		
		<div id="content-wrapper">
		<p>Lorem ipsum dolor sit amet consectetuer justo sapien ac Nulla In. Id orci lacinia amet nulla nascetur tincidunt vestibulum Nulla id Vestibulum. Wisi orci eleifend dui nisl id dui non Vivamus rutrum purus. Et semper Nam tristique cursus feugiat pretium Vivamus venenatis nec ridiculus. Mattis ut id eu laoreet eget elit dis tellus orci auctor. Ac Morbi turpis ullamcorper id enim ligula fames et consequat id. In.</p>
<p>Ut wisi et at velit Nulla convallis elit sagittis et consectetuer. Quis natoque rhoncus euismod Morbi elit ut In Nulla justo et. Nonummy dui Curabitur nibh et urna eu natoque pretium velit eu. Est ipsum Nam a congue orci neque lacus venenatis Aenean lacus. Vitae nunc molestie augue libero neque tortor auctor consequat Morbi id. Interdum.</p>
<p>In Sed pede Curabitur orci Vestibulum libero consectetuer nec et vel. Turpis vitae rutrum tincidunt vel vitae Quisque tempus lacus nec massa. Convallis convallis Nulla volutpat mauris non morbi in cursus Nam porta. Ligula eget nisl urna tincidunt mauris pellentesque senectus faucibus lacus tellus. Phasellus nibh feugiat tincidunt porta wisi nunc fringilla et wisi fringilla. Vitae montes.</p>
<p>Convallis Phasellus sit eu hendrerit in eget faucibus ultrices orci diam. Fames laoreet neque aliquet fames Phasellus elit porta sit parturient wisi. Nunc Vestibulum Cras ante justo ligula Nunc habitant mus Morbi lorem. Mollis semper Quisque hendrerit metus faucibus ut tempus eget convallis malesuada. Pede in sed interdum sed lorem Vivamus Nam et tellus et. Vestibulum libero lacinia Aliquam Nulla ut.</p>

		</div>

   <div id="footer"></div>

</div>
</body>
</html>



body {
	margin: 0;
	padding: 0;
	background: transparent url("../images/bgs/bgindex1.jpg") top center;
	color: #000000;
	font-family: "Lucida Sans Unicode", "Century Gothic", Verdana, Arial, Tahoma, sans-serif;
	font-size: 70%;
}

a {
	color: black;
	text-decoration: none;
}

a:hover {
	color: #ADCB00;
}

/*******************WRAPPER
**********************************************/
#wrapper {
	width: 820px;
	height: 100%; [b]/* [#red]Attention aux autres navigateurs
qui ne prendrons pas la hauteur totale */[/b][/#] 
	margin: 0 auto;
	border: 1px solid red;
}

/*******************HEADER
**********************************************/
#header {
	width: 820px;
	height: 60px;
}

/*******************MENU
**********************************************/
#menu {
	width: 820px;
	height: 30px;
}

#menu ul {
	float: right;
}

#menu ul li {
	display: inline;
}

#menu ul li a {
	font-size: 1.2em;
	padding: 0 10px;
	text-decoration: none;
	color: black;
}

#menu ul li a:hover {
	border-top: 3px solid #ADCB00;
	color: #ADCB00;
}

/*******************CONTENT-WRAPPER
**********************************************/
#content-wrapper {
	width: 820px;
	padding: 30px 0;
	border: 1px solid black;
}

/*******************FOOTER-WRAPPER
**********************************************/
#footer {
	position: absolute; bottom: 0;
	width: 820px;
	border-top: 1px solid #ADCB00;
	border-left: 4px solid #ADCB00;
	text-align: center;
}

#footer p {
	margin: 0;
	font-size: xx-small;
}

#footer img {
	border: none;
}

Modifié par knarf (19 Oct 2008 - 19:54)
j'ai eu un souci avec le pc du boulot il y a deux semaines justement en essayant de résoudre un pb posé ici

pour faire court : je changeais le code css et ie m'affichais invariablement la même chose
pour vérifier j'ai carrément vidé la feuille de style : aucun changement dans ie

vider le cache n'a pas suffit il a fallut redémarrer le pc



qu'elle version de ie utilise-tu ? ie7 xp ou vista ?


je demande ça parce que j'ai beau faire je n'arrive pas à reproduire ton pb du coup je me dit que l'erreur ne vient peut etre pas de ton code mais de ie sur ta machine

si tu peux essaye de lire ta page sur un autre pc
Modifié par scott54 (19 Oct 2008 - 20:24)
Tout d'abord, bien que cela n'ait pas encore été relevé dans les posts précédents, merci pour toute la politesse que tu emplois. En gros, bonjour, de rien, merci...

Ceci fait, il y a sur IE (du moins les version antérieures à la 6) un bug sur le centrage ( voir ici )

Pour règler ça, place text-align: center; pour le body, puis ensuite, text-align: left; (mais n'oublie pas de restaurer l'alignement pour les autres éléments alors)

Mais je ne pense pas que sur IE7 ça règlera le problème. Par contre, normalement, tu avais donc un problème sous IE6...
Modifié par Calak (20 Oct 2008 - 05:40)
Pages :
Sujet clos
Aller à