[Resolu] Position absolute et relative

Bonjour,

Je souhaite réaliser le gabarit suivant (voir image)
Le problème c'est que mon texte se place au dessus du bloc photo au lieu d'avoir 2 blocs côte à côte.

J'ai mis un positionnement en relative pour le contenu et absolute pour la frise pour pouvoir l'aligner en bas à droite.

Est-ce que le positionnement en relative du contenu peut avoir une influence sur les blocs texte et photo qui sont en float?


Voici mon css

div#contenu {
background-color:#e10055;
height:402px;
padding-top:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
}

div#texte {
background-color:#e10055;
float:left;
font-size:0.8em;
color:#FFFFFF;
}

div#photo_droite {
background-image:url(images/contour_photo.jpg);
background-repeat:no-repeat;
float:right;
height:400px;
width:472px;
}

div#frise {
background-color:#FFCCFF;
float:left;
position: absolute; 
bottom: 0;
left:0;
height:90px;
width:350px;
}

et mon html

<div id="contenu">
				<div id="texte">mon texte bla bla bla&nbsp; xte mon texte bla bla bla&nbsp; xte mon texte bla bla bla&nbsp; xte mon texte bla bla bla&nbsp; xte mon texte bla bla bla&nbsp; xte mon texte bla bla bla&nbsp; xte</div>
				<div id="photo_droite">&nbsp;</div>
				<div id="frise">ma frise photos ma frise photos ma frise photos ma frise photos ma frise photos ma frise photos ma frise photos ma frise photos ma frise photos ma frise photos ma frise photos </div>
				
			</div>

Merci de votre aide
Modifié par selinav (19 Feb 2009 - 14:24)

Bonjour,

J'ai réussi à avancer,

j'ai placé en flottant left le texte et la frise
et la photo en absolu.

Le problème c'est que maintenant. Mon bloc texte et frise se cache sous ma photo.
Je n'applique pas de propriétés width car je voudrais faire une largeur fluide.

Comment puis-je faire pour lui dire que la largeur doit s'adapter à la taille disponible et que le texte ne soit pas caché?

Merci d'avance.

En oubliant pour l'instant la frise, tu as deux choses dans ce design:
1. Un contenu à gauche.
2. Une image de fond à droite.

Pourquoi ne pas placer cette image de fond comme fond du conteneur? Tu peux éviter la répétition (background-repeat), aligner l'image à droite (background-position), etc.

Partant, ton bloc de texte n'a pas besoin d'être flottant, ou positionné en absolu, relatif, etc. Il peut rester dans le flux. Et pour éviter qu'il ne recouvre l'image, tu as trois options:
1. un padding-right sur le conteneur;
2. un margin-right sur le texte;
3. un padding-right sur le texte.
La deuxième est pas mal.

La frise peut venir ensuite, et rester elle-même en flux (pas de positionnement particulier, une marge ou padding à droite).

Enfin, tu n'as pas besoin de figer la hauteur de ton conteneur. C'est même une erreur, car on ne contrôle jamais la hauteur exacte d'un texte, qui peut dépendre de nombreux paramètres et pourra de toute façon être modifiée par l'utilisateur (s'il redimensionne le texte notamment). Si tu as besoin d'une hauteur minimale, il y a une propriété CSS qui sert justement à ça.

Merci pour ton aide,

j'ai opté pour un padding-right de la largeur de ma photo.

Des fois c'est simple mais on est perdu dans les float, position etc...

En ce qui concerne la hauteur de mon contenu c'est car mon bloc contenu est habillé à gauche et à droite par 2 colonnes de hauteur fixe (design photoshop).

Mille mercis .