CODEWITHSUNDEEP
htmlcss
dostrik
dostrik

Reputation: 217

How to make different sections in a single page (explanation inside)

Basically what I'm trying to achieve is making a one pager for my website. Basically there is an index page, and, for example, if someone clicks on "Services" it will send them to the services page. This "services" page will display 5 or 6 services, all in one page. So basically when the user clicks on a navigation item, it scrolls using jQuery to the div where the information is displayed.

Now what I don't want is the user to see the section below the one he's / she's actually reading. So for example I have a service called Edition and another Conception. If I'm reading the "Edition" section, I don't want to see the "Conception" just right now, unless I scroll to it. My first thought was using margins, but I mean if I'm on a 1024x768 display the margin would not be the same as a 1920x1080.

So basically, I'm looking for a way to display my content for my services on one page, but each different service is displayed so, unless the visitor scrolls, the next section under it is not seen.

Hope it makes sense, and thanks for any support and help!

Upvotes: 0

Views: 18743

Answers (3)

Michael Parker
Michael Parker

Reputation: 12966

Well, you'd need to define a navigation bar class, and a class used to store each section of the page. Setting the height of the section to 100% will ensure that the section takes up the entire height of the user's screen. Note that this only works when the height for both the html and the body are set to 100% as well.

Set up your nav so the position is fixed on the screen, and use links to call a javascript function that navigates to the correct section based on the id of the link.

html:

<nav>
    <a class="nav" id="1" href="#">Section 1</a>
    <a class="nav" id="2" href="#">Section 2</a>
    <a class="nav" id="3" href="#">Section 3</a>
</nav>
<div class="section" id="1">
    Section 1
</div>
<div class="section" id="2">
    Section 2
</div>
<div class="section" id="3">
    Section 3
</div>

css:

a {
    margin: 0 10px 0 10px;
    text-decoration: none;
    color: black;
}

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

nav {
    position: fixed;
    width: 100%;
    background-color: lightgrey;
    text-align: center;
    margin-bottom: 20px;
}

.section {
    height: 100%;
    padding-top: 20px;
}

js:

$('.nav').click(function() {
    var id = $(this).attr('id');
    $('html, body').animate({
        scrollTop: ($('#' + id + '.section').offset().top)
    }, 1000);
});

demo:

http://jsfiddle.net/dqcuN/2/

Hope this is what you were looking for.

Upvotes: 4

Shivam Pathak
Shivam Pathak

Reputation: 1

You need to include paging technique in your HTML page, so for each section you need to provide an id and a hyper link for that.

Upvotes: 0

S&#243;fka
S&#243;fka

Reputation: 993

I guess by image you uploaded that this is what you are looking for:

HTML

<article>
<h1>Edition</h1>
<div>Sed ut perspiciatis unde omnis iste natus error sit </div>
</article>

CSS

html {height: 100%;}
body {margin: 0; padding: 0; height: 100%;}
article {width: 500px; height:100%; margin: 0 auto;}​

http://jsfiddle.net/5HLNE/

Upvotes: 0

Related Questions