Problème d'application d'un css importé

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

Résolu Problème d'application d'un css importé

Message par allcl le Sam 26 Nov 2016 - 23:02

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement, je ne sais pas si cela concerne d'autres.
Problème apparu depuis : Depuis que j'ai posté le message avec ce code.
Lien du forum : http://legendeatlantide-rpg.forumactif.org/t17-teste-fiche-rp#27

Description du problème

N'ayant pas envie de surcharger la feuille de style css, j'ai choisi de mettre le "lien" du css dans le code html. Seulement, ce dernier n'a pas l'air de fonctionner.

Voici le code html:
Code:
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/mbofvpul87vkqkr/%5BWOS%5DEkitai%20Yasei.css" media="all"/>
<link href="https://fonts.googleapis.com/css?family=Finger+Paint" rel="stylesheet" type="text/css">
<div class="Head">
Le Titre du RP
<div class="Info">
<img src="http://3.bp.blogspot.com/_aZE5pnjxrPw/SLOzB3dWPqI/AAAAAAAAAB8/MlhH5rGxpfQ/s200/vnaruto4.jpg">
<p>pretium quis <br/> pretium quis <br/> pretium quis <br/> consectetuer adipiscing eli</p>
</div></div>
<div class="MessageRP">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
<table><tr><td><img src="http://images6.fanpop.com/image/photos/34600000/Mikaze-Ai-mikaze-ai-34660860-100-100.png" alt="Avatar du personnage"></td><td><div class="Parole">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
</div></td></tr></table>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
<div class="Footer">
L'Oréal, parce que nous le valons bien!
<span class="credit">Sed consequat leo eget bibendum</span>
</div>
Voici le css:
Code:
.Head{
    width: 500px;
    border-left: 6px #11571F solid;
    border-right: 6px #11571F solid;
    border-top: 4px #11571F solid;
    border-bottom: 4px #11571F dotted;
    background-color: #11571F;
    font-size: 25px;
    font-family: Finger Paint;
    padding: 10px;
}
.Info{
    float: right;
}
.Info img{
    border-radius: 50px;
}
.Info:hover{
    background-color: #11571F;
    color: #191919;
    width: 110px;
    padding: 3px;
}
.Info:hover img{
    position:absolute;
    z-index:3;
    transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    border-radius:200px;
    margin-left:110px;
    margin-top:11px;}
p{
    position:relative;
    width:0;
    height: 0;
    overflow:hidden;
    padding:0;
    font-family:Times New Roman;
    text-align:justify;
    transition:all 1s linear;
    -webkit-transition:all 1s linear;
    }
.Info:hover p{
    width:110px;
    height:200px;
    padding:3px;
    padding-right:60px;
    overflow:hidden;
    font-size: 14px;
    }
.MessageRP {
    background-color: #191919;
    border-left: 6px #11571F solid;
    border-right: 6px #11571F solid;
    border-top: 4px #11571F dotted;
    border-bottom: 4px #11571F dotted;
    padding: 10px;
    color: #11571F;
    width: 500px;
}
img{
    border-radius: 30px;
    border: 4px #11571F solid;
}
img:hover{
    box-shadow: 0px 0px 10px #669966;
}
.Parole{
    background-color: #11571F;
    border-radius: 20px;
    width: 300px;
    color: #191919;
    padding: 10px;
    margin: 10px;
   
}
.Parole:hover{
    width: 350px;
    box-shadow: 0px 0px 6px #ffffcc;
}
.Footer{
    width: 500px;
    border-left: 6px #11571F solid;
    border-right: 6px #11571F solid;
    border-top: 4px #11571F solid;
    border-bottom: 4px #11571F dotted;
    background-color: #11571F;
    font-size: 10px;
    font-family: Finger Paint;
    margin: 2px;
    padding: 10px;
}
.credit{
    float: right;
    color: #191919;
    font-size: 7px;
}

Cordialement,


Dernière édition par allcl le Dim 27 Nov 2016 - 0:29, édité 1 fois
avatar

allcl
*

Féminin
Messages : 41
Inscrit(e) le : 28/04/2012

http://saintseiya.leforumgratuit.com/
allcl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'application d'un css importé

Message par R-max le Dim 27 Nov 2016 - 0:24

bonsoir , le lien du css ne fonctionne pas , même en le plaçant dans overall_header ( la ou il serait a ça place) au début juste après

Code:
{T_HEAD_STYLESHEET}
   {CSS}

Right - si vous plaçé le code html dans un Template ou une page html
>> vous pouvez placé le css dans le code html entre les balises <<



Code:
<style type="text/css">le css</style>

:quest: -tous dépend la position du code

ps: il y a surement des erreurs dans votre code ..

Right celui ci est corrigé

Code:
<div class="Head">
Le Titre du RP
<div class="Info">
  <img src="http://3.bp.blogspot.com/_aZE5pnjxrPw/SLOzB3dWPqI/AAAAAAAAAB8/MlhH5rGxpfQ/s200/vnaruto4.jpg"/>
<p>pretium quis <br/> pretium quis <br/> pretium quis <br/> consectetuer adipiscing eli</p>
</div></div>
<div class="MessageRP">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
  <table><tr><td><img src="http://images6.fanpop.com/image/photos/34600000/Mikaze-Ai-mikaze-ai-34660860-100-100.png" alt="Avatar du personnage"/></td><td><div class="Parole">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
</div></td></tr></table>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
<div class="Footer">
L'Oréal, parce que nous le valons bien!
<span class="credit">Sed consequat leo eget bibendum</span>
</div>

avatar

R-max
Membre habitué(e)

Masculin
Messages : 1609
Inscrit(e) le : 08/01/2015

http://www.milouze14.com/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'application d'un css importé

Message par allcl le Dim 27 Nov 2016 - 0:28

Merci beaucoup pour cette réponse!

Ca marche beaucoup mieux sur une page html! ^^
avatar

allcl
*

Féminin
Messages : 41
Inscrit(e) le : 28/04/2012

http://saintseiya.leforumgratuit.com/
allcl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'application d'un css importé

Message par R-max le Dim 27 Nov 2016 - 0:37

Ca marche beaucoup mieux sur une page html! ^^

c'est une question ou une affirmation ( doute) Very Happy
avatar

R-max
Membre habitué(e)

Masculin
Messages : 1609
Inscrit(e) le : 08/01/2015

http://www.milouze14.com/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'application d'un css importé

Message par allcl le Dim 27 Nov 2016 - 0:38

Une affirmation. Wink

Merci d'avoir corrigé le code. Very Happy
avatar

allcl
*

Féminin
Messages : 41
Inscrit(e) le : 28/04/2012

http://saintseiya.leforumgratuit.com/
allcl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'application d'un css importé

Message par R-max le Dim 27 Nov 2016 - 0:40

de rien salut
avatar

R-max
Membre habitué(e)

Masculin
Messages : 1609
Inscrit(e) le : 08/01/2015

http://www.milouze14.com/
R-max 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