CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

[html] Comment modifier proportionnellement la taille

[N]amek
[N]amek
Niveau 8
21 septembre 2016 à 17:19:55

Salut,

J'ai un code en html qui représente un rectangle avec des éléments inscrits dedans (lettres + logos + formes).
Qu'est-ce que je dois modifier dans le code pour tout augmenter ou réduire en même temps ? L'équivalent de CTRL + T sur Photoshop, si vous préférez...

Merci.

[N]amek
[N]amek
Niveau 8
22 septembre 2016 à 03:36:20

Voici le code en question, je souhaiterais changer la taille de tout le bloc de manière proportionnelle.

<html><body><style type="text/css">
.bvc1 {
    width:100%;
    background-color:transparent;
	height:42px;
    box-sizing:border-box;
    display:inline-block;
    font-family:Candara, Ubuntu, Arial ,sans-serif;
}
.bvclogo {
  width:250px;
  height:42px;  
  color:white;
  font-size:25px;
  font-variant:small-caps;
  background-color:#017ADF;
  height:inherit;
  line-height:42px;
  text-align:center;
  box-sizing:border-box;
  position:relative;
  z-index:1;
}
.bvclogo:after {
  content:'';
  display:block;
  position:absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 0 42px 10px;
  border-color: transparent transparent transparent #017ADF;
  right:-10px;
  top:0;
  z-index:1;
}
.bvc2 {
  margin:0 auto;
  width:100%;
  max-width:800px;
  background-image:linear-gradient(to right, #FCD800, #FB0303);
  display:flex;
  font-weight:bold;
  position:relative;
}
.bvc3 {
  width:460px;
  height:42px;
  line-height:42px;
  box-sizing:border-box;
  color:#FFF;
  font-size:20px;
  text-align:center;
}
.bvc4 {
  right:0;
  background-color:#0A0B97;
  width:100px;
  z-index:1;
  transition:0.4s;
  text-align:center;
  color:#FFF;
  font-weight:bold;
  line-height:42px;
  position:absolute;
}
.bvc4:after {
  content:'';
  display:block;
  position:absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 0 42px 10px;
  border-color: #0A0B97 #0A0B97 #0A0B97 transparent;
  right:100px;
  top:0;
  z-index:1;
}
.bvcrollover {
  opacity:0;
  top:0;
  width:450px;
  height:42px;
  background-color:#54C621;
  position:absolute;
  transition:0.4s;
  white-space:pre;  
  text-align:center;
  line-height:42px;
  color:#FFF;
  font-size:12px;
  font-weight:bold;
}
.bvc4rollover {
  opacity:0;
  right:0;
  background-color:#0A0B97;
  width:100px;
  z-index:1;
  transition:0.4s;
  text-align:center;
  color:#FFF;
  font-weight:bold;
  position:absolute;
  font-size:12px;
  margin-top:7px;
}
.bvc2:hover .bvcrollover {
  opacity:1;
}
.bvc2:hover .bvc4rollover{
  opacity:1;
}
</style>
<a href="https://bitcoinvideocasino.com/videopoker">   <span class="bvc1">     <span class="bvc2">       <span style="display:block" class="bvclogo">Random Advertising</span>      <span style="display:block" class="bvcrollover">LOREM       IPSUM       DOLOR SIT AMET</span>       <span style="display:block" class="bvc3">Lorem ipsum dolor sit amet</span>       <span style="display:block" class="bvc4">RANDOM</span>		<span style="display:block" class="bvc4rollover">Lorem ipsum 
<br>dolor sit amet</span></a></body></html>
MtKoopa
MtKoopa
Niveau 8
22 septembre 2016 à 19:10:12

Salut,

Ce code n'est pas franchement très propre. (Même en passant outre l'indentation)

Mais en gros, si tu veux redimensionner ceci tu vas devoir modifier les valeurs en pixel (px) des attributs suivants :
- width
- max-width (si tu dépasses les 800px)
- height
- line-height
- font-size

Il n'est pas à exclure que tu ais à modifier aussi les valeurs de "top" et de "right".
Il ne me semble pas en avoir oublié, mais je ne vais pas le certifier, parce que j'ai lu ça assez rapidement.

En somme, c'est une bonne partie du code qui est à remanier, c'est pas aussi simple que de redimensionner sous un logiciel de graphisme. :)

Sans oublier qu'il y a des passages clairement aberrants.

Pourquoi ne pas juste t'inspirer de ceci pour créer ton propre design ? C'est plus de boulot, mais t'auras un plus grand contrôle ; Et puis ça sera surement plus propre ...
Et si tu ne connais pas bien le CSS, c'est justement le moment de l'apprendre ! :-)

Sous forums
  • Aide à l'achat Mac
  • Création de sites web
  • Création de Jeux
  • Linux
  • Programmation
  • Internet
  • Steam Deck
  • Macintosh
  • Hardware
La vidéo du moment