CODEWITHSUNDEEP
htmlcss
kathryn_c
kathryn_c

Reputation: 5

HTML page shifting (not a scroll bar issue!)

I'm working on a pretty minimal site with a fixed bottom navigation bar and centered content. I'm having problems with the content shifting a little bit inbetween every page.

Here's the site: http://imsja.com/test/index.html

and the CSS: http://imsja.com/test/ims.css

Index, Philosophy, Services, and Contact Us page are uploaded so far. On Philosophy and Services, I know the content is shifting because of the scroll bar. But the content also shifts inbetween the Index and Contact Us pages (neither of which have a scroll bar).

Any suggestions?

Upvotes: 0

Views: 608

Answers (4)

William Fairey
William Fairey

Reputation: 1

I would change you navigation block to have a holder like so:

    <div id="navigation">
      <div id="nav-holder">
        <a href="/philosophy.html"><span class="activedropcap">P</span><span class="active">HILOSOPHY</span></a>
        <a href="/services.html"><span class="dropcap">S</span>ERVICES</a>
        <a href="/portfolio.html"><span class="dropcap">P</span>ORTFOLIO</a>
        <a href="/team.html"><span class="dropcap">T</span>EAM</a>
        <a href="/blog.html"><span class="dropcap">W</span>HAT'S <span class="dropcap">N</span>EW</a>
        <a href="/contact.html"> <span class="dropcap">C</span>ONTACT <span class="dropcap">U</span>S </a>
        <div id="rule"><!-- hr-->
        <img src="images/rule.png" width="750" height="5"></div>
      </div>
    </div>

You can then add a style to that to centralize it

    #navigation #nav-holder {
      width: 735px;
      margin: 0px auto;
    }

remove these from #navigation a:

    padding-left: 5px;
    padding-right: 5px;
    width: 115px;

Add this to the end of #navigation a:

    float: left;
    line-height: 30px;
    padding: 0 25px;

Upvotes: 0

Taymoor Q.
Taymoor Q.

Reputation: 1431

I think the width of the navigation should be static to not shifting

#navigation { width: 100%; ->example 1345px or else as you prefer }

Upvotes: 2

khollenbeck
khollenbeck

Reputation: 16157

I would recommend using a CSS reset.

http://meyerweb.com/eric/tools/css/reset/

Also it appears in Chrome that your custom font is not loading as I receive this error.

Failed to load resource: the server responded with a status of 403 (Forbidden) http://use.typekit.net/c/6ed047/myriad-pro:n9:i9:n7:i7:i4:n4:n6:i6.Xbt:F:2,…6bdfc67868a14a7e75bc1db57140ed45ade213a3fcababd522e3dc685922facee8394858fe

The first thing I noticed to was that the fonts appear to be different sizes. Which is probably making things look like they are shifting.

Upvotes: 0

Justin Lau
Justin Lau

Reputation: 360

It's because you have different style on "active" links. To prevent shifting, you should give a fixed width to #navigation > a elements:

#navigation>a{
    display: inline-block; // width won't work on anchors without this
    width: 150px;          // just for example
}

In addition, "PORTFOLIO", "TEAM", and "WHAT'S NEW" page do not have active style applied on the corresponding anchors, I think you should fix them first.

Upvotes: 0

Related Questions