28220 sujets

CSS et mise en forme, CSS3

Bonjour!

Sur ma nouvelle charte, encore en conception (http://www.freetic.com/charte/Charte5-div.html):
Je me retrouve avec
<div id="test" style="left: 148px; top: 130px; width: 410px; height: 120px;">
  <div class="centre">
    <h1>Musiciens, soyez les bienvenus</h1>
    <h2>Tous les musiciens trouvent sur Freetic...</h2>
    <p>Freetic est certainement le site d'annonces pour musiciens le plus complet.
      Toutes les annonces sont classées selon plusieurs critères
      afin d'optimiser vos recherches.</p>
  </div>
  <div class="side1"></div>
  <div class="side2"></div>
  <div class="side3"></div>
  <div class="side4"></div>
  <div class="corner1"></div>
  <div class="corner2"></div>
  <div class="corner3"></div>
  <div class="corner4"></div>
</div>


Comment éviter le bloc de div qui traine en bas de chaque zone de contenu? Dans ces div se trouvent les éléments graphiques de mes zones de contenu...

Si en plus vous pouviez prendre le temps de critiquer ma méthode ce serait génial...

Je suis bien conscient de faire du travail de bourrin, mais je pense aussi que c'est le meilleur moyen d'apprendre!!
J'espere bien un jour pouvoir prodiguer mes conseils (dans un an ou deux) sur ce forum Smiley cligne

Merci!
Modérateur
Salut, Smiley cligne

Pour faire ce que tu souhaites, cette structure suffit:
<div id="sup"></div>
<div id="conteneur">
<h1>Musiciens, soyez les bienvenus</h1>
<h2>Tous les musiciens trouvent sur Freetic...</h2>
<p>Freetic est certainement le site d'annonces pour musiciens le plus complet.
Toutes les annonces sont classées selon plusieurs critères
afin d'optimiser vos recherches.</p>
</div>
<div id="inf"></div>


Dans tes première et dernière divisions, tu places une image en background comprenant une bande blanche sur laquelle tu superposes tes coins arrondis... et dans celle du contenu, tu mets une image qui se répète sur l'axe y...

++
Merci, je vais essayer comme ça... mais ça me semble un peu trop facile Smiley cligne
Notamment, comment répéter toujours la même image en y alors que le div n'a pas la même largeur? Ca va me faire des bords plus ou moins larges, non?
Modérateur
non pourquoi?

Tes trois div doivent être d'une largeur égale... En quoi celà te gêne-t-il? Smiley sweatdrop
Modifié par koala64 (08 Oct 2005 - 17:03)
et bien si mes coins ne font plus x sur x centimètres mais x sur y.... ça ne va plus!!!! ça fait crade!
Modérateur
Vu leur taille, je ne trouve pas... Enfin si celà te gêne tu peux faire ceci:

<div id="conteneur">
<div id="sup"></div>
<h1>Musiciens, soyez les bienvenus</h1>
<h2>Tous les musiciens trouvent sur Freetic...</h2>
<p>Freetic est certainement le site d'annonces pour musiciens le plus complet.
Toutes les annonces sont classées selon plusieurs critères
afin d'optimiser vos recherches.</p>
<div id="inf"></div>
</div>
Tu positionnes ton conteneur en "relative" et tu places tes éléments haut et bas en "absolute" au sein de ton conteneur à l'aide des propriétés top, left, right et bottom.