Nouveau sujet Aide

il y a 5 h
Bonjour Thomasc,
Si je me trompe pas voici un exemple pour .blur :

.blurred-bg-container {  height: 100vh; /* =h */}
.blurred-bg-container .blur ,
.blurred-bg-container {
  background: url(https://web.opendrive.com/api/v1/download/file.json/NTlfMTMzMTgyNzlf?inline=1);
  background-size: cover;
}
.blurred-bg-container .blur {
  height: 100vh; /* h */
  width: 166.667%; /* (100/cw) x 100% */
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(
    -10%,
    -30%
  ); /* - [cl - (cw/2)] % ,  -[ct - (ch/2)] % */
  filter: blur(20px);
  z-index: -1;
}

Modifié par aliasdmc (16 Oct 2018 - 21:02)

Dans CSS et mise en forme, CSS3 · Inherit de background d'ancêtre pour div blur

il y a 6 h
Bonjour,

Je souhaite placer une div de contenus avec une fond blur, sur un fond-image remplissant la totalité du viewport, tel que cela est décrit par zFunx à cette adresse sur codepen.
Le problème est que ce code repose (marche) sur peu de divs imbriquées, avec des 
background: inherit;
fonctionnant puisque les liens de parentalité sont directs, sans intermédiaire quoi.. ce qui n'est pas le cas de mon arborescence qui comporte bien plus de divs intermédiaires. En effet sur la base du codepen, mon code ressemblerait plutôt à ça :


<div class="blurred-bg-container">

  <div class="content"><!-- div en + -->
   <div class="content"><!-- div en + -->
    <div class="content"><!-- div en + -->

      <div class="content">
        <div class="text">
          <h1>Lorem ipsum dolor sit amet </h1>
        </div>
       <div class="blur"></div>
      </div>

   </div>
  </div>
</div>

</div>


Or dans ce cas (sans doute pas rare...), un 
background: inherit;
sur la div 
.content
ne fonctionne plus puisque 
.blurred-bg-container
n'est plus son parent direct.

D'où ma question :
par quel moyen pourrait-on retrouver le fonctionnement du inherit, cette fois entre divs à parentalités éloignées.. ? jQuery... ?

Je cherche... sans résultat pour l'instant donc je suis preneur de toute piste !
Merci !

Dans CSS et mise en forme, CSS3 · Inherit de background d'ancêtre pour div blur

il y a 7 h
Bonjour, je suis nouvelle ici et dans le monde de l'informatique, enfin j'étais beaucoup plus sur les téléphones et les tablettes j'ai toujours été passionner par ce milieu.
Je me suis Lance dans le codage je voudrais être développé web. Je sais que c'est du travail mais je suis déterminé et je voudrai avoir des conseils pour un débutant, je suis sur Khan Academy j'essaie d'avancer. Je pense d'avoir des conseils serait bénéfique merci pour vos réponses et d'avoir pris le temps de lire mon récis

Dans Questions générales et questions de débutants · Conseil

il y a 8 h
Bonjour, voila j'ai un projet d'html a réaliser dans mes études.
je voudrais mettre en haut de ma page une images fixe en haut a gauche et un texte (ici un titre) centre verticalement avec l'image mais horizontalement avec ma page (si pas possible pas grave). J'ai essayé avec float + vertical-align avant de me rendre compte que les 2 ne sont pas compatible. Maintenant j'ai presque reussi grace une reponse sur un forum mais l'image est a droite et je n'arrive pas a changer sa position. MErci de bien vouloir m'aider. Smiley cligne
code html : 
 
<section class="block">  
  <div class="textes">
    <p>Ici, pas de question bête</p>   
  </div>
  <img src="Images/questions.png" />
</section>

code css : 

.block {
    display:flex;
  }
.textes,.block img {
    margin:auto;
    padding:5px;
  }
.block img {
    order:1;
    width:500px;
    height:250px;
  }

Dans CSS et mise en forme, CSS3 · Alignement texte avec image

il y a 8 h
Bonjour à tous et à toutes,

J'essaye de m'intéresser aux nouvelles écritures en CSS, et je ne comprends pas trop un point.

Voici le code fonctionnel d'une partie d'un spoiler en pur CSS que j'utilise sur 3 spoilers (A,B et C). Quand je clique sur le texte A, le spoiler A s'affiche, mais pas B et C. Quand je clique sur B, le spoiler B s'affiche mais pas A et C. Logique me direz vous, mais je le précise quand même Smiley smile 

#isexpanded:checked ~ .expandable,  #isexpanded2:checked ~ .expandable2, #isexpanded3:checked ~ .expandable3 {
	display: block;
}


Voici ce que j'aurai aimé faire 

input[id^="isexpanded"]:checked ~ [class^="expandable"] {
	display: block;
}

Et là j'ai un comportement étrange… quand je clique sur le lien A (isexpanded1), B (isexepanded2) et C (isexpanded3) s'affichent.
Quand je clique sur le lien B, B (isexepanded2) et C (isexpanded3) s'affichent, mais pas A.
Quand je clique sur le lien C, seul C (isexpanded3) s'affiche.

Conclusion il y a un soucis Smiley lol

1) POuvez vous m'expliquer pourquoi ça déclenche les éléments à suivre et pas les précédents ?
2) je n'arrive pas à trouver à quoi correspond [id^="] dans son fonctionnement exact, pouvez vous me renseigner ?
3) Existe t il un code pour regrouper les isexpanded et expandable sans devoir les numéroter (parce que si je rajoute un spoiler je dois retoucher au code CSS alors que j'aimerai faire comme en PHP et permettre que expandable de expandable à expandable9999999999 soit pris en compte si cela est possible.

Merci de votre précieuse aide. Smiley smile
Modifié par januor (16 Oct 2018 - 23:35)

Dans CSS et mise en forme, CSS3 · Petit soucis avec [id^="xx"]

il y a 10 h
Bonjour,

pour le styling équivalent il faut gérer le line-height, le vertical-align et la marge en plus. exemple:

https://codepen.io/anon/pen/VEyMbr

Pour l'espace, cela est dû au caractère espace qui vient entre chaque élément (tous les espaces, retours à la ligne et tabs consécutifs dans l'HTML sont convertis en une seule espace.

Il existe 3 solutions:

1) coller tes balises fermantes et ouvrantes: </p><button>
2) réduire l'espace à 0: fonct-size: 0 sur le parent et tu redonnes un font-size sur les enfants
3) Utiliser flex et arrêter de s'embêter Smiley smile
Modifié par kustolovic (16 Oct 2018 - 15:49)

Dans CSS et mise en forme, CSS3 · Alignement inline-block

il y a 10 h
Un petit truc qui peut intéresser plus d'un(e) et que j'ai découvert en cherchant sur le Net (https://stackoverflow.com/questions/15195209/how-to-get-font-size-in-html)

On peut avoir besoin de définir une taille de police en fonction d'une autre taille de police.

Par exemple, si un titre a une taille de police de 25px, on peut vouloir le rappeler quelque part en le réduisant de 15 % (ou en le diminuant de 3.75px).

Voici comment procéder :

1) Récupérer la taille de police du titre :
taille_de_police = window.getComputedStyle(monTitre, null).getPropertyValue("font-size");

2) Convertir la taille de police en nombre flottant, ce qui permet notamment d'éliminer l'unité (taille_de_police est une chaîne de caractères comprenant la valeur et l'unité) :
taille_de_police_convertie = parseFloat(taille_de_police);

3) Recopier le contenu du titre :
rappel_du_titre.innerHTML = monTitre.innerHTML;

4) Attribuer la taille de police désirée :
rappel_du_titre.style.fontSize = (taille_de_police_convertie * 0.85) + 'px';

ou
rappel_du_titre.style.fontSize = (taille_de_police_convertie - 3.75) + 'px';


Voili-voilà Smiley smile
Modifié par Beka (16 Oct 2018 - 15:45)

Dans JavaScript, DOM et API Web HTML5 · [Résolu] Définir une taille de police en fonction d'une autre

il y a 12 h
Perso j'ai eu un bac L et a l'époque j'ai du passer par une MANAA (Mise à Niveau en Arts Appliqués) pour intégrer ce BTS. Mais je ne sais pas du tout si c'est encore d'actualité ou si tu peux postuler direct.

En ce qui concerne le niveau de dessin, pour moi pas besoin de savoir dessiner, nous on avait des esquisses à faire en atelier et dans d'autres cours on faisait des croquis, ça te fait pas mal progresser. Mais après un bon niveau n'est pas essentiel je pense. Ce qui importe le plus ce sont tes idées

N'hésites pas si tu as des questions Smiley smile

Dans Le Bar du forum · Question sur le bts design graphique

il y a 12 h
Bonjour,

c'est impossible d'avoir un rendu fluide (prenant en compte un nombre variable de ligne de texte, la variation de la taille des typos et le responsive) avec une ligne de points comme cela. Tes points ne seront jamais alignés proprement surtout que sur ta maquette ils sont relativement gros donc cela se verra forcément.

En précisant des tailles fixes/positionnements absolus c'est faisable mais d'une lourdeur sans nom a intégrer/rendre responsive et à mon avis le résultat sera toujours imparfait a cause des différentes tailles pour les blocs de texte.

Pour moi c'est surtout une erreur de design donc il faut mieux revoir la présentation. Et même si on peut faire beaucoup chose aujourd'hui en présentation web dès fois il vaut éviter certaines choses.

Dans CSS et mise en forme, CSS3 · [Résolu] Timeline avec ligne de points

il y a 12 h
Bonjour !
J'ai un petit soucis de disposition, je n'arrive pas a aligner mon paragraphe avec mon bouton convenablement en haut de mon site, et je suis perdue.
upload/1539675859-72853-capture.png 


<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="style.css"/>
	<meta charset="utf-8">
	<title>CS </title>
</head>
<body>
	<div id="bartop">
		<p id="paratemps">00:00:00</p>
		<button id="btAfficherEquipement">Afficher l'équipement</button>
	</div>
[......]




CSS reset
[...]

      #bartop {
height: 40px;
width: 100%;
}

      #paratemps {
width: 40%;
height: 40px;
border: none;
color: #E1E6FA;
background-color: #375D81;
text-align: center;
font-family: "digitalSeven";
font-size: 20px;
display: inline-block;
}
      #btAfficherEquipement {
width: 40%;
height: 40px;
border: none;
text-align: center;
text-decoration: none;
font-size: 16px;
color: #E1E6FA;
background-color: #375D81;
display: inline-block;
}


J'ai essayé :
> mettre une margin top au bouton = les deux blocks descendent

> display: inline; = la même chose

> les mettre dans des div, puis display: inline block; sur les div = j'ai toujours cet espace.

Il n'y a aucune marge sur mon body et aucun padding. Je ne comprends pas d'ou viennent ces espaces.


De plus quand mes deux blocks on width 49% j'ajoute une margin-left: 2%; à mon bouton celui ci passe à la ligne alors que 49% + 2% + 49% chez moi ça fait juste 100% (et avec mon CSS reset normalement il ne devrait pas y avoir autre chose Smiley confus )...
Merci beaucoup de votre aide !
Modifié par Elaihana (16 Oct 2018 - 13:48)

Dans CSS et mise en forme, CSS3 · Alignement inline-block

25 Dernières réponses
Aller à