Imprimer

[Sam Moss]

Bonjour,

Peut-on insérer un élément PA dans un tableau ?
Comment structurer cette construction ?
Merci d'avance pour vos conseils.

PS: Voici une page dont la rubrique « feature » qui intègre des éléments PA en transparence.
http://www.musicfromthemovies.com/
Comment faire ce travail de superposition ?
Merci encore.

[Eddy]

Salut.
Dans cette rubrique Feature, il n'y a pas de tableau !

Une div qui contient un slider issu d'une bibliothèque de jquery ou similaire !

[Sam Moss]

Bonjour,

Peut-on insérer un élément PA dans un tableau ?
Comment structurer cette construction ?
Merci d'avance pour vos conseils.

Merci pour la réponse du post-scriptum.
Quant à la première question, que dois-je faire ?

[marroon]

Salut,

Je pourrais peut-être aider mais...c'est quoi un élément "PA" ?

[Eddy]

Un élément PA est un élément web ayant une Position Absolue !

Pour répondre à la question, je n'en sais rien, ça fait un bail que je n'ai pas travaillé avec des tableaux.
À vrai dire, ça ne se fait plus sauf peut-être pour ranger des données !

Fais des tests, le tableau, ou la cellule peut-être, qui reçoit le PA doit avoir une position relative afin que le PA prenne sa position par rapport à ce tableau ou cellule et non à la page entière !

[metaroid]

Eddy à raison, il est tout à fait possible de mettre un élément PA dans un tableau (plus exactement dans une cellule de tableau) et si tu veux que l'absolute prenne par rapport à son parent, il faut que ta TD qui accueille l'élément PA soit en position: relative .

[marroon]

J'ai demandé autour de moi pour pouvoir répondre et on m'a dit exactement la même chose que metaroid. Donc...+1 

[Sam Moss]

Eddy à raison, il est tout à fait possible de mettre un élément PA dans un tableau (plus exactement dans une cellule de tableau) et si tu veux que l'absolute prenne par rapport à son parent, il faut que ta TD qui accueille l'élément PA soit en position: relative .

Merci, ça marche. La balise de Div reste dans le tableau.

[Sam Moss]

PS: Voici une page dont la rubrique « feature » qui intègre des éléments PA en transparence.
http://www.musicfromthemovies.com/
Comment faire ce travail de superposition ?
Merci encore.

Je souhaiterais savoir comment faire cet effet de calque superposé en transparence du Feature ?
Je connais le code de l'opacité des couleurs mais j'ignore comment positionner le Div en parallèle. Quelles valeurs et réglages saisir dans la feuille de style ?
Merci.

[Eddy]

@ Marroon.

Oui, logique.
La position absolue sort l'élément concerné du flux html classique. C-à-d que l'élément possédant cet attribut, même placé dans une div, en sort, comme une couche que l'on viendrait placer par dessus le parent et sa position devient alors dépendante du doc html donc, de la page entière html.
Pour limiter son placement à son parent mais lui donner une position précise, bien que je ne comprends pas bien l'intérêt de placer en PA un élément d'une cellule de tableau mais probablement que Sam Moss sait ce qu'il souhaite, il faut donner au parent une position relative afin que le PA se réfère "relativement" à ce dernier.

[Eddy]

@ Sam Moss :

Voici un exemple réalisé rapidement :

HTML :

Code: [Sélectionner]

<div id="slider">
<p><img alt="image de slider" src="bateau.jpg" /></p>
<p class="opacity">Indique ici le texte sur un fond de couleur avec opacité ou un fond d'image png avec opacité réduite.</p>
</div>

CSS :

Code: [Sélectionner]

#slider{
position:relative;
width:640px;
border:1px solid #000;
}
#slider p.opacity {
margin:0;
padding:10px;
font-size:2em;
color:#FFF;
display:block;
position:absolute;
left:20px;
top:0px;
width:200px;
height:266px;
background:rgba(0,0,0,0.4);
}

Résultat : Voir pièce jointe.

[Sam Moss]

@ Sam Moss :

Voici un exemple réalisé rapidement :

HTML :

Code: [Sélectionner]

<div id="slider">
<p><img alt="image de slider" src="bateau.jpg" /></p>
<p class="opacity">Indique ici le texte sur un fond de couleur avec opacité ou un fond d'image png avec opacité réduite.</p>
</div>

CSS :

Code: [Sélectionner]

#slider{
position:relative;
width:640px;
border:1px solid #000;
}
#slider p.opacity {
margin:0;
padding:10px;
font-size:2em;
color:#FFF;
display:block;
position:absolute;
left:20px;
top:0px;
width:200px;
height:266px;
background:rgba(0,0,0,0.4);
}

Résultat : Voir pièce jointe.

Merci mille fois.

[Sam Moss]

Dernière question : comment centrer à la verticale le texte d'un Div ?
« vertical-align: middle; » ne marche pas.
Merci.

[Eddy]

L'alignement vertical, chose également tout sauf simple à appréhender.
Je te redirige vers cet article sur alsacreations qui pourrait répondre à ta question !

[metaroid]

vertical-align est à la base un attribut de tableau (HTML - valign), si tu dis à ta <div> que tu veux un vertical align middle, il faut d'abord que tu lui donnes un comportement de tableau (display:table)

Mais le lien de Eddy vers Alsacréation est plus pertinent, puisqu'il est compatible IE7 ... (je connais ce navigateur juste de nom, jamais entendu parlé sinon )