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)

oXg3n a écrit :
Je me dis que c'est plus compliqué que ça en à l'air.

Ouais. Il parait même que c'est un métier.

Sinon, d'accord avec les autres, si tu débutes:
- Tu apprends correctement les bases de HTML (code sémantique) et CSS.
- Tu bosses un peu le positionnement CSS.
- Tu réalises des essais (pages de test, brouillons) avant d'attaquer une intégration de design web complet.
- Et pour les premiers designs que tu intègres, vise plutôt des designs de largeur fixe (en pixels, par exemple 960px) et de hauteur extensible (en fonction du contenu). Tu passeras aux subtilités tels que les designs fluides, les largeurs minimales et maximales, les Media Queries, etc., plus tard.

Maintenant j'imagine que si c'est un exercice à rendre pour la veille, bah ça laisse peu de temps pour aborder tout ça correctement. Si c'est le cas, bon courage.
Modifié par fvsch (27 Oct 2011 - 10:47)

Déjà, merci à tous de vos réponses, ça fait plaisir. Comme vous l'aurez compris, je ne suis pas encore une lumière. Malheureusement, dans ma section, on n'a pas appris grand chose (rien?) en css. Et on nous balance un exercice de taille (à la démerde toi ^^) où il faut :

- Un design extensible (je me suis rajouté la contrainte de faire des blocs avec des fonds extensibles)
- Respect des normes xhtml 1.1/css 2.1 et des critères WAI
- Un menu contextuel déroulant (en css)
- L'identification de la page sur laquelle on se trouve

En bref, ce n'est pas irréalisable, mais j'aimerai bien faire chaque chose en son temps. Et ne pas partir à l'aveuglette et trimer pendant des journées entières à essayer de comprendre pourquoi le bloc ne se trouve pas à l'endroit désiré.

En tout cas je vais jeter un coup d’œil aux tutos et essayer de suivre vos conseils .

Le temps me manque, tout simplement...