cobalt vale
le code css
.action {
margin-left: 23%
}
.list_postulant{
background-color: blue ;
color: #aeb2b7;
padding: 1%;
font-size: 1.2em;
margin-left: 14px;
margin-top: 10px;
border-top: 30px;
border-radius: 10px 10px 10px 10px;
width:80%;
}
gaunt yoke
tu veux que visuellement ca donne quoi ?
la margin left en % c'est vraiment pas bon ça
padding: 1% pareille
gaunt yoke
Pour les largeur (width) oui
cobalt vale
mais la jsp pk y'en a 4 qui ont pop
gaunt yoke
pour les margin, padding c'est une vraie connerie
gaunt yoke
px, em
cobalt vale
ok
gaunt yoke
mais 1% en desktop c'est pas 1% en mobile
gaunt yoke
fais moi une dessin paint de ce que tu veux plz
gaunt yoke
Yes bah en gros tu auras ça
<div class="content-item">
<div class="item">My item</div>
<div class="item">My item</div>
<div class="item">My item</div>
<div class="item actions">
<i class="...">eye</i>
<i class="...">eye</i>
<i class="...">eye</i>
</div>
</div>
.content-item {
display: flex;
align-items: center;
justify-content: space-between;
}
.content-item .item {
border-right: 1px solid #fff;
padding: 12px 16px;
}
.content-item .item:last-of-type {
border-right: 0;
}
de tete ca devrait etre quasi bon
et du cp tu cibleras le .item.action pour styliser que la partie avec les icons
cobalt vale
ok je vais test merci
ça marche pas la partie pour stylisé les icon
en gros je mets margin-right: 20px
ça focntionne pas
j'ai essayé en mettant color: red ça fonctionne pas non plus
@gaunt yoke
cobalt vale
.content-item {
background-color: blue ;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 10px 10px 10px 10px;
}
.content-item .item {
border-right: 2px solid black;
padding: 10px 50px;
}
.content-item .item:last-of-type {
border-right: 0;
}
.item.action {
color:red
}
quartz thunder
j'ai rien compris
hollow brook
Comment je peux faire en sorte que mes 2 h1 soient alignés horizontalement ? https://gyazo.com/41744f61e385206424eac8497a0f03ac
gaunt yoke
tu les fous en inline
hollow brook
display ?
gaunt yoke
oui
hollow brook
ok, merci
void anvil
@stark axle
gaunt yoke
Du coup c’est plus #demande-de-dev
et si c’est que pour un panel admin https://getbootstrap.com/docs/4.0/examples/ prend un truc déjà fait sur la doc de boostrap @potent linden
potent linden
@gaunt yoke Ouais je fais ça dans demande merci et j'ai pas le temps de le faire.. Pour ça je cherche quelqu'un
potent linden
Bonjour je souhaiterai refaire le input recherche avec les option comme sur discord pour mon site vous savez comment faire et vous pouvez me guider ? ( En haut a droite )
gaunt yoke
c'est un dropdown
pour le faire c'est simple, tu auras 1 élément parent par exemple .search
Dans ce .search tu auras ton input et ta div .dropdown
Quand tu vas focus ton .input tu vas aller cibler l'élement qui suit en css (donc le .dropdown) et par exemple faire ton
coarse spire
opacity: 1
pour qu'il soit visible
potent linden
Ok merci et comment je fais le de: mention: ect ?
@gaunt yoke Tu sais m'aider PV a le faire ?
gaunt yoke
No occupé
Bah c'est du css simple après c'est juste une liste ou des items que tu vas customiser
potent linden
Ah...
gaunt yoke
C’est pas compliqué essaye au moins et au fur à mesure tu y arriveras
c’est pas en te le faisant que tu vas apprendre
steady verge
Yo, je comprends pas pourquoi quand je clique sur mon a le lien ne s'ouvre pas :
(je peux uniquement l'ouvrir via clique droit + afficher dans une nouvelle page)
boreal sage
Bonswaaar, je m'arrache actuellement les cheveux sur du Bootstrap, et j'arrive pas à centrer un simple formulaire 😭
<div class="container mt-3">
<div class="row">
<div class="col-2">
<img src="img/logo.webp" width="200" />
</div>
<div class="col">
<h1 class="title ml-5 mt-3">Connexion</h1>
</div>
</div>
<hr>
<form method="post" action="componements/loginController.php" class="">
<div class="form-group w-50">
<div class="input-group mt-5 mb-2">
<div class="input-group-prepend">
<span class="input-group-text">Nom d'utilisateur</span>
</div>
<input type="text" class="form-control w-50" placeholder="JeanDupont">
</div>
<div class="input-group mt-2">
<div class="input-group-prepend">
<span class="input-group-text">Mot de passe</span>
</div>
<input class="form-control w-50" type="password" placeholder="••••••••••">
</div>
<input class="btn btn-success mt-2 float-right" type="submit" value="Se connecter">
</div>
</form>```mentionnez moi avec la réponse svp
warped quartz
Bonjour à tous,
J'ai un petit soucis que je n'arrive pas à régler. Le problème c'est que ma Navbar à un padding top de 5rem, et quand je souhaite le modifier pour changer cela, j'ai l'impression que aucune sauvegarde n'as été effectué quand je réactualise mon site alors que j'ai bien enregistré les modifications effectué.
Si je pourrais avoir une aide s'il vous plait, ce serai au top !
Merci d'avance à vous ! 🙂
gaunt yoke
tu la cibles bien ? Tu utilises les bons sélecteur ? On peut avoir un aperçu en ligne ou du code ? Ce serait + simple
warped quartz
Je travail en local, mais je peux te faire un partage d'écran avec une explication plus détaillé si tu le souhaite
warped quartz
Quand je met ce que tu viens de me dire, rien ne change. C'est de la que je ne comprend pas, j'ai comme l'impression que cela ne s'enregistre pas
gaunt yoke
Tu es bien dans le fichier start-template.css ?
warped quartz
Oui
gaunt yoke
Donc là si tu refresh tu as toujours le padding-top: 5em sur le body ?
warped quartz
Oui c'est ça
gaunt yoke
Juste pour être sûr ctrl shift R pour vider le cache avec, et pour voir bien la diff met juste un background: red au body
warped quartz
Capture d'écran "Inspecter l'élément" de Chrome
warped quartz
Ah bah j'ai vider le cache et apparemment c'est bon
gaunt yoke
ouais voilà
warped quartz
C'est ça, c'était le cache tout simple mdr, merci de ton aide 😉
gaunt yoke
Np bon courage
warped quartz
Merci, je reviendrais vers toi ultérieurement si tu n'est pas occupé
gaunt yoke
Yes no soucis
void anvil
Oui je confirme le cache c'est bien mais quand tu es en train de développer ça peut devenir une horreur 
J'utilise beaucoup cette extension https://chrome.google.com/webstore/detail/clear-browsing-data/bjilljlpencdcpihofiobpnfgcakfdbe
boreal sage
@gaunt yoke Tu peux check mon problème juste au dessus stp ? x)
gaunt yoke
Lequel ??
boreal sage
gaunt yoke
Juste comme ça c’est compliqué, push sur git que je puisse run en local aussi pour voir et tester
gaunt yoke
Ok dès que j’ai finis les courses je check
boreal sage
ok merci
strong lynx
@void anvil f12 => network => disable cache au pire ^^
gaunt yoke
Yes mais me le faudrait en entier que je puisse l’ouvrir directement sans devoir enlever ou rajouter des trucs please
steady verge
wise hamletBOT
Citation de O S M O S#8183 posté dans #aide-frontend
steady verge
Du coup personne ne voit ? 😢
steady verge
J'ai l'impression que dès que je créer mon a après le chargement de la page alors il ne veut plus l'ouvrir lors du clic
steady verge
En solution provisoire je suis passé par : ' a_user.attr('onclick', "window.location.href='/"+slug+"'");'
warped quartz
Bonjour à tous !
Oups, me semble qu'il y a surement un petit problème... mais... je ne le trouve point 😦
Ma NavBar descend quand je retire le fixed-top, mais quand je met le fixed-top, le message "connexion réussi" passe en dessous de la Navbar :c
slim bridge
@warped quartz dit moi quel resultat tu veux obtenir.
warped quartz
@slim bridge, salut !
J’aimerai que mon alerte qui est verte « Vous êtes maintenant connecté » soit en dessous de ma barre de navigation gris foncé, et qui elle même soir collé en haut
warped quartz
Reçu
austere lark
wow
steady verge
Lorsque je clique sur mon span, mon card ne redevient pas visible, Quelqu'un aurait une idée du pourquoi ? ```js
$('span.badge').click(function( event ) {
var card = $( $(this).data('target') );
silver dome
if ( card.hasClass('visible') ) {
card.addClass('invisible').removeClass('visible');
console.log('invisible');
}
else
{
card.addClass('visible').removeClass('invisible');
console.log('visible');
}
});```
enlève le .data('target')
tu fais juste un const card = $(this)
et console.log(this) pour voir si c'est bien l'élement, meme si normalement oui
void anvil
Bonjour, est-ce que quelqu'un pourrait m'aider s'il vous plait ? J'aimerais faire en sorte que lorsque l'on arrive sur mon site, qu'il faille scroll une seule fois vers le bas pour scroll jusqu'à une section, et ainsi de suite.
J'ai fais des tests en js avec element.scrollIntoView();, mais je ne sais pas comment faire pour l'appeler quand on scroll, ni comment le "diriger" vers l'élément
gaunt yoke
Tu peux le faire en css sinon ce sera plus simple, tu le fais juste avec des ancres (#id) dans ton url
void anvil
En fait j'ai une barre de navigation qui dirige vers les ancres sur le site, mais j'aimerais aussi que si je scroll vers le bas, cela fasse comme si j'avais cliqué sur le bouton "accueil", puis "collection", ...
gaunt yoke
Ahhh ok ! Il faut que tu trigger l’event du scroll et en fonction de sa position tu l’amènes a telle ou telle ancre
Tu peux faire ça avec un scrollSpy par exemple pour détecter la position du scroll en fonction de son ancre
Look sur codepen.io tu dois avoir bcp bcp d’exemples de ça
void anvil
Okay je vais check merci
void anvil
J'ai trouvé
Pour ceux que ça intéresse :
html {
scroll-snap-type: y mandatory;
}
Et
#ID {
scroll-snap-align: start;
}
pour "attacher" l'élément au scroll
hollow brook
Petite question : est-ce que cette ligne est bonne pour set le pourcentage de largeur de l'élemenet #loading-progress ?
document.getElementById('#loading-progress').style.width = `progress + "%"` ```document.getElementById('#loading-progress').style.width = `${progress}%`
la oui
sinon ca aurait donné : 20+"%"
hollow brook
ah
gaunt yoke
t'es deja dans un string avec ton `` pas besoin de faire de la concaténation par les +
ni d'ajouter du coup les ""
stone verge
Yo ! j'aimerais aficher des element quand mes input ne sont pas vide, et si il le sont une erreur s'affiche voici ce que j'ai fait: (qui ne marche pas du tonnere car il suffis qu'un input soit remplie pour que sa marche)
stone verge
edit: enfaite sa marche ! sauf quand le première element est remplie
errant cypress
@stone verge Tu veux afficher quoi dedans ?
errant cypress
function Stage(subject, etape) {
const inputs = $(":input");
if (inputs.length == "") {
document.getElementById(etape).style.display = "block";
document.getElementById(subject).style.display = "none";
}
else {
document.getElementById(error1).style.display = "block";
return false
}
}
Le front n'est pas mon côté préféré mais de base j'aurais fais un truc comme ça puis j'aurais adapté en fonction
stark axle
stop les var 😭
errant cypress
rooh 😮
fluid nymph
Salut, j'ai un petit problème 😅
.navbar{
background-color: black;
height: 4em;
border-style: solid;
border-color: #1f4396;
border-bottom-width: 4px;
border-top: 0;
border-left-width: 0;
border-right-width: 0;
position: fixed;
z-index: 10;
}
.navbarContent {
width: 80em;
color: white !important;
font-family: "DINNextLTPro-Regular" !important;
}
.navbarLeftContent img {
width: 7em;
}
.navbarLink {
color: white;
padding-top: 1.4em;
}
.navbarLink:Hover {
color: #e5e5e5;
text-decoration: none;
}
.navbarButton {
color: white !important;
font-family: "DINNextLTPro-Condensed" !important;
display: inline-block;
background-color: #555555;
margin-top: 1.4em;
padding-left: 0.2em;
padding-right: 0.2em;
text-align: right;
}
.navbarButton img {
width: 1.4em;
margin-right: 0.2em;
}
.playerProfilDropdownDiv {
display: none;
flex-direction: column;
}
.dopdownLink {
color: white;
}
.dopdownLink:Hover {
color: #e5e5e5;
text-decoration: none;
}
<div class="container-fluid align-self-center d-flex justify-content-center navbar">
<div class="navbarContent d-flex">
<div class="navbarLeftContent col-md-4 d-flex justify-content-around">
<img src="assets/images/r-club-beta-logo.png">
<a class="navbarLink" href="profil.php">PROFIL</a>
<a class="navbarLink" href="garage.php">GARAGE</a>
<a class="navbarLink" href="banque.php">BANQUE</a>
<a class="navbarLink" href="news.php">NEWS</a>
</div>
<div class="navbarRightContent ml-auto">
<div class="navbarButton">
<img src="<?=$steamprofile['avatar']?>"><a class="navbarLink" href="#" onclick="playerProfilDropdown()">Gordon Freeman</a>
<div class="playerProfilDropdownDiv" id="playerProfilDropdownDiv">
<a class="dopdownLink" href="index.php">Mon profil</a>
<a class="dopdownLink" href="notifications.php">Notifications</a>
</div>
</div>
<div class="navbarButton"><a class="navbarLink" href="settings.php"><i class="fas fa-cog"></i></a></div>
</div>
</div>
</div>
voilà voilà x)
fluid nymph
J'ai trouvé une "solution"
.playerProfilDropdownDiv {
display: none;
flex-direction: column;
position: absolute;
background-color: #555555;
text-align: right;
margin-left: -0.24em;
padding-left: 3em;
padding-right: 0.15em;
}
yop, je suis en train de développer des boites modales (en hidden) et j'aimerais gérer le moment où on la fais apparaître, je pensais à use jquery en modifiant les classes mais vous avez d'autres manières plus simple ou plus efficace, en gérant un effet aussi dessus (de fade ou autres ^^) merci ^^
gaunt yoke
tu vas utiliser jquery juste pour faire des modals ? car c'est très lourd jquery c'est quand meme à éviter un max
errant cypress
je pensais à faire ça :
$("#ex").click(function(){
$("#ex").removeClass("hidden").addClass("visible");
})
truc dans le genre
bah j'ai un peu la flemme de faire des document.getElementById puis faire un .style.visibilty = "hidden" etc
gaunt yoke
bah tu fais juste un
getElement.classList.add('class')
et tu as gagner en performance
errant cypress
j'ai jamais use ça, je vais voir une doc ^^
gaunt yoke
Ah oui alors, car utilisé jquery sans maitrisé le vanilla c'est pas une bonne manière
errant cypress
je maitrise js ^^
gaunt yoke
jquery c'est le diable 💢
je maitrise js ^^
et tu ne connais pas le classList ?
attention aux mots utilisés "maitriser" c'est quand même un grand mot je pense
errant cypress
j'en ai jamais eu utilité jusqu'à présent du moins
j'ai toujours use jquery après l'apprentissage de js, je trouve ça plus logique, mais c'est que mon avis ^^
et pour le soucis d'opti de jquery fin que c'est lourd, j'ai un tout petit site perso, donc ça passe je pense
gaunt yoke
Non la logique c'est d'utiliser le vanilla si c'est pour faire des trucs aussi simple, sinon tu surcharge bêtement ton site, petit ou pas
jQuery c'est un truc de fainéant, qui est dépassé, à la limite tu as une autre lib, qui est bcp bcp moins lourde
si tu veux juste le confort sur le DOM
mais faut je retrouve le nom
errant cypress
Je comprends, mais j'aime bien le diable de jQuery ;))
gaunt yoke
Tant pis ^^
errant cypress
J'opterais pour autre chose quand j'aurais un gros soucis d'opti ^^
gaunt yoke
on appelle ça la Dette technique
Sinon pour ton click tu peux tout simplement faire un toggleClass en ajoutant et supprimant juste la class active
errant cypress
Ouais pas bête
gaunt yoke
Mais la logique est pas bonne, car si tu veux + d'1 modal sur ta page, tu vas devoir redéfinir un code js pour l'ouvrir
Tu devrais penser le code pour gérer ce cas, le rendre opti
errant cypress
bah j'avais pensais à un truc mais pas très propre
c'est en gros à un clic d'une icone ça ouvre la modale et ferme toutes les autres
gaunt yoke
Tu peux te dire que au onClick d'un élément, tu viens récupérer un data-id="" (un attribut que tu ajouteras sur le bouton), et ta modal aura elle aussi cet ID en commun
et comme ça au click, tu vas venir récupérer le data-id="" de l'élément cliqué, et aller ouvrir cet ID (donc la modal en question)
errant cypress
et comment je le récupère je vois pas trop
comme ça ?
var dataId = $(this).attr("data-id");
et du coup vu que je récup le data-id comment je gère le moment ou la modale s'ouvre ?
je refais avec mes class hide etc ?
en faisant avec le data-id
gaunt yoke
Yes, tu vas fais un $(dataId).toggleClass('active') par ex
vérifie avant que tu es bien quelque chose dans ce dataId
et si tu as bien mis la meme chose dans data-id sur le boutton cliqué et sur l'id de la modal ça devrait etre bon
errant cypress
tu m'as appris un truc, je connaissais pas ce data-id, j'en ai jamais entendu parlais xD
errant cypress
yep j'ai test en faisant une alerte
mais du coup faut que je fasse ça pour chaque modale
gaunt yoke
Bah chaque bouton juste
maintenant tu as juste sur le click du bouton pour ouvrir et celui pour fermer
mettre un data-id
tu appelles une fonction en JS
errant cypress
yep mais j'ai pas fais le truc pour fermer donc je le ferais après
mais j'allais tout faire en jquery, genre la close tata.hide() et puis basta mais je vais y re-réflechir ^^
gaunt yoke
yep mais j'ai pas fais le truc pour fermer donc je le ferais après
tu en as pas besoin justement
la fonction gère les 2 cas
tu as juste sur un bouton a repasser le click, avec dans ce bouton un data-id
et si il a deja la class active, il va l'enlever et donc fermer la modal
errant cypress
wow j'avais pas penser à ça, je le ferais demain merci ^.^
par contre pour l'ouverture de ma modale comment je précise l'id de ma modale ?
car là l'id de ma modale n'y est pas, et je vois pas comment :x
gaunt yoke
en gros tu vas avoir un
Quand tu vas cliquer sur ton button ou dans l'html tu as mis
<div data-id="modal-one" />
tu vas venir avec ton this, récupérer l'attribut data-id, tu le stock, tu le log pour vérifier que tu le reçois bien
Si tu le recois pas bien, log ton this et regarde ce que tu as dedans
Une fois que tu l'as tu vas faire ton
$(dataId).toggleClass('active')
sauf que j'ai mon data-id de mon click sur mon icone qui lui doit ouvrir ma modale
du coup ça fais rien vu que ça le fais sur l'icone
gaunt yoke
Bah ça change rien enfaite peu importe ou tu fais ton event de click, tout ce qu'il faut c'est que l'élément sur lequel tu fais ton event click contienne l'attribut data-id="id"
pour le récupérer, que ce soit un i, div, img ils ont la meme structure
quasi
gaunt yoke
Show me
errant cypress
$("#pres").click(function(){
var dataid = $(this).attr("data-id");
$(dataid).toggleClass("visible");
})
<tr class="div_tr">
<td><img src="https://img.icons8.com/cotton/64/000000/developer.png" class="img_td" id="pres" data-id="1" /></td>
<td><img src="https://img.icons8.com/color/48/000000/about.png" class="img_td" id="about" data-id="2" /></td>
<td><img src="https://img.icons8.com/color/48/000000/resume.png" class="img_td" id="cv" data-id="3" /></td>
</tr>
</div>
</div>
<div class="modal-pres hide" id="modal-pres" data-id="1">
</div>
Non tu n'as pas compris
errant cypress
je vois bien
gaunt yoke
Si ton event click est sur l'image par exemple ça
<img src="https://img.icons8.com/cotton/64/000000/developer.png" class="img_td" id="pres" data-id="1" />
tu lui passes le data-id 1
du coup ta modal plus bas doit avoir l'id en "1"
pas besoin du data-id sur la modal
<div class="modal-pres hide" id="1">
</div>
et d'ailleurs dans le click my bad mais ce sera
$(`#${dataId}`).toggleClass("visible");
a voir comment il te le renvoie mais pas sur qu'il te l'envoie avec le # dedans, log le pour etre sur
gaunt yoke
Bah pour le click yes tu appelles la meme fonction
juste la tu event sur un id
tu devrais event sur un nom de class
quartz thunder
Bon Enzo viens bosser la
errant cypress
ok nickel merci ^^ je continue demain, je reviens vers toi si je galère comme un chancre mais merci bien !
errant cypress
yop, j'use le fadeIn("slow") de jquery après un toggleClass , et ça ne fonctionne pas, pourtant les exemples font pareils xD
$(`#${dataid}`).toggleClass("visible").fadeIn("slow");
le fadeIn c’est pas jqueryUI ?
errant cypress
https://api.jquery.com/fadeIn/ je crois pas
gaunt yoke
Ah yes, mais pourquoi tu fais pas ton fadeIn en css direct à l’ajout de la class visible ??
errant cypress
j'ai vu ça sur jquery je me suis dis que j'allais testé
mais je vais le faire en css vu que le diable veut pas me le faire xDD
gaunt yoke
haha dois juste avoir un truc à déclarer avant sur le fadeIn, mais en vrai là pour le coup vu que tu uses une class tu peux juste le gérer en css je pense ce sera même plus simple tout sera regroupé sur ta class
sharp pendant
http://prntscr.com/slzomm
Salut, je me pose une question. J'ai une barre de navigation sur le côté en position fixe, avec 3 blocks à l'intérieur.
Le bloc vert et le bloc bleu ont tous les deux une taille fixe, sachant que la taille globale de la navbar correspond à la hauteur de l'écran., y a-t-il un moyen de set la hauteur du bloc rouge pour qu'elle prenne toute la place automatiquement ?
J'ai essayé un height : auto; sur ce bloc rouge comme montré sur le schéma, et ça n'a pas l'air de fonctionner.
hollow moat
salut, j'te conseille d'utiliser peut être les flexbox pour c'que tu veux faire
moi ça m'a beaucoup aidé dans tous mes projets
gaunt yoke
Yes tu peux soit flexbox en column et space-between en mettant ton élément height a 100% et les autres en taille auto en fonction du texte
Sois tu gardes tes positions fix sur le header et footer et sur le main rouge tu viens height: calc(100% - xx)
x = valeur du footer + header
mais je te conseille flex
sharp pendant
D'accord, c'est vrai que j'ai pas trouvé l'utilité dans ce cas précis, mais je vais les utiliser pour voir ce que ça peut donner, merci !
sharp pendant
Effectivement, c'est bien mieux maintenant 🙂
gaunt yoke
L’autre c’est un mémo celui ci c’est plus un exo, les deux se marient bien ^^
errant cypress
Sympa le level 24 xD
https://gyazo.com/e7c579113963c8338669d8ac9dd184d9
stark rapids
errant cypress
le diable
dusky skiff
j'adore ce truc c'est trop mignon mdr
gaunt yoke
Il y a ça aussi de mémoire http://www.flexboxdefense.com/, moins stylé mais sympa 😛
dusky skiff
Ah oe
Ca à l'air pas mal aussi
Mais les grenouilles sont beaucoup plus mignonnes :)
gaunt yoke
Haha yes !
errant cypress
Hello ! Est-ce possible de faire une transition pour qu'une font-weight ai une transition (du textarea au textarea:focus) j'ai essayé une transition mais c'est toujours aussi brutal, je pense m'être trompé mais je sais pas si c'est possible déjà ^^
je le trouve saccadé ^.^
gaunt yoke
en testant, juste le transition: .3s ease-in par exemple sur l'input fonctionne avec le font-weight
errant cypress
ça a l'air de mieux marcher mais y a toujours vers la fin de la transition une saccade bizarre
c'est mieux mais tu vois à la fin ?
ça saccade bizarrement je trouve
textarea:focus {
outline: none;
border-bottom: 2px solid #03BCFC;
border-radius: 2px;
transition: .3s ease-in;
font-family: 'Raleway', sans-serif;
resize: none;
overflow: hidden;
color: #8b8b8b;
font-weight: bold;
}
okay je test
C'est mieux merci ! Je vais peaufiné tout ça ! Sinon la mise en forme est comment ?
gaunt yoke
c'est cool ça me fait penser à du material design
errant cypress
je m'inspirais du design que tu avais fais ^^
errant cypress
^.^, merci en tout cas ^^
dusky skiff
Hey ! Je n'arrive pas à aligner à la fois verticalement et horizontalement mon texte !
Voici mon css
body{
background-color:#708090;
font-size: 18px;
font-weight: 300;
position: center;
top: 50%;
transform: translateY(-50%);
}
le top: 50% me fait mal
dusky skiff
je veux tout aligner sur la page donc c'est normal pour le body
AH x)
Le mieux c'est avec flex mais j'ai pas réussi :/
gaunt yoke
body {
display: flex;
align-items: center;
justify-content: center;
}
Merci :)
gaunt yoke
vire juste ton transform et top
dusky skiff
oui
gaunt yoke
heureusement qu'il y a flex maintenant 
c'était moins sympa avant
dusky skiff
Je vois ça x)
Avec un ami on a réussi à mettre en place la connexion par discord avec l'0auth2
gaunt yoke
nice
dusky skiff
Du coup là je m'occupe du css
gaunt yoke
good luck pour le projet, on a hate de voir ça 🙂
dusky skiff
Merci :)
Pour l'instant quasi tout fonctionne
Mais c'est très moche :lul:
Ah bizarre ça n'a pas fonctionné 🤔
Pourtant j'ai bien mis ce qu'il faut :/
gaunt yoke
html, body { min-height: 100% }
gaunt yoke
c’est quoi le rapport 🤔
dusky skiff
Ah non :'(
gaunt yoke
le code il va dans le css
dusky skiff
Je comprends pas
gaunt yoke
met juste height: 100% et pas min alors
dusky skiff
Ok
gaunt yoke
vérifie que ce soit pas le cache aussi
dusky skiff
Bonsoir, j'aimerais mettre mon site en responsive, et comme vous pouvez le voir sur cette page
https://wailronefirelion.cf/inventaire.php
Le site n'est pas du tout adapté à la version mobile :/
Pourriez vous m'aidez ?
Voici le code :
Désolé, j'ai été obligé de le mettre en fichier
Et le css
slim bridge
je vait regarder 🙂
@dusky skiff tu connais les media queries ?
ah j'avais pas vue le lien c'est ton site ?
dusky skiff
Je suis là Désolé
Non je ne connais pas @slim bridge
Et Oui le lien c'est mon site
slim bridge
ok alors tu as 2 solution qui s'offre à toi si tu veux pas trop te prendre la tête utilise bootstrap la documentation est très simple à comprendre sinon :
http://css.mammouthland.net/css3/media-queries.php
ça explique rapidement ce que tu dois comprendre pour ton site
si tu as des questions hésite pas
après je peut toujours t'expliquer en voc si tu le souhaite
dusky skiff
Je suis dispo en VOC demain
Mais avec bootstrap je peux faire comment ? Je ne comprends pas
Parce-que la c'est pas terrible 😂
sharp pendant
D'ailleurs, en parlant de site responsive, ça vous arrive souvent d'utiliser des breakpoints sur la max-height ou vous le faites uniquement sur la width.
J'ai une barre de navigation latérale et une topbar en fixed. Le problème, c'est que j'ai l'impression de devoir tout contrôler (hauteur et largeur) pour pouvoir afficher correctement les éléments...
Joli @dusky skiff 😂
sharp pendant
Les media queries, pour spécifier quand adapter les éléments
gaunt yoke
Breakpoints c'est la dimension a laquelle tu vas avoir ta "coupure"
DLT tu renseignes des dimensions en hauteur ?
quand tu dev en desktop
gaunt yoke
But why
Si c'est pour faire du fullscreen ok, mais dans ce cas la min-height
mais si tu veux pas faire de fullscreen ça n'a aucun intérêt
tu peux laisser en auto et ça va s'adapter a ton contenu
si tu veux espacer tu mets juste du padding
sharp pendant
Les deux blocks bleus ont une taille définie en hauteur
http://prntscr.com/snnny4
A un certain moment, je vais bien devoir etaler ma nav sur touta la largeur de l'écran pour que le texte à l'intérieur des blocks puisse être visible
Donc, j'applique le côté responsive en prenant en compte aussi bien la hauteur (pour étaler la navbar gauche sur la largeur de l'écran), et la largeur (car la largeur de l'espace blanc sera trop petite pour que les données puissent être visibles)
(en créant, par exemple, un bouton pour afficher la navbar d'une façon différente)
Donc, faut que je joue aussi bien sur le côté responsive en hauteur qu'en largeur, en ajoutant des breakpoints à différents niveaux ? @gaunt yoke
gaunt yoke
Re sorry j'étais pas là
je comprend pas le truc a gauche c'est quoi
en jaune et bleu
dusky skiff
Salut, j'aimerais savoir comment je pourrais faire pour que quand je clique sur ce bouton :
https://gyazo.com/e60b46ec7454fde1a3fc95c9c0367fc6
Ca ouvre une fenetre comme celle-ci
https://gyazo.com/b4adee497159bf0dc956961d244fc4e8
( Je veux simplement que ça affiche un bouton déconnexion pas l'email etc )
c'est un bouton tout prêt déjà
il est cliquable plus qu'à définir la href
errant cypress
faut faire une modale
tu peux le gérer en js
moi j'ai fais ça en jquery
ah un bouton
quartz thunder
je crois qu'il veux juste un dropdown vu la forme de son exemple 🤔
errant cypress
tu le mets en hidden
ouais fin son exemple moi je vois plutôt une modale, mais ouais pas bête
bah un dropdown ouais
dusky skiff
ok merci je vais me renseigner ;)
dusky skiff
@errant cypress J'ai fait ça
echo "<button style=\"height:40px; margin-top:-2px;\" class=\"w3-bar-item w3-button w3-right w3-hover-red\"><img class=\"avatarrond\" style=\"width:30px; height:30px\" src=".$_SESSION['avatar']."></img><h1 class = \"connectext\"> ".$_SESSION['pseudo']."</h1></button>
<div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\">
<a class=\"dropdown-item\" href=\"#\">Déconnexion</a>
Mais ça ne fonctionne pas
Désolé c'est le bordel c'est du php 😅
Je vais mieux ordonner ça
errant cypress
pourquoi tu fais pas ton dropdown normal et tu mets ton déco href deco.php dedans
dusky skiff
comment ça ?
errant cypress
bah
errant cypress
je crois qu'un dropdown il gère l'ouverture tout seul en html avec je sais plus quel attribut
et à l'intérieur tu fois ton truc déconnexion
je l'avais fais moi
attend je retrouve le truc
errant cypress
ouais je l'avais gérer en js à l'ancienne
dusky skiff
du coup je peux faire comment :/
errant cypress
j'avais pris la sidebar w3
mais le dropdown je sais pas si ils en ont un
ahh sii
errant cypress
J'avais fais comme ça
<div class="w3-bar-item w3-button" onclick="myAccFunc()">
Liens utiles ∨</div>
<div id="demoAcc" class="w3-hide w3-white w3-card-4">
<a href="#" class="w3-bar-item w3-button">Site Lartaxx</a>
<a href="#" class="w3-bar-item w3-button">Site A-Développement</a>
</div>
</div>
function myAccFunc() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-blue";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className.replace(" w3-blue", "");
}
}
Bah c'est le dropdown de bootstrap quoi
errant cypress
ça date mais ça fonctionne chez moi
errant cypress
c'est sympa ouais
dusky skiff
ok ça fonctionne merci ;)
enfin dans l'ensemble
c'est nickel
mais j'ai un problème mdr
mon logo en bas se décalle wtf
Comment je peux fixer l'image au fond ?
Y'a moyen ?
ah j'ai trouvé je crois
Ah non x)
Vous êtes là ?
:'(
dusky skiff
le problème c'est que j'ai pas mis background image
errant cypress
code ?
dusky skiff
Y'a un léger problème @gaunt yoke https://gyazo.com/74a4ff7d80c02b02d72000f3397fed5c
Ca fait pas comme avant du tout :'(
code ?
@errant cypress de l'image ou du bouton ?
errant cypress
les deux
dusky skiff
ok
<div class="w3-orange w3-center">
<img src="https://media.discordapp.net/attachments/695602360529059871/712220168041791538/site_bann.PNG?width=1442&height=407"
style="width:50%; background-attachment: fixed;">
</div>
L'image
<div id="demoAcc" class="w3-hide w3-right w3-black w3-card-4">
<a href="#" class="w3-bar-item w3-button">Déconnexion</a>
</div>
Le bouton
Je comprends pas
pourquoi l'image bouge !
errant cypress
le js
dusky skiff
je l'ai pas trop changé
<script>
function myAccFunc() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
mise à part le bleu
ah d'ailleurs
errant cypress
alors là
dusky skiff
;-;
gaunt yoke
background-size: contain;
background-position: center;
background-color: orange
tu mets le orange du fond de ton img
dusky skiff
Ok merci :)
ça ne fonctionne pas
Toute ma page deviens orange
et l'image et au milieu
dusky skiff
ah 🤦♂️
<div class="imageflm"></div>
c'est la même div que l'image
au même endroit
.imageflm {
background-image: url("https://media.discordapp.net/attachments/695602360529059871/712220168041791538/site_bann.PNG?width=1442&height=407");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: orange;
}
Mais ca ne fonctionne pas :/
Page blanche
enfin pas page blanche
mais l'image ne s'affiche pas
dusky skiff
ca marche merci :)
errant cypress
Hello, j'ai un petit problème tout con, j'ai envie d'use la bonne méthode pour aligner mon div au center horizontalement mais aussi verticalement avec justify-content etc, mais ça ne fonctionne pas, vous avez des idées ? histoire que je fasse pas un vieux margin-bottom xd
gaunt yoke
montre un screen
errant cypress
je te montre ça dans 10min
là il est juste à gauche j’ai pas mis les margin-left auto etc
je voulais faire un justify-content center et un align-content center mais fonctionne pas :/
errant cypress
.modal-login {
height: 200px;
width: 500px;
background-color: white;
border-radius: 5px;
margin-left: auto;
margin-right:auto;
}
<div class="modal-login">
</div>
<?php
require('../php/server.php');
require('../php/login_ad.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Lartaxx" />
<!-- Lien CSS -->
<link rel="stylesheet" href="../css/admin.css">
<!-- Lien Polices -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
</head>
<body class="body_admin">
<div class="modal-login">
</div>
</body>
</html>
Du coup sur ton body tu mets juste display: flex; align-items: center; justify-content: center;
le flex s’applique sur le parent
errant cypress
Je vais test ^^
gaunt yoke
C’est une relation parent > enfant et pas direct enfant
gaunt yoke
bah non tu peux aligner verticalement à l’ancienne avec un Line-height et un vertical align middle
mais autant use flex
errant cypress
J'ai mis dans le body mais don't work
body {
width: auto;
height: auto;
background: linear-gradient(270deg, #0a97e6, #969696);
background-size: 400% 400%;
-webkit-animation: lartaxx-anim 30s ease infinite;
animation: lartaxx-anim 30s ease infinite;
display: flex;
align-items: center;
justify-content: center;
}
du coup c’est juste la taille de ton height
Sur ton html et body
html, body { min-height: 100% }
errant cypress
like this =>
* {
padding: 0;
margin: 0;
}
body {
background: linear-gradient(270deg, #0a97e6, #969696);
background-size: 400% 400%;
-webkit-animation: lartaxx-anim 30s ease infinite;
animation: lartaxx-anim 30s ease infinite;
display: flex;
align-items: center;
justify-content: center;
}
@-webkit-keyframes lartaxx-anim {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes lartaxx-anim {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.modal-login {
height: 200px;
width: 500px;
background-color: white;
border-radius: 5px;
}
html, body {
min-height: 100%
}
?
gaunt yoke
Oui mais du coup met le tout en haut comme ce sont tes premiers éléments
Ça changera rien mais plus propre
gaunt yoke
Bah tu le mets juste en dessous du *{}
errant cypress
oui ^^ ça je l'ai fais
mais pour l'aligner verticalement quoi
à part le margin-bottom mais bon
errant cypress
bah j'ai tout mis dans le body
mais don't work
à part si j'ai merder mais je crois pas
gaunt yoke
Ça s’est bien refresh ? Look dans la console
errant cypress
body {
background: linear-gradient(270deg, #0a97e6, #969696);
background-size: 400% 400%;
-webkit-animation: lartaxx-anim 30s ease infinite;
animation: lartaxx-anim 30s ease infinite;
display: flex;
align-items: center;
justify-content: center;
}
Comme ça non ?
errant cypress
yep ça s'est bien refresh
le display flex l'aligne bien horizontalement
mais align-items et justify-content il le prends pas
errant cypress
le body = 1071x200 xd
gaunt yoke
Si ils font bien la taille de la page
errant cypress
html fait bien toute la page
gaunt yoke
yes pas bon alors le met 100vh au lieu de 100%
errant cypress
le min-height ?
errant cypress
nop toujours pareil :x
ok j'ai trouvé
c'est le background-size
Nickel merci Enzo ^^
gaunt yoke
ah yes okay bah remet le 100%
errant cypress
100% ça le remet au top
gaunt yoke
ah relou
gaunt yoke
Np!
errant cypress
Hello ! Quelqu'un sait comment modif le css d'un content dans un :hover:before (content font-awesome)
Mettre la flèche après envoyer quoi ^^
.send {
background-color: #03BCFC;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
border-radius: 3px;
color: white;
font-family: 'Montserrat', sans-serif;
transition: 1.5s;
}
.send:hover {
cursor: pointer;
}
.send:hover:before {
content: "\f178";
font-family: FontAwesome;
}
Voici tout le code de mon bouton (a)
quartz thunder
after au lieu de before?
errant cypress
pfah trop fort j'avais oublié ce truc
void anvil
Non, le before dis juste avant le hover
errant cypress
merci xD
quartz thunder
@void anvil hein?
errant cypress
Ouais ça revient au même, mais merci j'avais zappé ^^
errant cypress
Si si résolu ^^
void anvil
Ok
errant cypress
mon login je vais le faire en ajax xD fin le post juste après php
j'aime bien jquery mdrr
dusky skiff
Salut à tous !
J'aimerais faire un truc que je n'arrive pas à faire sur mon site, faire des petites cases comme ici (en vert) et les remplir avec une image et du texte en dessous (oui mon schema est moche )
Et quand je change de plateformes, les cases bouges
Ou quand je zoom
Si vous voyez ce que je veux dire
sharp pendant
El famoso designer x)
dusky skiff
😂
sharp pendant
C'est quoi le contour blanc autour
dusky skiff
c'est la capture mdr
J'ai use outil capture
donc ça fait un contour vu que j'ai dépassé
errant cypress
@dusky skiff Si je suis pas con, tu fais un div avec flex-direction: column; puis tu display: grid;
pas test mais j'aurais start comme ça
dusky skiff
ok je tente merci :)
@errant cypress Ca fonctionne mais les cases prennent toutes la place sur la ligne :(
dusky skiff
bah ça marche pas :/
dusky skiff
alors
je veux les mettre sur une ligne mais sur plusieurs
Je sais pas si c'est logique x)
En gros je veux que la div ai une certaine taille
et quand je zoome ou quoi, elle ne change pas de taille
dusky skiff
Ouais j'attends qu'il me réponde x)
Juste des petits carrés avec les gemmes
Et que ça soit responsive
errant cypress
oula le responsive mdrr
j'ai bloqué l'accès aux mobiles avec php c'est moins long xD
sharp pendant
bah
tu appliques une largeur au bloc si t'en veux plusieurs sur une ligne
Tu définis une width pour chaque bloc
et tu flex-wrap : wrap pour renvoyer le reste à la ligne quand il n'y a plus de place
dusky skiff
Me revoilà ! Ca commence à ressembler à quelque chose même si il y a certains trucs que je ne comprends pas
Déjà, les cases ne sont pas côte à côte
Elles retournent à la ligne trop tôt
Et le dégradé fait un truc bizarre sur le fond !
Voici le CSS :
.inventaire {
text-align: center;
display: flex;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 25px;
}
.case {
border-width:6px;
border-style:solid;
flex-direction: column;
display: grid;
justify-content: start;
flex-wrap : wrap;
width: 200px;
}
<div class="case inventaire">
<figure style="margin : 0 ">
<a href=""><img width="20%"
src="https://cdn.discordapp.com/attachments/695602360529059871/700275862779592714/cataclyte.png" />
</a>
<figcaptin>
<h1 class="gemsname">Cataclyte</h1>
×<?php echo $row['S1']; ?>
</figcaption>
</figure>
</div>
<div class="case inventaire">
<figure style="margin : 0 ">
<a href=""><img width="20%"
src="https://cdn.discordapp.com/attachments/695602360529059871/700275862779592714/cataclyte.png" />
</a>
<figcaptin>
<h1 class="gemsname">Cataclyte</h1>
×<?php echo $row['S1']; ?>
</figcaption>
</figure>
</div>
Et ici le code
gaunt yoke
Aligner 2 éléments avec un display block ?
dusky skiff
Càd ?
gaunt yoke
je répondais a mr wigy
dusky skiff
En fait je viens de voir que mon background ne changeais pas de couleurs :(
Pourtant j'ai mis dans body le background linear gradient
gaunt yoke
C'est parce que tu gères mal ton DOM wailrone qu'elles ne s'alignent pas
tu devrais avoir un truc comme ça +
dusky skiff
<body>
<div class="divtriangle loading"></div>
<div class="divtriangle2 loading"></div>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-black">
<a href="index.php" class="w3-bar-item w3-button w3-orange w3-hover-red"><i class="fa fa-home"></i>
ACCUEIL</a>
<a href="credits.html" class="w3-bar-item w3-button w3-hover-red"><i class="fa fa-book"></i> CREDITS</a>
<a href="discordregister.php" class="w3-bar-item w3-button w3-right w3-hover-red"><i
class="fa fa-user-circle"></i> CONNEXION</a>
</div>
<div class = "inventory_page">
<div style="height:50px"></div>
<div class="case inventaire">
<figure style="margin : 0 ">
<a href=""><img width="20%"
src="https://cdn.discordapp.com/attachments/695602360529059871/700275862779592714/cataclyte.png" />
</a>
<figcaptin>
<h1 class="gemsname">Cataclyte</h1>
×<?php echo $row['S1']; ?>
</figcaption>
</figure>
</div>
<div class="case inventaire">
<figure style="margin : 0 ">
<a href=""><img width="20%"
src="https://cdn.discordapp.com/attachments/695602360529059871/700275862779592714/cataclyte.png" />
</a>
<figcaptin>
<h1 class="gemsname">Cataclyte</h1>
×<?php echo $row['S1']; ?>
</figcaption>
</figure>
</div>
<?php endwhile; ?>
<!-- The Contact Section -->
</div>
</body>
J'ai ça
gaunt yoke
<div class="inventaire">
<div class="case">etc...</div>
<div class="case">etc...</div>
</div>
.inventaire {
display: flex;
align-items: flex-start;
justify-content: center
}
Le principe du flex c'est qu'il s'applique au parent pour avoir un effet sur les enfants
dusky skiff
ah d'accord
Ca marche nickel merci !!!
Par contre je comprends toujours pas pourquoi le fond est blanc
body {
font-family: "Lato", sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(
45deg,
rgb(242, 255, 0),
rgb(255, 0, 0)
);
}
Alors que j'ai mis ceci
dusky skiff
AH
gaunt yoke
tu peux lui mettre un min-height
dusky skiff
Et comment je fais pour qu'il prenne toute la page
gaunt yoke
🔝 juste au dessus
dusky skiff
background-size contain non
AH
ok merci :)
Alors ça marche nickel mais ça ne reviens pas tout seul à la ligne :(
J'ai mis le flex-wrap : wrap; sur "case"
gaunt yoke
flex-wrap: wrap
dusky skiff
oui
ah il faut peut être que je le mette sur inventaire !
Ouiii !
C'était ça :)
Merci Enzo :)
robust anvil
Ô @gaunt yoke toi qui es si beau si fort
Dis moi
Dans l'actuel j'ai ça
.infos {
margin: 0;
padding: 0;
width: 100%;
display: table;
table-layout: fixed;
}
.slot {
display: table-cell;
}
.r-border {
border-right: var( --border-size ) solid gray;
}
Mais ça s'aligne pas correctement + les séparateurs sont mal positionnés du coup
😢
gaunt yoke
Le tableau en mobile t'auras jamais un beau résultat, je conseille de rester sur les grids
ou alors des colonnes
robust anvil
Du coup
.infos {
margin: 0;
padding: 0;
width: 100%;
display: grid;
grid-template-areas: "a a a a";
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.slot {
margin-left: 0;
margin-right: 0;
}
.r-border {
border-right: var( --border-size ) solid gray;
}
Et bizarrement il est mieux centré que la dernière fois avec exactement le même code
Comme si ça avait gardé mon tableau 
gaunt yoke
mais tu veux qui soit centré comment
ah à droite tu veux dire y a un jour plus grand ?
gaunt yoke
Met juste un background-color sur chaque colonne
pas l'impression qu'elles fassent ttes la meme taille
robust anvil
gaunt yoke
Ah si, mais sur la navbar il y a pas de padding sur les côtés si ?
robust anvil
Nope
gaunt yoke
ca peut venir de la, comme ici il y en a un bah ça va pas s'aligner parfaitement
robust anvil
Pourtant j'ai essayé de dégager le paggin c'est ça le pire
gaunt yoke
Essaye de mettre sur la navbar un padding-left et right identique au container des blocs rouge
robust anvil
Ouais du coup même résultat qu'en bas
Mais ça fait moche
Donc je vais réréréréréréessayer de dégager le padding
dusky skiff
Hey c'est moi (encore x) ), quand je zoom ça me met pas la barre de navigation :(
( je peux attendre )
gaunt yoke
tu voulais que ce soit coller a la fenetre ? 🤔
robust anvil
Yep
gaunt yoke
@dusky skiff on test pas le responsive en zoomant
dusky skiff
Ah
gaunt yoke
suffit de réduire la taille de la fenetre ou chrome propose ça
robust anvil
Pour pouvoir mettre un padding dans mes slots sans que ça fasse trop décalé tout à gauche
dusky skiff
J'ai fait auss version mobile
gaunt yoke
gaunt yoke
réduis un peu car là tu es pas encore en mobile sur ton screen
dusky skiff
dusky skiff
media query ?
gaunt yoke
tu as gérés comment ton responsive
gaunt yoke
ahh
dusky skiff
Qui n'apparaît pas
gaunt yoke
t'as pas mis un overflow hidden ?
dusky skiff
nope
dusky skiff
body {
font-family: "Lato", sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(
45deg,
rgb(242, 255, 0),
rgb(255, 0, 0)
);
min-height : 100vh
}
min height
le contain sert à rien du coup
gaunt yoke
fais juste un
html { min-height: 100% }
body { height: 100% }
enfin en gardant ton code, mais tu rajoutes ces 2 trucs là
gaunt yoke
tu peux tjrs pas scroll ?
envoie moi ton projet en 2/2 je regarde de mon côté car je suis au taff donc po simple de jongler
potent linden
@gaunt yoke Salut enzo tu peut m'aider pour du JS sur mes dropdown ils souvrent bien comme je veut le problème c'est que ça me les ouvres tous et je veut les separer par id
Ou quelquun d'autre please ?
gaunt yoke
Hello, actuellement tu l’ouvres par le nom de la class ?
tu passes en open le .dropdown ?
gaunt yoke
il faut que quand il clique sur un élément tu l’open lui pas tout ceux qui ont la class .toto
Faudrait ton code html et JS pour t’aider ce serait + simple
potent linden
let dropDown = $(".dropdown");
$(document).click(function (e) {
if (e.target.closest(".dropdown .dropbtn")) {
dropDown.toggleClass("open");
} else if (!e.target.closest(".dropdown .dropdown-content")) {
dropDown.removeClass("open");
}
});
<div class="dropdown" id="infos">
<a class="dropbtn"><i class="fas fa-info-circle"></i></a>
<div class="dropdown-content">
<a <?php if (strpos($page, 'our-story.php')) echo ' class="active"'; ?> href="our-story"><?php echo _MenuWhoAreWe;?></a>
<a <?php if (strpos($page, 'our-team.php')) echo ' class="active"'; ?> href="our-team"><?php echo _MenuOurTeam;?></a>
<a <?php if (strpos($page, 'our-story.php')) echo ' class="active"'; ?> href="our-story"><?php echo _MenuOurStory;?></a>
</div>
</div>
@gaunt yoke
gaunt yoke
oops sorry oubliez de regarder ici
errant cypress
ah oui non ok j'avais pas vu le content
gaunt yoke
je regarde ce soir la je suis oqp et je te fais un retour dès que possible
potent linden
@errant cypress ?? je peut pas mettre de confition au else du coup
gaunt yoke
Bah non c'est le principe d'une condition quoi
Si la porte est ouverte, alors je rentre
Sinon je rentre pas
Mais tu peux faire des else if
sinon si
potent linden
et je doit mettre quoi ?
je sais se qu'est un else if
le truc c'est que j'arrive pas à récuperer l'ID
errant cypress
.dropdown c'est une class
dans ton html
tu mets id="tonid"
et en jquery
tu fais
willow peak
$("#tonid").click(function() {
$("#tonid").text("Test");
})
par exemple
et $(document).click ne marchera pas
c'est $(document).ready(function(e) {
})
gaunt yoke
tu peux click le document, je crois que ca trigger toute la page
le .ready sert juste a initialiser le script lorsque le dom est chargé
t'en as meme pas forcément besoin d'ailleurs
gaunt yoke
@potent linden tu cherches à faire quoi
potent linden
@gaunt yoke Je veut evité de repeter 10 fois la meme ligne pour un ID justement je veut que mon js dit .dropdown+(La il prend l'id de ma div) ajoute la classe open et si c'est déjà en open ça le close
le truc c'est que la sur mon menu j'ai deux dropdown peut importe sur le quel j'appuis il ouvre les deux et c'est relou :/
gaunt yoke
J'avais donné une soluce ici à Lartaxx, essayes de scroll vers le haut tu devrais la trouver
avec des data-id etc
errant cypress
yep
potent linden
@gaunt yoke ?
gaunt yoke
??
errant cypress
@potent linden data-id / id
potent linden
@gaunt yoke Javais pas vu ok merci @errant cypressMerci
errant cypress
Hello, je fais mon premier site en responsive xD et j'ai quelques galères, on est bien d'accord que là si je mets la width (en reponsive) à 450px mon #home disparait ?
@media (max-width: 450px) {
#home { visibility: hidden;}
}
@media screen and (max-width: 450px) {}
ahh ! je test ça
errant cypress
ça fonctionne du tonnerre, mais pour redimensionner des icônes de fa c'est la galère t'as une technique, il me prend rien en height :x
genre les <i class="fas fa-baby">, je leur mets la classe fa-2x (non responsive) par exemple, mais pour les foutre responsive à 30px impossible
gaunt yoke
ça fonctionne avec un font-size sinon non ?
errant cypress
je vais re test mais ça fonctionnait po
errant cypress
ah ui font-size c'est de base att je vais re test :x
oauis c 'est le truc de base qui fait chier
gaunt yoke
dequoi
errant cypress
no c'est réglé ^^
ty
Dites moi, quelqu'un d'assez bon en "algo" du moins en calcul xD
J'ai ma navbar, et j'aimerais l'adapter en fonction de la taille de l'écran de chaque uti
(la foutre à droite avec un padding-left calculé)
donc je fais une
var lg = screen.width-420; // 420 est la width de ma navbar
et
$("#menuG").css("padding-left",lg.toString()+"px");
console.log(lg.toString()+"px");
Donc j'aimerais qu'il y ai toujours une marge de 20px en padding-left mais, du coup je sais pas comment adapté le 420 (mettre quoi à la place)
gaunt yoke
je comprend pas tu cherches à faire quoi exactement la^^
quartz thunder
fait un schéma sur paint
gaunt yoke
ouais plz
errant cypress
Je suis le pire en dessin alors attend je t'explique plus clairement
En gros j'ai ma navbar, et j'aimerais géré son padding-left en fonction de la résolution de l'écran de l'utilisateur
quartz thunder
bah tu peux mettre une valeur en % ou alors utiliser des media queries
errant cypress
Donc j'use le padding-left mais faut calculé le truc pour que ça soit pareil pour toutes les résolutions
Bah j'use juste le screen.width
pour avoir la résolution de l'écran
et après je sais pas quoi faire comme calcul
quartz thunder
mais je comprends pas pourquoi tu fait pas ton truc en css déjà
errant cypress
Car je veux calculé mon truc en une fois
avec la résolution de l'écran de l'user (et pas faire plusieurs media queries)
quartz thunder
bah utilise une valeur en %
au lieu de px
et du coup ça réponds pas a la question "pourquoi tu fait pas ton truc en css"
errant cypress
bah en css je devrais le faire en plusieurs fois j'crois
errant cypress
bah c'est relou, faut chercher la taille en px et tout
alors que là j'ai pas à le faire
juste à trouvé la bonne formule quoi
gaunt yoke
Bah non si ta sidebar tu veux qu'elle fasse tout le temps 20% de l'écran, tu mets width: 20%, et ton padding-left aussi
et le contenu de l'autre: 100%
🤔
Mais après avoir un padding-left pour décaler ton contenu
pour afficher ta bar à gauche
déjà ici il y a un soucis
Pourquoi tu fais pas juste 2 colonnes, une de x % et l'autre du reste
errant cypress
no pour le mettre à droite
gaunt yoke
Je comprend vraiment pas, fais une capture d'écran du problème ??
errant cypress
https://gyazo.com/d0ae98e0ebafb377eb609f3b49a4c25c
Là c'est ma navbar, là c'est calculé pour mon écran (ma résolution) et j'ai envie qu'elle soit à la même place pour toutes les résolutions en fait
errant cypress
Oui c'est le calcul qui est mauvais
gaunt yoke
A aucun moment tu dois placer ta navbar en fonction de l'écran de la personne
Non c'est le code
Elle doit juste etre aligner au centre
que ce soit un écran retina ou du 1080px
errant cypress
De base elle est collé au logo
j'ai juste fais mon truc pour déplacé de x px en fonction de l'écran et de la width de mon container
errant cypress
ui en gros
gaunt yoke
Et centrer à tout les écrans ?
errant cypress
bah que ça sois pareil pour toutes les résolutions, fin tant qu'on passe pas en responsive
gaunt yoke
Bah c'est juste que ton code de base est pas bon, à aucun moment on développe en fonction de telle ou telle résolution
quartz thunder
parce que la oui c'est clair si tu fait ça avec des media après tu va devoir en faire 18000 oui
errant cypress
ui
gaunt yoke
Pour te donner un coup de main, tu devrais avoir un truc comme ça:
<nav id="navbar">
<div class="content-navbar">
<div class="logo"></div>
<ul class="menu">
<a href="#">
<li>Menu 1</li>
</a>
<a href="#">
<li>Menu 1</li>
</a>
<a href="#">
<li>Menu 1</li>
</a>
</ul>
</div>
</nav>
#navbar {
width: 100%;
display: flex;
justify-content: center;
}
#navbar .content-navbar {
width: 100%;
max-width: 70rem;
display: flex;
align-items: center;
justify-content: space-between;
}
#navbar .content-navbar .logo {
width: 30px;
height: 30px;
background-color: red;
}
#navbar .content-navbar ul {
list-style: none;
display: flex;
align-items: center;
}
#navbar .content-navbar ul li {
margin: 0 12px;
}
en gros de tête, tu devrais avoir juste ça
et là tu auras une navbar toujours centré au milieu de n'importe quelle écran
ensuite en media query, tu auras juste à dire
@media screen and (max-width: 960px) {
#navbar .content-navbar ul {
display: none;
}
#navbar .content-navbar .burger-menu {
display: block;
}
}
donc rajouter dans le css de base (hors media query) un
#navbar .content-navbar .burger-menu { display: none }
et le burger menu = les 3 petites barres ou quand on clique dessus le menu arrive sur le coté ou autre
errant cypress
Okay je vais réfléchir pour tout ça merci du coup de main!
covert trout
Salut,
Ça fait longtemps que j'ai pas fait du CSS et je me demandais si quelqu'un saurait comment je peux faire en sorte que lorsque le joueur passe son curseur sur le menu déroulant, il fasse la même taille que la box au dessus ? 
gaunt yoke
width: 100%
car logiquement ton dropdown est en position absolute, du coup tu n'as qu'à mettre le parent en relative et il sera a 100% de son parent
donc de "Joueur: john smith"
covert trout
@gaunt yoke Toujours le même soucis
gaunt yoke
la le width: 100% donne quoi
covert trout
Ça marche, merci de m'aider
gaunt yoke
Pourquoi il y a un overflow: hidden sur le ul principal
car ce truc va empêcher le bon fonctionnement du dropdown
covert trout
Si je le mets pas, il n'y a pas le background-color
gaunt yoke
Oui, mais la navbar est mal crée de base, les float etc ca devient outdated
faut éviter d'utiliser ce genre de truc, enfin tu as tellement plus simple ajd
covert trout
J'ai trouvé le soucis
c'était le dernier "float:none"
Merci de ton aide et je vais regarder les changements pour rendre tout ça plus d'actualité
gaunt yoke
Oui ce sera better car là ce genre de menu des que tu vas vouloir ajouter/modifier un truc
ca va etre la guerre
glossy narwhal
Salut qui a déjà chargé un fichier json pour les robots google?
J'ai déjà une méthode qui fonctionne très bien je pourrais m'en contenter mais je suis curieux et je laisse pas un point sans réponse à quelque chose qui m'échape donc
La méthode qui marche :
<script type="application/ld+json">
{le contenu de mon json ici}
</script>
mais je cherche à ne pas inclure le code directement dans l' html mais le fichier json à la place histoire de gagner quelque précieuse ressource grâce à la mise en cache
Méthode qui me semble super évidente mais qui ne fonctionne pas :
<script type="application/ld+json" src="https://img.originahl-scripts.com/data/product/1966.json" ></script>
errant cypress
On peut pas charger de script json comme ça, du moins d’après la rep du mec sur stack
juste à taper 3 mots clés sur google
ou encore ça c’est mieux je trouve
$.getJSON de jQuery
Donc le deuxième répond à ta question
avec le getjson tu get les datas de ton json et tu les uses avec jquery dedans bref à ta guise quoi
glossy narwhal
@errant cypress Salut dans mes recherches j'essaie de ne pas trop de fier à des vieux postes, comme le premier lien datait de 2012. Je ne considère pas une vieille information fiable.
J'ai vue pour le getJSON. ça revient à la méthode une qui fonctionne. Je pense vraiment que ce n'est pas possible, ça me semblait logique que la structure json-ld avait était pensé pour l'optimisation et donc faire pointer un lien avec son contenu pour les bots indexeur afin de ne pas les faire lire (charger) un code html entier. (dans mon cas généré en temps réel via le php, donc décharger le cpu face aux nombreux bots vs les nombreuses pages)
Google encourage l'optimisation et écrire dans le tag <Script> est à la fois contre indication. Je trouvais ça intéressant de trouver une solution autre.
En tout cas merci @errant cypress pour ta réactivité. 🙂
gaunt yoke
Hello @glossy narwhal de ce que je sais:
Si on prend en exemple le JobPosting (pour envoyer à google des offres d'emploi), google recommande de passer par du json:
plus simple à la redaction, plus lisible par leurs robots (alors que la 2eme manière de faire n'est pas optimal et le robot galère par moment)
Maintenant tu as toujours la possibilité de passer par des microdatas, on en avait fait dans la boite ou je bosse au tout début et pas de très bons résultats obtenu, et le code derrière ca restait un bordel car si par exemple tu veux renvoyer la date d'ouverture d'une offre d'emploi, tu dois l'afficher en HTML (attention le display: none etc ne sera pas lu) et mettre la scope correspondante sur l'élément html qui contient la date, donc assez relou visuellement, et du coup même niveau résultat
glossy narwhal
D'acc j'avais fait la version html avec itemscope & cie justement je travaillais à le passer en Json-ld tout fonctionne nickel mais je cherchais dans une logique à faire du mode solid et stocké sur un autre serveur + cache.
peak heron
Bonjour j'ai un petit soucis, je n'arrive pas à décaler le texte en haut à droite (la ou il y a la flèche) , et quand je check les css, il n'y a rien pour
.signup-input-big {
width: 100%;
border: 0;
padding: 10px;
border-radius: 4px;
max-width: 1005px;
}
@media (max-width: 767px) {
.signup-input-big {
width: 75%;
max-width: 100%%;
}
}
<form>
<p>Faites une déscription de votre produit</p>
<input class="signup-input-big" type="text" name="desc" placeholder="Description">
</form>
Tu veux le déplacer où ?
gaunt yoke
En haut à gauche du coup vu la flèche
errant cypress
j'avais pas vu MDR
peak heron
oui
peak heron
j'ai mit le mauvais
gaunt yoke
je sais pas si c’est possible de bouger le placeholder, mais si oui tu dois le faire avec le pseudo element ::placeholder je crois
peak heron
il est appelé sinon
errant cypress
ui Enzo
gaunt yoke
Je sais que couleur etc c’est ok
errant cypress
yep je l'ai fais
gaunt yoke
Mais la position idk
gaunt yoke
Oui mais il veut peut être juste bouger le placeholder
Pour avoir des inputs type material design
errant cypress
ah oui je vois
gaunt yoke
si c’est ça que tu veux faire le fait pas avec le placeholder
peak heron
juste le place holder, car quand je bouge les input c'est tout le rectangle qui bouge
errant cypress
bah essaye ça pour voir
peak heron
je doit le faire avec quoi alors ?
gaunt yoke
tu veux quoi comme rendu ?
errant cypress
::placeholder {
text-align: center;
color: blue;
}
Juste pour voir
gaunt yoke
parce que mettre ton placeholder en haut il va disparaître à partir du moment où tu écris dans l’input
errant cypress
yep
peak heron
un truc comme ça je vuex faire
errant cypress
Description commande c'est un label je crois
le reste c'est un textarea avec un placeholder dedans
errant cypress
youp
peak heron
ah c'est bon j'ai trouvé
errant cypress
<form>
<label>Faites une déscription de votre produit</label>
<textarea class="signup-input-big" rows="5" cols="50" name="desc" placeholder="Description"></textarea>
</form>
ça ça marchera
ah bah nickel
good luck
peak heron
pas trop 😄
errant cypress
oui normal
j'ai pas fais attention
sinon j'irais voir mon form que j'avais fais
peak heron
merci, je vais un peu trafiquer pour que ce soit bien mit mais ça marche, merci
errant cypress
np^^
potent linden
Bonjour je suis à la recherche d'un développeur web maitrisant bien le CSS j'ai fait un menu responsive pour mobile mais je n'arrive pas à le débug j'aurai besoin d'aide merci...
gaunt yoke
Hello, poste un bout de ton code, des screens etc qu'on puisse t'aider ici direct 😛
potent linden
Je souhaiterai que quand j'appuis sur le hamburger ça ouvre mon menu (le display block au bon endroit) et quand j'appuis sur la croix à droite que ça le ferme ( display none)
hollow kite
Hey, Comment je pourrais centrer une chose en css ? 🤔
gaunt yoke
tu peux simplement margin: auto sur ton élément
si tu veux aligner plusieurs cards au centre de ton site, sur le parent tu peux faire un
display: flex;
justify-content: center;
Ok ok merci
potent linden
???