DESIGN AMSTERDAM et ligne de flottaison
3 participants
Page 1 sur 1
DESIGN AMSTERDAM et ligne de flottaison
Bonjour à tous
Petite question du jour :
Je souhaite que la taille du header de mon site soit moins grand. J'ai réduis la taille du logo, réduis la taille du titre, j'ai gagné quelques centimètres
Je souhaite que la ligne de flottaison soit correcte afin que le visiteur accroche à mon site en parcourant déjà le début du site afin qu'il est la curiosité d'aller plus loin.
Avez vous un conseil à me donner s'il vous plait.
Merci à vous lire
Bon début de semaine à tous
Fmp
Petite question du jour :
Je souhaite que la taille du header de mon site soit moins grand. J'ai réduis la taille du logo, réduis la taille du titre, j'ai gagné quelques centimètres
Je souhaite que la ligne de flottaison soit correcte afin que le visiteur accroche à mon site en parcourant déjà le début du site afin qu'il est la curiosité d'aller plus loin.
Avez vous un conseil à me donner s'il vous plait.
Merci à vous lire
Bon début de semaine à tous
Fmp
Re: DESIGN AMSTERDAM et ligne de flottaison
heu boulet number 1024850 !!!!
quand je fais le clic droit sur l'élément à modifier je fais inspecter le code clic droit sur la ligne en surbrillance.
Mais après le clic droit j'ai : copier
ou l'intérieur du HTML ou l'extérieur du HTML ou le sélecteur CSS ??? et ces codes à copier font tous au moins 6 pages
Je vais faire les changements en mode sans échec histoire de ne pas planter le site.
Désolée je patauge là Fred ? Merki
http://screencast.com/t/ZlYcun7QEJA
quand je fais le clic droit sur l'élément à modifier je fais inspecter le code clic droit sur la ligne en surbrillance.
Mais après le clic droit j'ai : copier
ou l'intérieur du HTML ou l'extérieur du HTML ou le sélecteur CSS ??? et ces codes à copier font tous au moins 6 pages
Je vais faire les changements en mode sans échec histoire de ne pas planter le site.
Désolée je patauge là Fred ? Merki
http://screencast.com/t/ZlYcun7QEJA
Re: DESIGN AMSTERDAM et ligne de flottaison
Bonjour,
effectivement vous étiez sur la bonne voie et en principe ce code devrait faire l'affaire. A placer dans Modifier le head :
Alain
effectivement vous étiez sur la bonne voie et en principe ce code devrait faire l'affaire. A placer dans Modifier le head :
- Code:
<style type="text/css">
/*<![CDATA[*/
.jtpl-header__inner {max-height:210px;
/*]]>*/
</style>
Alain
Re: DESIGN AMSTERDAM et ligne de flottaison
Bonsoir Alain,
Merci beaucoup, si vous pouvez regarder et me dire ce que vous en pensez du coup la main est tronquée mais est ce vraiment gênant esthétiquement ?
Merci pour votre réponse.
Cordialement Florence
Merci beaucoup, si vous pouvez regarder et me dire ce que vous en pensez du coup la main est tronquée mais est ce vraiment gênant esthétiquement ?
Merci pour votre réponse.
Cordialement Florence
Re: DESIGN AMSTERDAM et ligne de flottaison
quand je fais le clic droit sur l'élément à modifier je fais inspecter le code clic droit sur la ligne en surbrillance.
Mais après le clic droit j'ai : copier
Oui alors…
Firefox a changé ça dans sa dernière mise à jour.
Mais le principe est le même :
Clic droit, inspecter l'élément, aller chercher l'élément à modifier, re-clicdroit dessus, et là…
copier > le sélecteur csss
Re: DESIGN AMSTERDAM et ligne de flottaison
Florence, vous vous débrouillez très bien, merci d'avoir essayé de suivre les explications.
Alain, c'est sympa de donner la soluce, mais ils vont rien comprendre s'ils ne pataugent pas un peu !
et le code est presque complet il manque la
}
à la fin :
.jtpl-header__inner {max-height:210px;}
Alain, c'est sympa de donner la soluce, mais ils vont rien comprendre s'ils ne pataugent pas un peu !
et le code est presque complet il manque la
}
à la fin :
.jtpl-header__inner {max-height:210px;}
Re: DESIGN AMSTERDAM et ligne de flottaison
Bonjour Fred,
je viens de terminer ma punition, à savoir que je viens de faire cent lignes "je n'oublierai pas de mettre la parenthèse"
Heureusement qu'il n'y a qu'une seule ligne de code et que cela fonctionne, mais j'avoue mon erreur
Ceci étant dit, il n'était pas facile pour Florence de trouver le code manquant, vu qu'il n'apparaissait pas dans l'inspecteur !
Personnellement, je ne trouve pas gênant la main "tronquée" mais il est toujours possible de retoucher la photo pour que l'on puisse là voir.
Oups, je viens de recompter mes lignes et il m'en manque encore une vingtaine à faire....
Bonne journée
Alain
je viens de terminer ma punition, à savoir que je viens de faire cent lignes "je n'oublierai pas de mettre la parenthèse"
Heureusement qu'il n'y a qu'une seule ligne de code et que cela fonctionne, mais j'avoue mon erreur
Ceci étant dit, il n'était pas facile pour Florence de trouver le code manquant, vu qu'il n'apparaissait pas dans l'inspecteur !
Personnellement, je ne trouve pas gênant la main "tronquée" mais il est toujours possible de retoucher la photo pour que l'on puisse là voir.
Oups, je viens de recompter mes lignes et il m'en manque encore une vingtaine à faire....
Bonne journée
Alain
Re: DESIGN AMSTERDAM et ligne de flottaison
Alain : C'est bien ! (moi j'ai encore mille lignes de "je laisserai les amis répondre sur le forum sans intervenir")
à noter que ce nouvel inspecteur est moins souple que les précédents, mais il y a une logique tout de même.
à noter que ce nouvel inspecteur est moins souple que les précédents, mais il y a une logique tout de même.
Re: DESIGN AMSTERDAM et ligne de flottaison
Merci Fred et Alain !!!!
Fred je patauge à merveille
Alain, je me disais ben qu'il manquait quelque chose à votre code
Fred je patauge à merveille
Florence, vous vous débrouillez très bien, merci d'avoir essayé de suivre les explications.
Alain, c'est sympa de donner la soluce, mais ils vont rien comprendre s'ils ne pataugent pas un peu ! Very Happy
et le code est presque complet il manque la
}
à la fin :
.jtpl-header__inner {max-height:210px;}
Alain, je me disais ben qu'il manquait quelque chose à votre code
ALAIN a écrit:Ceci étant dit, il n'était pas facile pour Florence de trouver le code manquant, vu qu'il n'apparaissait pas dans l'inspecteur !
Re: DESIGN AMSTERDAM et ligne de flottaison
FRED a écrit:à noter que ce nouvel inspecteur est moins souple que les précédents, mais il y a une logique tout de même.
Je manque de logique arffff !
Allez m'en vais rajouter la :}
Si vous saviez Fred et Alain le nombre de questions que je me pose vous tomberiez raide
Re: DESIGN AMSTERDAM et ligne de flottaison
Ce n'était pas dirigé contre vous. Firefox fait juste un peu suer avec ses modifications intempestives.
Cela n'a rien de simple au début, et vous avez su comprendre le principe. Continuez !
Cela n'a rien de simple au début, et vous avez su comprendre le principe. Continuez !
Re: DESIGN AMSTERDAM et ligne de flottaison
FRED a écrit:Ce n'était pas dirigé contre vous. Firefox fait juste un peu suer avec ses modifications intempestives.
rassurez vous je n'ai rien pris pour moi ! no soucis
Site responsive
Ne sachant pas dans quelle rubrique je dois poser ma question ? Je reviens vers vous Fred et/ou Alain
Pourquoi mon site n'est il pas responsive siouplait ? Que dois je faire ? Ou bien qu'est ce que je n'ai pas fait ? Merci à vous pour vos réponses
Cordialement
Flo
Pourquoi mon site n'est il pas responsive siouplait ? Que dois je faire ? Ou bien qu'est ce que je n'ai pas fait ? Merci à vous pour vos réponses
Cordialement
Flo
Re: DESIGN AMSTERDAM et ligne de flottaison
Tous les sites Jimdo sont responsives par défaut :
le vôtre aussi, pas de soucis
le vôtre aussi, pas de soucis
Re: DESIGN AMSTERDAM et ligne de flottaison
FredVig a écrit:Tous les sites Jimdo sont responsives par défaut :
le vôtre aussi, pas de soucis
Bonsoir Fred
Le mien n'est pas totalement responsive, voir les screens
Est ce à cause du Titre trop long mais si je le mets sur deux ligne du coup la deuxième ligne disparaît car j'ai modifié la taille du head je pense ?
http://screencast.com/t/iD6BYXn9NDZ
En mode portrait cela donne ça
http://screencast.com/t/3larN2O9BLbw
et en mode paysage
http://screencast.com/t/aKDEDBQtNPYQ
Quelle possibilité ai je pour améliorer les choses Fred ?
Merci pour votre réponse.
Cordialement
Flo
Re: DESIGN AMSTERDAM et ligne de flottaison
Si vous ajoutez des codes, il faut prévoir chaque situation de largeur d'écran
Par exemple pour le code sur la hauteur de jtpl-header, vous pouvez le supprimer pour les petits écrans en encadrant la modification avec une condition de largeur d'écran :
Par exemple pour le code sur la hauteur de jtpl-header, vous pouvez le supprimer pour les petits écrans en encadrant la modification avec une condition de largeur d'écran :
- Code:
/*<![CDATA[*/
@media(min-width:768px){
.jtpl-header__inner {max-height:210px;}
}
/*]]>*/
Re: DESIGN AMSTERDAM et ligne de flottaison
Bonsoir Fred,
Je n ai pas tout a fait compris c est sans aucun doute l heure tardive, la fatigue ou les deux !
J'essaierai demain en mode sans échec, histoire d'avoir un parachute anti boulettes.
Bonne soirée.
Flo
Je n ai pas tout a fait compris c est sans aucun doute l heure tardive, la fatigue ou les deux !
J'essaierai demain en mode sans échec, histoire d'avoir un parachute anti boulettes.
Bonne soirée.
Flo
Re: DESIGN AMSTERDAM et ligne de flottaison
C'est le problème d'indiquer des codes à des personnes ne maîtrisant pas le code : on ne donne qu'un principe, il faut comprendre pour mesurer les conséquences.
Mais vous avez su vous y mettre, donc vous devriez pouvoir maîtriser aussi @media. (et puis nous sommes tous passés par ce stade) L'étape suivante est d'explorer la balise @media (tutos sur le web), qui permet de restreindre une propriété à (par exemple ) une largeur de fenêtre navigateur. Si vous commencez à faire du code, attendez-vous à beaucoup lire et beaucoup tester en dehors de ce minuscule forum, le web est très riche en explications de code.
Dans votre cas précis…
vous avez la classe qui identifie l'élément à modifier : .jtpl-header__inner
vous avez sa propriété modifiée entre accolades : {max-height:210px;}
mais ça ne convient pas pour les écrans étroits, en dessous de 768px de large
donc vous dites, "si l'écran navigateur fait plus de 768px de large…" : @media(min-width:768px)
"…appliquer la propriété. Sinon, ne rien faire" (on place juste le code entre accolades )
donc en tout :
@media(min-width:768px) {
.jtpl-header__inner {max-height:210px;}
}
et toujours les balises "déclaratives" habituelles qui encadrent :
Mais vous avez su vous y mettre, donc vous devriez pouvoir maîtriser aussi @media. (et puis nous sommes tous passés par ce stade) L'étape suivante est d'explorer la balise @media (tutos sur le web), qui permet de restreindre une propriété à (par exemple ) une largeur de fenêtre navigateur. Si vous commencez à faire du code, attendez-vous à beaucoup lire et beaucoup tester en dehors de ce minuscule forum, le web est très riche en explications de code.
Dans votre cas précis…
vous avez la classe qui identifie l'élément à modifier : .jtpl-header__inner
vous avez sa propriété modifiée entre accolades : {max-height:210px;}
mais ça ne convient pas pour les écrans étroits, en dessous de 768px de large
donc vous dites, "si l'écran navigateur fait plus de 768px de large…" : @media(min-width:768px)
"…appliquer la propriété. Sinon, ne rien faire" (on place juste le code entre accolades )
donc en tout :
@media(min-width:768px) {
.jtpl-header__inner {max-height:210px;}
}
et toujours les balises "déclaratives" habituelles qui encadrent :
- Code:
<style type="text/css">
/*<![CDATA[*/
@media(min-width:768px) {
.jtpl-header__inner {max-height:210px;}
}
/*]]>*/
</style>
Re: DESIGN AMSTERDAM et ligne de flottaison
Ola Fred,
Merci pour toutes ces explications je me lance !
Je vous tiens au courant.
Flo
Merci pour toutes ces explications je me lance !
Je vous tiens au courant.
Flo
Re: DESIGN AMSTERDAM et ligne de flottaison
Fred,
C'est responsive je suis ravie !
Vraiment vous m'aidez beaucoup.
Merciiiiiii
C'est responsive je suis ravie !
Vraiment vous m'aidez beaucoup.
Merciiiiiii
Sujets similaires
» placement menu design Amsterdam
» Affichage design Amsterdam dans Edge / Windows 10
» changer couleurs des sous menu design Amsterdam
» Design Amsterdam - Supprimer titre du site et réduire l'en-tête
» Réduire espace sous barre navigation design Amsterdam
» Affichage design Amsterdam dans Edge / Windows 10
» changer couleurs des sous menu design Amsterdam
» Design Amsterdam - Supprimer titre du site et réduire l'en-tête
» Réduire espace sous barre navigation design Amsterdam
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|