Redimensionnement image et positionnement

Bonjour à tous,

J'apprécie l'esprit communautaire d'alsacreation, ainsi que la qualité de ses informations.
Je suis étudiant en filière SRC (Services et Réseaux de Communication). Dans le cadre de mes études, je dois réalisé un portfolio. Cependant, j'ai quelques difficultés avec l'intégration css d'une maquette photoshop. Voilà pourquoi je m'oriente vers vous.

Alors je vous présente le site que je cherche à mettre en page
http://serecom.univ-savoie.fr/agences/cri-iut/Alsacreation/

Mon problème porte sur la partie où l'on retrouve le titre et la description (ne tenez pas compte de la description ^^).

En effet, la partie description est divisée en 3 parties, puisqu'elle est composée de 3 images différentes : une image de début (Image de début), une image au milieu répétée (Image de milieu répétée), puis une image de fin (Image de fin).
Seulement, lorsque vous essayez de redimensionner la page, cette partie ne se redimensionne pas. J'ai remarqué que c'était à cause du positionnement en relatif.
En le faisant en absolute, le problème n'a pas lieu. Cependant, dans ce cas, la description ne se positionne plus en fonction du titre ("Accueil").
(ex : Illustration du problème en absolute)

Trêve de bavardage, voici le code associé (j'essaye de la commenter au mieux)
Je vous supprime les éléments inutiles pour plus de clarté.

Code HTML :

<div id="titre"> <!-- Contenur du titre Accueil = fond, pictogramme et texte -->
<img class="picto_title" src="Images/Home_title.png" alt="Pictogramme accueil"/>
<h1 class="title"><span id="vert">A</span>ccueil</h1>
</div>	
<div id="content"> <!-- Contenur de la description =  3 images + texte -->
<div id="debut"></div> <!-- Contenur de l'image de début -->
<p class="descr">Petite description. Alain, 28 ans, designer de longue date, expert en programmation et dieu dans le domaine de la communication. Ne cherchez plus, je suis l'homme qu'il vous faut. </p>
<div id="fin"></div> <!-- Contenur de l'image de fin -->
</div>
<div id="test"></div> <!-- Div a la propriété : clear:both -->

Code CSS :

/*Titre page*/

#titre{ /*Conteneur du titre, avec l'image en background, et le reflet du titre (il contient le texte, le picto, et le background) */
	width:260px;
	height:88px;
	background: url("../Images/Home_reflet_title.png") no-repeat 68% 69%, url("../Images/Socle_title.png") no-repeat;
	text-align:center;
	vertical-align: text-top;
	margin-left:3%;
	float:left;
}

.picto_title{position:relative;top:9px;right:15px;}/*pictogramme*/

h1.title{display:inline-block;vertical-align:22%;font-size:180%;text-shadow: 0px 0px 10px rgba(255,255,255,0.3);}/*Texte du titre, positionné dans son conteneur*/

/*Description page*/

#debut{ /*Debut description, image de début de la barre*/
	position:absolute; /*Pour y fixer par rapport à son grand conteneur*/
	width:68px;
	height:63px;
	background: url("../Images/Debut_socle_descr.png") no-repeat;
	display:inline-block;
	right:100%;
}

#content{ /*Centre description, image répétée de la barre (grand conteneur, contient toute la barre de description*/
	position:relative;
	background: url("../Images/Mid_socle_descr.png") repeat-x;
	width:68%;
	height:63px;
	top:17px;
	left:3px;
	text-align: center;
	display:inline-block;
}

p.descr{
	margin-top:10px;/*Décalage pour centrer le texte dans le bloc de la description*/
}

#fin{ /*Fin description, image de fin de la barre*/
	position:absolute; /*Pour y fixer par rapport à son grand conteneur*/
	width:17px;
	height:63px;
	background: url("../Images/Fin_socle_descr.png") no-repeat ;
	display:inline-block;
	left:100%;
	bottom:4px;
}

#test{
	clear: both;
}

Voici donc le code associé, si vous pensez déjà que ce dernier est aberrant, n'hésitez pas à me le signaler.
Sinon, si vous connaissez une solution à mon problème, je suis preneur

En résumé, je veux que la partie description se positionne à côté de mon titre (tel qu'elle est positionnée actuellement), mais que la partie répétée se redimensionne automatiquement en fonction de la résolution.

Voici l'effet de redimensionnement recherchée (essayez de redimensionner la page) :
http://serecom.univ-savoie.fr/agences/cri-iut/Alsacreation/index2.html

Voici le positionnement recherchée :
http://serecom.univ-savoie.fr/agences/cri-iut/Alsacreation/index.html

Je vous remercie d'avance de vos réponses.

Cordialement.
Modifié par oXg3n (12 Oct 2012 - 11:32)

Hello,

je pense que ton approche est mauvaise pour le positionnement. Le coup du relatif/absolu tu n'en a pas besoin pour ça.

Soit tu passes par un système de float left/right ou sinon le mieux serait avec le display:table.

Je te propose de regarder ce tuto, ça peut peut-être t'aiguiller : http://css.mammouthland.net/mise-en-page-avec-display-table.php

bon courage
Modifié par MrJO (12 Oct 2012 - 23:16)

ou celui ci sur alsa : http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html

Merci de ta réponse. Je pense que cela va m'aiguiller.

Cependant, lorsque tu me dis que le positionnement absolue, ou relatif n'est pas la bonne solution, tu parles uniquement pour le positionnement final de la barre?
Et non pour le positionnement du début et de la fin de mon image par rapport à l'image du milieu répétée, qui me semble plutôt correct?

En tout cas merci, je ne connaissais pas cette propriété. Je vais testé dans l'après-midi, je t'en dirais des nouvelles

Bon alors j'ai essayé la technique, j'avoue qu'elle est plutôt pratique. Mais pas dans mon cas, ni les positionnements flottants ni les tableaux ne correspondent à mon besoin.
Le problème vient de la première image de ma barre de description, qui doit rentrer dans l'autre image de titre.

C'est pour cela que, les propriétés de tableaux ne fonctionnent pas, impossible de coller les 2 éléments (les 2 blocs sont déjà collés).

Avec le foat, il faudrait faire un réglage sans doute avec des margin négatifs, ce que je ne trouve pas forcément plus propre, et cela ne résout pas mon problème de redimensionnement.
Une chose que je ne comprenais pas, c'est qu'avec le positionnement absolue, le redimensionnement a lieu, mais en relatif aussi en fait, si j'enlève la min-width de ma page.

Donc, compte-tenu de mon problème, j'en déduis que la seule solution reste le positionnement relatif/absolu.

A moins, que vous ayez une solution miracle, que je m'empresserais de tester ^^, pour l'instant je vais devoir faire comme je l'ai fais jusqu'à présent, puisque l'affichage de ma page reste "correct" à partir d'une résolution 800*600. Et je proposerais une alternative pour les résolutions inférieures, avec la propriété média screen.

Edit : la prochaine fois que je réaliserais un webdesign, je le penserais responsive lors de sa conception .
Modifié par oXg3n (13 Oct 2012 - 17:19)