28211 sujets

CSS et mise en forme, CSS3

[Résolu] Problème surprenant avec float

Pages :
(reprise du message précédent)

ElMoustiko a écrit :
Euh là c'est brutal... pourquoi tu met un div et encore dedans un hr ??


Parce que je peux styler un hr de plusieurs façons dans la même page.

Le code HTML

<div class="hr ornament"><hr /></div>


Le code CSS

div hr { 
   display: none; 
}

div.hr { 
   clear: both; 
   padding: 0; 
   margin: 0; 
}

div.ornament { 
   background: transparent url("images/hr.gif") center no-repeat; 
   width: 446px; 
   height: 15px; 
}
Ca marche. Je répète. Ca marche. Je répète.

Bon par contre du coup ça fait un espace en dessous des onglets même quand je met height:0, alors que ces onglets doivent être collés au menu. Mais c'est un autre problème donc : topic résolu.
Cool! Smiley clapclap

Tu peux essayer de mettre le padding et le margin à 0, tout d'un coup que ça servirait à quelque chose! Smiley cligne
Modifié le 30 Oct 2004 - 12:25
@Stephan, bah tu met le class direct sur le hr... pourquoi faire un div uniquement pour donner une class ??

@Rastapopoulos> test avec line-height: 0; ET height: 0 ;

@++
Mon hr

div hr { 
   display: none; 
}


Mon hr stylisé

div.hr { 
   clear: both; 
   padding: 0; 
   margin: 0; 
}

div.ornament { 
   background: transparent url("images/hr.gif") center no-repeat; 
   width: 446px; 
   height: 15px; 
}


Je ne peux pas styliser un hr { display: none; }
Voilà pourquoi <div class="hr ornament"><hr /></div>

Voir en action.
Oui mais pourquoi tu fais display: none; si c'est pour le styler Smiley eyecrazy

C'est totalement irréaliste !!!

<hr class="ornament" />

hr.ornament { 
   clear: both ;
   margin: 0 ;
   padding: 0 ;
   background: transparent url("images/hr.gif") center no-repeat; 
   width: 446px; 
   height: 15px; 
}


En complément : http://www.sovavsiti.cz/css/hr.html
Modifié le 30 Oct 2004 - 12:40
@RastaPoPoulos, on vas tester un truc ! tout à 0 !

hr
{
  clear: both ;
  margin: 0 ;
  padding: 0 ;
  height: 0 ;
  line-height: 0 ;
  font-size: 0 ;
  visibility: hidden ;
}
@ElMoustiko : Parce que ya pas un navigateur qui affiche un hr de la même façon!

Bon j'ai assez perdu mon temps ici.

Ciao!
Modifié le 30 Oct 2004 - 12:46
ElMoustiko a écrit :
@RastaPoPoulos, on vas tester un truc ! tout à 0


Perdu.
Désolé hein, je ne poste pas souvent de problème à moi ici, mais à chaque fois ça dure trois jours.
@Stephan... hmm wé okay.

Mais t'aurais pas une solution plus limitative dans ton cas, genre mettre l'image de fond sur ton <ul> du menu plutot que sur le div du hr ?

Sinon pour le cas qui nous interesse ici, hr tout seul suffit.
Salut,

je me permet d'intervenir meme si le problem semble resolu.
Si tu veux pas que tes blocs flottants sorte du flux de leur boite englobante (barresup), cette boite englobante doit etre aussi de type float :

#barresup { 
   float: left;
   /* le reste */
}

#onglet { 
   float: left; 
}

#acces-rapide { 
   float: right; 
}


ça fonctionne tres bien et je trouve ça (mais c personnel) bien mieux que le truc du hr.

++
oui merci mais là par contre j'ai un problème un peu moins grave qui arrive avec ça du coup.

Lorsque j'ai juste un margin-left:5%; il s'applique comme il faut.
Lorsque j'ai juste un float:left; il s'applique comme il faut tout à gauche.
Lorsque j'ai les deux en même temps, SOUS IE, la marge est quasiment le double de celle indiquée genre 10%.

Et sans bordure et sans padding.
Tu peux essayer de tricoter avec ceci : 


div#content { 
   margin: 0; 
   /* False margin value for all versions of IE Win, including 6.0 */
   margin-left: 6px; 
}

html>body div#content { 
   /* Correct value for browsers that don't suffer from IE Win's bugs */
   margin-left: 12px; 
}
Pages :
Sujet clos
Aller à