28172 sujets

CSS et mise en forme, CSS3

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 Smiley cligne )
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 Smiley smile J'espère que vous trouverez un petit quelque chose car la je bloque Smiley decu sur quelque chose qui me paraît simple.
Modifié par BassT4ken (19 Feb 2009 - 10:37)
Premièrement tu semble ne pas avoir compris le principe de la fonction include.

Tu inclue une page complète (html/head/body) dans une page qui comprte déjà tous ces éléments.

Pour faire simple, include te permet de mettre un bot de code présent dans un fichier dans le fichier qui l'appelle. Le fichier inclus n'as donc pas besoin d'voir la structure de base d'une page HTML, uniquement le morceaux à inclure.

Dans ton cas, menu.html devrait être :
<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>

et recherche.html devrait être :
<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>

Les styles CSS peuvent être inclus dans le fichier global ou appellé via l'index (tu peux avoir plusieurs feuilles de styles liée dans une même page).


Ensuite :

Pourquoi utiliser des tableau à une seule cellule dans chaque div de ta page ?

Ceci :
<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">
						
			</div>
			<div id="menu">
				<?php 
					include('recherche.html');
					include('menu.html');
				?>
			</div>
			<div id="content">
	
			</div>			
			<div id="footer">
			</div>
	</div>
</body>
</html>


associé à ce 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;
	background:url(../Images/ban.png) repeat;
	width:800px;
	height:80px;
	border: 2px solid black;
}

#menu{
	margin-right:5px;
	margin-bottom:2px;
	float:left;
	background:url(../Images/ban.png) repeat;
	width:130px;
	height:460px;
	vertical-align:top;
	border: 2px solid black;
}
#content{
	margin-bottom:2px;
	background:url(../Images/ban.png) repeat;
	width:800px;
	height:460px;
	vertical-align:top;
	border: 2px solid black;}

#footer{
	
}


devrait fonctionner aussi bien, sinon mieux.
Merci, avec quelques petites modif en plus, j'arrive au bon résultat Smiley smile

J'ai 800 px (width) pour le #global,
796 pour le header + 2* 2px, j'arrive à 800px,
129 + (2*2) = 133 + 5 px (grâce au margin-left) = 138px
et j'ai un content de 658 px + (2*2) = 138+662 = 800.

Je pensais que ça m'épargnerait les maths mais non ^^ Enfin, je suis sur qu'il y a une solution pour que ce placement se fasse plus ou moins automatiquement...

Pour l'inclue, oui en effet, je suis bête... Lors de notre travail de groupe sur un site, je ne m'occupais pas de cette partie et j'ai recopié le travail d'un pote (mais d'une version antérieure du site) et je n'ai pas réféchi à ça...

Merci en tout cas. Je continue tout ça en espérant ne plus avoir de problèmes de ce style...