28173 sujets

CSS et mise en forme, CSS3

Float décalé sur IE

Bonjour,

Je suis entrein de réaliser un blog et j'ai un problème de flotant sur IE, ils sont décalé (marge trop grande).
Le blog (le problème si situe au niveau du titre de chaque article).
J'ai essayer de corriger se problème de plusieurs manière mais rien n'y fait. Auriez-vous une solution ?

Le css :
.titre {
position: relative;
font-size: 14px;
float:left;
height: 21px;
margin: 15px -1px 0px 30px;
padding: 0px 15px 0px 16px;
border-right: 1px solid #2F0A11;
background: url(images/titre-bg.gif) left bottom no-repeat;}
html>body .titre {margin-left: 50px; border: none;}

.corner {
position: absolute;
right: -1px; top: 0px;
height: 21px; width: 11px;
background: url(images/titre-right_corner.gif) left bottom no-repeat;}

.block {
clear: both;
margin: 0px 25px 15px 25px;
padding: 5px;
background: #560E1A;
border: 1px #2F0A11 solid;
color: black;}


code HTML :
<h2 class="titre">Nana<span class="corner"></span></h2>
<div class="block">
	<p class="imageLeft"><img src="images/nana.jpg" alt="nana" /></p>
	
	<p>Revoila Nana ! ça c'est au début ! On remarque que sa crinière était toute courte et vers la droite ! ...elle attendais pour rentrer au box ...hmm certainement l'heure du cass crout' ! =D</p>
	
	<hr class="end" />
	
	<p class="date"><a href="#"><strong>5</strong> commentaires</a> - Article ajouté le 30/03/2006</p>
</div>



Merci d'avance pour vos futur réponse. Smiley biggrin
Modifié par Angel (07 May 2006 - 18:09)
Administrateur
Hello,

Puisqu'il s'agit d'un problème de mise en forme (css) et non de structure (xhtml), je déplace dans le bon salon Smiley smile
Salut

Essaye cette portion de CSS



.titre {
	position: relative;
	font-size: 14px;
	height: 21px;
	padding: 0px 15px;
	border-right: 1px solid #2F0A11;
	background: url(images/titre-bg.gif) left bottom no-repeat;
	width: 60px;
	margin-left: 50px;
}

.corner {
	right: -1px;
	top: 0px;
	height: 21px;
	width: 11px;
	background: url(images/titre-right_corner.gif) left bottom no-repeat;
	position: absolute;
}

.block {
clear: both;
margin: 0px 25px 15px 25px;
padding: 5px;
background: #560E1A;
border: 1px #2F0A11 solid;
color: black;}


Apparemment ton problème viens du float
Le mélange du float, position (relative ou absolu), et marge ne font pas bonne salade

A+
Si je fais ca le problème est résolu mais seulement mes titres ne sont plus extensible sur la largeur. C'est pour ca que j'avais mis le float, pour adapter la largeur du background au texte.
suffit de rajouter display:inline; dans les regles de tes flottants pour corriger les marges dans IE
Modifié par jp94 (08 May 2006 - 11:00)
Je viens d'essayer mais rien n'y change

.titre {
display:inline;
position: relative;
float:left;
height: 21px;
margin: 15px -1px 0px 30px;
padding: 0px 15px 0px 16px;
background: url(images/titre-bg.gif) left bottom no-repeat;
font-size: 14px;}
html>body .titre {margin-left: 50px;}

.corner {
position: absolute;
right: -1px; top: 0px;
height: 21px; width: 11px;
background: url(images/titre-right_corner.gif) left bottom no-repeat;}
Je me permet de faire remonter un peu le sujet, n'y a-t-il pas moyen de faire un div qui s'ajuste sur la largeur par rapport a son contenu sans utilisé de flotants ?
Sujet clos
Aller à