site web pas bien affiché

Bonjour a tous,

Je ne sais pas si je suis au bon endroit , et je m'excuse par avance si ce n'est pas le cas.

je me suis entrainé a faire un site web, mais celui ci ne s'affiche pas bien du tout sur safari.

Il fonctionne bien sur edge, explorer, chrome et mozilla.

Pouvez-vous m'aiguiller s'il vous plaît?

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="../css/style.css">
		<title>Hotel 5***** Parimis</title>
		<link rel="stylesheet" media="screen and (max-width: 1280px)" href="../css/petite_resolution.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta name="description" content="hotel parimis paris, spa, chambre de luxe,restaurant Parimis, avenue Montaigne">
		<meta name="author" content="Elayache Farouk">
		
	</head>
	<body>
		<div id="conteneur">
			<header>
				<div class="entete">
					<div class="langue">
					<div class="logo_terre">
						<p><img src="../img/terre.png" alt="logo terre"><a href="#">Fr</a> | <a href="#">En</a></p>
					</div>
					</div>
						<div class="logo">
						<p><a href="../index.html"><img src="../img/logo.png" alt="logo de l'hotel"></a></p>
					</div>
					<div class="searchbar">
					<div class="panier">
					<div class="logo_panier">
						<p><img src="../img/panier.png" alt="votre panier"><a href="../pages/reservation.html">Panier</a></p>
					</div>
					</div>
						<label for="text"></label>
						<input type="text" id="text" name="text" placeholder="rechercher">
						<input type="submit" value="rechercher">
					</div>
					</div>
			</header>
			<nav>
				<ul id="menu">
						<li><a href="../index.html">L'HOTEL</a>
					<ul>
						<li><a href="../pages/qui_sommesnous.html">Qui sommes-nous?</a></li>
						<li><a href="../pages/acces.html">Acces</a></li>
						<li><a href="../pages/contact.html">Contact</a></li>
						<li><a href="../pages/recrutement.html">Recrutement</a></li>
						<li><a href="../pages/evenement.html">Evénement</a></li>
						<li><a href="../pages/presse.html">Presse</a></li>
					</ul>
						</li>
						<li><a href="../pages/chambre.html">CHAMBRE & SUITE</a>
					<ul>
						<li><a href="../pages/chambre.html">Voir toutes les gammes</a></li>
						<li><a href="../pages/classique.html">Chambre Classique</a></li>
						<li><a href="../pages/confort.html">Chambre Confort</a></li>
						<li><a href="../pages/deluxe.html">Chambre Deluxe</a></li>
						<li><a href="../pages/suite.html">La Suite</a></li>
					</ul>
						</li>
						<li><a href="../pages/restaurant.html">RESTAURANT</a>
						</li>
						<li><a href="../pages/lespa.html">LE SPA</a>
						</li>
						<li><a href="../pages/reservation.html">RESERVATION</a></li>
						<li><a href="../pages/actualites.html">ACTUALITES</a></li>
						<li><a href="../pages/votreavis.html">VOTRE AVIS</a></li>
				</ul>
			</nav>
				<div class="clear"></div>
				
				<section>
					<div id="formulaire_recrutement">
					<h1>Rejoignez-nous !</h1>
					<hr>
					<form method="post" action="formulaire.php">
							
								<label for="genre1">
								<input type="radio" value="1" id="genre1" name="sexe">Mr
								</label>
								<label for="genre2">
								<input type="radio" value="2" id="genre2" name="sexe">Mme
								</label><br>
							
								<label for="nom">Nom :</label>
								<input type="text" id="nom" name="nom" placeholder="Votre prenom"><br><br>
								
								<label for="prenom">Prenom :</label>
								<input type="text" id="prenom" name="prenom" placeholder="Votre prenom"><br><br>

								<label for="entreprise">Entreprise :</label>
								<input type="text" id="entreprise" name="entreprise" placeholder="Si vous êtes une entreprise"><br><br>
								<label for="email">Email :</label>
								<input type="email" id="email" name="email" placeholder="Votre adresse email"><br><br>

								<label for="email">Confirmer votre adresse Email:</label>
								<input type="email" id="email2" name="email" placeholder="Confirmer votre adresse e-mail "><br><br>
								<label for="file1">Curriculum vitae :</label>
   								<input type="file" id="file1" name="file" multiple><br>
   								<label for="file">Lettre de Motivation :</label>
   								<input type="file" id="file" name="file" multiple><br>
								
								<label for="message">Message</label>
						        <textarea name="message" id="message" required="" placeholder="Ecrivez votre message ici..."></textarea><br>
								<input type="submit" value="Envoyer">
						</form>
					</div>
				</section>
				<footer>
				<div class="footer">
					<div class="reseausociaux">
						<a href="https://fr-fr.facebook.com/" class="social"><img src="../img/facebook.png" alt="facebook">FACEBOOK</a>
						<a href="https://twitter.com/?lang=fr" class="social"><img src="../img/twitter.png" alt="twitter">TWITTER</a>
						<a href="https://www.instagram.com/?hl=fr" class="social"><img src="../img/instagram.png" alt="instagram">INSTAGRAM</a>
						<a href="https://www.tripadvisor.fr/" class="social"><img src="../img/tripadvisor.png" alt="tripadvisor">TRIPADVISOR</a>
						<a href="https://www.pinterest.fr/" class="social"><img src="../img/pinterest.png" alt="pinterest">PINTEREST</a>
					</div>
					<div class="liendivers">
						<h3>Liens utiles:</h3>
						<ul>
							<li><a href="../pages/cgv.html">Conditions générales de ventes</a></li>
							<li><a href="../pages/mentionslegales.html">Mentions légales</a></li>
							<li><a href="../pages/plandusite.html">Plan du site</a></li>
							<li><a href="#" onclick="print(); return false;"><img src="../img/printer.png" alt="printer">Imprimer la page</a></li>
							<li><a href="../pages/contact.html">Contact</a></li>
							<li><a href="../pages/acces.html">Accès</a></li>
						</ul>
							<p>&copy;2018  Ce site à aucun but lucratif Conception et réalisation Elayache Farouk. Tous droit réservé.</p>
					</div>
						<form action="../pages/newsletter.html">
						<div class="newsletter">
						<h3>Newsletter:</h3>
						<label for="email">Email :</label>
						<input type="email" id="email" name="email" placeholder="email">
						<input type="submit" value="S'inscrire">
					</div>
					</form>
				</div>
			</footer>
		</div>
	</body>
</html>

html

@font-face {
    font-family: 'ambleregular';
    src: url('fonts/Amble-Regular-webfont.eot');
    src: url('fonts/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Amble-Regular-webfont.woff2') format('woff2'),
         url('fonts/Amble-Regular-webfont.woff') format('woff'),
         url('fonts/Amble-Regular-webfont.ttf') format('truetype'),
         url('fonts/Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'colaborate-regularregular';
    src: url('ColabReg-webfont.eot');
    src: url('ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
         url('ColabReg-webfont.woff2') format('woff2'),
         url('ColabReg-webfont.woff') format('woff'),
         url('ColabReg-webfont.ttf') format('truetype'),
         url('ColabReg-webfont.svg#colaborate-regularregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*J'ai donc commencer par faire un reset à ma page*/
body{
	margin:0;
	padding:0;
}
header {
	width: 100%;
	font-family: 'ambleregular', 'arial';
	opacity: 0.8;
	height: 150px;
	background-color: #E0E0E0;
	
	
}

.entete{
	display: flex;
	justify-content: space-between;

}



.langue a{
	color: black;
	text-decoration: none;
}

.logo_terre a:hover{
	color: gold;


}


.panier a{
	color: black;
	text-decoration: none;
}

.logo_panier a:hover{
	color: gold;


}

.logo img{
	
	width: 200px;
	margin: 0 auto;
	
	
}

/***********************nav*******************************************/
nav{
	font-family: 'ambleregular', 'arial';
	height: 20px;
	background-color: #E0E0E0;
	height: 25px;
	
}

#text{
border:1px solid gold;
height: 15px;
border-radius:5px;
color: grey;

}
#menu, #menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    font-size: 110%;

}

#menu li {
/* on place les liens du menu horizontalement */

    display: inline-block;
    margin-right: 35px;

}
#menu ul li {

    display: flex;
    opacity: 0.9;

}
#menu a {
    text-decoration: none;
    display: block;
	color:black;

}

#menu a:hover{
	color:#8F8F8C;
	
}
#menu ul {
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
    z-index: 1000;

}
#menu li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
    border-radius: 10px;
	
}

#menu ul a{
	font-size: 90%;
	text-align: center;
	border: 1px solid grey;
	background-color: #E0E0E0;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 200px;
}

.clear{
	clear:both;
}

/*************************section****************************/
section{
	
	width: 1200px;
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	

}

.rslides{
	margin:0 auto;
	width: 1000px;
	height: 500px;
	list-style-type: none;


}
.clear{
	clear: both;
}
h1{

	text-align: center;
	font-size: 200%;
}
.presentation{
	font-family:'colaborate-regularregular','arial';
	font-size: 80%;
	text-align: left;
	margin: 0 auto;
	width: 600px;
}

.clear{
	clear: both;
}

.restaurantdescription {
	font-family:'colaborate-regularregular','arial';
	font-size: 80%;
	text-align: left;
	width: 550px;
	float: right;
	margin-right: 50px;
	margin-top: 50px;
	
}

.restaurant img{
	float: left;
	width: 500px;
	border:3px solid #333;

}
.restaurant img:hover{
	opacity: 0.8;

}

.clear{
	clear: both;
}

.chambre img{
	border:3px solid #333;
}
.chambre img:hover{
	opacity: 0.8;
}
.chambredescription {
	font-family:'colaborate-regularregular','arial';
	font-size: 80%;
	text-align: left;
	width: 550px;
	float: left;
	margin-left: 50px;
	margin-top: 50px;
	
}

.spa img{
	float: left;
	width: 500px;
	border:3px solid #333;
	margin-bottom: 50px;
}
.spa img:hover{
	opacity:0.8;
}

.spadescription{
	font-family:'colaborate-regularregular','arial';
	font-size: 80%;
	text-align: left;
	width: 550px;
	float: right;
	margin-right: 50px;
	margin-top: 50px;
	margin-bottom: 50px;

}

.clear{

	clear: both;
}

/*****************************Footer******************************/
footer{
	background-color:#E0E0E0;
	font-family: 'ambleregular', 'arial';
	font-size: 75%;
	color: black;
	opacity: 0.8;

}

.footer{
	display: flex;
	justify-content: space-between;


}
.reseausociaux {
	margin-left: 30px;
	text-decoration: none;
	margin-top: 10px;
	
}

.reseausociaux img{
	padding-top: 2px;

}

.liendivers li{
	font-size: 110%;
	list-style-type: none;
	
}
.social{
	
	display: block;
	text-decoration: none;
	color: black;
	flex-direction: column;	
}

.liendivers{

	text-align: center;
	margin-bottom: 0;

	
}
.liendivers h3 {
	
	margin-left: 20px;
}

.liensdivers p{
	line-height: 10px;
}


li a{
	color:black;
	text-decoration: none;
	font-size: 90%;
}


footer a:hover{
	color: gold;
}

css

Delpiero92

23 février 2018 à 21:45:27

Je ne suis pas un crack en informatique, loin de là, mais il n'y a pas que les mécaniciens

qui sachent conduire une voiture.

Benzouye

24 février 2018 à 10:50:52

Bonjour,

Je déplace dans le forum "HTML/CSS"

Au passage, merci de préciser ce qui ne fonctionne pas sur Safari exactement ...

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

24 février 2018 à 15:38:06

Merci bien

C'est mon header et mon footer qui ne s'affiche pas très bien, j'ai utilisé le flexbox.

Merci de votre aide

25 février 2018 à 10:19:36

Connais-tu le site can I use?

https://caniuse.com/#search=Flexbox

Creuser les propriétés css qui ne semblent pas fonctionner...

-
Edité par Benzouye 25 février 2018 à 10:20:07

JuliennePouchard

25 février 2018 à 11:09:04

Bonjour

J'ai essayé de complier votre code HTML pour voir le problème, mais regardez ce que j'ai trouve

https://www.screencast.com/t/T2ufMP89jTub

Est-ce que c'est normal ?

Comment Regarder Amazon Prime sur Android

exen

25 février 2018 à 13:11:26

JuliennePouchard Tu parle des caractères spéciaux non reconnus ?

Compos sui.

25 février 2018 à 13:30:47

bonjour, oui car je ne vous ai pas envoyé le code css pour cette page, simplement la page index et son code css.

Merci a vous

2 mars 2018 à 19:53:34

exen a écrit:

nn svp, je parle du bug de CSS, car je pense pas que c'est le bon design

2 mars 2018 à 19:56:33

Bon en ce qui concerne les caractères spéciaux il suffit d'enregistrer le fichier en UTF-8 Sans dom.

2 mars 2018 à 20:07:22

Delpiero92 a écrit:

bonjour, oui car je ne vous ai pas envoyé le code css pour cette page, simplement la page index et son code css.

Merci a vous

Bonjour Delpiero92,

Le responsable de l'affichage du site sur les différents navigateurs est le CSS, normalement la solution de ce type de problème et de cree un hook de CSS pour Safari

3 mars 2018 à 17:20:35

Merci pour votre retour, désolé pour mon ignorance et en étant débutant pouvez-vous me dire la signification d'un "hook".

merci encore

7 mars 2018 à 10:38:02

Bonjour Delpiero92

Moi aussi je suis débutante, hook est tout simplement une partie de CSS réserver juste pour un navigateur, par exemple pour safari on pourra écrire.

@media screen and (-webkit-min-device-pixel-ratio:0) {
//mettre le code CSS
}

7 mars 2018 à 13:19:26

JuliennePouchard a écrit:

hook est tout simplement une partie de CSS réserver juste pour un navigateur

En programmation, un hook (crochet en français) te permet de faire une action différenciée selon une condition donnée ...

Dans ton exemple on parlera plutôt de "hack", qui permet de détourner une fonctionnalité pour faire une chose "inattendue", ici différencier un navigateur ...

Dans l'exemple donné, on utilise le pixel ratio pour déterminer le navigateur car Safari a des valeurs bien à lui ...

https://jeffclayton.wordpress.com/2014/07/14/separating-chrome-vs-safari-using-css-styles/

12 mars 2018 à 18:25:19

Merci a vous bien je vais tester !!

17 mars 2018 à 14:12:27

Benzouye a écrit:

JuliennePouchard a écrit:

hook est tout simplement une partie de CSS réserver juste pour un navigateur

En programmation, un hook (crochet en français) te permet de faire une action différenciée selon une condition donnée ...

Dans ton exemple on parlera plutôt de "hack", qui permet de détourner une fonctionnalité pour faire une chose "inattendue", ici différencier un navigateur ...

Dans l'exemple donné, on utilise le pixel ratio pour déterminer le navigateur car Safari a des valeurs bien à lui ...

https://jeffclayton.wordpress.com/2014/07/14/separating-chrome-vs-safari-using-css-styles/

Merci pour votre explication très détaillé

safari ne m'affiche pas correctement les pages

site web pas bien affiché

Supprimer

Modérer

Signaler le message aux modérateurs