<div class="container">
<div class="row">
<div class="col-md-10">
<p id="testo">
Cor is an Italian artist based in Belgium.<br>
Cor is both analogic and digital<br>
Cor looks towards vernacular, surrealist<br>
and pop culture.<br>
</p>
</div>
<div class="col-md-2" id="vertical">
<a class="contact" href="#">Instagram </a>
<a class="contact" href="#">Email </a>
<a class="contact" href="#">Credits </a>
</div>
</div>
</div>
div.row {position: fixed;}
#vertical {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
J'essaye d'insérer dans un conteneur bootstrap (contenant uniquement du texte avec position: fixed) une liste de contacts pivotés verticalement (comme e-mail, instagram ecc) qui doit être sur le bord droit du écran (à l'intérieur du conteneur, donc avec la position: fixe également) mais j'ai des problèmes de positionnement, pourriez-vous m'aider?
3 Réponses :
Votre ligne doit avoir une largeur de 100%. Ajoutez ce CSS à votre page:
.row {
width: 100%;
}
div#vertical {
position: absolute;
top: 85px;
right: -35px;
}
ok merci maintenant les contacts sont à droite mais ils ne sont pas correctement formatés, le générique n'est pas sous email mais il s'effondre à gauche
D'accord, vous avez donc besoin que les éléments soient les uns sous les autres? Peut-être une liste non ordonnée?
eh bien oui une liste devrait fonctionner aussi, et j'essaye de donner une certaine distance entre les 3 contacts en conservant les bonnes proportions entre le texte dans le conteneur et les contacs, car toute la page ne semble pas très réactive pour le moment
J'ai modifié votre code HTML pour avoir la navigation latérale en dehors du conteneur et corrigé uniquement ce div avec le texte vertical.
<div class="side-nav">
<a class="contact" href="#">Instagram </a>
<a class="contact" href="#">Email </a>
<a class="contact" href="#">Credits </a>
</div>
<div class="container">
<div class="row">
<p id="testo">
Cor is an Italian artist based in Belgium.<br>
Cor is both analogic and digital<br>
Cor looks towards vernacular, surrealist<br>
and pop culture.</p>
</div>
</div>
.side-nav {
position:fixed;
right:0;
top:100px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
background:#c0c0c0;
}
.row{/*just to see nav is fixed*/
height:1000px;
}
Comme @ Imvain2, j'ai déplacé votre texte vertical hors du conteneur; en fait, Bootstrap n'est peut-être pas nécessaire ici.
#vertical {
position: fixed;
background-color:#cccccc;
top: 0;
bottom: 0;
right: 0;
left: calc(100% - 48px);
}
.wrapper {
position: absolute;
margin-right: -100%;
transform: rotate(90deg) translate(0, -15px);
transform-origin: left bottom;
width: 100vh;
}
J'ai également stylisé un peu plus votre texte vertical, de sorte qu'il affleure à droite de la fenêtre. Plus important encore, le wrapper du texte vertical doit avoir une largeur de 100vh , car il est en cours de rotation.
<div class="container">
<div class="row">
<div class="col-md-10">
<p id="testo">
Cor is an Italian artist based in Belgium.<br>
Cor is both analogic and digital<br>
Cor looks towards vernacular, surrealist<br>
and pop culture.<br>
</p>
</div>
</div>
</div>
<div id="vertical">
<div class="wrapper">
<a class="contact" href="#">Instagram</a>
<a class="contact" href="#">Email</a>
<a class="contact" href="#">Credits</a>
</div>
</div>
Voir le stylo .
dernière question, comment puis-je rendre le texte vertical réactif comme celui du conteneur?
désolé, j'ai eu des problèmes pour fournir du code
Vous voulez donc que le côté gauche soit également réparé? De plus, s'il est aligné sur le côté du conteneur, cela ne signifie pas toujours que c'est le bord de l'écran.
je veux quelque chose comme ça jsbin.com/ravuduni/2
mais à droite