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.
davy_yg 2 Posting Whiz
mmcdonald 28 Posting Pro
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.
davy_yg 2 Posting Whiz
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.
mmcdonald 28 Posting Pro
Need to see: navigation.php
davy_yg 2 Posting Whiz
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.
mmcdonald 28 Posting Pro
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.
BMXDad 23 Newbie Poster
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
davy_yg 2 Posting Whiz
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 developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.