Bonjour tout le monde !
Je suis toute nouvelle et j'ai un gros soucis avec mon footer !
Tout allait bien jusqu'a un moment où celui-ci a décidé de se mettre en pleins milieux de ma page, et je ne comprend pas pourquoi du tout !
J'aimerai bien un peu d'aide pour le replacer en bas de page svp
voici le code html:
et le CSS:
Bon à part le footer, j'ai aussi d'autres soucis (placement des photos qui n'arrêtent pas de bouger aussi...) mais ce n'est pas le sujet de cette conversation
En tout cas merci beaucoup de votre aide !
Je suis toute nouvelle et j'ai un gros soucis avec mon footer !
Tout allait bien jusqu'a un moment où celui-ci a décidé de se mettre en pleins milieux de ma page, et je ne comprend pas pourquoi du tout !
J'aimerai bien un peu d'aide pour le replacer en bas de page svp
voici le code html:
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>L'APARTÉ ? Créations d'intérieur</title>
<body>
<header>
<div id="bloc_page">
<div id="titre_principal">
</div>
<div id="logo">
<img src="Logo_L_APARTE-PARIS-Cartes-test.png" width="120" height="120" alt="Logo L'Aparté"/>
</div>
<div class="barre_recherche_">
<form role="search" method="get" id="Recherche" action="Recherche">
<input type="text" onfocus="this.value" name="SearchText" class="searchtext" value="Rechercher..." size="18"/>
<input type="submit" id="bouton" value="OK" name="bouton">
</form>
</div>
<div class="panier">
<a href="BShoppingCart.asp?PBMInit=1">Votre panier:</a>
<div class="CartPrice">
<strong> 0,00 €</strong>
</div>
</div>
</div>
<div>
<nav id="menu">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FR</a></li>
<li><a href="#">EN</a></li>
</ul>
</nav>
</div>
</header>
<section id="guirlandes_lumineuses">
<div class="titre">
<h1>Guirlandes lumineuses: les nouveautés</h1>
<div class="photo_block_1">
<div class="photo_1">
<img src="guirlande_physialis_orange.jpg" alt="Guirlande Physialis Dark Orange" width="500" height="620"/>
<h2> "Physialis" Dark Orange</h2>
</div>
<div class="photo_2">
<img src="guirlande_lace_bell_flower_white.jpg" alt="Guirlande Lace Bell Flower White" width="500" height="400"/>
<h2>Guirlande "Lace Bell Flower" White</h2>
</div>
</div>
<div class="photo_block_2">
<div class="photo_3">
<img src="guirlande_lace_bell_flower_red.jpg" alt="Guirlande Lace Bell Flower Red" width="500" height="400"/>
<h2>Guirlande "Lace Bell Flower" Red</h2>
</div>
<div class="photo_4">
<img src="guirlande_physialis_white.jpg" alt="Guirlande Physialis White" width="500" height="620"/>
<h2>Guirlande "Physialis" White</h2>
</div>
</div>
</div>
</section>
</body>
<footer>
<div>
<nav id="footer">
<ul>
<li><a href="#">Service client</a></li> <hr>
<li><a href="#">CGV</a></li> <hr>
<li><a href="#">FAQ</a></li> <hr>
<li><a href="#">Contact</a></li> <hr>
<li><a href="https://www.facebook.com/laparte.paris/?fref=ts" target="blank" https://www.facebook.com/laparte.paris/?fref=ts><img src=" FB-f-Logo__blue_29.png" alt="Facebook" width="20" height="20"/></a></li>
<a href="https://www.instagram.com/laparte.paris/" target="blank" https://www.instagram.com/laparte.paris/><img src="instagram_favicon.png" alt="Instagram" width="20" height="20"/></a></li>
<a href="https://fr.pinterest.com/laparteparis/" target="blank" https://fr.pinterest.com/laparteparis/><img src="Pinterest_Favicon.png" alt="Pinterest" width="20" height="20"/></a></li>
</ul>
</nav>
</div>
</footer>
</html>
et le CSS:
#total_page
{
width: 100%;
}
#logo
{
width: 100px;
margin: auto;
max-width: 1000px;
min-width: 700px;
text-align: center;
}
.barre_recherche_
{
position: absolute;
right: 170px;
top: 8px;
}
.panier
{
position: absolute;
right: 5px;
top:8px;
display:flex;
text-decoration: none;
color: #696969;
}
/* Menu navigation */
#menu
ul{
text-align:center;
}
ul li{
display:inline;
}
nav#menu ul
{
padding: 10px;
margin:auto;
max-width: 1000px;
min-width: 700px;
list-style: none;
text-align:center;
}
nav#menu ul li
{
display: inline;
margin: 0 10px;
}
nav#menu a
{
display: inline-block;
font-size: 1em;
color: #696969;
margin: 20 20px;
text-decoration: none;
text-transform: uppercase;
}
nav#menu a:hover
{
background-color: ;
color: black;
}
/*titre principal */
/*Nouveauté*/
h1
{
font-size: 1.5em;
text-align: center;
display: inline-block;
margin-top: 350px;
font-weight: 600;
text-transform: uppercase;
color: #696969;
width: 1232px;
height: 52px;
position: absolute;
}
/*photo page d'accueil*/
.photo_1
{
float: left;
width: 35%;
margin: 750 250px 0 40px;
padding: 0;
}
.photo_1 h2
{
position: absolute;
margin-top:-350px;
margin-left: 100px;
padding: 15;
text-align: center;
color: white;
}
.photo_2
{
float: right;
width: 45%;
margin: -636px 0 0 700px;
padding: 0;
}
.photo_2 h2
{
position: absolute;
margin-top:-240px;
margin-left: 50px;
padding: 15;
color: white;
}
.photo_3
{
float: left;
width: 35%;
margin: 50 200px 0 40px;
padding: 0;
}
.photo_3 h2
{
position: absolute;
margin-top:-230px;
margin-left: 50px;
padding: 15;
color: white;
}
.photo_4
{
float: right;
width: 45%;
margin: -618px 0 600 300px;
padding: 0;
}
.photo_4 h2
{
position: absolute;
margin-top:-346px;
margin-left: 90px;
padding: 15;
color: white;
}
/* footer */
nav#footer ul
{
display: block;
list-style-type: none;
justify-content: center;
}
nav#footer li
{
margin:auto;
}
nav#footer a
{
font-size: 0.8em;
color: #696969;
text-decoration: none;
text-transform: uppercase;
}
Bon à part le footer, j'ai aussi d'autres soucis (placement des photos qui n'arrêtent pas de bouger aussi...) mais ce n'est pas le sujet de cette conversation
En tout cas merci beaucoup de votre aide !
du coup on sait pas trop comment doit être le rendu final...