Cek this site: Innovation Web

Can anyone help me figure why
Portfolio, Services, Blog and Contact start shifting to the right?

I mean the top part of the page.

I already try to fix them and haven't been successful.

Need to see the code otherwise how can we help?

Could be an issue with your CSS. Could be the incorrect setup of your <div> tags. Could be a million things. Give us some more information.

contact.php

<div id="container">

<br>
<div id="logo"><img src="images/logo.png" alt="logo"></div>

<br>
<!-- navigation -->
<?php include('navigation.php'); ?>
<!-- end of navigation -->

<body>

<br><br>

<div id="ymstatus">

    <a href="ymsgr:sendIM?davy_yg">
        <img border="0" src="http://opi.yahoo.com/online?u=davy_yg&m=g&t=14" alt="ym"/>
    </a> 

</div>

<div id="contactarticle">
Jika anda ingin memiliki website untuk meningkatkan image perusahaan, penjualan anda, atau anda mempunyai proyek khusus di pikiran anda dan sedang mencari penawaran silahkan isi formulir di bawah ini.
<br>
<hr width=800px>
<br>
</div>

style.css

/* navigation */

#logo {margin: 10px 0 0 20px;}
#proyek {margin: -15px 0 0 550px;}
#coffee {margin: -80px 0 0 920px;}

#navigation {margin: 20px 0 0 300px; width: 700px; height: 50px; background-color: yellow; border-radius: 10px;}


navlist{position:relative;}
#navlist li{margin:135px 0 0 350px;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:40px; width: 130px; display:block; text-decoration: none; border-radius: 0px; text-align: center; vertical-align:middle;}
#navcontainer {/*position: relative; width: auto; height: auto;*/ width: 880px; margin: 20px auto;}


#about{margin-top: 150px; width: 200px; }
#about a:hover{background-color: #c8fa7f;}

#portfolio{left:140px;width:46px; background-color: yellow;}
#portfolio a:hover{background-color: #c8fa7f;}

#services{left:290px; width:30px;}
#services a:hover{background-color:#c8fa7f;}

/* hr{border: dashed 1px orange;} */

#blog{left:400px;width:30px;}
#blog a:hover{background-color:#c8fa7f;}

#contact{left:500px;width:46px;}
#contact a:hover{background-color: #c8fa7f;} */



#ymstatus{margin: 0 0 0 50px;}

body {background-color:silver;}

#banner {}
#banner-nav {margin: 0 0 0 650px; z-index: 0;}
#bannernavtext {position:absolute; margin: 40px 0 0 720px; font: Arial, Helvetica, sans-serif; color:white; z-index:10; }

#article {width: 800px; margin: 320px 0 0 90px;}
#contactarticle {width: 700px; margin: 20px 0 0 50px;}
#contactform {margin: 0 0 0 50px; text-align: left;}

#servicearticle {margin: 0 0 0 80px;}
#servicetitle {font-size: 30px; color: orange;}

#footer {background: url(images/footer.jpg) repeat-x; height: 115px; margin: 100px 0 0 0;}

#footerlogo {margin: 0 0 0 10px;}
#footertext {margin: -50px 0 0 250px; }
#footerkontak {margin: -40px 0 0 20px;}
#footerlink {margin: -50px 0 0 300px; border:none;}
#footerlink  a:link{border:none;}
#footerlinknet {margin: -45px 0 0 600px;}

#articlesbox {margin: 0 0 0 650px; padding: 10px; width: 250px; font-size: 14px; height: 300px; border-style: solid; border-width: 0; background-color: lightblue; border-radius: 0;}
#articletitle {margin: 0 0 0 0; font-weight:bold; padding: 5px; width: 230px; height: 20px; background-color: white; border-style: solid; border-width: 0; border-radius: 10px; }
#articles {margin: -300px 0 0 60px; width: 520px; font-size: 14px;}

That's part of the css file.

navigation.php

<style type="text/css">
#slideshow { left: 0; float: left; margin: -125px 0 0 20px; z-index: 0;}
#navS { width: 270px; margin: 0 0 0 610px; float: left; position: absolute; z-index: 1;}
#navS li.nav1{ position:relative; float: left; margin: 0 0 0 4px; list-style: none; background: url('images/banner nav1.jpg') no-repeat top; z-index:9;}
#navS li.nav2{ position:relative; float: left; margin: 0 0 0 4px; list-style: none; background: url('images/banner nav2.jpg') no-repeat top; z-index:9;}
#navS li.nav3{ position:relative; float: left; margin: 0 0 0 4px; list-style: none; background: url('images/banner nav3.jpg') no-repeat top; z-index:9;}

#navS a { width: 300px; height: 67px; padding: 3px; display: block; border: 0px solid #ccc;}
#navS li.activeSlide.nav1 a { /* background: #88f */ position: relative; width: 310px; margin: 0 0 0 -18px; background: url('images/banner nav klik1.jpg') no-repeat top; z-index:9;}
#navS li.activeSlide.nav2 a { /* background: #88f */ position: relative; width: 310px; margin: 0 0 0 -18px; background: url('images/banner nav klik2.jpg') no-repeat top; z-index:9;}
#navS li.activeSlide.nav3 a { /* background: #88f */ position: relative; width: 310px; margin: 0 0 0 -18px; background: url('images/banner nav klik3.jpg') no-repeat top; z-index:9;}
#navS a:focus { outline: none;}
#navS img { border: none; display: block;}
pre { clear: left }
</style>


<div id="navigation"><!-- <img src="images/navigation bar.jpg" alt="nav bar"> --></div> 

<ul id="navlist">
<li id="about"><a href="index.php">HOME</a></li>
    <ul id="nav">
        <li><a class="fly" href="#">PORTFOLIO</a>
            <ul class="dd">
                <li><a href="portfolio.php">Web Porfolio</a></li>
                <li><a href="marketing-portfolio.php">Marketing Portfolio</a></li>             
            </ul>
        </li>     
    </ul>
<li id="services"><a href="services.php">SERVICES</a></li>
<li id="blog"><a href="blog.php">BLOG</a></li>
<li id="contact"><a href="contact.php">CONTACT</a></li>
</ul>

that's the whole navigation.php code.

I'm really struggling to understand the styling here; all of your issues are down to the CCS you've used for the navigation links. That's a very broad response and it probably doesn't help much at all - sorry.

See this great insight: w3schools

This is also a good guide. Forget the boxes he's making and just focus on how he is laying out and structuring his menu with CSS.

Your styling the menu using the Left property, which is not working. also, the style.css is being called twice.

Try this tutorial on making a horizontal css menu ... its a classic thats been around for a long time.
listutorial and

okay, I think I am following the tutorial. but what about the adding the drop down menu to the navigation ?