Adaptation image de fond au contenu

Bonjour à toutes et à tous,

C'est la folie, cela fait maintenant une journée que je galère sur la réalisation d'un mini site web.. Je me dis que c'est plus compliqué que ça en à l'air.
Donc, je vous explique brièvement mon cas. Etudiant SRC en 1ère année, j'aurais souhaité réaliser un site web totalement extensible (donc aucune taille en px, ce qui ne me facilite pas la tache).
J'ai cru y être arrivé en "bidouillant" les positions, mais en fait, tout les textes ne s'adaptent pas à l'image de fond.

Trêve de bavardage,

http://eloq.studio.free.fr/PBCSS.png

Comme vous pouvez le voir, ... c'est nimp ^^
J'ai d’ailleurs "appris" ce jour à mettre une image fixe à l'entrée, une image répétée, et une image fixe à la sortie d'un fond. Je ne sais pas si le code est optimisé. Enfin, bref.
Voici donc mon code source en ce qui concerne le body (je vous le balance pas en entier, c'est nimp, trop mal organisé avec aucun nom explicite)

HTML

<div id="gauche1">
 <div id="droite1">
  <div id="haut1">
   <div></div>
  </div><!-- /haut -->
  <p id="body">Lorem ipsum ddisplay:none;gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggne;display:none;display:none;display:none;olor sccccccc amet</p>
</div><!-- /droite -->
</div><!-- /gauche -->

CSS

#body{
float:right;
list-style: none ;
}

#gauche1{
margin-top:-38%;
width:80%;
float:right;
padding:2em;
text-align:center;
background-color:#1a1a1a bottom left;
}

#droite1{
width:80%;
float:right;
background:#1a1a1a url(../Images/cadreb.png) no-repeat bottom right;
padding-bottom:2em;
}

#haut1{
background-color:#1a1a1a top right;
padding:0;
}

#haut1 div {
background:#1a1a1a url(../Images/cadreh.png) no-repeat top left;
padding-top:2em;
}

J'ai comme l'impression que mes blocs sont mal construits (je m'en suis rendu compte en ajoutant un <hr/> juste avant le footer, évidemment un résultat inattendu comme la plupart du temps que je manipule css ^^

Pour ceux qui ont du temps à m'accorder, voici le "site" complet (lol)
http://eloq.studio.free.fr/MinisiteWeb/

Je vous remercie d'avance, et espère trouver une réponse à mon(es?) problème(s?)

Ouf, c'est loin d'être le seul problème de ton site...

Sans vouloir être rabat-joie, il va falloir que tu apprenne mieux HTML et CSS; surtout les principes de positionnements CSS.

Dans l'état actuel, presque tout est à refaire.

Mieux vaudrait commencer avec un site de taille fixe pour débuter et se faire la main.

@Vaxilart: il l'a dit lui-même que c'était nimp.

Avant de faire un site extensible, je pense également qu'il faut savoir faire un site fixe.
Si tu veux faire un design extensible, t'auras intérêt à pas avoir trop d'images aussi.

Ta structure part mal en l'état, mieux vaudrait un truc du genre:

<div id="banner"></div>
<div id="navmenu">
      <ul class="menu">
           <li></li>
           <li></li>
           <li></li>
      </ul>
</div>
<div id="content"></div>
<div id="footer"></div>

il faut que tu annules toutes les marges par défaut:

body{
margin:0;
padding:0;
}

Après le mieux est d'avoir une image pour la bannière et des images qui se répètent sur les côtés. Tu alignes les éléments de la bannière au centre (l'image) et tu répètes en background via le CSS une image découpée de ta bannière.

Après il faut être logique dans tes pourcentages, travaille plutôt avec des margin de 1% entre les div et tu joues sur les padding pour que le texte ne colle pas aux bord.

Pour ton contenu si tu mets une width à 80% tu peux mettre un margin-left à 15% pour qu'il ne passe pas en dessous du menu vertical.

Bon courage.
Modifié par jmlapam (27 Oct 2011 - 05:33)