Probleme avec la roulette du site à droite
hacksell
-
txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention -
txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour, j'ai une question à propos d'un site que je suis en train de faire ;
mon site ne veux pas descendre ,il ,'y a pas de roulette sur le coté de la page , je ne sais pas si il faut une balise html/css ou alors c'est normalement automatique et une de mes balises qui l'enlève ?
mon site ne veux pas descendre ,il ,'y a pas de roulette sur le coté de la page , je ne sais pas si il faut une balise html/css ou alors c'est normalement automatique et une de mes balises qui l'enlève ?
A voir également:
- Probleme avec la roulette du site à droite
- Site comme coco - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site x - 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
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>
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 !
