Problème de code sur fiche de liens.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème de code sur fiche de liens.

Message par algrimma le Dim 5 Avr 2015 - 15:55

Détails techniques


Version du forum : phpBB2
Poste occupé : Membre
Navigateur(s) concerné(s) : Safari
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : post d'une fiche de liens
Lien du forum : http://whompingwillow.forumactif.org

Description du problème

Bonjour, j'ai un peu patouillé pour me faire des jolies cadres de liens que voici:

Code:
<style type="text/css">.image { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; background: black; width: 200px; height: 320px; } .image:hover { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; </style>

<div style="background-image: url('http://image.noelshack.com/fichiers/2014/20/1400355163-pts19.png'); width: 200px; height: 320px; position: relative;"><div class="image"><div style="width: 200px; background-color: bisque; font-family: calibri; color: rosybrown; letter-spacing: 0.5px; line-height: 12px; height: 320px; overflow: auto; font-size: 13px; text-align: justify"><div style="font-size: 22px; text-align: center; font-family: Time New Roman; line-height: 17px;">Prénom P. Nom</div>
[center][i]Feat Célébrité
Maison - année[/i][/center]


[b]~ Nom du lien[/b]

Ma femme en chair 
Notre amour en sanglots 
Eclate dans l'enclos 
Des refrains populaires
 Qui semblaient faits pour nous 
Pleurent dans les roseaux 
Nos caresses légères 
Oh combien je préfère le torrent de ta voix 
Elle est tous les oiseaux 
Elle est la fleur sauvage
 Qui hante la rivière
 Elle est le désespoir et le soupir de rage
 Elle est triste et les pleurs la rongent 
Dans les coins de nos songes

</div>
[center][size=8]© algrimma[/size][/center]
</div></div>

Malheureusement lorsque je désire en mettre deux l'un à côté de l'autre ce n'est pas possible et le deuxième cadre passe directement à la ligne. Comment y remédier ?

Merci elephant

algrimma
Nouveau membre

Messages : 2
Inscrit(e) le : 05/04/2015

http://whompingwillow.forumactif.org
algrimma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de code sur fiche de liens.

Message par MlleAlys le Dim 5 Avr 2015 - 19:31

Bonjour,

..
Bienvenue
sur le Forum des Forums ForumActif
Vu que vous êtes nouveau, voici quelques sujets importants :
Sécurité : mail de fondation - Ce qu'il ne faut pas faire
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse Wink

Par défaut une div présente toujours un retour à la ligne avant et après ^^

Pour afficher vos blocs sur une même ligne, vous pouvez utiliser plusieurs façon : les mettre dans un tableau, ou bien utiliser la propriété css float, ou encore les afficher en inline-block, et j'en oublie très certainement plein d'autres...

Pour la dernière option (que je trouve assez simple), il vous suffit d'ajouter la propriété display:inline-block; dans le style de votre div pour que celle-ci soit affichée comme un élément "dans la ligne" plutôt que comme un bloc normal. Vous pouvez également ajouter une marge si besoin.
Ce qui donne par exemple :

Code:
<style type="text/css">.image { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; background: black; width: 200px; height: 320px; } .image:hover { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; </style>

<div style="background-image: url('http://image.noelshack.com/fichiers/2014/20/1400355163-pts19.png'); background-size: cover; width: 200px; height: 320px; position: relative; display:inline-block; margin:5px;"><div class="image" style="width: 190px; background-color: bisque; font-family: calibri; color: rosybrown; letter-spacing: 0.5px; line-height: 12px; height: 310px; padding:5px; overflow: auto; font-size: 13px; text-align: justify"><div style="font-size: 22px; text-align: center; font-family: Time New Roman; line-height: 17px;">Prénom P. Nom</div>
[center][i]Feat Célébrité
Maison - année[/i][/center]


[b]~ Nom du lien[/b]

Ma femme en chair 
Notre amour en sanglots 
Eclate dans l'enclos 
Des refrains populaires
 Qui semblaient faits pour nous 
Pleurent dans les roseaux 
Nos caresses légères 
Oh combien je préfère le torrent de ta voix 
Elle est tous les oiseaux 
Elle est la fleur sauvage
 Qui hante la rivière
 Elle est le désespoir et le soupir de rage
 Elle est triste et les pleurs la rongent 
Dans les coins de nos songes


[center][size=8]© algrimma[/size][/center]
</div></div><div style="background-image: url('http://image.noelshack.com/fichiers/2014/20/1400355163-pts19.png'); background-size: cover; width: 200px; height: 320px; position: relative; display:inline-block; margin:5px;"><div class="image" style="width: 190px; background-color: bisque; font-family: calibri; color: rosybrown; letter-spacing: 0.5px; line-height: 12px; height: 310px; padding:5px; overflow: auto; font-size: 13px; text-align: justify"><div style="font-size: 22px; text-align: center; font-family: Time New Roman; line-height: 17px;">Prénom P. Nom</div>
[center][i]Feat Célébrité
Maison - année[/i][/center]


[b]~ Nom du lien[/b]

Ma femme en chair 
Notre amour en sanglots 
Eclate dans l'enclos 
Des refrains populaires
 Qui semblaient faits pour nous 
Pleurent dans les roseaux 
Nos caresses légères 
Oh combien je préfère le torrent de ta voix 
Elle est tous les oiseaux 
Elle est la fleur sauvage
 Qui hante la rivière
 Elle est le désespoir et le soupir de rage
 Elle est triste et les pleurs la rongent 
Dans les coins de nos songes


[center][size=8]© algrimma[/size][/center]
</div></div>

J'ai également retiré une div qui ne servait pas et ajouté un padding pour éviter que le texte ne touche les bords ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de code sur fiche de liens.

Message par algrimma le Lun 6 Avr 2015 - 1:41

Oh, quelle rapidité. Merci beaucoup. C'est parfait. pig
Merci merci.

algrimma
Nouveau membre

Messages : 2
Inscrit(e) le : 05/04/2015

http://whompingwillow.forumactif.org
algrimma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de code sur fiche de liens.

Message par MlleAlys le Lun 6 Avr 2015 - 12:21

..Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum