Width différent selon le navigateur !
Bonjour à tous,
Je n'ai pas le même "width" selon que j'ouvre mon site avec Firefox, Mozilla ou safari...? J'ai défini ma section "aside" avec un width de 305px ! Seulement sur chrome ça s'affiche bien, sur Mozilla c'est trop large et sur safari c'est pas assez large...?
Mon HTML :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles/styles.css" />
<title>Mon CV2 - Mme Risette</title>
</head>
<body>
<!--Mon liseré-->
<aside>
<p>ENVOLEZ VOUS AVEC MOI !</p>
</aside>
<!--Corps de mon CV-->
<section id="cv">
<!--Entête de mon CV-->
<header>
<div id="titre">
<a href="ma_photo_gd.html" title="Cliquez sur la photo, cela vous met ma photo en grand !" class="titre_photo"><img src="images/ma_photo.jpg" alt="Ma photo"/></a>
<h1>Mme Risette</h1>
<p>Apporte joie et bonheur à toute personne receptive !</p>
</div>
<div id="objet">
<h2>Objet</h2>
<p>Recherche un poste de <strong>Clown</strong>.</p>
</div>
</header>
<section id="details_cv">
<article id="xp">
<h2>Mon expérience</h2>
<ul>
<li><span class="date">2016-2017</span> : Animatrice au Zoo de Beauval. <em>Apporter de la joie et de la bonne humeur !</em> aux animaux comme aux Hommes !</li>
<li><span class="date">2015-2016</span> : Guide touristique au gouffre de Padirac. <em>Egayer les vacances des visiteurs</em> en ce site magnifique !</li>
<li><span class="date">2014-2015</span> : Clown dans la troupe du cirque Pindère. <em>Apporter joie, bonheur et fou rire</em> aux plus petits comme aux plus grands !</li>
<li><span class="date">2013-2014</span> : Animatrice à l'hôpital du centre. <em>Changer le quotidien des enfants</em> en longue convalescence</li>
</ul>
</article>
<article id="form">
<h2>Ma formation</h2>
<ul>
<li><span class="date">2017</span> : Certificat HTML5 sur Open ClassRoom. N'hésitez pas à visiter <a href="https://open classrooms.com/dashboard" title="Le site le plus génial du moment ! venez apprendre avec eux">leur site !</a></li>
<li><span class="date">2013</span> : Certificats de l'école du rire et du bonheur. Venez la découvrir <a href="http://www.ecolederire.org/ecole-internationale-du-rire.html" title="Venez découvrir l'école du rire et du bonheur !">ici !</a></li>
</ul>
</article>
<article id="comp">
<h2>Mes Compétences</h2>
<ul>
<li><strong>Logistique d'un numéro</strong></li>
<li><strong>Acrobatie</strong></li>
<li><strong>Maitrise des techniques d'expression corporelle</strong></li>
<li>HTML - <em>pour divertir aussi sur le web</em> -</li>
</ul>
</article>
</section>
</section>
</body>
</html> |
Et mon CSS :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163
| /*pour tout*/
html
{
background-image : url("../images/fond.jpg");
background-color : Orange; /*Au cas où l'image aurait un souci...*/
overflow-x : hidden;
}
body
{
width : 100%;
color : White;
display: flex;
display: -webkit-flex; /*Pour safari ! Attention uniquement en 6.1 minimum !*/
flex-direction : row;
-webkit-align-content: stretch;
align-content: stretch;
}
/*Pour l'index*/
/*Mon liseré*/
aside
{
width : 305px;
background-image : url("../images/lisere.png");
border : 3px black solid;
border-radius : 50px / 30px;
box-shadow : 10px 10px 15px black;
}
/*Les sections*/
#cv
{
display : flex;
display: -webkit-flex; /*Pour safari ! Attention uniquement en 6.1 minimum !*/
flex-direction : column;
padding-left : 1%;
}
header
{
display : flex;
display: -webkit-flex; /*Pour safari ! Attention uniquement en 6.1 minimum !*/
flex-direction : column;
}
#details_cv
{
display : flex;
display: -webkit-flex; /*Pour safari ! Attention uniquement en 6.1 minimum !*/
flex-direction : row;
}
div, article
{
margin-bottom : 20px;
margin-right : 10px;
Background-color : rgba(137, 133, 133, 0.8);
border : 3px black solid;
border-radius : 50px / 30px;
box-shadow : 10px 10px 15px black;
text-align : center;
line-height : 30px;
}
h2
{
text-decoration : underline;
font-size : 2em;
}
ul, li
{
text-align : left;
}
a
{
color : white;
}
a:hover
{
font-weight : bold;
font-size : 1.2em;
}
strong
{
font-size : 1.2em;
}
.date
{
text-decoration : underline;
font-weight : bold;
}
#titre
{
position : relative;
padding-left : 30px;
}
#titre h1
{
font-size : 3em;
text-shadow : 10px 10px 15px white;
}
a.titre_photo
{
width : 118px;
height : 107px;
position : absolute;
margin-top : 15px;
left : 100px;
float : left;
border : 3px black solid;
}
em
{
font-family: 'AlexBrush-Regular', Arial, serif;
font-size : 1.2em;
}
@font-face /* Définition d'une nouvelle police nommée LearningCurveProRegular, plusieurs polices selon celle qui sera supportée par le navigateur, il la téléchargera en conséquence !*/
{
font-family: 'AlexBrush-Regular';
src : url('../polices/AlexBrush-Regular.ttf') format('truetype');
}
/*Pour la page grande photo*/
a.photo_gd
{
width : 472px;
height : 428px;
margin-top : 15%;
margin-left : auto;
margin-right : auto;
display : block;
border : 10px black solid;
} |
Avez-vous une idée de la raison d'un tel problème ? Et surtout comment le corriger ? Car mon aside à une image background hyper précise qui ne doit pas changer de width...