Bonjour à tous, je suis entrun de créer un thème avec wordpress 2.7 dans lequel je veux centrer un conteneur div. Pour ce faire comme d'habitude j'utilise le bon vieux :
mais IE réagit comme si il était en mode QUIRKS. Pourtant j'ai bien indiqué une DTD :
Quelqu'un aurait il une idée ???
Pour info mon HTML :
et ma feuille de style :
Modifié par erehcab (07 Jan 2009 - 09:52)
margin: 0 auto; width: 1024px; mais IE réagit comme si il était en mode QUIRKS. Pourtant j'ai bien indiqué une DTD :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Quelqu'un aurait il une idée ???
Pour info mon HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body>
<div id="page">
<div id="header"></div>
<div id="global">
<div id="left"><?php get_sidebar(); ?></div>
<div id="content">
</div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
<?php wp_footer(); ?>
</body>
</html>
et ma feuille de style :
/*
Theme Name: Tournesol v1
Version: 1
Author: Thomas Bachere
Anibal Trail v3
This theme was designed and built by Thomas Bachere,
The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php
*/
/* Eléments généraux*/
*, html {
font-size: 100%;
padding:0;
margin:0;
border:none;
}
body {
font-family: "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
/* Différente ed famille de police facilement utilisable, native de windows.
font-family: Georgia, "DejaVu Serif", Norasi, serif;
font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
font-family: Verdana, "Lucida Grande", Lucida, Tahoma, "Trebuchet MS", Arial, Geneva, Helvetica, sans-serif;
font-family: Verdana, "Lucida Grande", Lucida, Tahoma, "Trebuchet MS", Arial, Geneva, Helvetica, sans-serif;
font-family: "Hoefler Text", "Bookman Antiqua", Palatino, "Utopia", "Times New Roman", Times, "New Century Schoolbook", Georgia, "New York", serif;
font-family: Techno, "Haettenschweiler", Charcoal, Impact, "Arial Black", Verdana, Lucida, Helvetica, fantaisy;
*/
height: 100%;
width: 100%;
margin: 0;
font-size: .85em;
line-height: 1.5;
background: #000 url('images/bckgrd.jpg') no-repeat center top;
color: #333;
/*text-align: center; Sert à régler le bug de centrage auto horizontallement sous IE */
}
/* Titles */
h1, h2, h3, h4, h5, h6 {
margin: 1em 0 .5em 0;
font-style: normal;
}
h1 {font-size: 1.85em;}
h2 {font-size: 1.75em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.25em;}
h5 {font-size: 1em; font-weight: normal; font-style: italic; }
/* Block */
div, p { overflow: hidden; }
/* Lists */
dl,dt { font-weight: bold; }
ul, ol {
list-style: none;
overflow: hidden;
}
/* Paragraphs */
address { font-style: normal; }
q {font-style: italic;}
cite {font-style: italic;}
a {
color: #f40bd0;
text-decoration: underline;
}
a:visited {color: indigo;}
a:hover, a:focus, a:active {color: #333;}
a img {border: none;}
/* Misc inline elements */
em {font-style: italic;}
strong {font-weight: bold;}
del {text-decoration: line-through;}
/* Forms */
form, fieldset { border: none; }
input, button, select { vertical-align: middle; }
/* fin des éléments généraux*/
/*Eléménts spécque au thème tournesol */
div#page {
margin: 50px auto 0 auto;
width: 1024px;
text-align: left;
}
div#header {
background: url('images/header.png');
width: 1024px;
height: 20px;
}
div#global {
width: 1024px;
height: 499px;
}
div#sidebar{
width: 150px;
text-align: right;
margin-top: 280px;
margin-left: 251px;
}
div#sidebar li a {
font-weight: bold;
font-size: 1.5em !important;
text-decoration: none;
}
div#left{
float: left;
background: url('images/left.png');
width: 425px;
height: 499px;
}
div#content{
float: left;
background: #000;
width: 541px;
height: 499px;
padding-left: 10px;
}
div#right{
float: left;
background: url('images/right.png');
width: 47px;
height: 499px;
}
div#footer {
float: left;
background: url('images/footer.png');
width: 1024px;
height: 210px;
}
/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/* End Images */
Modifié par erehcab (07 Jan 2009 - 09:52)
.
