Bonjour a tous,
je vous écris parce que j'essaye de coder un site en HTML/CSS et que pour ~~ safari ~~ il y a toujours un probleme.
Mes flex-box ne s'alignent pas comme je le voudrait alors que sur les autres navigateurs je n'ai aucun soucis.
J'ai fait un slideshow et il ne fonctionne pas sur safari (sur firefox non plus d'ailleurs !)
Je voudrais essayer de commencer a mettre ma page en responsive mais je n'ai pas envie de faire les choses à l'envers: Je voudrais d'abord régler le problème safari.
je vous fais suivre mon code en espérant que vous pourrez m'aidez. Merci d'avance.
voici le HTML :
et voici le CSS :
J'espère que vous pourrez m'aider.
Merci.
je vous écris parce que j'essaye de coder un site en HTML/CSS et que pour ~~ safari ~~ il y a toujours un probleme.
Mes flex-box ne s'alignent pas comme je le voudrait alors que sur les autres navigateurs je n'ai aucun soucis.
J'ai fait un slideshow et il ne fonctionne pas sur safari (sur firefox non plus d'ailleurs !)
Je voudrais essayer de commencer a mettre ma page en responsive mais je n'ai pas envie de faire les choses à l'envers: Je voudrais d'abord régler le problème safari.
je vous fais suivre mon code en espérant que vous pourrez m'aidez. Merci d'avance.
voici le HTML :
<!doctype>
<html>
<head>
<meta charset="utf-8" />
<Title>>Test</Title>
<link rel="stylesheet" href="home.css" />
</head>
<body>
<header>
<div id="logo">
<a href="index.html"><img src="image/logo/logo100height.png" alt="Logo Ac-trend Immo" /></a>
</div>
<nav>
<ul>
<li><a href="#">Location</a></li>
<li><a href="#">Vente</a></li>
<li><a href="#">Projet</a></li>
<li><a href="#">Formulaires</a></li>
<li><a href="#">Equipe</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="slide">
<img src="image/slideshow/redim/racine.jpg" />
<img src="image/slideshow/redim/bois.jpeg"/>
<img src="image/slideshow/redim/cles.jpg" />
<img src="image/slideshow/redim/famille.jpg" />
</div>
<div id="bienvenue">
<div id="bienvenuetexte">
<h1>Bienvenue chez Ac-trend Immo</h1>
<p>De nos jours, le respect de la nature est devenu une mission à chacun. Il faut préserver ce que la vie nous donne.</p>
<p>C'est pourquoi, chez Ac-trend Immo nous avons décidez de construire des logements respèctant aux mieux l'écologie. Chacune de nos habitations répond au mieux aux dernières normes environnementales.</p>
<p>Des logemements plus verts pour une vie plus saine.</p>
<a href="#">En savoir plus</a>
</div>
<div id="bienvenuephoto">
<img src="image/bienvenue/portraitrd.png" alt="Photo de bienvenue" />
</div>
</div>
<footer>
<ul id="adresse">
<li>Ac-trend Immo</li>
<li>Les abysses,54</li>
<li>23380 - Le village</li>
</ul>
<ul id="telephone">
<li>06.48.24.97.12</li>
<li>contact@gmail.com</li>
</ul>
<div id="externe">
<p>Retrouvez-nous sur :</p>
<ul>
<li><img src="image/externe/anibisrd.png" /></li>
</ul>
</div>
</footer>
</body>
</html>
et voici le CSS :
body
{
font-family: georgia;
background-color: rgb(249, 249 ,249);
}
/* Mise en place du header */
header
{
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
height: 120px;
border-bottom: 1px solid black;
}
#logo img
{
margin-left: 100px;
margin-top: 5px;
}
nav ul
{
display: -webkit-box;display: -ms-flexbox;display: flex;
padding-right: 110px;
padding-top: 50px;
}
nav li
{
list-style-type: none;
font-size: 1.4em;
padding-right: 35px;
}
nav a
{
text-decoration: none;
color: rgb(38, 148, 213);
}
nav a:hover
{
font-size: 1.8em;
-webkit-transform: translateX(200px);transform: translateX(200px);
-webkit-transition-duration: 0.8s;transition-duration: 0.8s;
}
/* Mise en place du slideshoy */
#slide
{
display: -webkit-box;display: -ms-flexbox;display: flex;
margin-top: 40px;
width: 1200px;
overflow: hidden;
position: relative;
left: 10%;
}
#slide img
{
height: 507px;
-webkit-animation: dep 8s infinite;animation: dep 8s infinite;
}
@-webkit-keyframes dep;
@keyframes dep
{
0%
{
transform: translateX(0px);
}
25%
{
transform: translateX(-1200px);
}
50%
{
transform: translateX(-2400px);
}
75%
{
transform: translateX(-3600px);
}
100%
{
transform: translateX(0px);
}
}
/* Mise en place de la div bienvenue */
#bienvenue
{
display: -webkit-box;display: -ms-flexbox;display: flex;
margin-left: 10%;
margin-right: 10%;
margin-top: 80px;
padding: 20px;
background-color: rgb(232, 232, 232);
-webkit-box-shadow: 6px 6px 6px rgb(202, 202, 202);box-shadow: 6px 6px 6px rgb(202, 202, 202);
}
#bienvenuephoto
{
margin-left: 30px; /* espace entre photo et texte */
}
#bienvenuetexte h1
{
font-size: 2em;
margin-top: -0px; /*je sais pas pourquoi mais ça marche */
}
#bienvenuetexte p
{
font-size: 1.05em;
}
#bienvenuetexte a
{
border-radius: 10px;
padding: 6px;
color: black;
text-decoration: none;
background-image: radial-gradient(circle at top left, rgb(232, 232, 232),rgb(193, 234, 236));
position: relative;
left: 300px;
top: 15px;
}
/* Mise en place du footer */
footer
{
margin-top: 50px;
display: -webkit-box;display: -ms-flexbox;display: flex;
-ms-flex-pack: distribute;justify-content: space-around;
font-size: 1.1em;
}
#adresse li
{
list-style-type: none;
padding-top: 2px;
}
#telephone li
{
list-style-type: none;
padding-top: 2px;
}
#externe li
{
list-style-type: none;
position: relative;
top: -5px;
left: 20.5px;
}
J'espère que vous pourrez m'aider.
Merci.
