Cadres en message d'accueil

[Yuen]

Bonjour à tous,
Je n'ai pas trouvé de sujet similaire donc je me permets de poster mon problème.
Je ne suis pas super doué avec les codes et j'essaye de me débrouiller par moi-même, mais je bloque depuis plusieurs jours sur ce problème alors je viens demander votre aide...

J'ai essayé d'intégrer des "cadres" dans mon message d'accueil mais le résultat obtenu n'est pas celui que j'attendais...

Avant tout, voici le résultat actuel :



Et voici son code :

Code:

<div style="width:24%;float:left;border:2px solid black;height:360px;padding:0px;margin-right:0px;margin-top:0px;">
<font color="darkred"><div class="titres"><span style="font-size: 24px; line-height: normal"><strong>Liens Utiles</strong></span></div><br><br><br><br>
<a target="_self" href="http://arcadie.forumactif.pro/t3-reglement-arcadien"><span style="font-size: 18px; line-height: normal"><font color="darkred">Règlement Arcadien</font></span></a></font>
<br>
<br>
<br>
<br>
<a style="_self" href="http://arcadie.forumactif.pro/f7-bureau-de-recrutement"><span style="font-size: 18px; line-height: normal"><font color="darkred">Bureau de Recrutement</font></span></a>
<br>
<br>
<br>
<br>
<a target="_self" href="http://arcadie.forumactif.pro/t14-artisans-arcadiens"><span style="font-size: 18px; line-height: normal"><font color="darkred">Liste des Artisans</font></span></a>
<br>
<br>
<br>
<br>
<a target="_self" href="http://arcadie.forumactif.pro/f27-ce-soir-20h"><span style="font-size: 18px; line-height: normal"><font color="darkred">Ce soir 20h !</font></span></a></div></div><div style="width:24%;float:right;border:2px solid black;height:360px;padding:0px;margin-right:0px;margin-top:0px;"><font color="darkred"><div class="titres"><span style="font-size: 24px; line-height: normal"><strong>Les Nouveautés</strong></span></div><br><marquee behavior="scroll" align="center" direction="up" scrollamount="1" scrolldelay="1" onmouseover="this.stop()" onmouseout="this.start()" height="300">
<span style="font-size: 15px; line-height: normal"><strong><br><center>...<br><br>La guilde vient d'atteindre son niveau 70 !<br> <br>Un pas de plus vers le sommet !
<br><br>... <br><br>Félicitations à Fouca et Wacho (Alias Drewry)<br> qui sont désormais des Arcadiens à part entière ! <br><br>... </strong></center></font>
</span>
</span>
</span>
</a>
</div>
</div><div style="width:50%;float:center;border:0px solid black;height:300px;padding:0px;margin-right:0px;margin-top:0px;"><div class="titre">
<iframe width="400" height="300" src="http://www.youtube.com/v/JkoCkva-rBc" frameborder="0" allowfullscreen></iframe>
<br/><br/><span style="font-size: 14px; line-height: normal"><font color="darkred"><i>Proposée par Loki.</i></div>

Le problème n°1 est que la fenêtre youtube s'insère dans le cadre de droite, alors qu'elle est censée se mettre entre les deux cadres. J'ai pu obtenir un bon résultat sur Firefox, mais la majeure partie des utilisateurs du forum voient ce résultat-ci.
Le problème n°2 est que j'aurais aimé des cadres aux bords arrondis et d'une couleur différente...


Voilà ce que j'aurais aimé obtenir (pas nécessairement dans cette couleur là) :



Pouvez-vous m'aider, s'il vous plait ?

[Invité]

Bonjour,

En réalisant un tableau avec 1 ligne et 3 colonnes, il ets plus facile de positionner les éléments.

Pour la couleur des contour et l'arrondis, il faut modifier:

<div style="width:100%;border:2px solid black;height:360px;padding:0px;margin-right:0px;margin-top:0px;">

et ajouter la propriété "border-radius"

Essayez comme ceci:

Code:

<table width="100%" cellspaing="5" cellpadding="5"><tr>
<td><div style="width:100%;border:2px solid orange;height:360px;padding:0px;margin-right:0px;margin-top:0px;border-radius: 8px;">
<font color="darkred"><div class="titres"><span style="font-size: 24px; line-height: normal"><strong>Liens Utiles</strong></span></div><br><br><br><br>
<a target="_self" href="http://arcadie.forumactif.pro/t3-reglement-arcadien"><span style="font-size: 18px; line-height: normal"><font color="darkred">Règlement Arcadien</font></span></a></font>
<br />
<br />
<br />
<br />
<a style="_self" href="http://arcadie.forumactif.pro/f7-bureau-de-recrutement"><span style="font-size: 18px; line-height: normal"><font color="darkred">Bureau de Recrutement</font></span></a>
<br />
<br />
<br />
<br />
<a target="_self" href="http://arcadie.forumactif.pro/t14-artisans-arcadiens"><span style="font-size: 18px; line-height: normal"><font color="darkred">Liste des Artisans</font></span></a>
<br />
<br />
<br />
<br />
<a target="_self" href="http://arcadie.forumactif.pro/f27-ce-soir-20h"><span style="font-size: 18px; line-height: normal"><font color="darkred">Ce soir 20h !</font></span></a></div></div></td>
<td><div style="width:50%;float:center;border:0px solid black;height:300px;padding:0px;margin-right:0px;margin-top:0px;"><div class="titre">
<iframe width="400" height="300" src="http://www.youtube.com/v/JkoCkva-rBc" frameborder="0" allowfullscreen></iframe>
<br/><br/><span style="font-size: 14px; line-height: normal"><font color="darkred"><i>Proposée par Loki.</i></div></td>
<td><div style="width:100%;border:2px solid orange;height:360px;padding:0px;margin-right:0px;margin-top:0px;border-radius: 8px;"><font color="darkred"><div class="titres"><span style="font-size: 24px; line-height: normal"><strong>Les Nouveautés</strong></span></div><br><marquee behavior="scroll" align="center" direction="up" scrollamount="1" scrolldelay="1" onmouseover="this.stop()" onmouseout="this.start()" height="300">
<span style="font-size: 15px; line-height: normal"><strong><br><center>...<br><br>La guilde vient d'atteindre son niveau 70 !<br> <br>Un pas de plus vers le sommet !
<br><br>... <br><br>Félicitations à Fouca et Wacho (Alias Drewry)<br> qui sont désormais des Arcadiens à part entière ! <br><br>... </strong></center></font>
</span>
</span>
</span>
</a>
</div>
</div></td>
</tr>
</table>

Cordialement.

[Yuen]

Merci pour ton aide Isolde ! Je commençais à désespérer ^^'

Pour l'arrondis, je vois que tu as rajouté "border-radius", mais ça ne me donne de bords arrondis, ils sont toujours carrés...

Et pour les couleurs, à par l'orange et le noir, quels sont les "noms" des autres couleurs ? J'ai beau essayé des mots comme "darkred", ça marche pas... :s

Sinon pour la vidéo au centre c'est réglé

Et sinon, c'est possible que les cadres soient de la même taille ? Je vois pas où on doit changer ça, vu qu'ils sont à 100% tous les 2 ^^'

Merci beaucoup :3

[Matmit123]

Et pour les couleurs, à par l'orange et le noir, quels sont les "noms" des autres couleurs ? J'ai beau essayé des mots comme "darkred", ça marche pas... :s

Bon moi je peux t'aider sur un petit point... La couleur !

Au fait la couleur fonctionne en "code" dans le CSS et non par des mots en anglais(sauf pour les message ou sujet), ça ne t'ai jamais arriver d'aller dans "couleur" et de voir qu'il y a des mots bizarre formée de chiffres et de lettres ? A mon avis, si ! Et bien c'est exactement la même chose pour le CSS donc si tu veux mettre un fond blanc se serais "#FFFFFF" ou rouge foncée (je t'en met une sorte) "#A81B1B". Pour t'y retrouver un peu va dans couleur, ouvre une roue de couleur et clique sur celle que tu veux, ça te mettra le "code" dans une petite barre ensuite tu copie/coller a l'endroit ou tu veux que la couleur change dans ton CSS...

En espérant t'avoir un petit peu aider

Sur ceux bonne soirée a vous !

[Invité]

Bonsoir,

border-radius fonctionne avec la plupart des navigateurs récents , mais on peut ajouter -moz-border-radius pour certaines version de mozilla .

Pour la taille, c'est la taille des cellules du tableau qu'il faut changer. Donc <td> devient <td width="XX">. Le XX doit être remplacé par un nombre de px ou un pourcentage.

Les couleurs fonctionnent bien chez moi . Au pire, on peut remplacer le nom par un code héxadécimal (voir liste).

Code:

<table width="100%" cellspacing="5" cellpadding="5"><tr>
<td width="33%"><div style="width:100%;border:2px solid darkred;height:360px;padding:0px;margin-right:0px;margin-top:0px;border-radius: 12px;-moz-border-radius: 12px;">
<font color="darkred"><div class="titres"><span style="font-size: 24px; line-height: normal"><strong>Liens Utiles</strong></span></div><br><br><br><br>
<a target="_self" href="http://arcadie.forumactif.pro/t3-reglement-arcadien"><span style="font-size: 18px; line-height: normal"><font color="darkred">Règlement Arcadien</font></span></a></font>
<br />
<br />
<br />
<br />
<a style="_self" href="http://arcadie.forumactif.pro/f7-bureau-de-recrutement"><span style="font-size: 18px; line-height: normal"><font color="darkred">Bureau de Recrutement</font></span></a>
<br />
<br />
<br />
<br />
<a target="_self" href="http://arcadie.forumactif.pro/t14-artisans-arcadiens"><span style="font-size: 18px; line-height: normal"><font color="darkred">Liste des Artisans</font></span></a>
<br />
<br />
<br />
<br />
<a target="_self" href="http://arcadie.forumactif.pro/f27-ce-soir-20h"><span style="font-size: 18px; line-height: normal"><font color="darkred">Ce soir 20h !</font></span></a></div></div></td>
<td width="34%"><div style="width:50%;float:center;border:0px solid black;height:300px;padding:0px;margin-right:0px;margin-top:0px;"><div class="titre">
<iframe width="400" height="300" src="http://www.youtube.com/v/JkoCkva-rBc" frameborder="0" allowfullscreen></iframe>
<br/><br/><span style="font-size: 14px; line-height: normal"><font color="darkred"><i>Proposée par Loki.</i></div></td>
<td width="33%"><div style="width:100%;border:2px solid #8B0000;height:360px;padding:0px;margin-right:0px;margin-top:0px;border-radius: 12px;-moz-border-radius: 12px;"><font color="darkred"><div class="titres"><span style="font-size: 24px; line-height: normal"><strong>Les Nouveautés</strong></span></div><br><marquee behavior="scroll" align="center" direction="up" scrollamount="1" scrolldelay="1" onmouseover="this.stop()" onmouseout="this.start()" height="300">
<span style="font-size: 15px; line-height: normal"><strong><br><center>...<br><br>La guilde vient d'atteindre son niveau 70 !<br> <br>Un pas de plus vers le sommet !
<br><br>... <br><br>Félicitations à Fouca et Wacho (Alias Drewry)<br> qui sont désormais des Arcadiens à part entière ! <br><br>... </strong></center></font>
</span>
</span>
</span>
</a>
</div>
</div></td>
</tr>
</table>

Cordialement.

[Yuen]

Un grand merci à vous deux, tout est en place !

Vous pouvez constater le résultat ici, si le cœur vous en dit : http://arcadie.forumactif.pro/

Merci beaucoup pour la rapidité de l'aide et les explications

Problème résolu !