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.

Recommended Answers

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.

Jump to Post

Need to see: navigation.php

Jump to Post

All 7 Replies

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.

Need to see: navigation.php

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 ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.