Forum Wisibility

WEB => Dreamweaver => Discussion démarrée par: Sam Moss le mars 14, 2012, 10:24:37 am

Titre: Mélanger un tableau avec un élément PA ?
Posté par: Sam Moss le mars 14, 2012, 10:24:37 am
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.
Titre: Re : Mélanger un tableau avec un élément PA ?
Posté par: Eddy le mars 14, 2012, 12:15:04 pm
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 !
Titre: Re : Mélanger un tableau avec un élément PA ?
Posté par: Sam Moss le mars 15, 2012, 09:55:28 am
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 ?
Titre: Re : Mélanger un tableau avec un élément PA ?
Posté par: marroon le mars 15, 2012, 10:03:38 am
Salut,

Je pourrais peut-être aider mais...c'est quoi un élément "PA" ?
Titre: Re : Mélanger un tableau avec un élément PA ?
Posté par: Eddy le mars 15, 2012, 12:56:24 pm
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 !
Titre: Re : Mélanger un tableau avec un élément PA ?
Posté par: metaroid le mars 15, 2012, 14:59:57 pm
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 .
Titre: Re : Mélanger un tableau avec un élément PA ?
Posté par: marroon le mars 15, 2012, 15:25:48 pm
J'ai demandé autour de moi pour pouvoir répondre et on m'a dit exactement la même chose que metaroid. Donc...+1  ;)
Titre: Re : Re : Mélanger un tableau avec un élément PA ?
Posté par: Sam Moss le mars 15, 2012, 21:08:43 pm
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.
Titre: Re : Mélanger un tableau avec un élément PA ?
Posté par: Sam Moss le mars 15, 2012, 21:12:57 pm


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.
Titre: Re : Mélanger un tableau avec un élément PA ?
Posté par: Eddy le mars 15, 2012, 21:14:55 pm
@ 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.
Titre: Re : Mélanger un tableau avec un élément PA ?
Posté par: Eddy le mars 15, 2012, 21:46:43 pm
@ Sam Moss :

Voici un exemple réalisé rapidement :

HTML :
<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 :
#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.

Titre: Re : Re : Mélanger un tableau avec un élément PA ?
Posté par: Sam Moss le mars 15, 2012, 21:58:52 pm
@ Sam Moss :

Voici un exemple réalisé rapidement :

HTML :
<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 :
#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.
Titre: Re : Re : Mélanger un tableau avec un élément PA ?
Posté par: Sam Moss le mars 15, 2012, 22:03:00 pm
Dernière question : comment centrer à la verticale le texte d'un Div ?
« vertical-align: middle; » ne marche pas.
Merci.
Titre: Re : Mélanger un tableau avec un élément PA ?
Posté par: Eddy le mars 15, 2012, 22:50:00 pm
L'alignement vertical, chose également tout sauf simple à appréhender.
Je te redirige vers cet article (http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html#cv_ligne) sur alsacreations qui pourrait répondre à ta question !
Titre: Re : Mélanger un tableau avec un élément PA ?
Posté par: metaroid le mars 16, 2012, 07:01:55 am
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 ::) )
Titre: Re : Re : Mélanger un tableau avec un élément PA ?
Posté par: Sam Moss le mars 16, 2012, 11:36:15 am
L'alignement vertical, chose également tout sauf simple à appréhender.
Je te redirige vers cet article (http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html#cv_ligne) sur alsacreations qui pourrait répondre à ta question !


Merci encore. Le lien est parfait. Il faut utiliser « line-height » et le centrage à la verticale marche.