Shift to the right

[davy_yg]

Hello,

Cek my site: http://www.innovation.web.id/services.php

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

Thanks before.

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

[diafol]

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?

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

[diafol]

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.