28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement de footer avec clear: both

Bonjour;
je suis nouveau sur ce forum.
je fais mes réels premiers pas avec CSS3 / html 5.

j'ai trois elements que je veux mettre en forme.

*mon contenu
*une zone à droite
*mon pied de page

pour ce faire je met mon contenu dans une balise <section>
ma zone a droite ds <aside>
et mon pied de page < footer>

HTML

...
<html>
  ....
  <body> 
     <section>  <article> loremm upsum <article> </section>
     <aside>  .... </aside> 
     <footer> ... </footer>
  </body> 
....


CSS

section
{
  float: left
  width : .. px;
}

aside
{
  float: right;
  width : .. px;
}


footer
{
  clear:both;
  width : 100px;
}



Mon soucis est le suivant ma zone footer se place en dessous des deux zones mais par rapport a ma zone aside (la zone de droite).
en affichage j'ai ma ma zone footer qui est en dessous de ma zone aside( zone de droite) mais derrière la zone contenu.


je souhaite que ma zone footer soit en dessous par rapport à ma zone contenu( zone qui contiendra tous mes articles).

j'espère avoir été explicite. merci bien
Modifié par 6l20 (24 May 2013 - 18:34)
salut,
très honnêtement j'ai du mal à comprendre ce que tu cherches à faire et ce que tu décris. Est-ce que ton aside est plus grand en hauteur que ton contenu ? Qu'est-ce que tu sous-entends quand tu dis "derrière mon contenu" ?
Merci de me répondre !
ma zone contenu est plus grande en hauteur que mon aside.
en disant que mon footer est derrière ma zone contenu je voulais dire que mon footer est en arrière plan (on ne voit pas le footer à gauche (mais il est visible à droite; il est en dessous du aside ) car la zone contenu cache la zone footer)

j'espère avoie été plus explicite. Merci de m'aider
hello,
dans ce cas je pense qu'il faudrait que tu donnes un lien ou poster ton code car ce n'est sûrement le bout de code que tu as donné qui en est à l'origine.
Je pense que tu as soit utilisé des positions absolues, soit mis le contenu de ta zone contenue en float. Dans tous les cas un lien ou ton code complet serait le bienvenue.
ok ! mais est ce que je pourrais publier mon code en ligne ? merci de me tenir informé car je ne saurais comment m'y prendre.
Cordialement.
a écrit :
est ce que je pourrais publier mon code en ligne ?

un simple copier/coller en prenant soin d'utiliser la coloration syntaxique proposée par le forum.
Merci !
Je colle mes deux fichiers HTML et CSS

HTML



<!DOCTYPE html >
 <html>
  <head>

  	<meta charset = "UTF-8"/>

  	<link rel="stylesheet" type="text/css" href="styles.css">
  	<meta content = "width=device-width, user-scalable=yes initial-scale=1.0" name="viewport"/>





  	<!-- [if lt IE 9] >
  	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

  	<title> Ma page </title>
  	
  </head>

  <body>
 	
 	 <div id="conteneur">

 		<header>
 			<h1> Chirugical</h1>

 			<form action="" method="post" name="connexion" id="form1">
 				<label for="login"> Login : </label>
 				<input type="text" id="login" name="login">
 				<label for="password"> Password : </label>
 				<input type="text" id="password" name="password">
 				<input type="submit" value="" name="valider">
 			</form>


 		</header>




 		<nav>   

 			<ul>
 				<li><a href="#page1" class="cellules">Home</a></li>
 				<li><a href="#page2" class="cellules">Gallery</a></li>
 				<li><a href="#page3" class="cellules">Les soins</a></li>
 				<li><a href="#page4" class="cellules">FAQ</a></li>
 				<li><a href="#page5" class="cellules">S'inscrire</a></li>
 				<li><a href="#page6" class="cellules cellulesfin">Discuter</a></li>
 			</ul>



 		</nav>

 	<section>
     

      <div id="page1">

 			  <header><h2>Peaux seches</h2></header>

 			    <article id="ar-page1">
 				     <p>
       					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lacus lacus, sed imperdiet odio. Pellentesque tempor commodo ligula ut blandit. Nulla vestibulum rutrum ipsum vitae faucibus! Cras in congue ligula. Morbi sit amet posuere sapien. Cras hendrerit nisl vel turpis viverra ut convallis justo interdum. Mauris id tortor id felis sagittis pretium sit amet vitae risus. Duis sed dolor id massa dapibus aliquam ac dictum elit.
 				     </p>

 				     <p>
       					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lacus lacus, sed imperdiet odio. Pellentesque tempor commodo ligula ut blandit. Nulla vestibulum rutrum ipsum vitae faucibus! Cras in congue ligula. Morbi sit amet posuere sapien. Cras hendrerit nisl vel turpis viverra ut convallis justo interdum. Mauris id tortor id felis sagittis pretium sit amet vitae risus. Duis sed dolor id massa dapibus aliquam ac dictum elit.

     				</p>

            <p id="p-connectez-vous">

             <a href="#img1"> Connectez-vous !</a>
          

            </p>  
            <img src="fleche1.png" id="img1">

 			    </article>
 	

      </div>
             




      <div id="page2">

               <header>  <h2>Gallery </h2> </header>

                 <div id="article2">

                  <a href="#photo1" id="lien1"><img src="images/1.jpg" width="400" height="300"></a>
                  <a href="#photo2" id="lien2"><img src="images/2.jpg"  width="400" height="300"></a>
                  <a href="#photo3" id="lien3"><img src="images/3.jpg" width="400" height="300"></a>
                  <a href="#photo4" id="lien4"><img src="images/4.jpg"  width="400" height="300"></a>
                  <a href="#photo5" id="lien5"><img src="images/5.jpg" width="400" height="300"></a>
                  <a href="#photo6" id="lien6"><img src="images/6.jpg" width="400" height="300"></a>
                  <a href="#photo7" id="lien7"><img src="images/7.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/8.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/9.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/10.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/11.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/12.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/13.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/14.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/15.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/16.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/17.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/18.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/19.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/20.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/21.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/22.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/23.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/24.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/25.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/26.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/27.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/28.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/29.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/30.jpg" width="400" height="300"></a>
                  <a href="#4" id="lien4"><img src="images/31.jpg" width="400" height="300"></a>
                  <a href="#32" id="lien4"><img src="images/32.jpg" width="400" height="300"></a>
                  <a href="#33" id="lien4"><img src="images/33.jpg" width="400" height="300"></a>
                  <a href="#34" id="lien4"><img src="images/34.jpg" width="400" height="300"></a>
                  <a href="#35" id="lien4"><img src="images/35.jpg" width="400" height="300"></a>
                  

                </div>
                 
                

         </div>    

         <div id="page5">

           
            <header><h2 id="titre-h2"> Veuillez Remplir ce Formulaire pour vous inscrire </h2></header>

               <article class="ar-sinscrire">
        
                    <form action="" method="post" name="validation" id="sinscrire">
                       <fieldset><legend>Formulaire d'inscription</legend>
                          <ul>

                               <li> 
                                 <label id="label" for="nom"> Nom : </label> 
                                 <input type="text" id="nom" name="nom"  placeholder="Votre Nom" required = "true" autofocus="true"> 
                              </li>
                              <li>
                                <label for="prenom"> Prenom : </label>
                                <input type="text" id="prenom" name="prenom" placeholder="Votre Prenom" required="true" >
                                       </li> 
                                       <li> 
                                         <label for="datenaiss"> Date de Naissance : </label>
                                         <input type="date" id="datenaiss" name="datenaiss"  required title="oublieeee" errormessage="oublieeee" placeholder="jj/mm/aaaa" pattern="[0-9 /]{10}">
                                       </li>
                                        <li>  
                                         <label for="tel"> Telephone : </label>
                                         <input type="tel" id="tel" name="tel" required="true" pattern="[0-9]{8}">
                                        </li> 
                                        <li> 
                                         <label for="email"> Email : </label>
                                         <input type="email" id="email" name="email">
                                       </li> 
                                         <input type="submit" value="" name="valider" class="bouton">
                                  
                                      </ul>
                                      </fieldset>
                                </form>
                                  
                                  </article>

                        </div>

                        

     
     
 		</section>


       



    


 		<aside>

         	<video src="vi.ogv" controls > 
 			    la nature
 			  </video>
 			  <p>
 			  	<br>
 			  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lacus lacus, sed imperdiet odio. Pellentesque tempor commodo ligula ut blandit.
 			</p>
 		</aside>

 		

       
    
    



 		<footer class="position-footer"> Lorem ipsum dolor sit amet </footer>









 	</div>





  </body>



</html>



CSS



@charset "UTF-8";
/* CSS Document */



abbr, article, aside, audio, canvas, datalist, details, figure, dialog, footer, header, hgroup, mark , menu, meter, nav, output, progress, section, time, video 
{
	display: block;
}

#conteneur
{
	width: 960px;
	margin: 0 auto ;
	padding: 0 15px;
}


body
 {
   background-color: #ddd;
   background:-webkit-gradient(linear,0% 0%, 0% 100%, from(#dddddd), to(#ffffff));
   background:-moz-linear-gradient(top, #dddddd 0% , #ffffff 100%);
   margin: 0;
   font-family: "Trebuchet Ms", Arial, Helvetica, sans-serif ;
   font-size: 14px;
 }


 body, html 
 {
 	height: 100%;
 	min-height: 100% ;
 }


 nav ul li
 {
 	float : left;
 }

 nav ul 
 {
 	list-style-type: none;
 	width: 960px; 
 	height: 40px;
 	margin: 0;
 	padding: 0;

 	background-color: #ddd;
   background:-webkit-gradient(linear,0% 0%, 0% 100%, from(#dddddd), to(#ffffff));
   background: -moz-linear-gradient(top, #dddddd 0% , #ffffff 100%);
  background: linear-gradient(top, #dddddd 0% , #ffffff 100%);
 }

 .cellules
 {
 	text-align: center;
 	text-decoration: none;
 	line-height: 40px;
 	display: block;
 	width: 159px;
 	color: #666;
 	border-right: solid 1px #999;
 	

 }

 .cellulesfin
 {
 	border: none;

 }

 section 
 {
 	
  position: relative;
  float: left;
  display: block;
   
   
 }



 article
 {
  width: 600px;
 height: auto;
  padding: 10px;
  margin-bottom: 20px;
 }



 aside
 {

 	float: right;
 	width: 280px;
 	height: 365px;
 	padding: 10px;
 }


  section > div, footer, nav ul, aside
 {
   box-shadow: 4px 4px 5px #999;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
   
  -o-border-radius: 15px; 
   border-radius: 15px;

  -moz-box-shadow: 4px 4px 5px #999;
  -webkit-box-shadow: 4px 4px 5px #999;
  -o-box-shadow: 4px 4px 5px #999;
   
  background: #fff;
 }



 #article2
 {
  padding-left: 38px;
 }

 .un
 {
 	-moz-border-radius: 15px;
 	-webkit-border-radius: 15px;
 	-o-border-radius: 15px; 

 	-moz-box-shadow: 4px 4px 5px #999;
 	-webkit-box-shadow: 4px 4px 5px #999;
 	-o-box-shadow: 4px 4px 5px #999;

 	background: #fff;
 }



 

 footer 
 {

  margin-top: 25px; 
   clear: both; 
   


 }



 nav ul 
 {
 	margin: 20px 0 ;
 }






 .annule
 {
 	clear: both;
 }

 video
 {
 	width: 270px;
 } 



 form fieldset ul label
 {
   float: left;
   width: 145px;

 }

 ul
 {
   list-style-type: none;
   padding-left: 40px;

 }

 

 #pied-ins
 {
   margin-top: 40px;

 }

 .bouton
 {

   background-size: contain;
   background: url('valider.png');

  /* width: 50px;*/
}


#ins-aside
{
   float: right;
   width: 280px;
  height: 365px;
   padding: 10px;
  
}


#sinscrire
{  
   width: 395px;
   background-color: #f3f3f3 ;
   border-radius: 15px;
   padding: 15px;
   margin: 10px 0px 20px 70px;


   /*margin: 0 auto; */
  -moz-transition-property:-rotate;
  -moz-transition-duration:4s;

 
   /*dding-bottom: 56px;*/
 box-shadow: 2px -2px 0.6px #999;
   
}



#sinscrire:hover
{

 -moz-transform: rotate(-7deg);
 -webkit-transform: rotate(-7deg);
  transform: rotate(-7deg);
 zoom:1;
 
}




header > h2
{

padding: 15px 15px 15px 15px; ;

}

fieldset legend 
{
   font-size: 22px;
   color: #1d65ad;
}
fieldset
{
   border-color: #ececec;                                                                    
   border-radius: 15px;
   height: 200px;
   -moz-transition-property:border-color;
   -moz-transition-duration:3s;       
   -webkit-transition-property:border-color;
   -webkit-transition-duration:3s;
   transition-property:border-color;
   transition-duration:3s;
}

fieldset:hover
{  
   border-color: #f98100;                                                           
   
}

#titre-h2
{
   text-align: center;
}

article
{
   position: relative;
}

#p-connectez-vous
{
   position: absolute;
   float: left;
}

#img1
{
   position: absolute;
   width: 30px;
   height: 26px;
   float: right;
   left: 122px;
   top:246px;
   background-size: contain;
}

@-webkit-keyframes anim1
{
   0%
   {
      top:246px;
      left: 122px;
      -webkit-transform:rotate(0deg);
      -moz--transform:rotate(0deg);
      transform:rotate(0deg);

   }

    30%
   {
      top:270px;
      left: 122px;
      -webkit-transform:rotate(90deg);
      -moz--transform:rotate(90deg);
      transform:rotate(90deg);
   }

   60%
   {
      top:270px;
      left: 0px;
      -webkit-transform:rotate(180deg);
      -moz--transform:rotate(180deg);
      transform:rotate(180deg);
   }

    100%
   {
      top:-167px;
      left: -50px;
      -webkit-transform:rotate(0deg);
      -moz--transform:rotate(0deg);
      transform:rotate(0deg);
   }



}



   #img1:target
   {

      -webkit-animation-name:anim1;
       -webkit-animation-duration:5s;
      -moz-animation-name:anim1;
      -moz-animation-duration:5s;
      animation-name:anim1;
      animation-duration:5s;

      top:-167px;
      left: -50px;
      -webkit-transform:rotate(0deg);
      -moz--transform:rotate(0deg);
      transform:rotate(0deg);

   }
#form1
{
   list-style-type: none;
}





#page2, #page3, #page4, #page5, #page6
{
   position: absolute;
   top: 0;
   left: 0;
  /* opacity: 0;
*/   display: none;
}

#page1:target, #page2:target, #page3:target, #page4:target, #page5:target
{
  display: block;
}

#page2 div img 
{
   width: 100px;
   height: 75px;
   
   float: left;
   border-style: solid;
   border-width: 2px;
   border-color: #FEC649; 

}
salut,
chez moi rien ne se passe le footer est bien sous ta zone contenue, quelle que soit sa hauteur.
Par contre, sur les quelques trucs qui j'ai vu vite fait, -o-border-radius et -o-box-shadow ne servent à rien vu qu'il n'y avait que FF et Webkit qui les avaient intégrés plus tôt, les propriétés sans préfixes devraient être en dernier pour écraser celles avec préfixes et les standards ont changés pour les linear-gradient (on n'écris plus top mais totop/tobottom...). Petit truc aussi, un float combiné à un display autre que none est inutile, vu que ça sera la float qui prendra le dessus.
ok ! Merci bien pour les remarques ! si il y'a d’éventuelles remarques ! n’hésitez pas !
Modifié par versaille21 (28 May 2013 - 14:25)
Sujet clos
Aller à