Sujets similaires

Bien le bonjour très chers membre de CSS Actif!

Je viens à vous car suite à l'utilisation d'un code tiré d'ici (que j'ai crédité avec un lien sur mon forum, ne vous en faites pas) il y a quelque soucis.

En réalité, ce ne sont pas de gros soucis, car sur Firefox c'est niquel, tout s'affiche, ou presque. Les coins sensés être arrondis ne le sont pas, sauf sur Chrome d'après mes membres. A la limite, ça ce n'est pas vraiment important, ce n'est qu'un soucis mineur. Le vrai soucis c'est qu'en dehors de firefox, les trois images que vous pouvez voir sur ce screen (ici sur IE), partie administration, ne s'affiche pas correctement et forme des logo d'erreur (croix, petits symboles....ça dépend du navigateur). Le logo d'erreur situé en haut à droite, j'ai réussi à l'enlever, c'était une simple erreur de balise.

D'après moi, il suffirait d'un code webkit / mozkit, mais étant vraiment novice dans le domaine, je me trompe surement et cherche peut-être la facilité. Voici le code de Sayuri (ici sur CSS) que j'ai pas mal bidouillé et auquel j'ai rajouté un code afin de pouvoir mettre côte à côte image et texte. L'erreur vient aussi peut-être de là.

Pour les coins arrondis, ce n'est vraiment pas le problème majeur, donc ce n'est pas grave si on ne s'y penche pas ^^

Voici donc le code HTML de la page d'accueil:

Code:: <div style="font-size: 20px; font-variant: small-caps; padding: 10px; text-align:center; word-spacind: 2px; letter-spacing:1px; padding:10px; margin-bottom:10px;border-bottom: 3px dotted #ffffff; font-family:Tempus sans ITC; font-weight: bolder; color:#ffffff">♣ Bienvenue {USERNAME} sur Mechanical Elixirs! ♣</div>

<span style="font-family:The Great Escape; font-size: 14px; background-color:#None; -moz-border-radius: 5px ; -webkit-border-radius: 5px; padding:5px; padding-left:12px; padding-right:12px; margin:10px; text-align:center;"><a href="http://mechanicalelixirs.easyforum.fr/t1-les-regles-du-forum-a-lire-imperativement">♦ Règles ♦</a>

<span style="font-family:The Great Escape; font-size: 14px; background-color:#non; -moz-border-radius: 5px ; -webkit-border-radius: 5px; padding:5px; padding-left:12px; padding-right:12px; margin:10px; text-align:center;"><a href="http://mechanicalelixirs.easyforum.fr/f24-bienvenue">♦ Présentations ♦</a>

<span style="font-family:The Great Escape; font-size: 14px; background-color:#non; -moz-border-radius: 5px ; -webkit-border-radius: 5px; padding:5px; padding-left:12px; padding-right:12px; margin:10px; text-align:center;"><a href="http://mechanicalelixirs.easyforum.fr/f38-remarques-suggestions">♦ Questions ♦</a>
</center>
 

<table width="100%" border="0" cellspacing="2" cellpadding="2" margin="0">
<tr><td style="vertical-align:top; width:50%;" >
<fieldset style="padding: 10px; border: 3px solid #956e4d; color:#ffffff; -moz-border-radius: 10px ; -webkit-border-radius: 10px;"><legend style="font-variant: small-caps; padding: 5px; border: 3px solid #956e4d; -moz-border-radius: 10px ; -webkit-border-radius: 10px; font-family:The Great Escape; letter-spacing:1px; font-weight: bolder; font-size : 15px;">Contexte</legend><div class="hauteur">Bienvenue à vous! Mechanical Elixirs est un forum de BJD et de poupées diverses. Nous parlerons ici de tout ce qui les concerne et vous trouverez également toutes les informations dont vous aurez besoin. N'hésitez pas à contacter un administrateur pour toutes questions! Bonne visite!</div></fieldset>

</td><td style="vertical-align:top; width:35%;" >
<fieldset style="padding: 10px; border: 3px solid #956e4d; color:#ffffff; -moz-border-radius: 10px ; -webkit-border-radius: 10px;"><legend style="font-variant: small-caps; padding: 5px; border: 3px solid #956e4d; -moz-border-radius: 10px ; -webkit-border-radius: 10px; font-family:The Great Escape; letter-spacing:1px; font-weight: bolder; font-size : 12px;">Sir or Lady of the Month </legend> <div class="hauteur">
<center><div class="infobulle">
<img src="#" />
<div>
Redirection~~~~ 

Son topic,

<a href="http://mechanicalelixirs.easyforum.fr/t386-morse-sld-mnf-rheia-ingemar-dc-d-you-love-my-shoes-p3">ici-même!</a>
</div>

</div>
<a href="http://mechanicalelixirs.easyforum.fr/t452-sir-or-lady-of-the-month-seconde-edition#6214" class="postlink" target="_blank" rel="nofollow"><img src="http://img214.imageshack.us/img214/3103/photoseptembre.png" border="0" alt="" /></a></center>
</div></fieldset>

</td>

</td></tr>

<tr><td style="vertical-align:top; width:50%;">
<fieldset style="padding: 10px; border: 3px solid #956e4d; color:#ffffff; -moz-border-radius: 10px ; -webkit-border-radius: 10px;"><legend style="font-variant: small-caps; padding: 5px; border: 3px solid #956e4d; -moz-border-radius: 10px ; -webkit-border-radius: 10px; font-family:The Great Escape; letter-spacing:1px; font-weight: bolder; font-size : 15px;">Administration</legend> <div class="hauteur">

<table><tr><td align="left" class="tab1" valign="top"><img src="view-source:http://img854.imageshack.us/img854/2289/ludwiglogo2.png" border="0" alt="" /></td><td align="left" class="tab2" valign="top">
 
• Ladicius.
 • <a href="http://mechanicalelixirs.easyforum.fr/privmsg?mode=post&u=1" class="postlink" target="_blank" rel="nofollow">~ MP ~</a>

<td align="left" class="tab1" valign="top"><img src="view-source:http://img607.imageshack.us/img607/7510/isaaclogo.png" border="0" alt="" /></td><td align="left" class="tab2" valign="top">
 
• Luka.
 • <a href="http://mechanicalelixirs.easyforum.fr/privmsg?mode=post&u=2" class="postlink" target="_blank" rel="nofollow">~ MP ~</a>

<td align="left" class="tab1" valign="top"><img src="view-source:http://img155.imageshack.us/img155/5080/lestatlogo.png" border="0" alt="" /></td><td align="left" class="tab2" valign="top">
 
• Cocow.
 • <a href="http://mechanicalelixirs.easyforum.fr/privmsg?mode=post&u=4" class="postlink" target="_blank" rel="nofollow">~ MP ~</a></td></tr></table></div>
</fieldset>

</td><td style="vertical-align:top;">
<fieldset style="padding: 10px; border: 3px solid #956e4d; color:#ffffff; -moz-border-radius: 10px ; -webkit-border-radius: 10px;"><legend style="font-variant: small-caps; padding: 5px; border: 3px solid #956e4d; -moz-border-radius: 10px ; -webkit-border-radius: 10px; font-family:The Great Escape; letter-spacing:1px; font-weight: bolder; font-size : 15px;">Liens et infos utiles</legend> <div class="hauteur">

• <a href="http://mechanicalelixirs.easyforum.fr/t24-mechanical-elixirs-quel-petit-monde-est-ce-au-juste" class="postlink" target="_blank" rel="nofollow">Mechanical Elixirs ; quel petit monde est-ce, au juste ?</a>
 • <a href="http://mechanicalelixirs.easyforum.fr/t42-la-propriete-intellectuelle" class="postlink" target="_blank" rel="nofollow">La propriété intellectuelle.</a>
 • <a href="http://mechanicalelixirs.easyforum.fr/t239-les-dedales-secrets" class="postlink" target="_blank" rel="nofollow">Les dédales secrets.</a>
 • <a href="http://mechanicalelixirs.easyforum.fr/t50-aide-a-l-orthographe" class="postlink" target="_blank" rel="nofollow">Aide à l'orthographe.</a>
 • <a href="http://www.never-utopia.com/" class="postlink" target="_blank" rel="nofollow">Code HTML : Never Utopia</a> + bidouilles et personnalisations de Luka.

</div></fieldset>

</td>
</table>

Ainsi que le CSS entier du forum. (fait bien avant de faire cette page d'accueil, donc il est aussi possible qu'il faille arranger ci ou ça.)

Code:: a { text-decoration: none;
border-radius: 15px;}

a:hover {
font-variant: small-caps;
border-radius: 15px;
}

.bodyline{ -moz-border-radius: 25px;
border-radius: 15px;}

textarea, .textarea.post, input.post {
-moz-border-radius:20px;
border-radius: 15px;
}

body {
background-attachment:fixed;
}
a { text-decoration: none;
border-radius: 15px;}

.bodyline {
-moz-border-radius:25px;
border-radius: 15px;
}

.forumline{
background-color: #transparent;
-moz-border-radius: 5px ;
border: 3px #393932 solid;
border-radius: 15px;
}

.postbody {
background-repeat: repeat;
background-image: url('URL');
background-position: center;
}

td.row1 {
background-repeat: repeat;
background-image: url('URL');
background-position: center;
border-radius: 15px;
}
td.row2 {
background-repeat: repeat;
background-image: url('URL');
background-position: center;
border-radius: 15px;
}
td.row3 {
background-repeat: repeat;
background-image: url('URL');
background-position: center;
border-radius: 15px;
}

td.row3Right {
background:url('URL');
border-style: none
border-radius: 15px;
}

td.row3{
background-image: url("URL");
border-radius: 15px;
}

#chatbox_members ul li,
body.chatbox {
background-image:url('http://img225.imageshack.us/img225/5569/fontchatbox.jpg');
border-radius: 15px;
}

.forumline {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;}

td.catHead, th.thHead {
-webkit-border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
border-radius: 15px 15px 0 0;}

td.catBottom, th.thBottom {
-webkit-border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
border-radius: 0 0 15px 15px;}

a.forumlink {
text-decoration: none;
background-color: #947153;
border-bottom: 2px double #393932;
border-top: 2px double #393932;
-moz-border-radius: 10px ;
border-right: 5px solid #393932;
-moz-border-radius: 10px ;
border-left: 5px solid #393932;
display:block;
background-image: url('URL DE L'IMAGE PLUS CLAIRE');
font-weight:underline
}

a.forumlink:hover {
text-decoration: none;
background-color: #COULEUR DU FOND AVEC LA SOURIS;
border-bottom:2px double #COULEUR DU CADRE DU BAS AVEC LA SOURIS;
border-top: 2px double #COULEUR DU CADRE DU HAUT AVEC LA SOURIS;
-moz-border-radius: 10px ;
border-right: 5px solid #COULEUR DU CADRE A DROITE AVEC LA SOURIS;
-moz-border-radius: 10px ;
border-left: 5px solid #COULEUR DU CADRE A GAUCHE AVEC LA SOURIS;
display:block;
background-image: url('URL DE L'IMAGE PLUS FONCEE');
}

.postbody a{color: darkred;font-weight: bold;}

.arrondi {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #000000;
border: 2px dashed #FF0000;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

Je vous remercie d'avance de m'avoir lue, et en espérant avoir un petit coup de main, à la prochaine! =)

Dernière édition par Doare le Ven 07 Sep 2012, 12:09, édité 1 fois

Pour les trois images staff, à mon avis l'erreur vient tout simplement des urls :

Code:: <img src="view-source:http://img607.imageshack.us/img607/7510/isaaclogo.png" border="0" alt="" />

Retire les "view-source:" qui se trouvent devant chacune d'elles, et cela devrait fonctionner.

Concernant les bords arrondis, n'ayant pas accès à ton forum je ne peux pas vraiment savoir ce qui devrait être arrondi ou pas, mais je ferai quelques remarques au sujet du CSS.
Dans cette partie-là :

Code:: a.forumlink {
text-decoration: none;
background-color: #947153;
border-bottom: 2px double #393932;
border-top: 2px double #393932;
-moz-border-radius: 10px ;
border-right: 5px solid #393932;
-moz-border-radius: 10px ;
border-left: 5px solid #393932;
display:block;
background-image: url('URL DE L'IMAGE PLUS CLAIRE');
font-weight:underline
}

a.forumlink:hover {
text-decoration: none;
background-color: #COULEUR DU FOND AVEC LA SOURIS;
border-bottom:2px double #COULEUR DU CADRE DU BAS AVEC LA SOURIS;
border-top: 2px double #COULEUR DU CADRE DU HAUT AVEC LA SOURIS;
-moz-border-radius: 10px ;
border-right: 5px solid #COULEUR DU CADRE A DROITE AVEC LA SOURIS;
-moz-border-radius: 10px ;
border-left: 5px solid #COULEUR DU CADRE A GAUCHE AVEC LA SOURIS;
display:block;
background-image: url('URL DE L'IMAGE PLUS FONCEE');
}

Tu as des propriétés non définies, mais aussi en double. Je te conseille de nettoyer cette partie. De plus, les ' qui se trouvent dans certains textes à remplacer (exemple background-image: url('URL DE L'IMAGE PLUS FONCEE');) génèrent sans doute des erreurs.

Et dans cette dernière partie :

Code:: .arrondi {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #000000;
border: 2px dashed #FF0000;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

Pense à ajouter la propriété border-radius avec ses versions avec extensions. Les versions les plus récentes de Firefox, par exemple, ne prennent plus en compte l'extension -moz-. Smile

Merci pour ta rapidité Dorae!

Bon, là tout de suite je ne peux hélas pas effectuer les modifications que tu me proposes, car pressée par le temps je dois m'absenter, mais de retour ce soir je m'y attèlerais et reviendrais ici faire mon rapport.

Merci beaucoup et à plus tard ^^

Coucou

J'ajouterais aux remarques de Doare qu'il manque un ; cruciale ici:

Code:: font-weight:underline

Bonne chance!

Hello,

Fire-fly... font-weight: underline; n'est pas correct.

Il y a soit: font-weight: bold;
ou alors: font-decoration: underline;

Wink

En fait, c'est plutôt text-decoration ^^'

Résumé, donc, pour Lukarin.

Dans la première partie de CSS que je t'ai donnée, la propriété font-weight:underline est fausse. Tu peux soit la supprimer, soit la remplacer par ce que tu voulais éventuellement faire à la base :
Souligné : text-decoration: underline;
Gras : font-weight: bold;

@Fire-fly : Le ; n'est pas obligatoire pour la dernière propriété.

Ouhh ok omg j'avais vraiment pas lu la propriété haha. En effet, ça n'existe pas Razz

Et pour le dernier ;, ah oui?? Eh bien ,on en apprend tous les jours Razz

Moi j'ai tendance à ne pas prendre de chances...

Bonsoir à tous! Déjà, merci pour votre aide!

Les images s'affichent désormais correctement sur mon forum, ça fait plaisir! (maintenant j'attends de voir si un des membres a un soucis, ce qui m'étonnerait tout de même ayant vérifié sur Firefox, IE et Chrome.)

Par contre, Doare, quand tu me dis:

Doare a écrit:

Et dans cette dernière partie :

Code:: .arrondi {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #000000;
border: 2px dashed #FF0000;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

Pense à ajouter la propriété border-radius avec ses versions avec extensions. Les versions les plus récentes de Firefox, par exemple, ne prennent plus en compte l'extension -moz-. Smile

Que veux-tu dire par "avec ses extensions"? Il faut que j'ajoute/enlève/modifie quelque chose, oui, mais quoi donc? ^^

Je rappelle au cas où, que les arrondis des catégories et forum sont impeccables, mais qu'il s'agit des arrondis à l'intérieur du code se situant dans la page d'accueil qu'il y a un soucis Smile

Bonsoir,

Elle veut dire qu'il te faut ajouter la propriété CSS3 border-radius, sachant que les versions "avec extensions" (-moz-border-radius et -webkit-border-radius ne sont plus supportées sur les navigateurs récents.

Oh...oh, je crois que je n'avais juste pas saisi le sens de son explication, faut pas m'en vouloir, passé minuit je décroche!

Est-ce comme ceci:

Code:: .arrondi {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #000000;
border: 2px dashed #FF0000;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

Car si oui, cela n'a rien changé, mais encore une fois, je dois surement avoir mal fait :/

D'après ce que je vois sur le forum en question, il y a du CSS directement dans le code HTML. Je ne saurais que trop te conseiller de retirer tous ces style="plein de proprietes CSS" pour les remplacer par des classes (class="NomDeClasse") en rajoutant les propriétés CSS en question directement dans... ta feuille de styles CSS, qui est là pour ça.

Intérêt de la méthode :
• Une seule classe CSS suffirait pour tous les cadres, ce qui rend la mise à jour plus facile, par exemple pour cette partie de code :

Code:: <span style="font-family:The Great Escape; font-size: 14px; background-color:#None; -moz-border-radius: 5px ; -webkit-border-radius: 5px; padding:5px; padding-left:12px; padding-right:12px; margin:10px; text-align:center;"><a href="http://mechanicalelixirs.easyforum.fr/t1-les-regles-du-forum-a-lire-imperativement"> Règles </a>

<span style="font-family:The Great Escape; font-size: 14px; background-color:#non; -moz-border-radius: 5px ; -webkit-border-radius: 5px; padding:5px; padding-left:12px; padding-right:12px; margin:10px; text-align:center;"><a href="http://mechanicalelixirs.easyforum.fr/f24-bienvenue"> Présentations </a>

<span style="font-family:The Great Escape; font-size: 14px; background-color:#non; -moz-border-radius: 5px ; -webkit-border-radius: 5px; padding:5px; padding-left:12px; padding-right:12px; margin:10px; text-align:center;"><a href="http://mechanicalelixirs.easyforum.fr/f38-remarques-suggestions"> Questions </a>

Pour chaque modif, tu dois éditer à trois fois les CSS.
Si à la place tu avais

Code:: <a href="http://mechanicalelixirs.easyforum.fr/t1-les-regles-du-forum-a-lire-imperativement"> Règles </a>

<a href="http://mechanicalelixirs.easyforum.fr/f24-bienvenue"> Présentations </a>

<a href="http://mechanicalelixirs.easyforum.fr/f38-remarques-suggestions"> Questions </a>

(Je vire le au passage, c'est une saleté ces trucs)
Et dans le CSS les styles communs aux trois :

Code:: .itemMenu {
font-family:The Great Escape, cursive;
font-size: 14px;
background-color:#none;
border-radius:5px;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px;
padding:5px;
padding-left:12px;
padding-right:12px;
margin:10px;
text-align:center;
}

Non seulement ça simplifie la partie HTML (et pas qu'un peu), mais en plus si tu veux modifier tous les liens, tu n'auras qu'à éditer UNE classe CSS.

Il y aurait même possibilité de se passer de ces span mais je vais éviter de compliquer.

Tout ça pour dire qu'à mon avis ton problème d'arrondis vient entre autres de ça. Nettoies ton code pour commencer, tu auras moins de difficultés à le mettre à jour Wink

Re salut!

Merci pour le tuyau, je dois admettre que c'est carrément le foutoir ma page html u_u' C'est effectivement très pratique ^^

J'ai donc compris le principe et essayé de nettoyer et faire la même technique pour le reste, mais je reste définitivement bien trop novice dans le domaine pour arriver à faire quelque chose parfaitement jusqu'au bout! J'ai réussi à séparer le html du CSS, à faire des classes, ça marchait, mais il me manquait toujours un truc au final, alors que je me contentais d'importer les mêmes informations d'une page à l'autre...enfin bref, il est bien tard et je pense qu'à cette heure-ci, je ne peux rien faire de bon, déjà qu'en temps normal c'est compliqué! (Mais je me surprends tout de même à mieux comprendre les codes et les balises! Je pense que c'est un bon début ^^)

Affaire à suivre demain donc, merci encore pour tout ça, je rebosse dessus demain o/

Hello !
Le sujet est-il toujours d'actualité ?
Si nous n'avons pas de réponse dans 4 jours, il sera considéré comme résolu !
Merci de ta compréhension Mêlange de code : images non affichées et coins non arrondis. 926145

Mêlange de code : images non affichées et coins non arrondis. 926145

C'est à moitié résolu ^^ Le plus important a été réglé, donc ce n'est pas grave si les coins ne sont pas arrondis (ça ne concerne que Firefox) alors comme je n'ai ni envie de me prendre la tête, ni envie de trop embêter mon monde, on peut considérer ce topic comme terminé =)

Merci pour votre aide! o/

Salut,
Merci bien de ta réponse, j'archive le sujet alors.

Bonne journée ! Mêlange de code : images non affichées et coins non arrondis. 90719

Mêlange de code : images non affichées et coins non arrondis.

Mêlange de code : images non affichées et coins non arrondis.

Sujets similaires

Sujets similaires

Partenaires Or