Up Remember the OnirismDown Remember the Onirism
Forum d'entraide à la création de projets & de Libre service

Des onglets pour mes catégories

le 09.02.18 17:56

Type de commande


Onglets



Bonjour \o/ à vous ! Et merci d'avance à la personne qui prendrais en charge ma commande :P



" Formulaire



Forum : www
Version : PHPBB2
Élément(s) demandé(s) : Onglets
Maquette(s) : https://i.imgur.com/YXQWPhY.png
Description (peut remplacer la maquette ou la compléter) : width: 900px
Couleurs : #1f1a30 - #3f3463 - #261c45
Polices à utiliser :calibri
font-size: 14px;
text-transform: uppercase;
Acceptez-vous que le code finisse en LS ? OUI
Mode de rendu : Via le sujet
Autre chose à ajouter ? Le panneau d'affichage c'est l'onglet actif. Si besoin du template je peux évidemment le fournir.
avatar
Mon projet : [URL=ADRESSE][/URL]

Messages : 34

LS Graphiques : 0

LS Codage : 0

Songes : 105

Membre


le 15.02.18 13:29
Bonjour à vous o/

Ma commande est toujours d'actualité :P Ceci est un UP !
avatar
Mon projet : [URL=ADRESSE][/URL]

Messages : 34

LS Graphiques : 0

LS Codage : 0

Songes : 105

Membre


le 15.02.18 20:03
Coucou toi https://imgfast.net/
Aloooors alors, on en a discuté par MP donc voilà quelques modification HTML et CSS à faire https://imgfast.net/

HTML - remplace cette ligne par celle qui existe déjà -
Code:
<div id="conteneur_ongletsvo" style="display: block;width: 880px;background:#2b3658;padding:5px;">

CSS
Code:

.actif {
  color: white;
  font-family: 'calibri';
  font-size: 13px;
  text-transform: uppercase;
  background: #1f263e;
}
.ongletvo {
  cursor: pointer;
  padding: 5px;
  background: #283151;
  font-family: 'Calibri';
  text-transform: uppercase;
  font-size: 13px;
  color: white;
  position: relative;
  left: 74%;
}
.ongletvo div {
  text-align: center;
  padding: 0px;
  margin: 2px;
}

Et normalement ça sera bien plus joli comme ça https://imgfast.net/
avatar
Mon projet :

Messages : 77

LS Graphiques : 0

LS Codage : 0

Songes : 208

Spécialité : Codage/Graphisme

Membre


le 15.02.18 20:26
Merci c'est pas mal. Mais j'arrive pas du tout à avoir le visuel que ça devrais donné je penses. La ligne a modifié ça donnerais ceci :

Code:
<div id="conteneur_ongletsvo" style="display: block;width: 100%;text-align: center;position: relative;left: 29%;"><table><tr><td class="ongletvo"><div>Onglet 1</div></td><td class="ongletvo">Onglet 2</div></td><td class="ongletvo">Onglet 3</div></td></tr></table></div><div id="conteneur_categoriesvo"><!-- BEGIN catrow -->
<!-- BEGIN tablehead --><div class="categorievo">
avatar
Mon projet : [URL=ADRESSE][/URL]

Messages : 34

LS Graphiques : 0

LS Codage : 0

Songes : 105

Membre


le 15.02.18 20:29
Yup tu dois copier coller le HTML que je t'ai donné dans ton code actuel, en remplaçant de la première div jusqu'à la première table ^^
avatar
Mon projet :

Messages : 77

LS Graphiques : 0

LS Codage : 0

Songes : 208

Spécialité : Codage/Graphisme

Membre


le 15.02.18 20:46
Merci c'est pas mal comme ça. Par contre je vois pas la différence entre un onglet actif ou pas.
avatar
Mon projet : [URL=ADRESSE][/URL]

Messages : 34

LS Graphiques : 0

LS Codage : 0

Songes : 105

Membre


le 15.02.18 20:48
Tu peux changer le background dans .active si tu veux mettre une plus grande différence de couleur \o/ ! J'ai pris celles de ton croquis ♥️
avatar
Mon projet :

Messages : 77

LS Graphiques : 0

LS Codage : 0

Songes : 208

Spécialité : Codage/Graphisme

Membre


le 15.02.18 20:56
Parce que j'ai changer la couleur pour voir & ça me change le tout mais pas pour l'actif.
avatar
Mon projet : [URL=ADRESSE][/URL]

Messages : 34

LS Graphiques : 0

LS Codage : 0

Songes : 105

Membre


le 15.02.18 20:57
Ah pardon je l'ai mal écrit ! C'est dans le CSS, le .actif que tu peux changer le background de l'onglet actif ^^
avatar
Mon projet :

Messages : 77

LS Graphiques : 0

LS Codage : 0

Songes : 208

Spécialité : Codage/Graphisme

Membre


le 15.02.18 21:10
Code:
.actif {
  color: white;
  font-family: 'calibri';
  font-size: 13px;
  text-transform: uppercase;
  background: #21242b;
}
.ongletvo {
  cursor: pointer;
  padding: 5px;
  background: #9fa6af;
  font-family: 'Calibri';
  text-transform: uppercase;
  font-size: 13px;
  color: white;
  position: relative;
  left: 74%;
}
.ongletvo div {
  text-align: center;
  padding: 0px;
  margin: 2px;
}
C'est ce que j'ai fais comme tu peux voir & cela n'as rien changé. Et est-ce qu'on peux augmenter un peu l'espace entre l'onglet et le titre de la catégorie ?
avatar
Mon projet : [URL=ADRESSE][/URL]

Messages : 34

LS Graphiques : 0

LS Codage : 0

Songes : 105

Membre


le 17.02.18 23:59
Pardon du retard ;w; ! Pour changer le background de l'onglet actif et que ça fonctionne, ajoute simplement un !important derrière ta couleur sur la partie > .actif !

Et pour espacer un peu, remplace par ça >

Code:
<div id="conteneur_ongletsvo" style="display: block;width: 100%;text-align: center;position: relative;left: -25%;top: -11px;">

♥️
avatar
Mon projet :

Messages : 77

LS Graphiques : 0

LS Codage : 0

Songes : 208

Spécialité : Codage/Graphisme

Membre


Hier à 10:15
C'est parfait comme ceci. Je te remercies. ♥️
avatar
Mon projet : [URL=ADRESSE][/URL]

Messages : 34

LS Graphiques : 0

LS Codage : 0

Songes : 105

Membre


Hier à 13:27
Chouette \o/ ! C'est bon pour l'archivage https://imgfast.net/
avatar
Mon projet :

Messages : 77

LS Graphiques : 0

LS Codage : 0

Songes : 208

Spécialité : Codage/Graphisme

Membre



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

Partenaires