• 0

CSS front page "big image landing" help

Asked by Kalint,

 Share Followers 0
Go to solution Solved by primexx,

Question

Kalint
Posted

So I have the supersized jquery for making my "big image rotator splash section" and I'm trying to figure out how to hide the rest of the page until the user scrolls down or click the down arrow.

 

I'm not sure what to Google!

 

How do I tell it to float the browser height and width until the user is ready to scroll down?

 

HTML:

@model IEnumerable<Boz.Web.Models.Project>
@using Barenz.Web.HTMLHelpers
@{
    ViewBag.Title = "Home";
}
@section PageStyles
{
    @Styles.Render("~/bundles/supersizedcss")
}

<div class="container">
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- /mobile nav-->
            @Html.ActionLink("Boz Builders", "Index", "Explore", null, new { @class = "navbar-brand" })
        </div>
        <!-- nav -->
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                @Html.MenuItem("HOME", "Index", "Explore")
                @Html.MenuItem("BUILD", "Build", "Explore")
                @Html.MenuItem("REMODEL", "Remodel", "Explore")
                @Html.MenuItem("GALLERY", "Gallery", "Explore")
                @Html.MenuItem("DIFFERENCE", "Difference", "Explore")
                @Html.MenuItem("ABOUT", "Index", "Company")
                @Html.MenuItem("CONTACT", "Contact", "Company")
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
        <!-- /nav -->
    </div>
    <!-- /header -->

    <div class="landing">

    </div>
    <!-- /slider -->

    <!-- HMM! HOW TO MAKE STAY DOWN UNTIL USER SCROLLS DOWN -->
    <div class="gallery">
        <table class="table table-striped">
            <tbody>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Name)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Categories.Name)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FrontPage)
                    </th>
                </tr>

                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Categories.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.FrontPage)
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>
<!-- /welcome gallery -->

@section PageScripts
{
    @Scripts.Render("~/bundles/supersizedjs")
}
Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
primexx
  • Solution
Posted

uhm.. so you mean you just want a section at the top of the page that takes up the whole screen? just make a 100% high div at the top and put all the rest below it?

 

A few height values (and the appropriate margin/padding reset) is all you need:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;margin:0;padding:0;">
<head>
 <title>TEST</title>
</head>
<body style="height:100%;margin:0;padding:0;">
<div style="background:#f00;height:100%;">TEST</div>
<div style="background:#00f;height:500px">SECOND DIV</div>
</body>
</html>
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Followers 0
Go to question listing

  • Recently Browsing   0 members

    No registered users viewing this page.