Hj�lp til gennemg�ende menu i top og anchor tags

Thu, 07 Nov 2013 08:11:03 GMT

Hej alle.

Jeg er igang med min portfolio men er desv�rre g�et i st�, da jeg har et problem med min gennemg�ende menu som er i toppen hele tiden, s� brugeren altid kan komme hurtigt rundt p� siden.

Problemet er at min �verste menu er 34px h�j(mener jeg) og n�r jeg linker til en div l�ngere nede p� siden, s� tager den i udgangspunkt i browserens top, men jeg vil gerne have at den tager min top menu's bund, s� min menu ikke overlapper

H�ber at nogen kan hj�lpe

En fiddle til de dovne
http://jsfiddle.net/Z4h3v/

HTML kode

 <!DOCTYPE html>
 <html>
     <head>
         <title>
         <?php
         
         $side_titel = "Morten Christiansen";
         
         if (isset($side_titel))
         {
             echo $side_titel;
         }
         else
         {
             echo "Morten";
         }
         ?>
         </title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <link rel="stylesheet" type="text/css" href="style/style.css">
         <script src="js/jquery-1.10.2.min.js"></script>
         <script src="js/smoothscroll.js"></script>
     </head>
     <body>
          <div id="nav">
                <ul>        
                 <li><a href="#start">Start</a></li>
                 <li><a href="#profil_content">Profil</a></li>
                 <li><a href="#referencer">Referencer</a></li>
                 <li><a href="#projekter">Projekter</a></li>
             </ul>
         </div>
          <a id="start"></a>
         <div id="wrapper">
             <img id="startbillede" src="img/Morten.jpg" />
             <div id="startinfo">
                 <h1>Morten Christiansen</h1>
                 <h2>Webintegrator & Webudvikler</h2>
                 <hr />
                 <p><span class="pcolor">Email: morten1691@gmail.com</span></p>
                 <p><span class="pcolor">Steam: Kh4zy</span></p>
                 <p><span class="pcolor">Facebook: Morten.Christiansen.359</span></p>
             </div>
             <div id="profil_content">
                 <h3 class="h3_underline"">Profil</h3>
                     <hr class="greyhr"  />
                     <div id="profilinfo">
                         <p class="indhold_skrift2">Altid frisk & klar på webudvikling efter dine behov!</p>
                         <hr class="greyhr" />
                         <p class="indhold_skrift">Mit navn er Morten Christiansen. Jeg er 22 år & bosat i Nykøbing F. Jeg er igang med at uddanne mig som Web-Integrator på Roskilde Tekniske Skole CMK.
                         Jeg går på hovedforløbet og forventer at være færdig d. 19-12-2014.</p>
                         <p class="indhold_skrift">Jeg elsker og brænder for webprogrammering & udvikling!</p>
                     </div>
                     <ul id="skill">
                         <li><span class="bar html_css">100%</span><h3>HTML & CSS</h3></li>
                         <li><span class="bar php">20%</span><h3>PHP & MySQL(i)</h3></li>
                         <li><span class="bar grafisk_design">99%</span><h3>GRAFISK DESIGN</h3></li>
                         <li><span class="bar jquery">25%</span><h3>jQuery</h3></li>
                     </ul>
             </div>
 
             <div id="cv_content">
                 <h3 class="h3_underline">CV</h3>
                 <hr class="greyhr" />
             </div>
             
             <div id="referencer_content">
                 <a id="referencer"></a>
                 <h3 class="h3_underline">Referencer</h3>
                 <hr class="greyhr" />
             </div>
             
             <div id="projekter_content">
                 <h3 class="h3_underline">Projekter</h3>
                 <hr class="greyhr" />
             </div>
           </div>
     </body>
 </html>

CSS kode

 /*RESET*/
 *{
     margin:0px;
     padding:0px;
     border:0;
 }
 
 body{
     font-family:Verdana, Geneva, sans-serif;
     font-size:12px;
     background:#2b2b2b;
 }
 
 h1{
     text-transform:uppercase;
     font-size:29px;
     padding:0 0 6px 0;
 }
 
 #toph1{
     font-size:90px;
     color:#FFF;
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
 }
 
 h2{
     text-transform:uppercase;
     font-size:18px;
     font-weight:normal;
 }
 
 .h3_underline{
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
     text-transform:uppercase;
     font-size:14px;
     font-weight:normal;
     padding:0 0 3px 0;
     border-bottom:2px solid #669;
     display:table;
 }
 
 h4{
     background:#669;
     color:#fff;
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
     text-transform:uppercase;
     font-size:30px;
     padding:10px;
 }
 
 p{
     margin-bottom:15px;
 }
 
 .indhold_skrift{
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
     margin-bottom:15px;
 }
 
 .indhold_skrift2{
     font-size:30pt;
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
     margin-bottom:15px;
 }
 
 #wrapper{
     width:763px;
     height:2000px;
     margin:0px auto;
 }
 
 #nav{
     width:100%;
     position:fixed;
     text-align:center;
     z-index:10;
     background:#669;
 }
 
 #nav ul{
     width:768px;
     margin:auto;
     /*position:relative;*/
 }
 
 #nav ul li{
     display:inline-block;
     list-style:none;
 }
 
 #nav ul li a{
     font-weight:bold;
     line-height:53px;
     padding:20px;
     text-decoration:none;
     text-transform:uppercase;
     color:rgba(255,255,255,1);
 }
 
 #nav ul li a:hover{
     background:#535398;
      -webkit-transition: background-color 400ms linear;
      -moz-transition: background-color 400ms linear;
      -o-transition: background-color 400ms linear;
      -ms-transition: background-color 400ms linear;
      transition: background-color 400ms linear;
 }
 
 #startbillede{
     height:194px;
     border:10px solid #fff;
     margin:102px 20px 0 0;
     float:left;
 }
 
 #startinfo{
     background:#fff;
     padding:10px;
     height:194px;
     float:right;
     margin:102px 0 0 0;
 }
 
 .pcolor{
     padding:3px;
     font-size:16px;
     font-weight:bold;
     color:#fff;
     background:#669;
     text-transform:uppercase;
 }
 
 hr{
     background:#669;
     height:6px;
     margin:19px 0 18px 0;
 }
 
 .greyhr{
     background:#ddd;
     height:1px;
 }
 
 ::-webkit-scrollbar {
     width: 20px;
 }
  
 ::-webkit-scrollbar-track {
     background:#FFF;
 }
 
 ::-webkit-scrollbar-track-piece     {
     background:#FFF;
     /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1);*/
 }
  
 ::-webkit-scrollbar-thumb {
     background:#669;
     border:2px solid #000;
 }
 
 /*SKILLS*/
 
 #profil_content{
     width:723px;
     background:#fff;
     padding:20px;
     float:left;
     margin:10px 0 10px 0;
 }
 
 #profil{
 }
 
 #skill{ 
     list-style:none;
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
     font-size:12px;
     width:317px;
     margin:0 0 0 20px;
     position: relative;
     line-height: 2em;
     padding: 30px 0;
     float:left;
     height:230px;
 }
 
 #skill li{
     margin-bottom:50px; 
     height:24px;       
 }
 
 #skill li h3 { 
     position:relative; 
     top:-25px;
 }
 
 .bar{
     margin:2px;
     height:24px; 
     position:absolute;
     color:#FFF;
     font-weight:bold;
     padding:6px 0 6px 20px;    
 }
 
 .html_css{
     width:100%; 
     background: #8080aa; /* Old browsers */
 /* IE9 SVG, needs conditional override of 'filter' to 'none' */
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODBhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzdiN2JhNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iIzVmNWY4YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NjU2ODAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 background: -moz-linear-gradient(top,  #8080aa 0%, #7b7ba5 17%, #5f5f8a 74%, #565680 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8080aa), color-stop(17%,#7b7ba5), color-stop(74%,#5f5f8a), color-stop(100%,#565680)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8080aa', endColorstr='#565680',GradientType=0 ); /* IE6-8 */
 
 }
 
 .php{
     width:20%;
     background: #8080aa; /* Old browsers */
 /* IE9 SVG, needs conditional override of 'filter' to 'none' */
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODBhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzdiN2JhNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iIzVmNWY4YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NjU2ODAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 background: -moz-linear-gradient(top,  #8080aa 0%, #7b7ba5 17%, #5f5f8a 74%, #565680 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8080aa), color-stop(17%,#7b7ba5), color-stop(74%,#5f5f8a), color-stop(100%,#565680)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8080aa', endColorstr='#565680',GradientType=0 ); /* IE6-8 */
 }
 
 .grafisk_design{
     width:99%;
     background: #8080aa; /* Old browsers */
 /* IE9 SVG, needs conditional override of 'filter' to 'none' */
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODBhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzdiN2JhNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iIzVmNWY4YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NjU2ODAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 background: -moz-linear-gradient(top,  #8080aa 0%, #7b7ba5 17%, #5f5f8a 74%, #565680 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8080aa), color-stop(17%,#7b7ba5), color-stop(74%,#5f5f8a), color-stop(100%,#565680)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8080aa', endColorstr='#565680',GradientType=0 ); /* IE6-8 */
 }
 
 .jquery{
     width:25%;
     background: #8080aa; /* Old browsers */
 /* IE9 SVG, needs conditional override of 'filter' to 'none' */
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODBhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzdiN2JhNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iIzVmNWY4YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NjU2ODAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 background: -moz-linear-gradient(top,  #8080aa 0%, #7b7ba5 17%, #5f5f8a 74%, #565680 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8080aa), color-stop(17%,#7b7ba5), color-stop(74%,#5f5f8a), color-stop(100%,#565680)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8080aa', endColorstr='#565680',GradientType=0 ); /* IE6-8 */
 }
 
 @-moz-keyframes grafisk_design {0%  { width:0px;} 100%{ width:100%;}  }
 @-moz-keyframes html_css        { 0%  { width:0px;} 100%{ width:90%;}  }
 @-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width:65%;}  }
 @-moz-keyframes php   { 0%  { width:0px;} 100%{ width:80%;}  }
 
 @-webkit-keyframes grafisk_design       { 0%  { width:0px;} 100%{ width:100%;}  }
 @-webkit-keyframes html_Css        { 0%  { width:0px;} 100%{ width:90%;}  }
 @-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width:65%;}  }
 @-webkit-keyframes php   { 0%  { width:0px;} 100%{ width:80%;}  }
 
 
 #profilinfo{
     width:350px;
     background:#fff;
     float:left;
 }
 
 #cv_content{
     width:723px;
     background:#fff;
     padding:20px;
     float:left;
     margin:0 0 10px 0;
 }
 
 #referencer_content{
     width:723px;
     background:#fff;
     padding:20px;
     float:left;
     margin:0 0 10px 0;
 }
 
 #projekter_content{
     width:723px;
     background:#fff;
     padding:20px;
     float:left;
     margin:0 0 100px 0;
 }

Javascript, onclick og anchor

Fri, 27 May 2011 19:57:36 GMT

Jeg har f�lgende script som jeg gerne vil have til at fungere.

Jeg vil gerne have at s�fremt r�kke skal VISES (alts� ikke n�r den skjules) s� springer siden ned til den r�kke der bliver vidst

<script type="text/javascript">
function displayRow(Raekke){
var row = document.getElementById("OmRacen" + Raekke);
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
return true;
}
function jumpToAnchor() {
var row = document.getElementById("OmRacen" + Raekke);
window.location = window.location + "#+row"; - JUST MY SUCKY TRY
}
</script>

Udvikleren.dk - Seneste [anchor] forum tr�de

Hj�lp til gennemg�ende menu i top og anchor tags

Javascript, onclick og anchor