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 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

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é 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.
Anonymous

Invité
Invité


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

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

Message par MelissaD Sam 2 Oct 2010 - 15:42

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

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 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

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é 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?
Anonymous

Invité
Invité


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

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

Message par MelissaD Sam 2 Oct 2010 - 16:02

Oui svp ^^

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

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é 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.
Anonymous

Invité
Invité


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

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

Message par MelissaD Sam 2 Oct 2010 - 18:02

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

Le sujet est résolu Wink merci encore =)
MelissaD

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 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

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é 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.
Anonymous

Invité
Invité


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

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

Message par MelissaD Sam 2 Oct 2010 - 18:27

Merci beaucoup.

Sujet résolu Wink
MelissaD

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

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum