28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
J'essaie depuis un certain temps de créer un petit site de tutoriels vidéos. Lien ci dessous :
http://tutomaster.free.fr/
Sur la mise en forme de mes pages, j'arrive à un résultat acceptable sur Firefox et Chrome.
Par contre j'ai des problèmes de marges sous IE8. Notamment le pied de page est "décollé" du corps.
J'aimerais pouvoir rectifier le tir mais je ne suis pas assez compétent en CSS et je me perds un peu entre les margin et les padding.

Quelqu'un pourrait-il m'aider à recoller le pied de page sous IE ?
Et pourquoi pas à recoller aussi chaque titre (exemple : EDITO) au paragraphe associé (je voudrais éviter l'interligne)...

Merci d'avance.

Je vous donne le code CSS de ma page d'accueil :

body{
width:960px;
margin:auto;
background-color:rgb(143,143,143);
margin-top:40px;
margin-bottom:20px;
}
#header{
width:960px;
height:100px;
background-image:url(images/banniere.png);
margin-bottom:0px;
-moz-border-radius: 10px 10px 0 0; 
        -webkit-border-radius: 10px 10px 0 0; 
        border-radius: 10px 10px 0 0;         
        -webkit-border-top-left-radius: 10px; /* pour Chrome */ 
        -webkit-border-top-right-radius: 10px; /* pour Chrome */ 
}
ul#menuzone{ /*le menu de zone d'accès rapide juste sous le header*/
background-color:rgb(237,237,237);
margin:0;/*conseillé de faire pour tout menu : assurer compatibilité des différents navigateurs*/
padding:0;/*conseillé de faire pour tout menu : assurer compatibilité des différents navigateurs*/
font: bold 0.7em arial,trebuchet,verdana,times,serif;
list-style-type:none;
text-align:center;
border-top: thin solid rgb(78,185,73);
}
#menuzone li{
display:inline;/*pour aligner le menu horizontalement on le fait devenir inline*/
margin:0 5px;
}
#menuzone li a{
color:green;
text-decoration:none;/*pour enlever le trait du lien*/
line-height:25px; /*pour aérer l'espace entre les liens*/
}
#menuzone li a:hover{ /*au passage de la souris le lien change de couleur*/
color:black;/*couleur orange*/
}
/*le menu de navigation commence ici*/
ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 960px;/*--largeur du menu--*/
	list-style: none;
	position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
	font-size: 1.1em;/*--taile police du menu--*/
	font-family:verdana,arial,trebuchet,serif;/*--police du menu--*/
	background-color:rgb(255,158,32);/*--couleur de fond du menu--*/
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #ffffff; /*--division entre chaque item--*/
}
ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color:black;/*--couleur de police du menu--*/
	text-decoration: none;
}
ul#topnav li:hover { background: #e29200 url(topnav_active.gif) repeat-x;}/*--couleur de fond du menu au survol--*/
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/
ul#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0; top:35px;
	display: none; /*--Hide by default--*/
	width: 960px;
	background: #e29200;/*--couleur de fond du sous-menu--*/
	color: black;/*--couleur de séparation des items du sous-menu--*/
	font-size: 0.7em;/*--taile police du sous-menu--*/
	font-weight:bold;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: none;color:white;}/*--suppression du surlignage du sous menu + couleur police du sous menu au survol--*/
@media print {.menu {float:left; width:900px; border:none; background:rgb(240,240,240); color:rgb(75,75,75); font-size:1.0em; font-size:130%;}}
/*le menu de navigation se termine ici*/

#corps{
background-color:white;
clear:left;/* utiliser clear left pour positionner un élément en dessous (à gauche) d'un élément flottant, ici le menu*/ 
padding-bottom:25px;
}

/* formatage de la vidéo*/ 
object{
display:block;/* nécessaire pour appliquer des marges à une balise object*/ 
margin-left:10px;
margin-right:10px;
margin-top:0px;
margin-bottom:10px;/* marge du bas entre vidéo et début du descriptif (tuto 1)*/ 
}
/* fin formatage de la vidéo*/ 

#corps h1.edito {
margin-left:10px;
margin-right:400px;
padding-left:2px;
padding-top:5px;
padding-bottom:5px;
width:75px;
background-color:rgb(30,144,255);
font-family: arial,verdana,trebuchet,serif;
font-size:0.9em;
text-align:center;
color:white;
-moz-border-radius: 10px 10px 0 0; 
        -webkit-border-radius: 10px 10px 0 0;
        border-radius: 10px 10px 0 0;         
        -webkit-border-top-left-radius: 10px; /* pour Chrome */ 
        -webkit-border-top-right-radius: 10px; /* pour Chrome */ 
		}
#corps h1 {
margin-left:10px;
margin-right:400px;
padding-left:10px;
padding-top:5px;
padding-bottom:5px;
background-color:rgb(50,205,50);
font-family: arial,verdana,trebuchet,serif;
font-size:0.9em;
color:white;
-moz-border-radius: 10px 10px 0 0; 
        -webkit-border-radius: 10px 10px 0 0;
        border-radius: 10px 10px 0 0;         
        -webkit-border-top-left-radius: 10px; /* pour Chrome */ 
        -webkit-border-top-right-radius: 10px; /* pour Chrome */ 
		}
#corps p.edit{/* paragraphe de la partie Edito*/ 
margin-left:10px;
margin-right:400px;
margin-bottom:10px;
margin-top:-12px;
text-align:justify;
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
background-color:white;
font-family:arial,verdana,trebuchet,serif;
font-size:0.8em;
border:thin solid rgb(30,144,255);
-moz-border-radius: 0 10px 10px 10px; 
        -webkit-border-radius: 0 10px 10px 10px;
        border-radius: 0 10px 10px 10px;         
        -webkit-border-top-left-radius: 0 10px;  /* pour Chrome */ 
        -webkit-border-top-right-radius:0 10px;/* pour Chrome */ 
}
#corps p{
margin-left:10px;
margin-right:400px;
margin-bottom:30px;
margin-top:-12px;
text-align:justify;
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
background-color:rgb(237,237,237);
font-family:arial,verdana,trebuchet,serif;
font-size:0.8em;
border:thin solid rgb(50,205,50);
-moz-border-radius: 0 0 10px 10px; 
        -webkit-border-radius: 0 0 10px 10px;
        border-radius: 0 0 10px 10px;         
        -webkit-border-top-left-radius: 0px; /* pour Chrome */ 
        -webkit-border-top-right-radius: 0px; /* pour Chrome */ 
}
#pied{
clear:left;/* utiliser clear left pour positionner un élément en dessous (à gauche) d'un élément flottant, ici la video*/ 
background-color:rgb(255,158,32);
font: bold 0.7em arial,trebuchet,verdana,times,serif;
color:black;
padding-left:10px;
height:40px;
text-align:center;
-moz-border-radius: 0 0 10px 10px; 
        -webkit-border-radius: 0 0 10px 10px;
        border-radius: 0 0 10px 10px;         
        -webkit-border-top-left-radius: 0px; /* pour Chrome */ 
        -webkit-border-top-right-radius: 0px; /* pour Chrome */ 
}
#blocdroit{
float:right;
width:380px;
background-color:rgb(255,158,32);
border:thin solid rgb(255,158,32);
border-top:none;
border-right:rgb(255,158,32);
font-family:arial,verdana,trebuchet,serif;
font-size:0.8em;
-moz-border-radius: 0 0 0 10px; 
        -webkit-border-radius: 0 0 0 10px;
        border-radius: 0 0 0 10px;         
        -webkit-border-top-left-radius: 0 0 0 10px; /* pour Chrome */ 
        -webkit-border-top-right-radius: 0 0 0 10px; /* pour Chrome */ 
}
.search{
margin-top:0;
margin-bottom:0;
background-color:white;
padding-top:0px;
padding-bottom:0px;
padding-left:2px;
padding-right:2px;
text-align:justify;
-moz-border-radius: 0px 0px 0px 0px; 
        -webkit-border-radius: 0px 0px 0px 0px;
        border-radius: 0px 0px 0px 0px;       
        -webkit-border-top-left-radius: 0px 0px 0px 0px;  /* pour Chrome */ 
        -webkit-border-top-right-radius: 0px 0px 0px 0px;  /* pour Chrome */ 
}
.help{
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
background-color:white;
padding-top:5px;
padding-bottom:15px;
padding-left:10px;
padding-right:10px;
text-align:justify;
border:thin solid rgb(255,158,32);
-moz-border-radius: 10px 10px 10px 10px; 
        -webkit-border-radius: 10px 10px 10px 10px; 
        border-radius: 10px 10px 10px 10px;        
        -webkit-border-top-left-radius: 10px 10px 10px 10px;   /* pour Chrome */ 
        -webkit-border-top-right-radius: 10px 10px 10px 10px;   /* pour Chrome */ 
}
.aide{/* pour mettre l'expression "besoin d'aide ?" en valeur */ 
color:rgb(78,185,73);
font-size:0.9em;
font-weight:bold;
}
.pub {
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
background-color:white;
padding-top:5px;
padding-bottom:15px;
padding-left:10px;
padding-right:10px;
text-align:justify;
border:thin solid rgb(255,158,32);
-moz-border-radius: 10px 10px 10px 10px; 
        -webkit-border-radius: 10px 10px 10px 10px; 
        border-radius: 10px 10px 10px 10px;      
        -webkit-border-top-left-radius: 10px 10px 10px 10px;   /* pour Chrome */ 
        -webkit-border-top-right-radius: 10px 10px 10px 10px;   /* pour Chrome */ 
}
.tag{
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
background-color:white;
padding-top:5px;
padding-bottom:15px;
padding-left:10px;
padding-right:10px;
text-align:justify;
border:thin solid rgb(255,158,32);
-moz-border-radius: 10px 10px 10px 10px; 
        -webkit-border-radius: 10px 10px 10px 10px; 
        border-radius: 10px 10px 10px 10px;      
        -webkit-border-top-left-radius: 10px 10px 10px 10px;   /* pour Chrome */ 
        -webkit-border-top-right-radius: 10px 10px 10px 10px;   /* pour Chrome */ 
}
Bonjour.
Après avoir jeté un coup d'oeil assez rapidement à ta page, j'ai remarqué que supprimer la marge du bas de l'élément <object> réglait le problème. Il suffirait de remplacer cette ligne :
margin-bottom:10px;/* marge du bas entre vidéo et début du descriptif (tuto 1)*/ 
...par celle-ci :
margin-bottom:0px;

Pour appliquer une marge entre la vidéo et le descriptif, tu pourrais essayer de placer une marge au-dessus du bloc contenant le descriptif, plutôt que sur la vidéo.
Bonjour,
Merci à toi !
Grâce à ton intervention j'ai rectifié ce qui me gênait le plus sous IE : le décalage entre le corps et le pied de page.
Je te remercie encore et vive ce forum !