28173 sujets

CSS et mise en forme, CSS3

[Résolu] Arrondi qui ne fonctionne pas correctement sur firefox

Bonjour,

Tout d'abord, je voudrait me présenter. Je suis actuellement étudiant en informatique, niveau bac+3 et je me passionne pour la création de sites internet avec tout ce qui tourne autour en matière de design. Je m'aperçois de jour en jour de la "puissance" du CSS : voilà pourquoi j'ai voulu m'y mettre. Après avoir cherché beaucoup d'informations sur le net et en étant passé sur le site de Mathieu Nebra, j'ai voulu acheter un bon livre pour m'y mettre définitivement, et quoi de mieux que celui de Raphaël Goetter.

J'avais déjà essayé de réaliser des design en CSS, mais les arrondi m'ont toujours posé un problème, donc c'est la première chose que j'ai décider d'attaquer. Seulement voilà, il ne suffit pas de le dire, mais il faut le faire.

Alors quoi de mieux que de vous montrez mon code xHTML tout d'abord.



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Document sans nom</title>
</head>
<body>
<div id="global">
	<div id="header"></div>
		<div id="cadre">
			<div id="bloccadre">
					<h2>. News : </h2>
					<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
					<h2>. Projets Récents : </h2>
			</div>
		</div>
	</div>
		<div id="footer"></div>
</div>
</body>
</html>


Le CSS:

body
{
	margin: 10px;
	padding: 0;
	text-align: center;	
	background-image: url(fond.png);
}

#global
{
	width: 770px;
	margin: 0 auto;
	text-align: left;
}

#header
{
	height: 66px;
	background-image: url(header.gif);
	background-repeat: no-repeat;
}

div#cadre
{
	width: 600px;
	padding-top: 14px;
	background: url(hautcontenu.gif) top left no-repeat;	
}

div#bloccadre
{
	padding-bottom: 14px;
	background: url(bascontenu.gif) bottom left no-repeat;
}

div#bloccadre p,h2
{
	margin: 0px 14px 0px 14px;
}


voilà, comme çà, çà fonctionne nickel, mais les balises <p></p> ne font plus les sauts de lignes. Cependant, çà fonctionne quand on modifie la fin du fichier CSS, en mettant :
a écrit :
div#bloccadre p
au lieu de
a écrit :
div#bloccadre p,h2
. Mais autre problème, sous firefox, voilà ce que j'obtient :

http://zonara.free.fr/erreur_firefox.jpg

Voilà, donc aprés avoir joué avec les padding et les margin, je n'est pas réussi à obtenir de résultats vraiment concluant sur les deux navigateurs.

J'éspère que vous trouverez la solution.

Merci d'avance de toute l'attention que vous porterez à mon poste.

;)
Modifié par zonara (15 Jan 2008 - 13:14)
Bonjour,

Le sélecteur div#bloccadre p,h2 me semble étrange. Es-tu sûr de vouloir sélectionner d'une part les paragraphes enfants ou descendants de div#bloccadre, et d'autre part tous les h2 de la page sans distinction? On attendrait plutôt le sélecteur suivant: div#bloccadre p, div#bloccadre h2.

Quant au problème démontré par ta capture d'écran, sans même voir le code je voterais pour un problème de fusion des marges (erreur classique quand on débute et qu'on n'a pas certains automatismes Smiley cligne ).

Fusion des marges: http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
Je vous propose une solution en n'utilisant que les coins :

CSS :

.contenuhg {
background-image:url(/images/coinhg15x15.gif);
background-repeat:no-repeat;
background-position:top left;
}
.contenuhd {
background-image:url(/images/coinhd15x15.gif);
background-repeat:no-repeat;
background-position:top right;
}
.contenubg {
background-image:url(/images/coinbg15x15.gif);
background-repeat:no-repeat;
background-position:bottom left;
}
.contenubd {
background-image:url(/images/coinbd15x15.gif);
background-repeat:no-repeat;
background-position:bottom right;
}

HTML :

<div id="contenu"><div class="contenuhg"><div class="contenuhd"><div class="contenubd"><div class="contenubg"> </div></div></div></div></div>
Modifié par serval92 (15 Jan 2008 - 11:17)
Merci beacoup pour vos réponses rapides.

J'ai donc essayé la méthode de fusion des marges de Florent V qui fonctionne trés bien. Il faut savoir qu'il y a plusieurs façons de faire et que toutes ne fonctionne pas selon les cas. Aprés plus essais, la solution du display: table-cell à résolu mon problème en partie car sous internet explorer, le texte colle à la partie haute. Donc, j'ai fini par trouver une solution qui fonctionne aussi bien sur internet explorer que sous firefox : padding-top: 1px;

En effet, un padding-top de 1 px sur le bloccadre à fini par solutionner mon problème.

Voilà, je vous remercie encore de l'aide que vous m'avez apporter. C'était un plaisir, car c'est en ayant des erreurs que l'on apprend le plus.
Sujet clos
Aller à