Bonjour,
Je précise que mon design est très simpliste car le but n'est pas trop le design dans ce que je veux faire mais les fonctions php que je ferai ensuite.
Mais malgré ce design très simple, je rencontre un problème sur IE7 au niveau des bordures qui ne s'affichent tout simplement pas et je ne comprends vraiment pas pourquoi.
Voici les screenshots :
- Sous firefox, les bordures s'affichent normalement (EDIT : Le design est bien aligné, c'est la découpe qui foire donc le prob vient que des bordures )
http://img24.imageshack.us/img24/5999/structffhs8.jpg
- Sous IE7, il n'y a que la bordure du menu qui s'affiche, le pourquoi ? aucune idée.
http://img14.imageshack.us/img14/2224/structie7kp3.jpg
Voici le code :
index.php
global.css
menu.html
menu.css
recherche.html
recherche.css
Voila, merci J'espère que vous trouverez un petit quelque chose car la je bloque sur quelque chose qui me paraît simple.
Modifié par BassT4ken (19 Feb 2009 - 10:37)
Je précise que mon design est très simpliste car le but n'est pas trop le design dans ce que je veux faire mais les fonctions php que je ferai ensuite.
Mais malgré ce design très simple, je rencontre un problème sur IE7 au niveau des bordures qui ne s'affichent tout simplement pas et je ne comprends vraiment pas pourquoi.
Voici les screenshots :
- Sous firefox, les bordures s'affichent normalement (EDIT : Le design est bien aligné, c'est la découpe qui foire donc le prob vient que des bordures )
http://img24.imageshack.us/img24/5999/structffhs8.jpg
- Sous IE7, il n'y a que la bordure du menu qui s'affiche, le pourquoi ? aucune idée.
http://img14.imageshack.us/img14/2224/structie7kp3.jpg
Voici le code :
index.php
<!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="fr" lang="fr">
<head>
<title>Bienvenue sur le wiki de la Défense</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<link href="Design/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="global">
<div id="header">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="header_fond"></td>
</tr>
</table>
</div>
<div id="menu">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="menu_fond">
<?php
include('recherche.html');
include('menu.html');
?>
</td>
</tr>
</table>
</div>
<div id="content">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="content_fond"></td>
</tr>
</table>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
global.css
body
{
padding: 0;
margin: 0 auto 0 auto;
width: 800px;
background:url(../Images/fond2.png) repeat;
font-family:Verdana,"Trebuchet MS", Arial,sans-serif;
font-size:medium;
}
#global{
width:800px;
margin:auto;
overflow:hidden;
}
#header{
margin-top:8px;
margin-bottom:5px;
}
#header_fond{
background:url(../Images/ban.png) repeat;
width:800px;
height:80px;
border: 2px solid black;
}
#menu{
margin-right:5px;
margin-bottom:2px;
float:left;
}
#menu_fond{
background:url(../Images/ban.png) repeat;
width:130px;
height:460px;
vertical-align:top;
border: 2px solid black;
}
#content{
margin-bottom:2px;
}
#content_fond{
background:url(../Images/ban.png) repeat;
width:800px;
height:460px;
vertical-align:top;
border: 2px solid black;
}
#footer{
}
menu.html
<!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="fr" lang="fr">
<head>
<title>Navigation CSS</title>
<link href="Design/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="navigation">
<li class="menu1">Menu</li>
<li class="menu2"><a href="index.php">Accueil</a></li>
<li class="menu2"><a href="index.php?action=themes">Themes</a></li>
</ul>
</body>
</html>
menu.css
ul#navigation {
list-style-type: none;
margin: 0;
padding: 5px;
}
ul#navigation a{
text-decoration: none;
color: black;
}
ul#navigation a:hover {
text-decoration: underline;
color: blue;
}
.menu1 {
border-top: 1px dashed;
border-bottom: 1px dashed;
text-align:center;
font-size:small;
margin-top:10px;
margin-bottom:2px;
}
.menu2 {
font-size:small;
margin-left:10px;
}
recherche.html
<!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="fr" lang="fr">
<head>
<title>Recherche CSS</title>
<link href="Design/recherche.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="recherche">
<li class="recherche1">Recherche</li>
<li><input type="text" name="recherche" size="15"/></li>
<li><input type="submit" name="valider" value="Rechercher"/></li>
<li class="recherche2"><a href="index.php?action=recherche_avancee">Recherche avancée</a></li>
</ul>
</body>
</html>
recherche.css
ul#recherche {
list-style-type: none;
margin: 0;
padding: 5px;
text-align:center;
}
ul#recherche a{
text-decoration: none;
color: black;
}
ul#recherche a:hover {
text-decoration: underline;
color: blue;
}
.recherche1 {
border-top: 1px dashed;
border-bottom: 1px dashed;
font-size:small;
margin-bottom:2px;
}
.recherche2 {
font-size:xx-small;
}
Voila, merci J'espère que vous trouverez un petit quelque chose car la je bloque sur quelque chose qui me paraît simple.
Modifié par BassT4ken (19 Feb 2009 - 10:37)