33 posts
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 6-7 years
  • Sold between 10 000 and 50 000 dollars
  • United States
cac003 says

Hey Guys, I am building a website tribute for the great Saul Bass. But I have been STUCK on this one thing that I keep banging my head against a wall on! The problem is on the homepage. I have a slider that is purely css (it is required to only be css) and every time you click the slider button to slide to the next picture, the whole page jumps to hide the header and everything above it! If you click on the link below you will see what I mean…

My Saul Bass Website Tribute

I am not at all a good coder and I bet there is something I am missing that is probably super easy to fix, but I swear I have been looking over this for days and days now trying to figure this thing out. Does anybody know why it jumps like that? Is there something wrong with my css slider coding or basic content box that the slider lives in?

Any help or another pair of eyes would be greatly appreciated!

I have included the following code: index.html and style.css

Once again, thank you guys!

HTML and CSS (all in one block)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=us-ascii" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Saul Bass - The Renaissance Designer</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />

</head>

  <a name="top" id="top"></a>

  <!-- Top Strip -->

  <div id="strip" />

          <div id="container">

            <!-- Header -->
            <div id="header">
              <img src="style/images/logo.png" width="248" height="134" alt="" class="logo" />
            </div>
            <!-- End Header -->

    <div id="wrapper">

      <!-- Left Menu -->

      <div id="vertmenu">

            <ul>
                <li><a id="selected" href="index.html" tabindex="1">Home</a></li>
                <li><a href="background.html" tabindex="2">Background</a></li>
                <li><a href="impact.html" tabindex="3">Impact</a></li>
                <li><a href="work.html" tabindex="4">Work</a></li>
                <li><a href="resources.html" tabindex="5">Resources</a></li>
            </ul>

        </div>

        <!-- Left Menu End -->

        </div>

        <!-- Title -->

        <div class="content">

            <h1>Saul Bass - The Renaissance Designer</h1>

        <!-- Slider -->

            <div id="content-slider">

            <div id="content">

            <div id="content-inner-1">
            <div id="content-inner-2">
            <div id="content-inner-3">
            <div id="content-inner-4">
            <div id="content-inner-5">
            <div id="content-inner-6">

            <div id="content-inner">

                <div class="page" id="page1">
                    <img src="style/images/home_pic_1.jpg" alt="test1" title="test1" />
                </div>

                <div class="page" id="page2">
                    <img src="style/images/home_pic_2.jpg" alt="test2" title="test2" />
                </div>

                <div class="page" id="page3">
                    <img src="style/images/home_pic_3.jpg" alt="test3" title="test3" />
                </div>

                <div class="page" id="page4">
                    <img src="style/images/home_pic_1.jpg" alt="test4" title="test4" />
                </div>

                <div class="page" id="page5">
                    <img src="style/images/home_pic_3.jpg" alt="test5" title="test5" />
                </div>

                <div class="page" id="page6">
                    <img src="style/images/home_pic_2.jpg" alt="test6" title="test6" />
                </div>

            </div>        

        </div>
        </div>
        </div>
        </div>
        </div>
        </div>

        </div>

        <!-- Slider Buttons-->

        <ul id="nav">
            <li class="button" id="button1"><a href="#content-inner-1"></a></li>
            <li class="button" id="button2"><a href="#content-inner-2"></a></li>
            <li class="button" id="button3"><a href="#content-inner-3"></a></li>
            <li class="button" id="button4"><a href="#content-inner-4"></a></li>
            <li class="button" id="button5"><a href="#content-inner-5"></a></li>
            <li class="button" id="button6"><a href="#content-inner-6"></a></li>
        </ul>
    </div>
            <br />
            <br />

         <!-- Paragraph-->

            <p>Saul Bass was one of the greatest designers of our time. His work has undeniably impacted our world and has transformed motion graphics as we know it. Bass was known by his peers, and arguably the world, as a renaissance designer. He created a wide range of work including album covers, book covers, packaging, retail displays, ceramic tiles, sculptures, typefaces, toys, and title sequences to name a few. Some of his more famous works are corporate logos that are still used today such as Continental Airlines, United Airlines, and Quaker Oats.</p>
            <br />

            <p>Saul Bass was one of the greatest designers of our time. His work has undeniably impacted our world and has transformed motion graphics as we know it. Bass was known by his peers, and arguably the world, as a renaissance designer. He created a wide range of work including album covers, book covers, packaging, retail displays, ceramic tiles, sculptures, typefaces, toys, and title sequences to name a few. Some of his more famous works are corporate logos that are still used today such as Continental Airlines, United Airlines, and Quaker Oats.</p>

        </div>

    <!-- Footer -->

    <div class="clearfix" />
    <div class="push" />            
    <div id="footer-wrapper">
        <div id="footer">
              <div id="footer-content">

                <div id="stamp">
                      <p>By Cody Courmier</p>
                </div>

            </div>
           </div>
    </div>
    <!-- Footer Ends --> 

-----------------------------------------------------------------------------------------------------------------------
OK THAT WAS THE END OF THE HTML FILE....
-----------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------
HERE IS THE BEGINNING OF THE CSS FILE....
-----------------------------------------------------------------------------------------------------------------------
**CSS Reset Portion**
<pre>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent }
body { line-height:1 }
ol, ul { list-style:none }
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0 }
.clearfix:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0 }
.clearfix { display:inline-block }
* html .clearfix { height:1% }
.clearfix { display:block }
</pre>

**CSS Slider Portion**
<pre>
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Main Styles */

#content-slider {
width: 656px;
}

#content {
overflow: hidden;
width: 656px;
height: 262px;
}

#content-inner {
width:10000px;
height: 262px;
}

.page {
width: 656px;
height: 262px;
float: left;
}

/* Sub Styling */

#content-inner-1:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: 0px;
}

#content-inner-2:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -656px;
}

#content-inner-3:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1312px;
}

#content-inner-4:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1968px;
}

#content-inner-5:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -2624px;
}

#content-inner-6:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -3280px;
}

/* Slider Buttons */

#nav {
list-style-type: none;
width: 156px;
height: 0px;
margin: 0 auto;
margin-top: 15px;
padding: 0;
}

.button {
float: left;
background: #bababa;
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
}

.button:hover {
background: #9c172a;
}

.button:active {
background: #9c172a;
}

.button a {
display: block;
width: 10px;
height: 10px;
}
</pre>
</div>
707 posts
  • Sold between 10 000 and 50 000 dollars
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
  • Has been a member for 5-6 years
  • Exclusive Author
  • Envato Studio (Microlancer) Beta Tester
ChillThemes says

You’re going to need to use a little bit of jQuery, try this.

$("#content-slider li a").click(function(event) {
    event.preventDefault();
});
33 posts
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 6-7 years
  • Sold between 10 000 and 50 000 dollars
  • United States
cac003 says

Thank you itsmattadams, I’ll give it a try, but would you know why it is jumping like that in the first place? I was trying to use only css and html, but it might be unavoidable to use another language.

Thanks

by
by
by
by
by
by