Remove Extra white space at the top
Question
I have made a web page using bootstrap carousel theme. The white space at the top is still visible. I want to remove it. I am providing my carousel CSS file and my HTML file. I have tried changing the padding and margin but nothing seems to work. Please help.
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
padding-top: 0;
margin-top: 0;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
padding-top: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 20px;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: 10px;
margin-left: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) {
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
}
my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/Users/amandhapola/Desktop/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="/Users/amandhapola/Desktop/bootstrap/docs/assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="/Users/amandhapola/Desktop/bootstrap/docs/examples/carousel/carousel.css" rel="stylesheet">
<link href="/Users/amandhapola/Desktop/nlog.css" rel="stylesheet">
<link href="/Users/amandhapola/Desktop/fb.css" rel="stylesheet">
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-t
op" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Resumeeeee !!!</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<!--<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/" data-toggle="modal" data-target="#myModal">Login</a></li>
<li><a href="../navbar-static-top/" data-toggle="modal" data-target="#myModal1">Signup</a></li>
</ul>
<!--<ul class="nav pull-right">-->
<!-- <ul class="nav nav-pills" style="float:right">-->
<!--</ul>-->
<!--</ul>-->
</div>
</div>
</div>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="/Users/amandhapola/Desktop/six.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Stay on the top.</h1>
<p>Get noticed by your super seniors</p>
<p><a class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal1" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img src="/Users/amandhapola/Desktop/four.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Get selected</h1>
<p>we make sure your supersenior recoomends you as fast as possile</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="/Users/amandhapola/Desktop/third.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One thing more for good measure.</h1>
<p>Get your resume viewed by many other people who are at the top of their level</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<img class="img-circle" src="/Users/amandhapola/Desktop/face1.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;">
<h2>Martin Rodriguez</h2>
<p>"I got Placed at Amazon .Thanks to Resume"</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="/Users/amandhapola/Desktop/face2.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;">
<h2>Tim Dunn</h2>
<p>"I got Placed at microsoft .Thanks to Resume"</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="/Users/amandhapola/Desktop/face3.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;">
<h2>Steve Mccharthy</h2>
<p>"I use Resume to hire from the abundant fresh talent around the world"</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Get Helped <br><span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Super Seniors will help you on your highway to success</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive" src="/Users/amandhapola/Desktop/super.jpg" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-5">
<img class="featurette-image img-responsive" src="/Users/amandhapola/Desktop/try.jpg" alt="Generic placeholder image">
</div>
<div class="col-md-7">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Try it for free.</p>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Get Placed At you Dream Company</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive" src="/Users/amandhapola/Desktop/logo.jpg" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>© 2014 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
</div><!-- /.container -->
<!-- sadasdasdasdasd -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="container">
<div class="row">
<div class="main">
<h3>Please Log In</h3>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<a href="#" class="btn btn-lg btn-primary btn-block">Facebook</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<a href="#" class="btn btn-lg btn-info btn-block">Google</a>
</div>
</div>
<div class="login-or">
<hr class="hr-or">
<span class="span-or">or</span>
</div>
<form role="form">
<div class="form-group">
<label for="inputUsernameEmail" class="abovelogin">Username or email</label>
<input type="text" class="form-control" id="inputUsernameEmail">
</div>
<div class="form-group">
<a class="pull-right" href="#" id="fpassword">Forgot password?</a>
<label for="inputPassword" class="abovelogin">Password</label>
<input type="password" class="form-control" id="inputPassword">
</div>
<div class="checkbox pull-right">
<label class="abovelogin">
<input type="checkbox">
Remember me </label>
</div>
<button type="submit" class="btn btn btn-primary">
Log In
</button>
</form>
</div>
</div>
</div>
</div>
<!-- sadasdasdasdasd -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="container" id="wrap">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action="r" method="post" accept-charset="utf-8" class="form" role="form"> <legend>Sign Up</legend>
<h4>It's free and always will be.</h4>
<div class="row">
<div class="col-xs-6 col-md-6">
<input type="text" name="firstname" value="" class="form-control input-lg" placeholder="First Name" /> </div>
<div class="col-xs-6 col-md-6">
<input type="text" name="lastname" value="" class="form-control input-lg" placeholder="Last Name" /> </div>
</div>
<input type="text" name="email" value="" class="form-control input-lg" placeholder="Your Email" /><input type="password" name="password" value="" class="form-control input-lg" placeholder="Password" /><input type="password" name="confirm_password" value="" class="form-control input-lg" placeholder="Confirm Password" />
<label id ="bdate">Birth Date</label> <div class="row">
<div class="col-xs-4 col-md-4">
<select name="month" class = "form-control input-lg">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select> </div>
<div class="col-xs-4 col-md-4">
<select name="day" class = "form-control input-lg">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select> </div>
<div class="col-xs-4 col-md-4">
<select name="year" class = "form-control input-lg">
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select> </div>
</div>
<label class="sidetext">Gender : </label> <label class="radio-inline" id="rbuttonmale">
<input type="radio" name="gender" value="M" id=male/>
Male
</label>
<label class="radio-inline" id="rbuttonfemale">
<input type="radio" name="gender" value="F" id=female /> Female
</label>
<br />
<span class="help-block">By clicking Create my account, you agree to our Terms and that you have read our Data Use Policy, including our Cookie Use.</span>
<button class="btn btn-lg btn-primary btn-block signup-btn" type="submit">
Create my account</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/Users/amandhapola/Desktop/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/Users/amandhapola/Desktop/bootstrap/docs/assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/Users/amandhapola/Desktop/bootstrap/docs/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
1 answers
solution1
2 2014-08-31 10:45:57
Body and .navbar-wrapper .container all have default margins, (typically 8 pixels, note margins collapse when they overlap so you don't get 16 pixels), add this to fix that.
body {
margin:0
padding: 0 0 40px 0; /* zero padding except 40 pixels on bottom */
}
.navbar-wrapper {
margin:0;
}
.container {
margin-top: 0;
}
Generally what I do is start off by setting all margins and paddings to zero at the begining and specifying the margins as I need them, leaving nothing to chance.
* {
margin:0;
padding:0;
}
I consider that the safest way to go for what it is worth.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Remove extra white space from top in firefox
how to remove extra white space
how to remove white space on the top
Extra white space at the top of my page
Extra White space in top of html page
How to remove the extra white space at the bottom of the panels
Remove extra white space at the left of ul element
Remove extra horizontal white space on mobile (css)
How to remove white space at the top of page
Remove white space at the top and the bottom in h3
Related Tags