Problème d'arrivée sur position d'ancre nommée

Question

27 Sep 2013 à 00:57

Bonjour,

je ne suis pas webdesigner, mais je tente de créer mon site en responsive, et je rencontre un problème d'ancres qui ne monte pas jusqu'au niveau où je le voudrais quant je passe dans des résolutions de 980 à 800 pixels.

J'ai trois ancres, about, work et contact, et seules about et work arrivent où je veux, tandis que contact s'arrête plus bas dans certaines résolutions, lorsque l'on clique sur la navbar.

Quelqu'un a t-il déjà connu ce problème ?

Voici le code html :


<body id="top" class="anchor">
  
     <div id="container"> 
	 
	     <header class="mainHeader">
		 
  			 <div id="bar">
	             <div class="logo">
	                 <a href="#top"><img src="img/logo.png" alt="Logo Comment dirais-je ?"></a>  
	             </div>

		         <nav><ul>
		             <li><a href="#about"><img src="img/aboutnav.png" alt="about" /></a></li>
			         <li><a href="#work"><img src="img/worknav.png" alt="work"/></a></li>
			         <li><a href="#contact"><img src="img/contactnav.png" alt="contact"/></a></li>
		         </ul></nav>
			 </div>
			 
		 </header>

         <div id="background">
	             <img src="img/imgcmdj.png" alt="Image Comment dirais-je ?">	  
	     </div>

         <section id="about">
		 
             <div class="logoabout">		 
		 	     <img src="img/about.png" alt="A propos">
             </div>		 
	     
	         <div class="about">

			     <h1 class="bienvenue">Bienvenue.</h1>
                     <p>
                           BlablablaBlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablabla BlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablablablablablablablabla  BlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablabla                           </p>
             </div>	
	
	     </section>    
 		 
	     <section id="work">
		 
	         <div class="logowork">
 		 	 	 <img src="img/work.png" alt="Musique">
             </div>		 
	     
	         <div class="work">

	             <h1>Musique.</h1>
				 
		             <div class ="video1">
	                     <iframe src="http://player.vimeo.com/video/36997781?title=0&amp;byline=0&amp;portrait=0" width="750" height="420" style="border:none"></iframe>
	                 </div>
                 <br>			
		             <div class ="son1">
	                     <iframe width="750" height="115" style="border:none" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F18607703"></iframe>
	                 </div>
                 <br>			
		             <div class ="son2">
	                     <iframe width="750" height="115" style="border:none" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F18609560"></iframe>
	                 </div>
                 <br>			
		             <div class ="son3">
		                 <iframe width="750" height="115"  style="border:none" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F18609560"></iframe>
		             </div>

             </div>	
		 
	     </section>		 

	     <section id="contact">
		 
             <div class="logocontact">		 
		 	     <img src="img/contact.png" alt="contact">
             </div>		 
	     
	         <div class="contact">
	             <h1>Contact.</h1>		 
 		             <p>
BlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablablaBlablablablablablablablablabla                
			         </p>

             </div>
			 
			 <div class="social">
                 <a href="http://soundcloud.com/Commentdiraisje" style="color:#FE8801; font-weight:bold">Soundcloud</a>
			     <a href="http://www.twitter.com/Cmdj" style="color:#00ABED; font-weight:bold">Twitter</a>
 			     <a href="http://www.behance.net/Commentdiraisje" style="color:#0367E1; font-weight:bold">Behance</a>
     		     <a href="http://www.vimeo.com/commentdiraisje" style="color:#4E8290; font-weight:bold">Vimeo</a>
	
			 </div>
			 
			 <div class="blogtelmel">
			     <p class="blog"><a href="http://www.commentdiraisje.com/leblog">Le blog !</a></p> 
			     <p>BlablablablablablablablablablaBlablablablablablablablablabla</p>
				<p><a href="mailto:info@commentdiraisje.com?subject=Renseignement">info@commentdiraisje.com</a></p>			 
			 </div>			 
	
	     </section>
		 
		 <footer>
	
	 	     <div id="credits">
			         <div class="uplogo">
 		 	 	    <a href="#top"><img src="img/uplogo.png" alt="Remonter ?"></a>
                     </div>	
			   
	 		         <p>
					&copy;2013 Tous droits r&eacute;serv&eacute;s - Comment dirais-je ? Musique pour multim&eacute;dias  
			         </p>					 

             </div>		 

	     </footer>
		 
     </div>	 

  </body>

</html>

et le css :

#container{
     width: 800px;
     margin:auto;
}

section {
     margin-top:275px;
	 padding-top:275px;
}


h1 {
     font-family: 'Cabin', sans-serif;
     font-weight: 700;
     font-size: 36px;

}

p{
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
     text-align:center;
 }


a{
     font-family: 'Open Sans', sans-serif;
     font-weight: 400; 
     text-decoration: none;
}

a:focus
{
     outline:0;
} 

a img {
  border: none;
}

.blog a {
     font-size:36px;
}

p a {
     color:#000;
}

.anchor{
     margin-top:0px;
}

.video1 iframe {
	 max-width: 100%;
}

/* Header */

.mainHeader{
     margin-left:100px;
}

.mainHeader nav ul {
     list-style: none; 
     margin-top: 10px;
	 margin-left: -795px;
}

.mainHeader nav ul li {
	 float: left;
	 display: inline;
}

.mainHeader nav a {
	 display: inline-block;
	 margin: -21px -975px 0 1035px;
}

.logo {
     margin-top: 5px;
     margin-left:195px;
}

#bar{
     background-color:#ffffff;
     width:800px;
	 height: auto;
     position:fixed;
     top:0px;
	 margin:0 0 0 -100px;
	 box-shadow: 0 0 25px #ffffff;
}

/* Background */

#background {
     margin-top: 375px;
     margin-left:115px;
}

#background img{
     width:664px;
     height:384px;
}

/* About */


.logoabout img {
     margin-top: -12px;
     margin-left:369px;

} 

#about{
     margin-top: 75px;
}

.about{
     margin-top: 75px;
     position:center;
} 

/* Work*/

#work {
     margin-top: 0;
}

.logowork img {
     margin-top: -14px;
     margin-left: 369px;
}

.work{
     margin-top: 75px;
     position:center;
}

.video1 {
  margin-left:25px;
}

.son1 {
  margin-left:25px;
}

.son2 {
  margin-left:25px;
}

.son3 {
  margin-left:25px;
}

/* Contact */

#contact{
     margin-top: 0;
}

.contact{
     margin-top:75px;
     position:center;
}

.logocontact img {
     margin-top: -25px;
     margin-left: 355px;
}

.social {
     margin-left:221px;
     width:75%;
}

.blogtelmel {
     margin-left:0;
}

/* Footer */

footer {
 margin-top:57px;
}

.uplogo{
    margin-left:369px;

}

.uplogo img{
    border: none;
}

/* Media queries */

/* 980 */

@media screen and (max-width:980px){

#background {
  margin-left:129px;
  margin-top:350px;
}

.logo {
  margin-top: 5px;
  margin-left:141px;
}

.mainHeader nav ul {
         list-style: none; 
         margin-top: 10px;
		 margin-left: -825px;
}

.about{
  margin-top: 115px;
  margin-left: 0px;
  border-top : none;
  width: 100%;
}

.work{
  margin-top: 115px;
  border-top : none;
  width: 100%;
}

#contact {

padding-top:-200px;
}

.contact{
  margin-left:0px;
  border-top : none;
  width: 100%; 
}
}

Merci d'avance !
Modifié par bernardbernardos (27 Sep 2013 - 00:59)

Sujet clos

CSS et mise en forme, CSS3

Problème d'arrivée sur position d'ancre nommée