28234 sujets

CSS et mise en forme, CSS3

Css et positionement des div

hello tout le monde ,

j'ai décidé de laisser tomber les tableaux comme tout le monde
et de m'y mettre au css
sauf que je galere ....please help


pour l'instant c un modele de page statique

mes div ne s'affichent pas de la meme maniere sur ie et firefox

je galere depuis une semaine pour que la div bleu ai une longueur fixe
que le texte dedans soit scrollable sous firefox et iE j'ai dejà essayé avec overflow:auto; ou overflow:scroll; mais rien

j'ai une div violet et une autre jaune sous mon image meme galere Smiley ohwell

et pour finir la div news et titre apparaissent pas de la meme maniere sur ie et firefox
mon css est intégré a la page html

ma page est sur http://hafid.chraibi.free.Fr/css/
et le positionement que je veux obtenir http://hafid.chraibi.free.Fr/css/ex.jpg


thanks d'avance
upload/6772-ex.jpg upload/6772-ex.jpg
Si je me souviens bien, j'ai deja eut ce probleme.

Pour que ton overflow:auto fonctionne, il faut que tu donne une valeur de width et de height a ton conteneur div "area" et non ta balise <span> pour qu'il puisse mettre le surplus "scrolable".
merci pour l'astuce la div txt fonctionne sur ie et firefox !!

mais c mes div prog et news d'en dessous ou ça passe pas sous firefox Smiley decu

thanks d'avance
Salut,

Je pense que pour pouvoir résoudre ton problème de positionnement, il va falloir faire une petite réorganisation de ton code HTML. Attend, ne part pas. Tu nous fais juste un peu de divite Smiley smile . Je m'explique. Tout d'abord, essaye d'utiliser les bonnes balise html en fonction de leur représentation. Par exemple, tu peux tout à fait remplacer <span class="text"></span> par <p></p> car tu affiches du texte ce qui s'apparente à un paragraphe. Il en est de même avec ton image. Pourquoi la positionner dans un vloc span alors qu'elle peut se débrouiller tout seule Smiley cligne ?

Ensuite, concernant l'organisation. D'après ton image, tu souhaites positionner le texte à droite et les autres éléments à gauche. Tu dois donc avoir deux bloc différents comme tu l'as fait avec area1 et area2. Mais au lieu de mettre ensemble l'image et le texte pourquoi ne pas mettre le texte tout seul et l'image avec les autres élements. Tu positionnes alors tes élements en flotant à gauche et tu laisses le texte se positionner tout seul à droite.

Avec un peu de code....

<div id="area">
  <img src="#" alt="#" />
  <a href="http://www.lipsum.com/">http://www.lipsum.com/</a>
  <p id="newsplus">C'est la prévision de l'institut GFK, ...</p>
</div>
<div id="area2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
</div>

...et le CSS

#area { 
  float: left;
  margin : /* comme tu veux */
}

#area2 {
  margin: /* les valeurs que tu veux */
}

/* ensuite tu joues avec les marges pour positionner
    les éléments contenus dans area1 */


J'éspère que cela t'aidera Smiley cligne .
Modifié par ymhotepa (24 May 2006 - 17:50)
Salut,

Il n'est pas nécessaire de positionner ton image en float car tu positionnes déjà ton bloc area1 en float. Tu peux donc enlever float: left; qui présent dans .img.

Ensuite, pour ton bloc area2, je te conseille de le positionner en float: left;, cela sera plus facile à gérer.

Enfin, tu devrais réduire un peu la taille de ton bloc area1 car il est trop large et ainsi ton bloc area2 ne peut se positonner à côté c'est pour cela qu'il se trouve en dessous.

Bonne continuation Smiley cligne
Modifié par ymhotepa (27 May 2006 - 15:35)
Sujet clos
Aller à