28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je suis confronté +/- au même problème que le sujet précédent qui est Div centrale à largeur variable entre 2 divs à largeur fixe, j'ai aussi +/- effectué ce que Benjamin a écrit (qui est ds le sujet ciblé), mais cela ne fonctionne pas a 100%...

En fait je veux créer un "bloc" dans lequel il y aura mon contenu du site, ce bloc est composé de 3 lignes sur 3 colonnes (1ere ligne Coin gauche,Milieu, coin droite, même chose pour le milieu et le bas, c'est pour intégrer un cadre tout autour)

Voici le code (Je fais le test uniquement sur la première ligne pour le moment, car le coin a droite est décalé d'une ligne justement :


HTML : 

<div id="contentFrame">
      <div class="top_left"></div>
      <div class="top">News</div>
      <div class="top_right"></div>
     <!--
      <div class="middle_left"></div>
      <div class="middle">
      	Ceci est un test
      </div>
      <div class="middle_right"></div>
      <div class="bottom_left"></div>
      <div class="bottom"></div>
      <div class="bottom_right"></div>
      -->
    </div>   
CSS : 
#contentFrame { position:absolute; left:5%; top:220px; width:90%; z-index:2;   }
	#contentFrame div.top_left    { width:12px ; height:32px ; background:url(img/top_left.png)  no-repeat;    float:left;              }
	#contentFrame div.top         { margin-left:12px; margin-right:12px;  height:32px ; background:url(img/top.png) repeat-x; font-size:24px; color:#FF0000; font-style:italic; font-weight:bold; }
	#contentFrame div.top_right   {width:12px ; height:32px ; background:url(img/top_right.png) no-repeat;    float:right;              }


Et voila le résultat : http://v2.estevolution.fr/img/prob.jpg

Pouvez-vous m'expliquer d'où peut provenir le problème ? J'ai essayer de remplacer les margin par des padding comme Benjamin le disait plus haut, mais le résultat était complètement différent Smiley decu donc la je ne vois plus trop comment faire :s

Merci d'avance pour votre aide
Modifié par kiki57 (16 Apr 2008 - 10:07)
Arf Smiley decu

Personne n'a été confronté ce problème ?

J'ai mis sur mon site (http://v2.estevolution.fr) le rendu de mes essais, celui qui est tout bien avec du texte dedans, c'est le résultat que je voudrais avoir en utilisant des valeurs en %, sauf que la c'est malheureusement en taille fixe, donc la pour l'exemple avec les pourcentages je me suis limité à la première ligne car si celle la ne fonctionne pas, les autres ne peuvent pas fonctionner non plus Smiley decu

Merci d'avance
Bonjour,

Eh bien en fait tu es mal parti avec cette solution tarabiscotée à base de petits div flottants dans tous les sens. On pourrait sans doute la corriger pour obtenir quelque chose de décent, mais ça reste tout de même très casse-gueule comme solution.

Vu ton design, un conteneur positionné en relatif avec bordure, et quatre images positionnées en absolu pour dessiner les coins, et ça roule.

Voir aussi:
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
http://web.covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html
Merci beaucoup Florent,

Je vais essayer de faire ça en suivant les différents exemple que tu as donné via les 2 sites, et je redonnerai de mes nouvelles très prochainement Smiley smile

Bonne nuit tout le monde Smiley cligne
Bah j'ai fais mes test en local, et tes sites m'ont bien aider Florent Smiley smile Je te remercie beaucoup Smiley cligne

C'est vrai que je ne prends pas l'habitude d'utiliser les éléments qui existent déja comme les span ou les balise h4, moi je voulais faire en gros faire un tableau sans tableau mais qu'avec des div, mais le principe n'est pas de remplacer des cellules de tableau par des div, sinon il n'y a pas trop d'intérêt ^^

En tout cas je te remercie de m'avoir aider Smiley smile

Bonne journée tout le monde