28172 sujets

CSS et mise en forme, CSS3

Problème affichage site web

Bonjour, Bonsoir,
Je me suis lancé dans le codage et j'ai codé mon site web pour ma team. Ce site est codé en HTML 5 et CSS 3.

Voici ce qu'il est censé m'afficher:
http://www.noelshack.com/2015-52-1451172645-normal.png

Mais voici ce qu'il m'affiche à leur actuel:
http://www.noelshack.com/2015-52-1451172731-reel.png

Voici mon css:


/* La page */


body
{
background: url('image/fond.png');
}


/* Header */


header
{
border-radius: 5px;
background: url('image/head.png');
box-shadow: 0px 4px 4px #1c1a19;
}


#titre_principal
{
display: inline-block;
margin-bottom: -23px;
}


#logo
{
display: inline-block
}


/* Navigation */


nav
{
position: relative;
right: 100px;
top: 10px;
float: right;
}


nav ul
{
list-style-type: none;
}


nav li
{
display: inline-block;
margin-right: 15px;
}


nav a
{
font-size: 2em;
color: #181818;
padding-bottom: 3px;
text-decoration: none;
}


/* Bannière */


#banniere_image
{
margin-top: 15px;
height: 383px;
border-radius: 25px;
background: center url('image/paypal.png') no-repeat;
position: relative;
box-shadow: 0px 4px 4px #1c1a19;
margin-bottom: 25px;
background-color: white;
}
#banniere_description a
{
background: url('image/bouton.png') ;
font-size: 2em;
color: #181818;
padding-bottom: 3px;
text-decoration: none;
}


#bouton 
{
right: 5px;
bottom: 5px;
text-align: center;
border-radius: 5px; 
height: 100px;
padding-top: -5px;
text-decoration: none;
}


#banniere_description
{
position: absolute;
bottom: 0;
border-radius: 0px 0px 25px 25px;
width: 99.8%;
height: 33px;
padding-top: 15px;
padding-left: 4px;
background-color: rgba(24,24,24,0.8);
color: white;
font-size: 0.8em;
}


/* Texte */


section
{
text-align: center;
background: url('image/fond2.png');
border-radius: 15px;
list-style-type: none;
margin-left: 15px;
margin-right: 15px;
box-shadow: 0px 4px 4px #1c1a19;
}


/* Footer */


footer
{
width: 100%;
bottom: 0px;
}


#pied
{
position: absolute;
bottom: 0;
border-radius: 0px 0px 25px 25px;
width: 99.8%;
height: 33px;
padding-top: 15px;
padding-left: 4px;
color: white;
font-size: 0.8em;
text-decoration: none;
}




Dans tous les cas merci de votre aide
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
		<link rel="shortcut icon" type="image/ico" href="favicon.ico" />

		<title>Accueil</title>
	</head>
	
	<body>
	
	<img src="image/barre.png" alt ="barre_rouge" id="barre" />
	
		<div>
		
			<header>
				<div id="titre_principal">
					<img src="image/logo.png" alt="logo_EG" id="logo" />
				</div>
				
				<nav>
					<ul>
						<li><a href="index.html">Accueil</a></li>
						<li><a href="ng.html">Nos groupes</a></li>
						<li><a href="r.html">Règlement</a></li>
						<li><a href="nc.html">Nous contacter</a></li>
					</ul>
				</nav>	
			</header>
			
			<div id="banniere_image">
				<div id="banniere_description">
					<div id="bouton">
						<a src="image/bouton.png" href="d.html" class="bouton" id="bouton">Faite un don<img src="image/fleche_droite.png" alt="fleche_droite" /></a>
					</div>	
				</div>
			</div>
			
			<section>
				<div id="text">
					<h1>Chèr(e)s membres,</h1>
					<p>Empire-Gaming vous souhaite de joyeuses fêtes et vous remercie d'être toujours présent !</p>
				</div>
			</section>
			
			<footer>
				<div id="pied">
					<br />
					<p>Copyright © WEBER Brice - 2016 - Tous droits réservés - <a href="nc.html">Nous contacter</a> - <a href="mentions_legales.html">Mentions Légales</p>
				</div>
			</footer>
			
		</div>
	</body>
</html>


En espérant que cela vous aides
Voila moi ça donne ça :


http://image.noelshack.com/minis/2015/52/1451231606-capture-d-ecran-2015-12-27-a-16-50-53.png[/url]

http://image.noelshack.com/fichiers/2015/52/1451231606-capture-d-ecran-2015-12-27-a-16-50-53.png


<header>
			
			    <nav>
					<ul>
						<li><a href="index.html">Accueil</a></li>
						<li><a href="ng.html">Nos groupes</a></li>
						<li><a href="r.html">Règlement</a></li>
						<li><a href="nc.html">Nous contacter</a></li>
					</ul>
				</nav>	
				
				<div id="titre_principal">
					<img src="image/logo.png" alt="logo_EG" id="logo" />
				</div>

			</header>
			
			<div style="clear:both"> </div>









nav
{
position: relative;
float: right;
bottom: 15px;
}


nav ul
{
list-style-type: none;
}


nav li
{
display: inline-block;
margin-right: 15px;
}


nav a
{
color: #181818;
padding-bottom: 3px;
text-decoration: none;
}




Le clear : both est très important et après c'est vos images qui marchent pas non plus ?
Modifié par debalsjeremy (27 Dec 2015 - 16:54)
Avez vous gardez la même structure qu'en local sur le serveur ? A mon avis c'est le lien sur les images où il y a un soucis ou les images ne sont pas présente sur le serveur ..

Ma solution a marché pour la mise en page du haut ?
Les images sont dans le même dossiers que celle avec "paypal" elle n'ont pas à ne pas s'afficher.
Votre nouveau codage a permis d'obtenir une page avec le menu de nav la ou il devait être.
Sujet clos
Aller à