Problème de code sur fiche de liens.
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Problème de code sur fiche de liens.
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
Re: Problème de code sur fiche de liens.
Bonjour,
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 :
J'ai également retiré une div qui ne servait pas et ajouté un padding pour éviter que le texte ne touche les bords ^^
.. | Bienvenue Vu que vous êtes nouveau, voici quelques sujets importants :sur le Forum des Forums ForumActif Sécurité : mail de fondation - Ce qu'il ne faut pas faire
|
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- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Problème de code sur fiche de liens.
Oh, quelle rapidité. Merci beaucoup. C'est parfait.
Merci merci.
Merci merci.
Re: Problème de code sur fiche de liens.
.. | Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif |
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Sujets similaires
» Fiche demandes de liens, bug dans le code
» Problème sur fiche de liens
» Problème de code fiche RPG
» Problème de code d'une fiche
» problème de code pour fiche
» Problème sur fiche de liens
» Problème de code fiche RPG
» Problème de code d'une fiche
» problème de code pour fiche
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum