• 0

CSS front page "big image landing" help

Asked by Kalint,

 Share

Question

Mentor

Kalint

Posted
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")
}

2 answers to this question

Recommended Posts

  • 0
Grand Master

primexx

Posted
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>
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.