Poblème de div + CSS avec IE

Poblème de div + CSS avec IE - HTML/CSS - Programmation

Marsh Posté le 14-09-2007 à 17:27:08    

Bonjour,
 
J'utilise une imbrication de div associée à du CSS pour avoir l'affichage d'un texte aligé à gauche et un à droite sur la même ligne.
J'utilise le code suivant :
<div class="news-header">
<span class="news-titre">titre</span><span class="news-date">date</span><br>
</div>
 
Avec le CSS suivant:
span.news-titre {
float: left;
font-weight: bold;
}
span.news-date {
float: right;
font-style: italic;
}
div.news-header {
border-bottom: 1px solid rgb(255, 153, 0);
}
 
 
Ce code est utilisé dans une page un peut plus complexe ou j'utilise déjà des div imbriqué.
Cela fonctionne parfaitement sous Opera, FF, etc mais pas sous IE. Rien ne s'affiche !
 
Avez-vous une solution à mon problème ?
 
Merci k-pa

Reply

Marsh Posté le 14-09-2007 à 17:27:08   

Reply

Marsh Posté le 14-09-2007 à 19:08:24    

pas la peine de créer 200 topic ;)
 
sinon au hazard , déja met un width à tes spans.., un text-align qui va bien pour chaque span
un width et un height au conteneur..

Reply

Marsh Posté le 14-09-2007 à 21:27:47    

Et pourquoi ne pas utiliser des balises autrement plus sémantiques que div ? Dans ton exemple, une balise <p> aurait suffit.
 
span est une balise de type en-ligne. Pour la mettre en flottant ou lui attribuer des dimensions, il faut la passer en block avec la propriété display:block;
 
Mais fouille un peu, tu devrais pouvoir faire ça plus "proprement".

Reply

Marsh Posté le 14-09-2007 à 22:39:14    

Désolé pour le multiple topic mais j'ai reussi à corriger certaine choses et à cibler le problème.
 
Gebruik: je vois se que tu veut dire avec des balises autrement plus sémantique que div ? j'ai essayé avec des p à la place des span sans grand succès... pareil avec des div à la place des span...
 
bixibu: le width et le height dépendent du texte qui viens dans le span donc le fixé n'est pas une bonne chause le text-align ne va rien changé...  
 
Merci pour les pistes

Reply

Marsh Posté le 15-09-2007 à 21:41:57    

Et bien dans ton div, utilise 2 paragraphes si tu veux un code plus élégant.
<div>
<p id="gauche">Blabla</p>
<p id="droite">Blabla</p>
</div>
 
Pour le CSS, mets une largeur à ton div, puis une largeur de 50% pour chaque paragraphe, que positionnement avec la propriété float:left affectée à chacun d'eux.

Reply

Marsh Posté le 16-09-2007 à 14:54:15    

Arghhhhh,  
 
Je viens d'essayer exactement comme tu le dit et ça ne marche pas !!!!
Le CSS:

p.news-titre {
    float: left;
    font-weight: bold;
    width: 70%;
    }
 
p.news-date {
    float: left;
    font-style: italic;
    text-align: right;
    width: 30%;
    }


 
Je te file l'adresse du site au cas ou... http://www.pekride.com/~k-pa//dev3/
 
merci jobe

Reply

Marsh Posté le 20-09-2007 à 07:23:29    

Quand tu positionnes un élément en flottant, il sort du flux. Prévois donc de mettre une propriété clear:left à l'élément suivant pour le réintégrer dans le flux de lecture.
 
Tu souffres de divite ! Tu as des div inutiles dans la page que tu indiques.
 
Essaie plutôt de nous mettre une maquette en ligne, que l'on ait une idée précise de ce que tu souhaites faire.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed