0

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.

3
Contributors
7
Replies
29
Views
5 Years
Discussion Span
Last Post by davy_yg
0

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.

0

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.

0

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.

0

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.

Edited by mmcdonald

0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.