17552 sujets

Questions générales et questions de débutants

Rendre Responsive Webdesign mon chat...

14 Dec 2019 à 18:23
Allez... pour Noël,
j'ai retrouvé ce vieux script découvert à l'époque sur le web.
il fallait mettre autour d'une image ronde, un texte ...
Cela marche toujours, MAIS...
1) copiez collé c'est cadeau Noël.
2) mettez le dans un html, et testez.
Tout va bien sauf que je ne sais dans tout ces paramètres de l'époque à quoi toucher pour le rendre responsive ??
Merci les Amis Smiley cligne 

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<title>Fox Infographie le chat</title>
</head><body>
<style>
body {margin:0;padding:0;font-family: sans-serif;}
.container {position : absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:600px;padding:30px;background:#ffffff;
box-sizing:border-box;
border-radius:10px;
box-shadow: 0 15px 50px rgba(0,0,0,-2);
}
.circle {
width:200px;height:200px;
background:url(http://www.fox-infographie.com/forum/chat.jpg);                   
background-size:100% 100%;
border-radius:50%;
float:left;shape-outside:circle();marging:30px
}
</style>
<div class="container"><div class="circle"></div>
<h1>Houp's un texte autour d'un rond</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet sagittis felis sit amet imperdiet. Suspendisse pharetra vulputate laoreet.
 Ut id bibendum nibh, id eleifend augue. Sed id neque ut ex pulvinar blandit id at eros. Fusce molestie, lorem pretium facilisis iaculis, magna magna 
 lobortis elit, a rutrum felis eros vitae elit. Vivamus quis neque lobortis, gravida elit a, auctor nunc. Nullam urna lacus, consectetur id suscipit 
 vel, rhoncus ut neque. Quisque pellentesque augue a lectus tincidunt malesuada. Donec sed turpis sit amet enim efficitur porttitor. Integer accumsan,
 purus eget efficitur gravida, arcu arcu dictum enim, id imperdiet dolor turpis ac mauris. Praesent eget bibendum nisi. Sed a interdum sapien, 
 porttitor euismod leo. Pellentesque sem augue, varius vel ipsum in, convallis facilisis dolor. Sed ex nisl, euismod nec nulla et, 
 porta dapibus magna. Nunc convallis tellus eu aliquam ultricies. Phasellus auctor felis ac lobortis finibus.
</p></div></body></html>

Modifié par Jean-Pierre-Bruneau (15 Dec 2019 - 12:53)
14 Dec 2019 à 18:35
Salut !

Pourquoi pas un simple width: 80vw; sur le .container ? à la place du 600px

L'image est minuscule, je ne sais pas s'il faut s'en soucier, et pour le titre, on peut lui donner une font-size en vw à partir d'un certain point mais là encore, je ne sais pas si c'est vraiment nécessaire, il se met à la ligne tout seul ^^
16 Dec 2019 à 01:35
Salut, je viens de voir ton message !

Autant pour moi, c'est le box-sizing qui produit cet effet. Il faut soit le supprimer, soit lui donner la valeur content-box.

Et tant qu'à faire, le border-radius, le box-shadow et même le padding ne sont probablement pas utiles.

A vrai dire, tu pourrais juste garder..

position : absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:80vw;


..sur le .container, et là normalement c'est tout bon. Le texte reste autour du rond et le tout est reponsive.

Le petit plus, ce serait de donner une font-size en VW au h1 à partir d'un certain point. Comme ça le titre tourne autour du rond pendant que tu réduit la fenêtre, enfin, j'imagine que c'est l'enjeu de cette page, je ne sais pas ^^

ps: y'a un g en trop sur le margin du .circle !
Prévenir un modérateur
Répondre au sujet
Aller à