Bonjour à tous 
Je suis débutant en HTML et CSS, et je me suis mis en tête de reproduire à la main un site que j'ai commencé sur Wix. Voici le site Wix : http://www.orni-radio.com
Ma question concerne le zoom. En effet, sur la page que j'ai codée à la main, le zoom de mon navigateur agrandit proportionnellement tous les composants de la page. Les polices deviennent plus grandes, etc. Lorsqu'elles ne tiennent plus sur une ligne, le texte en trop va à la ligne, et reste en permanence affiché en totalité à l'écran.
Cela cause des problèmes de mise en page pour de très hautes valeurs de zoom, même si tout mon site est codé avec des valeurs en % et em et non en px.
Ma question donc, est la suivante. Comment obtenir le rendu du zoom de la page Wix ?
Comparons par exemple la page "Infos". Voici la page Wix : http://www.orni-radio.com/#!info/c10fk
Et la page que j'ai codée (HTML puis CSS) :
Sur ma version, comme les images tiennent tout juste dans le cadre, le moindre zoom les réarrange de manière peu esthétique. Wix, en revanche, se contente de "zoomer globalement dans le site". C'est le rendu que je recherche.
Les images font 555x483px.
En vous remerciant par avance pour vos réponses !
Ananké
Je suis débutant en HTML et CSS, et je me suis mis en tête de reproduire à la main un site que j'ai commencé sur Wix. Voici le site Wix : http://www.orni-radio.com
Ma question concerne le zoom. En effet, sur la page que j'ai codée à la main, le zoom de mon navigateur agrandit proportionnellement tous les composants de la page. Les polices deviennent plus grandes, etc. Lorsqu'elles ne tiennent plus sur une ligne, le texte en trop va à la ligne, et reste en permanence affiché en totalité à l'écran.
Cela cause des problèmes de mise en page pour de très hautes valeurs de zoom, même si tout mon site est codé avec des valeurs en % et em et non en px.
Ma question donc, est la suivante. Comment obtenir le rendu du zoom de la page Wix ?
Comparons par exemple la page "Infos". Voici la page Wix : http://www.orni-radio.com/#!info/c10fk
Et la page que j'ai codée (HTML puis CSS) :
<DOCTYPE! html>
<html>
<head>
<meta charset="utf-8" />
<title>L'ORNI - Infos</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="bloc_page">
<header>
<nav>
<img src="images/logo_radio_u_sombre.png" alt="Logo de Radio U" />
<div class="menu">
<ul>
<li>
<a href="accueil.html">Accueil</a>
</li>
<li>
<a class="page_active">Infos</a>
</li>
<li>
<a href="podcasts.html">Podcasts</a>
</li>
<li>
<a href="actualites.html">Actualités</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<section>
<div id="contenu"> <!-- Cette div permet de changer la width pour mettre des marges identiques à tous les éléments dans la section, sans pour autant changer la taille du bloc section, de couleur chair. -->
<h2>Dîner d'ondes</h2>
<h3>Qu'est-ce que l'ORNI ?</h3>
<p>
L'ORNI, c'est une émission axée sur des entretiens avec des acteurs culturels divers. <br />
L'ORNI, ce sont des chroniques musicales, littéraires, sonores, cinématographiques. <br />
L'ORNI, c'est un distilleur de sons à l'heure du thé. <br />
L'ORNI, c'est un demi-thorynque et deux tiers d'Ornicar.
</p>
<h3>L'équipage de l'ORNI</h3>
<div id="mosaique">
<div class="personne_orni_gauche">
<img class="image_equipe_gauche" src="images/equipe/solal.jpg" alt="Solal Hellio, producteur de l'ORNI" />
<p>Solal Hellio, le pilote</p>
</div>
<div class="personne_orni_centre">
<img class="image_equipe_centre" src="images/equipe/olivier.jpg" alt="Olivier Beaufret, metteur en ondes de l'ORNI" />
<p>Olivier Beaufret, l'homme de l'ombre</p>
</div>
<div class="personne_orni_droite">
<img class="image_equipe_droite" src="images/equipe/lucas.jpg" alt="Lucas Pizzini, le transfuseur sonore" />
<p>Lucas Pizzini, le transfuseur sonore</p>
</div>
<div class="personne_orni_gauche">
<img class="image_equipe_gauche" src="images/equipe/edgar.jpg" alt="Edgar Imbault, le cinématovore" />
<p>Edgar Imbault, le cinématovore</p>
</div>
<div class="personne_orni_centre">
<img class="image_equipe_centre" src="images/equipe/victor.jpg" alt="Victor Blanchard, le musicovore" />
<p>Victor Blanchard, le musicovore</p>
</div>
<div class="personne_orni_droite">
<img class="image_equipe_droite" src="images/equipe/ludmila.jpg" alt="Ludmila Besnard-Dordet, la librivore" />
<p>Ludmila Besnard-Dordet, la librivore</p>
</div>
</div>
</div>
</section>
<footer>
<div id="bandeau">
<div id="copyright">
© 2015 - Solal Hellio
</div>
<div id="reseaux_sociaux">
<ul>
<li>
<img src="images/ico_facebook.png" alt="Logo de Facebook" />
</li>
<li>
<img src="images/ico_youtube.png" alt="Logo de Youtube" />
</li>
<li>
<img src="images/ico_twitter.png" alt="Logo de Twitter" />
</li>
<li>
<img src="images/ico_vimeo.png" alt="Logo de Vimeo" />
</li>
<li>
<img src="images/ico_soundcloud.png" alt="Logo de SoundCloud" />
</li>
</ul>
</div>
</div>
</footer>
</div>
</body>
</html>/* Déclaration des polices personnalisées */
@font-face
{
font-family: 'Dayrom';
src: url('polices/dayrom.eot');
src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
url('polices/dayrom.ttf') format('truetype'),
url('polices/dayrom.woff') format('woff'),
url('polices/dayrom.svg#Dayrom') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: 'Ailerons';
src: url('polices/ailerons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: 'Play';
src: url('polices/play_regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Propriétés générales de la page */
body
{
background: rgb(24, 27, 32);
}
nav, section, #bandeau
{
width: 70%;
margin: auto;
}
ul
{
padding-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
font-family: 'Play', sans-serif;
font-size: 1.2em;
}
/* Header & Navigation */
header
{
background: rgb(148, 55, 59);
}
nav img
{
float: left;
}
nav ul
{
list-style-type: none;
text-transform: uppercase;
text-align: right;
padding-top: 7%;
padding-bottom: 7%;
}
nav li
{
display: inline;
margin-left: 2%;
}
nav a
{
color: white;
text-decoration: none;
}
nav a:hover
{
color: rgb(255, 252, 150);
}
.page_active
{
color: black;
}
/* Section de la page d'accueil */
#section_accueil
{
color: white;
text-align: center;
margin-top: 5.5%;
margin-bottom: 8%;
}
#titre_accueil, #sous_titre_accueil /* Ces deux ID ne servent que pour la page d'accueil */
{
margin-top: 0px;
margin-bottom: 0px;
}
#titre_accueil
{
font-family: 'Ailerons', sans-serif;
font-size: 10em;
margin-bottom: 2%;
}
#sous_titre_accueil
{
font-family: 'Play', sans-serif;
font-style: italic;
font-size: 2.3em;
margin-bottom: 0px;
}
/* Section des autres pages */
section
{
background: rgb(228, 228, 229);
margin-top: 1%;
margin-bottom: 1%;
}
#contenu
{
width: 95%;
margin: auto;
padding-top: 1.228%;
}
section h2, section h3, section p
{
font-family: 'Open Sans', sans-serif;
}
section p
{
font-size: 1em;
color: rgb(64, 65, 58);
}
section h2
{
font-size: 3.5em;
color: rgb(131, 42, 44);
margin-top: 0px;
margin-bottom: 1%;
}
section h3
{
font-size: 1.4em;
text-align: center;
color: rgb(120, 0, 0);
}
#mosaique
{
}
.image_equipe_gauche, .image_equipe_centre, .image_equipe_droite
{
width: 85%;
padding-top: 5%;
}
.personne_orni_gauche, .personne_orni_centre, .personne_orni_droite
{
background: rgb(217, 217, 218);
margin-bottom: 2.5%;
width: 30%;
display: inline-block;
text-align: center;
}
.personne_orni_gauche
{
margin-right: 0px;
}
.personne_orni_centre
{
margin-left: 4.5%;
margin-right: 4.5%;
}
/* Footer */
footer
{
background: rgb(148, 55, 59);
color: white;
}
#copyright
{
float: left;
}
#reseaux_sociaux
{
text-align: right;
}
#reseaux_sociaux ul
{
list-style-type: none;
}
#reseaux_sociaux li
{
display: inline;
}
#bandeau
{
padding-top: 1%;
padding-bottom: 0.5%;
}
Sur ma version, comme les images tiennent tout juste dans le cadre, le moindre zoom les réarrange de manière peu esthétique. Wix, en revanche, se contente de "zoomer globalement dans le site". C'est le rendu que je recherche.
Les images font 555x483px.
En vous remerciant par avance pour vos réponses !
Ananké