Member Avatar for davy_yg

Hello,

Cek my site:

I wonder why the article shift to the right. Not only in service menu but also in blog, portfolio & contact.

Thanks before.

  • 3 Contributors
  • 4 Replies
  • 104 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Agree with that a layout rule (often a large left margin or offset coming from a stylesheet/media query) is the most common cause of a block “shifting right.” Also echo : malformed navigation markup (extra ULs or incorrect LI nesting) will change how the browser places the menu and adjacent content.

How to isolate the problem quickly:

  • Inspect the shifted element in the browser devtools and check the Computed Styles for any nonzero left margin, left/transform offsets, or an unexpected width. Temporarily disabling suspected rules in devtools will show which rule moves the content.
  • Validate the page markup (broken UL/LI nesting is a frequent culprit). The W3C validator will highlight structural errors.
  • Confirm whether a media query is adding large margins or widths at certain viewports; media-query changes can hide until specific viewport sizes are used.

A modern, robust pattern for a horizontal nav with a simple dropdown uses a flex container for the top-level row and absolutely positioned submenus so they do not affect flow. Example pattern:

<nav class="site-nav">
  <ul class="nav">
    <li><a href="/">Home</a></li>
    <li class="has-sub">
      <a href="/services">Services</a>
      <ul class="sub">
        <li><a href="/web">Web</a></li>
        <li><a href="/marketing">Marketing</a></li>
      </ul>
    </li>
  </ul>
</nav>
.site-nav .nav { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.site-nav .nav > li { position: relative; }
.site-nav .sub { position: absolute; left: 0; top: 100%; display: none; margin: 0; padding: 0; z-index: 1000; }
.site-nav .has-sub:hover > .sub { display: block; }

Notes and cautions:

  • Hover-based dropdowns need a click/touch fallback for mobile; a small script that toggles an “open” class is typical.
  • Watch for overflow:hidden on parent containers and z-index stacking that can clip dropdowns.
  • For reference on box model, positioning and flexbox behavior see the MDN guides on the CSS box model, position and Flexbox (search MDN for those topics) and use the W3C validator to catch markup errors.

Recommended Answers

All 4 Replies

Member Avatar for ryantroop

That would likely be the HUGE margin from the media query.

Your CSS is a little broken. I would encourage you to revisit it, and rethink the use of media queries if you can.

Start simple and get the site working on a PC as you need, then worry about tweaking for mobile or whatever other medium you plan on having used.

Member Avatar for Member #120589

This is the html...

<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>

It doesn't look quite right to me. Are you sure the HTML is as you want it?

Member Avatar for davy_yg

I follow this tutorial: http://css.maxdesign.com.au/listutorial/horizontal01.htm

and change the nav list to:

index.php

<link href= "style.css" rel="stylesheet" type="text/css" media="screen">



<div id="navcontainer">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

style.css

#navcontainer { background-color: #ffff00; width: 700px; height: 50px; border-radius: 10px; margin: 100px 0 0 0;}

#navcontainer ul { list-style-type: none; margin: 0 0 0 100px; padding: 15px; }

#navcontainer ul li { display: inline; }

#navcontainer ul li a { text-decoration: none; padding: .5em 1em; font-weight: bold; color: #000; background-color: #ffff00;}

#navcontainer ul li a:hover { color: #000; background-color: #c8fa7f; }

Just one more thing: how to do the drop down menu?

Member Avatar for Member #120589

I'm no CSS guru, but

display:inline-block

is useful as you can apply padding/margins to the li instead of the child element. As sometimes, depending on your setup, you may want static text instead of a link for the active pageitem.

Anyway. For dropdown menus, you have about a thousand choices for pure CSS and js-powered solutions on the internet. Just choose one.

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.