Probleme avec la roulette du site à droite
Fermé
hacksell
-
27 févr. 2022 à 09:39
txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 4 mars 2022 à 04:36
txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 4 mars 2022 à 04:36
A voir également:
- Probleme avec la roulette du site à droite
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site inaccessible - Guide
- Site pour vendre des objets d'occasion - Guide
4 réponses
Salut,
sans voir le code impossible de dire quelque chose...sur votre code.
Par défaut les barres de défilement apparaissent en effet si le contenu est supérieur(en dimensions) à son contenant. Est ce le cas?
Côté CSS vous pouvez voir du côté de la propriété overflow
sans voir le code impossible de dire quelque chose...sur votre code.
Par défaut les barres de défilement apparaissent en effet si le contenu est supérieur(en dimensions) à son contenant. Est ce le cas?
Côté CSS vous pouvez voir du côté de la propriété overflow
txiki
Messages postés
6596
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
518
3 mars 2022 à 16:13
3 mars 2022 à 16:13
Salut à tous,
Précisions ici
Cdlt !
Précisions ici
Cdlt !
alors je pense avoir compris d'où vient le problème, c'est mon CSS qui a un problème ,donc le voici :
<style>
p {
color: white;
}
.colortitlep{
color:#eaab00;
font-size: 25px;
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/playfairdisplay/v28/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_k-UXtHA_A.ttf format('truetype');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/playfairdisplay/v28/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtY.ttf format('truetype');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/playfairdisplay/v28/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiunDXbtY.ttf format('truetype');
}
.border-button {
padding: 1em 1.75em;
margin: 0.25em;
background: none;
display: inline-block;
color: #FFF;
cursor: pointer;
font-size: 30px;
line-height: 1.2;
text-decoration: none;
}
box-sizing: border-box;
}
.border-button {
box-shadow: 0px 0px 0px 5px white;
transition: box-shadow 0.1s linear;
margin: 0.5em;
}
.border-button:hover {
box-shadow: 0px 0px 0px 10px #eaab00;
}
.flex-parent {
display: flex;
width: 300px;
height: 20px;
align-items: center;
}
.flex-child-edge {
flex-grow: 2;
height: 1px;
background-color: #000;
border: 1px #000 solid;
}
.flex-child-text {
flex-basis: auto;
flex-grow: 0;
margin: 0px 5px 0px 5px;
text-align: center;
}
.alt{
color: white;
}
.img_border_gold {
border : 2.5px solid #eaab00;
}
/* le titre webmaster avec la couleur autour*/
html, body {
background: black;
text-align: center;
height: 100%;
overflow: hidden;
margin: 0;
}
}
.svg-wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 500px;
}
.shape1,
.shape2 {
stroke-dasharray: 1120;
stroke-width: 5px;
fill: transparent;
stroke: #eaab00;
border-bottom: 5px solid black;
transition-timing-function: linear;
transition: stroke-dashoffset 5s, stroke-dasharray 5s;
}
.shape1 {
stroke-dashoffset: 1120;
}
.shape2 {
stroke-dashoffset: -1120;
}
.text {
font-family: 'Roboto Condensed';
font-size: 50px;
line-height: 32px;
letter-spacing: 8px;
color: #fff;
top: -48px;
position: relative;
}
.svg-wrapper:hover .shape1,
.svg-wrapper:hover .shape2 {
stroke-dashoffset: 0;
stroke-dasharray: 1120;
}
.title{
display: table;
width: 100%
background: linear-gradient(to right, white, lightgray);
}
.title-row{
display: table-row;
}
.bar-container {
display: table-cell;
position: relative;
width: 50%;
}
.bar {
position: absolute;
width: 100%;
top: 55%;
border-bottom: 1px solid #eaab00;
}
.text {
display: table-cell;
padding-left: 5px;
padding-right: 5px;
font-size: 36px;
}
</style>
<style>
p {
color: white;
}
.colortitlep{
color:#eaab00;
font-size: 25px;
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/playfairdisplay/v28/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_k-UXtHA_A.ttf format('truetype');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/playfairdisplay/v28/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtY.ttf format('truetype');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/playfairdisplay/v28/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiunDXbtY.ttf format('truetype');
}
.border-button {
padding: 1em 1.75em;
margin: 0.25em;
background: none;
display: inline-block;
color: #FFF;
cursor: pointer;
font-size: 30px;
line-height: 1.2;
text-decoration: none;
}
- ,
- :before,
- :after {
box-sizing: border-box;
}
.border-button {
box-shadow: 0px 0px 0px 5px white;
transition: box-shadow 0.1s linear;
margin: 0.5em;
}
.border-button:hover {
box-shadow: 0px 0px 0px 10px #eaab00;
}
.flex-parent {
display: flex;
width: 300px;
height: 20px;
align-items: center;
}
.flex-child-edge {
flex-grow: 2;
height: 1px;
background-color: #000;
border: 1px #000 solid;
}
.flex-child-text {
flex-basis: auto;
flex-grow: 0;
margin: 0px 5px 0px 5px;
text-align: center;
}
.alt{
color: white;
}
.img_border_gold {
border : 2.5px solid #eaab00;
}
/* le titre webmaster avec la couleur autour*/
html, body {
background: black;
text-align: center;
height: 100%;
overflow: hidden;
margin: 0;
}
}
.svg-wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 500px;
}
.shape1,
.shape2 {
stroke-dasharray: 1120;
stroke-width: 5px;
fill: transparent;
stroke: #eaab00;
border-bottom: 5px solid black;
transition-timing-function: linear;
transition: stroke-dashoffset 5s, stroke-dasharray 5s;
}
.shape1 {
stroke-dashoffset: 1120;
}
.shape2 {
stroke-dashoffset: -1120;
}
.text {
font-family: 'Roboto Condensed';
font-size: 50px;
line-height: 32px;
letter-spacing: 8px;
color: #fff;
top: -48px;
position: relative;
}
.svg-wrapper:hover .shape1,
.svg-wrapper:hover .shape2 {
stroke-dashoffset: 0;
stroke-dasharray: 1120;
}
.title{
display: table;
width: 100%
background: linear-gradient(to right, white, lightgray);
}
.title-row{
display: table-row;
}
.bar-container {
display: table-cell;
position: relative;
width: 50%;
}
.bar {
position: absolute;
width: 100%;
top: 55%;
border-bottom: 1px solid #eaab00;
}
.text {
display: table-cell;
padding-left: 5px;
padding-right: 5px;
font-size: 36px;
}
</style>
txiki
Messages postés
6596
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
518
4 mars 2022 à 04:36
4 mars 2022 à 04:36
Salut hacksell,
Pourquoi tu importe des polices (font) alors que tu devrais plutôt utiliser des fonts "classiques", présentes sur les ordinateurs des visiteurs ? Ce serait tellement plus simple !
De plus ici tu en a 3 différentes (styles et grosseur). Pourquoi ? Le modèle que tu a choisi, oblige le visiteur à télécharger les polices de caractères. Quel est l’intérêt ? Ralentir l'affichage ? Intérêt financier pour le créateur de ces polices ?
"'Playfair Display'" : Chez moi ça met un temps fou a afficher la page, interminable alors que je suis en gros débit. C'est une font Google bien sur !
Vire ça et met en une (arial, verdana, peu importe) que tout le monde possède !
Ici tu a un souci:
A ta place je sortirais le overflow qui, par défaut, est automatique, c'est à dire que si le texte ou le contenu en général, dépasse la hauteur de l'écran tu aura un ascenseur à droite de l'écran pour descendre voir le reste de ta page.
De plus je n'ai pas l'impression que tu ais écrit ce CSS. Je me trompe ?
NOTE:
Et pour la prochaine fois, sélectionne ton code et clique sur ▼ pour choisir le type de code que tu met !
Il sera ainsi colorisé et indenté comme j'ai fait ici. Merci d'avance !
Je n'ai pas été plus loin mais il y a des "classes" zarbis !
Cdlt !
Pourquoi tu importe des polices (font) alors que tu devrais plutôt utiliser des fonts "classiques", présentes sur les ordinateurs des visiteurs ? Ce serait tellement plus simple !
De plus ici tu en a 3 différentes (styles et grosseur). Pourquoi ? Le modèle que tu a choisi, oblige le visiteur à télécharger les polices de caractères. Quel est l’intérêt ? Ralentir l'affichage ? Intérêt financier pour le créateur de ces polices ?
"'Playfair Display'" : Chez moi ça met un temps fou a afficher la page, interminable alors que je suis en gros débit. C'est une font Google bien sur !
Vire ça et met en une (arial, verdana, peu importe) que tout le monde possède !
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/playfairdisplay/v28/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_k-UXtHA_A.ttf format('truetype');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/playfairdisplay/v28/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtY.ttf format('truetype');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/playfairdisplay/v28/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiunDXbtY.ttf format('truetype');
}
Ici tu a un souci:
/* le titre webmaster avec la couleur autour*/
html, body {
background: black; /* le fond sera noir */
text-align: center; /* le texte sera toujours centré */
height: 100%; /* la hauteur de ta page sera toujours plein écran en vertical */
overflow: hidden; /* l'ascenseur sera toujours caché */
margin: 0; /* il n'y aura pas de marge */
}
}
A ta place je sortirais le overflow qui, par défaut, est automatique, c'est à dire que si le texte ou le contenu en général, dépasse la hauteur de l'écran tu aura un ascenseur à droite de l'écran pour descendre voir le reste de ta page.
De plus je n'ai pas l'impression que tu ais écrit ce CSS. Je me trompe ?
NOTE:
Et pour la prochaine fois, sélectionne ton code et clique sur ▼ pour choisir le type de code que tu met !
Il sera ainsi colorisé et indenté comme j'ai fait ici. Merci d'avance !
Je n'ai pas été plus loin mais il y a des "classes" zarbis !
Cdlt !
