Page d'Accueil en Code ^^

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

Résolu Page d'Accueil en Code ^^

Message par MelissaD le Sam 2 Oct 2010 - 15:14

Bonjour à tous.

Je voudrai faire une annonce (page d'accueil) comme ce forum (avec des onglets, un cadre arrondi et des liens à coté) : http://elegance-design.forumactif.com/

Pourriez-vous me donner un code pour que je puisse le faire, svp ??

Merci à ceux qui prendront du temps pour m'aider Wink

Cordialement,
Mélissa.


Dernière édition par MelissaD le Sam 2 Oct 2010 - 18:27, édité 3 fois

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil en Code ^^

Message par Invité le Sam 2 Oct 2010 - 15:21

Bonjour,
Pour le tableau à onglet, on en parle dans ce sujet .

Ensuite, leur page d'accueil est divisée en un tableau à 2 lignes et 2 colonnes.
Dans la colonne de gauche est mis un tableau avec les liens. Les liens sont présentés ainsi:
Code:
<a href="url de la page" >nom </a>

Est-ce que cela vous met sur la voie?

Cordialement.

Invité
Invité


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

Résolu Re: Page d'Accueil en Code ^^

Message par MelissaD le Sam 2 Oct 2010 - 15:42

Bonjour, je vais essayer. Merci de ta réponse ^^

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil en Code ^^

Message par MelissaD le Sam 2 Oct 2010 - 15:49

[Désolée de faire un DP]

J'ai essayé mais je n'y arrive pas, le tableau est carré puis quand je veux changer la couleur il ne va plus du tout.
Aussi, j'ai essayé ce que tu as dis pour les liens, mais je ne trouve pas pour faire deux tableaux...(Je sais, je suis pas très douée en css =S)

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil en Code ^^

Message par Invité le Sam 2 Oct 2010 - 15:56

Re,

C'est pas grave, on va reprendre le choses doucement et une par une Very Happy. Pour arrondir les angles du tableau il faut utiliser :
Code:
-moz-border-radius:10px;
-webkit-border-radius: 10px;
border-radius:10px;
Vous voulez un présentation dans le même style? Avec les partenaires en haut, les liens a gauche et les onglet à droite?

Invité
Invité


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

Résolu Re: Page d'Accueil en Code ^^

Message par MelissaD le Sam 2 Oct 2010 - 16:02

Oui svp ^^

Les bords arrondis je met dans la Feuille de style css ??

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil en Code ^^

Message par Invité le Sam 2 Oct 2010 - 16:56

Re,

Avec ce CSS:
Code:
ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #4b0082;
  background: #d8bfd8;
  border: 1px solid #4b0082;
  cursor: pointer;
 -moz-border-radius-topleft: 20px;
      -moz-border-radius-topright: 20px;
      -webkit-border-top-right-radius: 20px;
      -webkit-border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;
}

.mon_onglet:hover{
  background: #d8bfd8;
-moz-border-radius-topleft: 20px;
      -moz-border-radius-topright: 20px;
      -webkit-border-top-right-radius: 20px;
      -webkit-border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;}         

.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #4b0082;
  background:#d8bfd8;
  border-top: 1px solid #4b0082;
  border-right: 1px solid #4b0082;
  border-left: 1px solid #4b0082;
  border-bottom: 1px solid #d8bfd8;
  cursor: pointer;
  margin-bottom: -1px;
-moz-border-radius-topleft: 20px;
      -moz-border-radius-topright: 20px;
      -webkit-border-top-right-radius: 20px;
      -webkit-border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;}           
.clear{
  clear: both;
}
.mon_contenu{
  color: #4b0082;
  background: #d8bfd8;
  border: 1px solid #4b0082;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
    border-radius:10px;
  padding: 1px;
        margin-left: -10px;         
}
#mes_contenus, #mes_onglets{
  width: 500px;
}

.titres{
background-color:  #d8bfd8;
 border: 1px solid #4b0082;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
    border-radius:10px;
text-align:center;
padding:5px;}
et ce message en page d'acceuil:
Code:
<table cellspacing="1" width="100%"><tr><td colspan="2" rowspan="1" class="titres" >partenaires</td></tr>

<tr><td  colspan="2" rowspan="1" align="center" valign="top">
les liens des partenaires</td></tr>

<tr><td class="titres" colspan="1" rowspan="1" width="35%">Navigation</td>
<td class="titres" colspan="1" rowspan="1">onglets</td></tr>

<tr><td  colspan="1" rowspan="1" align="center">lien 1 <br /> lien 2<br/> lien 3 <br/></span></td>
<td  colspan="1" rowspan="1" align="center"><script src="http://pmsc.free.fr/J04/10912150254.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></ul>
</span></td></tr>
</table>
Est-ce que la structure est bonne?
Cordialement.

Invité
Invité


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

Résolu Re: Page d'Accueil en Code ^^

Message par MelissaD le Sam 2 Oct 2010 - 18:02

Oui, merci beaucoup c'est magnifique comme ça ! =D

Le sujet est résolu Wink merci encore =)

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil en Code ^^

Message par MelissaD le Sam 2 Oct 2010 - 18:15

[Désolée du DP]

Il faut changer quoi comme codes couleurs pour changer la couleur des fonds (mauve en brun clair) ??

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil en Code ^^

Message par Invité le Sam 2 Oct 2010 - 18:26

Pour remplacer la couleur de fond il faut agir a plusieurs endroit dans la CSS. En fait, partout où vous voyez:
Code:
background: #d8bfd8;
remplacez le code couleur par celui que vous voulez Wink , pour brun clair, peut etre que #DEB88 pourrait convenir. Il y a toute une palette de couleur en cliquant ici.

Cordialement.

Invité
Invité


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

Résolu Re: Page d'Accueil en Code ^^

Message par MelissaD le Sam 2 Oct 2010 - 18:27

Merci beaucoup.

Sujet résolu Wink

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD 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