28221 sujets

CSS et mise en forme, CSS3

Interface avec cadres en full css

Bonjour,

Je m'interresse au XHTML/Full css depuis près d'un an.
Il était temps que je passe le cap.
J'ai donc développé une interface de base pour débuter.

J'ai quelques soucis de compatibilité entre mozilla et ie.
Je voulais donc savoir si la propriété float était bien la fonction à utiliser pour ce que je veux faire et si quelqun pouvait me dire si mon code est correct.
Par la suite j'aurais aussi deux trois questions à vous poser sur ce code

Merci de votre aide


<!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">
<head>
<title></title>
<style type="text/css">

#body {
	margin: 0; /* pour éviter les marges */
	text-align: center; /* pour corriger le bug de centrage IE */
}

#conteneur {
	position: relative; /* on positionne le conteneur */
	margin: 0 auto;
	width: 756px;
	text-align: left;
	border: 1px solid #000;

	padding: 5px;
}

/*
#conteneur {
	position: absolute;
	left: 50%;
	width: 756px;
	margin-left: -378px;
	border: 1px solid #000;

	padding: 5px;
}
*/

#header {
	height: 50px;
}
#menu {
	margin: 0 0 0px 0;/*agit sur margin-top du footer !*/
	padding: 0;
	height: 15px;
	border: 1px solid #000;
}
#top_left {
	float: left;
	margin: 0 5px 0 0;
	/*margin: 0;*/
	padding: 0;
	width: 577px;/*75%*/
	height: 250px;
	border: 1px solid #000;
}
#top_right {
	float: left;
	margin: 0;
	padding: 0;
	width: 170px;/*24.5%*/
	height: 250px;
	border: 1px solid #000;
}
#middle_left {
	float: left;
	margin: 5px 5px 0 0;
	/*margin: 0;*/
	padding: 0;
	width: 270px;
	height: 100px;
	border: 1px solid #000;
}
#middle_right {
	float: left;
	margin: 5px 0 0 0;
	padding: 0;
	width: 477px;
	height: 100px;
	border: 1px solid #000;
}

#bottom_left {
	float: left;
	margin: 5px 5px 0 0;
	/*margin: 0;*/
	padding: 0;
	width: 270px;
	height: 100px;
	border: 1px solid #000;
}
#bottom_right {
	float: left;
	margin: 5px 0 0 0;
	padding: 0;
	width: 477px;
	height: 100px;
	border: 1px solid #000;
}
#footer {
	margin: 5px 0 0 0;
	padding: 0;
	height: 15px;
	border: 1px solid #000;
}
</style>
</head>
<body>
<div id="conteneur">
 <div id="header"></div>
 <div id="menu"></div>
 <div id="top_left"></div>
 <div id="top_right"></div>
 <div id="middle_left"></div>
 <div id="middle_right"></div>
 <div id="bottom_left"></div>
 <div id="bottom_right"></div>
 <div id="footer"></div>
</div>
</body>
</html>
Comme vous pourrez le voir sous mozilla (qui interprète correctement le code) le containeur ne s'ajuste pas en hauteur contraitement à ce que donne ie.
Ce qui est normal d'après ce que j'ai vu sur le tutoriel sur la propriété float.
Comment réglé ce problème ?

Autre point.
Si je modifie la marge du bottom du #menu le #footer se voit attribuer la valeur en margin pour le top.
Je ne comprends pas pourquoi.
Pas de # devant #body vu que ce n'est pas un ID mais une balise de base.

Je te conseille aussi de rajouter padding: 0; dans le body qui est une sorte de "marge interne au contenu".

A part ça, c'est bizarre, parce qu'il y a quelques incohérences ici ou là, et surtout, il n'y a aucun contenu entre tes divs ! Et la logique veut que l'on crée d'abord le contenu XHTML puis on applique les feuilles de style pour mettre en forme la page...
Sinon mo code est correct ?
L'utilisation de la propriété flaot pour placer les cadres tels qu'ils le sont est bonne ?

Merci
J'oubliais ...

Je ne sais pas si tu as remarqué mais la hauteur de 15px pour le menu et pour le footer ne donne pas la même hauteur à l'écran sous mozilla et sous ie Smiley eek
L'utilisation de la propriété flaot pour placer les cadres tels qu'ils le sont est bonne ?
Sujet clos
Aller à