Member Avatar for davy_yg

Cek this site:

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
  • 124 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by davy_yg

Dani AI

Generated

Quick diagnosis tied to the code posted: the layout is being driven by absolute positioning and a few structural issues, so the menu floats away from the intended container. As noted, we need the navigation markup to be sound; as pointed out, duplicate stylesheet loads and reliance on left offsets make things brittle. Two concrete causes to fix first: an incorrectly placed <body> tag (it must wrap the whole page) and malformed UL/LI nesting (submenus must live inside their parent <li>).

Practical fixes to apply now:

  • Move the single <body> so it encloses the whole page (head, then body, then container).
  • Fix UL/LI nesting so each submenu <ul> is inside its parent <li>. Invalid nesting breaks layout in all browsers.
  • Stop using per-item absolute left offsets to lay out the menu. Anchor the menu with a positioned container, then use inline-block or floats for the top-level items and absolute positioning only for dropdowns. Example pattern (replace your current rules with something like this):
<ul class="nav">
  <li><a href="/">HOME</a></li>
  <li class="has-sub">
    <a href="/portfolio">PORTFOLIO</a>
    <ul class="sub"> ... </ul>
  </li>
  ...
</ul>

.nav { list-style:none; margin:0; padding:0; }
.nav > li { display:inline-block; position:relative; }
.nav .sub { position:absolute; left:0; top:100%; display:none; }
.nav li:hover > .sub { display:block; }

Debug checklist to run if things still shift:

  • Open devtools, inspect a problematic menu item, and toggle position, left, and margin rules to see which rule moves it.
  • Search your CSS for stray comment markers (/* or */) or duplicated stylesheet includes and remove them.
  • Run the HTML through the W3C validator to catch broken tags and nesting errors (fix those first).
  • Keep all navigation CSS in one file and prefer position:relative on the container and position:absolute only on the submenu.

These changes turn fragile pixel-offset layout into a predictable, maintainable nav with straightforward dropdowns and will stop the menu drifting to the right.

Recommended Answers

All 7 Replies

Member Avatar for mmcdonald

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.

Member Avatar for davy_yg

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="" 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.

Member Avatar for mmcdonald

Need to see: navigation.php

Member Avatar for davy_yg

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.

Member Avatar for mmcdonald

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
Member Avatar for BMXDad

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

Member Avatar for davy_yg

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.