28172 sujets

CSS et mise en forme, CSS3

Bon matin tout le monde!

Autour d'un bon chocolat chaud avec un croissant tout juste sorti du four, je me décide a vous faire part d'un problème qui revient souvent quand je découpe un design et que je le transpose en xhtml/css.

Arrêtons de parler dans le beurre, et montrons la sauce:

Création d'une boite avec coins arrondi et bordure de 1px, largeur fixe. Je dispose donc de 2 images (top et bas ) + un conteneur extensible verticalement.

Code:
<div id="boite_cont">
	<div id="boite_cont_haut"></div>
	
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis elit. Pellentesque eleifend tellus ac neque sollicitudin pellentesque. Nam semper nulla a mi. </p>
	
	<div id="boite_cont_bas"></div>
</div>


Mon CSS:
#boite_cont {
	width: 470px;
	border-left: 1px solid #7aB620;
	border-right: 1px solid #7aB620;
	margin:20px 0px 0px 0px; 
	

}
#boite_cont_haut {	
	background-image: url(boite_cont_haut.jpg);
	height:8px;
	width:470px;
	background-repeat: no-repeat;
	margin:0px;
		}

#boite_cont_bas {	
	background-image: url(boite_cont_bas.jpg);
	height:8px;
	width:470px;
	background-repeat: no-repeat;
	margin:0px;
		
}


L'URL : http://lacamrappa.com/bordureblem.html (Mais dis donc, je vous gate! Vous avez intérêt à trouver l'erreur!) Smiley lol

Vous remarquez que la bordure dépasse sur mes images...ce qui est ,ma foie, non désiré comme rendu (même si certains diront que c'est de l'art abstrait)!

Tout en sirotant le dis chocolat chaud, j'attends une solution...il me reste du pain sur la planche!

Merci,

PS J'ai failli oublier, y a t il nécessité d'inclure des commentaire conditionnels dans ce cas?

Cette formule chimique me fait peur étant donné que ma largeur est fixe:

Sous FF : largeur réelle = width + padding + border
Sous IE : largeur réelle = width
Modifié par Samuel (24 Mar 2008 - 09:18)
a écrit :


Cette formule chimique me fait peur étant donné que ma largeur est fixe:

Sous FF : largeur réelle = width + padding + border
Sous IE : largeur réelle = width


Non. cet ancien modèle de boîte CSS était celui d'IE5.x. A oublier.
Salut,


	<div id="boite_cont_haut"></div>
<div id="boite_cont">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis elit. Pellentesque eleifend tellus ac neque sollicitudin pellentesque. Nam semper nulla a mi. </p>
</div>
	<div id="boite_cont_bas"></div>




Comme ça non?
Bonjour,

Il y a un problème avec la page de test: elle n'est pas valide. Notamment, il n'y a pas d'élément html (ce qui est gênant pour une page HTML...), pas d'élément head, et pas de Doctype. Ce dernier point est le plus problématique car il fait passer les navigateurs en mode Quirks. Et effectivement, en mode Quirks avec IE6 et 7 la formule largeur réelle = width se vérifie. Mais comme le dit Laurent, ce fonctionnement est celui d'IE 5.x est n'est présent dans les versions suivantes qu'à titre de survivance pour les (très) vieux sites ou les webmasters qui auraient bêtement oublié de se mettre aux standards. Smiley cligne

Pars donc, même pour tes pages de test, d'un gabarit de base valide. Je t'invite à faire un tour par ici:
http://css.alsacreations.com/outils/squelettor/index.php
Florent V. a écrit :
Notamment, il n'y a pas d'élément html (ce qui est gênant pour une page HTML...)


En vrai, l'élément HTML est totalement optionnel en HTML. Mais chut, il ne faut surtout pas le dire ! Smiley ravi
Laurent Denis a écrit :
En vrai, l'élément HTML est totalement optionnel en HTML.

En HTML seulement, car XHTML l'impose.
Florent V. a écrit :
Bonjour,

Il y a un problème avec la page de test: elle n'est pas valide. Notamment, il n'y a pas d'élément html (ce qui est gênant pour une page HTML...), pas d'élément head, et pas de Doctype. Ce dernier point est le plus problématique car il fait passer les navigateurs en mode Quirks. Et effectivement, en mode Quirks avec IE6 et 7 la formule largeur réelle = width se vérifie. Mais comme le dit Laurent, ce fonctionnement est celui d'IE 5.x est n'est présent dans les versions suivantes qu'à titre de survivance pour les (très) vieux sites ou les webmasters qui auraient bêtement oublié de se mettre aux standards. Smiley cligne

Pars donc, même pour tes pages de test, d'un gabarit de base valide. Je t'invite à faire un tour par ici:
http://css.alsacreations.com/outils/squelettor/index.php


Désolé pour le doctype, ce n'était qu'une page de teste mais tu as bien raison, les navigateurs passsent en mode Quirks.

Sinon pour le problème, j'ai trouver si ça intéresse quelqu'uns.

Étant donné que tous mes div sont à une largeur de 470, mon div boite_cont déborde de 1 px de chaque coté car la bordure va à l'extérieur.

Donc j'ai enlever la bordure sur mon div boite_cont et j'ai mis un nouveau div entre mes div boite_haut et boite_bas en lui appliquant une largeur de 468 + un border de 1 px (468+2)=470

Bingo.

Merci pour le superbe outils, vachement efficace.