28172 sujets

CSS et mise en forme, CSS3

[Résolu] Bug div en position relative sur l'HTML5

Bonjour.

Pour m'occuper en ce mercredi calme au travail, j'ai commencé une veille technologique plus poussée sur l'HTML5. Aucun problème pour le moment jusqu'à celui-ci! Je commence mes recherches sur Google... et aucune réponse.

Je travaille sur une div avec une hauteur variable qui se nomme conteneur. Je souhaite mettre les 4 coins en arrondie (symbolisé par des rectangles rouges).
Si vous prenez l'exemple suivant, tout est ok :


<!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>
<style type="text/css">
#conteneur
{
	width:980px;
	position:relative;
	height:auto; /* pas necessaire */
}
.tl, .tr, .bl, .br
{
	position:absolute;
	width:5px;
	height:5px;
	background-color:red;
}
.tl
{
	top:0;
	left:0;	
}
.tr
{
	top:0;
	right:0;	
}
.bl
{
	bottom:0;
	left:0;	
}
.br
{
	bottom:0;
	right:0;	
}
</style>
</head>

<body>
<div id="conteneur">
	<div class="contenu">
		<img src="http://www.alsacreations.com/css/img/logo-alsacreations-com.png" style="width:980px; height:300px" />
	</div>
	<div class="tl"></div>
	<div class="tr"></div>
	<div class="bl"></div>
	<div class="br"></div>
</div>
</body>
</html>


Je fais donc mon passage en HTML5 en changeant mon DOCTYPE et ma balise html :


<!DOCTYPE html>
<html>
...


Conclusion il y a un décalage de 3px en HTML5. Pourquoi, comment...? Est ce que quelqu'un aurait des informations?

Vous allez me dire, utilise la propriété border-radius: 5px; mais le but est de faire sans! Le contenu de div.contenu ne le permet pas toujours.

PS : tester avec un reset css au départ.
Modifié par Magicdemon (05 Apr 2012 - 11:07)
Déjà un CSS, c'est mieux dans une balise <link> ensuite, un reset c'est pas que pour tester, c'est pour être bien compatible, donc un petit :
*{
  margin:0;
  padding:0;
}

Ça évite déjà pas mal d'ennuis.

Ensuite, c'est sûrement l'image qui "pousse", un petit display:block sur l'image devrait annuler toutes les marges.
Merci pour ta réponse car il y a une partie qui est utile (display:block, je ne sais pas pourquoi je n'y ai pas pensé... car peut être que cela fonctionnait sur la DTD XHTML 1.0). Mais je vais quand même me permettre de te répondre ça :

a écrit :
Déjà un CSS, c'est mieux dans une balise <link>


Le code que j'ai fournis était un exemple, et non mon cas concret. Pour un exemple (avec extrait de code) sur un forum c'est quand même mieux de le mettre dans une balise style, non?

a écrit :

un reset c'est pas que pour tester, c'est pour être bien compatible, donc un petit :
*{

margin:0;

padding:0;

}


J'ai indiqué que le test a été fait avec un reset, je vais pas le mettre dans mon exemple! Et ton reset est un reset un peu minimaliste et inutile Smiley cligne , voir http://meyerweb.com/eric/tools/css/reset/.
Non, ce reset n'est pas inutile. Et oui il est minimaliste. Le reset de CSS Tools, je le connais, et pour moi, c'est juste n'importe quoi. C'est alourdir son code CSS pour des balises dont on ne se sert pas forcément et effectivement, je trouve ce code sur plein de sites qui n'utilisent que peu voir aucune des balises. Mets ça dans GTmetrix : tu auras un messages du style "Supprimez tous les styles inutilisés."

Ce genre de conneries, c'est un peu comme utiliser jQuery pour faire un afficher/masquer sur un block. C'est de l’aberration à l'état brut, du gaspillage de bande passante de l'auto-fusillade en référencement (les moteurs tenant compte des efforts faits pour l'optimisation).

L'autre hérésie, c'est de croire qu'il suffit de ce genre de hack pour que tout devienne compatible. Non, ça ne dispense pas de coder compatible, les vieux IE fusionnent mal les marges, comptes les border et padding dans les width, etc. Ça le reset n'y fait rien.

Mais t'as le droit de croire au reset magique, chacun sa religion.

N'empêche que si on réinitialise toutes les marges et qu'on code pas n'importe comment, le CSS, c'est compatible sans problème avec tous les navigateurs, pas besoin d'en faire des caisses.

Alors minimaliste oui, parce qu'il le faut, le codage, c'est pas de la dissertation de philo, faut coder efficace et synthétique.

Edit:
J'ai oublié d'expliquer ce code : * sélectionne toutes les balises, margin et padding annulent toutes les marges, ce qui est souvent la cause de différences d'affichage avec les h1, h2... p, ul, etc.
Modifié par KyleKatarn (06 Apr 2012 - 11:09)
Sujet clos
Aller à