Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1] 2   En bas

Auteur Sujet: Mélanger un tableau avec un élément PA ?  (Lu 6666 fois)

Sam Moss

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 201
    • Voir le profil
Mélanger un tableau avec un élément PA ?
« 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.
IP archivée

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Mélanger un tableau avec un élément PA ?
« Réponse #1 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 !
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

Sam Moss

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 201
    • Voir le profil
Re : Mélanger un tableau avec un élément PA ?
« Réponse #2 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 ?
IP archivée

marroon

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1706
  • Wisinaute
    • Voir le profil
    • Studio graphique et imprimeur typographique
    • E-mail
Re : Mélanger un tableau avec un élément PA ?
« Réponse #3 le: mars 15, 2012, 10:03:38 am »

Salut,

Je pourrais peut-être aider mais...c'est quoi un élément "PA" ?
IP archivée
L'échec, c'est la réussite du con. - Frédéric Dard

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Mélanger un tableau avec un élément PA ?
« Réponse #4 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 !
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

metaroid

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 187
    • Voir le profil
    • Portfolio infographiste metaroid
Re : Mélanger un tableau avec un élément PA ?
« Réponse #5 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 .
IP archivée
Less is more

marroon

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1706
  • Wisinaute
    • Voir le profil
    • Studio graphique et imprimeur typographique
    • E-mail
Re : Mélanger un tableau avec un élément PA ?
« Réponse #6 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  ;)
IP archivée
L'échec, c'est la réussite du con. - Frédéric Dard

Sam Moss

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 201
    • Voir le profil
Re : Re : Mélanger un tableau avec un élément PA ?
« Réponse #7 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.
IP archivée

Sam Moss

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 201
    • Voir le profil
Re : Mélanger un tableau avec un élément PA ?
« Réponse #8 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.
IP archivée

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Mélanger un tableau avec un élément PA ?
« Réponse #9 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.
« Modifié: mars 15, 2012, 21:17:07 pm par Eddy »
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Mélanger un tableau avec un élément PA ?
« Réponse #10 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.

IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

Sam Moss

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 201
    • Voir le profil
Re : Re : Mélanger un tableau avec un élément PA ?
« Réponse #11 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.
IP archivée

Sam Moss

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 201
    • Voir le profil
Re : Re : Mélanger un tableau avec un élément PA ?
« Réponse #12 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.
IP archivée

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Mélanger un tableau avec un élément PA ?
« Réponse #13 le: mars 15, 2012, 22:50:00 pm »

L'alignement vertical, chose également tout sauf simple à appréhender.
Je te redirige vers cet article sur alsacreations qui pourrait répondre à ta question !
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

metaroid

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 187
    • Voir le profil
    • Portfolio infographiste metaroid
Re : Mélanger un tableau avec un élément PA ?
« Réponse #14 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 ::) )
« Modifié: mars 16, 2012, 08:49:54 am par metaroid »
IP archivée
Less is more
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.

Nos partenaires

         
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum