The navbar on my homepage is cropping out my last link while on my other pages it works perfectly fine.
Excuse the extraneous code for all of this, this is all new to me.
html {
height: 100%;
margin: 0;
width: 100%;
overflow: auto;
}
/* HTML code */
header {
font-size:3.5em;
}
h1 {
text-align: center;
font-size: 250%;
}
/*H1 style */
h2 {
font-size: 130%;
}
/*H2 style */
table {
border: 3px solid white;
text-align: center;
border-collapse: collapse;
}
/* tale style */
th {
text-align: center;
font-size:120%;
border: 3px solid white;
border-collapse:collapse;
}
/* Table Header style */
td {
text-align: Left;
border-left: 3px solid white;
border-collapse: collapse;
}
/*table cell alignment */
p {
font-size: 100%;
}
/*paragraph style */
.body {
font:helvetica, serif;
color: white;
overflow:auto;
background-color: black;
font-family: Arial, Verdana;
width: 100%;
display: block;
margin:auto;
text-align: center;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}
/* Body style */
.topnav {
background-color: black;
overflow:hidden;
position:fixed;
height: 120px;
width: 100%;
}
/* Navbar style */
.topnav a {
font:serif;
float:left;
color:white;
text-align:center;
padding: 12px 14px;
text-decoration: none;
font-size: 24px;
height: 120px;
display: inline-block;
vertical-align: top;
line-height: 90px;
width: 14.59%;
}
/* Navbar component style */
.topnav a:hover {
background-color: white;
color: black;
}
/* Hover Navbar option */
.topnav a.active {
background-color: white;
color: black;
}
/* Active Navbar option */
.BG1 {
background-image: url('CNRTap2.jpg');
height: 80%;
width:100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Background 1 */
.BG2 {
background-image: url('CNRPizza1.jpg');
height: 80%;
width:100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Background 2 */
.BG3 {
background-image: url('CNRPing1.jpg');
height: 80%;
width:100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Background 3 */
.logo {
display:inline-block;
vertical-align: top;
width: 16.666%px;
height: 90px;
padding-top: 15px;
margin-right:20px;
margin-left:20px;
float: left;
}
/* Logo in Navbar */
.footer {
text-align: center;
background-color: grey;
padding: 15px;
}
/* Footer */
/* Add social media links and logo */
.form {
text-align:center;
position:center;
padding-left:10px;
}
/* Contact Us Form */
input[type=text], input[type=email], [type=number], select, textarea {
width: 40%;
border: 2px solid white;
border-radius:3px;
padding:15px;
margin:10px;
}/*-- Form input styles */
input[type=submit] {
background-color:black;
color:white;
font-size: 20px;
padding:15px 15px;
border:1px white;
border-radius:3px;
cursor:pointer;
border:2px solid white
}
/* Submit button style */
input[type=submit]:hover {
background-color:white;
color:black;
}
/*Submit button hover style */
<!DOCTYPE html>
<html lang="en">
<head>
<title> Standard Cocktail Bar Home Page </title>
<meta name="author" content="joshualavulohodges#gmail.com">
<meta name="description" content="This page is homepage of Standard Cocktail Bar">
<meta name="keywords" content="Alcohol, Gungahlin, Drinks, Food, Standard Bar, Cocktail">
<meta name="viewport" content="width=device-width, height=auto, initial-scale=1">
<link href="Stylesheet.css" rel="stylesheet" type="text/css">
<!-- Meta Data -->
</head>
<body>
<div class="body">
<nav>
<div class="topnav">
<img class="logo" src="logo1.png">
<a class="active" href="Home Page.html">Home </a>
About Us
Whats On
Menu
Contact Us
</div>
</nav>
<!--NavBar-->
<div class="BG1"></div>
<!--BG1-->
<h1> Set Title</h1>
<!--Heading-->
<p> Intro to business </p>
<p> Quick Info of business </p>
<!--Business Info-->
<div class="BG2"></div>
<!--BG2-->
<table style="width:80%; margin-left:auto; margin-right:auto">
<caption style="font-size:180%"> <b>Opening Hours</b></caption>
<tr>
<th> Days </th><th>Hours</th>
</tr>
<tr>
<td>Monday</td><td>Closed</td>
</tr>
<tr>
<td>Tuesday</td><td>12:00pm - 9:00pm</td>
</tr>
<tr>
<td>Wednesday</td><td>12:00pm - Late</td>
</tr>
<tr>
<td>Thursday</td><td>12:00pm - Late</td>
</tr>
<tr>
<td>Friday</td><td>12:00pm - Late</td>
</tr>
<tr>
<td>Saturday</td><td>10:00pm - Late</td>
</tr>
<tr>
<td>Sunday</td><td>12:00pm - Late</td>
</tr>
</table>
<!--Opening Hours-->
<p> Summary of promos </p>
<!--Promo Info-->
<div class="BG3"></div>
<!--BG3-->
<footer>
<p> insert some social media links etc </p>
</footer>
<!--Footer-->
</div>
</body>
</html>
Remove overflow: hidden; from your.topnav class. Style overflow: hidden; hides the all elements, which exists deyond the screen view port.
.topnav {
background-color: black;
/* overflow: hidden; */
position: fixed;
height: 120px;
width: 100%;
}
Related
If I want to change the background color of my text inside the parallax scrolling effect there's a white bar on top of it. I tried changing every color that I wrote down but it didn't disappeared. You can see the white bar here. Do I need to change a color in CSS or do I need to need to create a new div?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.parallax {
background-image: url("pexels-philippe-donn-1169754.jpg");
/* specific heigh */
min-height: 500px;
/*parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
</head>
<body>
<div class="header">
Space, Universe And Other Stuff
<div class="header-right">
<a class="active" href="#home">Home</a>
Chat
Personal Projects
Contact
About
</div>
</div>
<div class="parallax"></div>
<div style="height:700px;background-color:lightgrey;font-size:36px">
<div style="padding-left:20px">
<h1>Text</h1>
<p>Text....</p>
<p>More text...</p>
</div>
<div class="parallax"></div>
</body>
</html>
Default margin to h1 is causing the issue.
....
<div style="padding-left:20px">
<h1 style="margin-top:0px">Text</h1>
<p>Text....</p>
<p>More text...</p>
</div>
....
you should add a class instead of adding style attribute
It appears to be the <h1> tag's default margin sticking out the top. Try clearing the margin with
h1 {margin: 0;}
If you do need some gray space above the <h1> you could add padding instead.
Set margin: 0; on your h1 element.
* {
box-sizing: border-box;
}
h1 {
margin: 0;
}
.parallax {
background-image: url("https://i0.wp.com/www.fmxexpress.com/wp-content/uploads/2020/09/pexels-philippe-donn-1169754.jpg");
/* specific heigh */
min-height: 500px;
/*parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
Space, Universe And Other Stuff
<div class="header-right">
<a class="active" href="#home">Home</a>
Chat
Personal Projects
Contact
About
</div>
</div>
<div class="parallax"></div>
<div style="height:700px;background-color:lightgrey;font-size:36px">
<div style="padding-left:20px">
<h1>Text</h1>
<p>Text....</p>
<p>More text...</p>
</div>
<div class="parallax"></div>
</body>
</html>
I can't scroll down on my page, i have looked for the overflow property to change it from hidden to scroll but its still not working.
I hope someone can help me with this frustrating problem...
I have pasted all my css files in the overflow editor so you guys can see what is going wrong.
Here is my source code:
body {
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
overflow: scroll;
}
div.gallery1 {
border: 5px solid #2f354e;
border-radius: 10px;
width: 300px;
background: #17c;
}
div.table-title {
display: block;
max-width: 600px;
padding:5px;
width: 100%;
}
.table-title h3 {
color: #000;
font-size: 30px;
font-weight: 400;
font-style: normal;
font-family: Helvetica, arial, sans-serif;
text-transform: uppercase;
}
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: 320px;
max-width: 600px;
padding:5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
th {
color:#D5DDE5;
background:#1b1e24;
border-bottom:4px solid #9ea7af;
border-right: 1px solid #343a45;
font-size:23px;
font-weight: 100;
padding:24px;
text-align:left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align: middle;
}
th:first-child {
border-top-left-radius: 3px;
}
th:last-child {
border-top-right-radius: 3px;
border-right: none;
}
tr {
border-top: 1px solid #C1C3D1;
border-bottom-: 1px solid #C1C3D1;
color:#666B85;
font-size:16px;
font-weight:normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
background:#4E5066;
color:#FFFFFF;
border-top: 1px solid #22262e;
}
tr:first-child {
border-top:none;
}
tr:last-child {
border-bottom:none;
}
tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
td {
background:#FFFFFF;
padding:20px;
text-align:left;
vertical-align:middle;
font-weight:300;
font-size:18px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
}
td:last-child {
border-right: 0px;
}
th.text-left {
text-align: left;
}
th.text-center {
text-align: center;
}
th.text-right {
text-align: right;
}
td.text-left {
text-align: left;
}
td.text-center {
text-align: center;
}
td.text-right {
text-align: right;
}
/**********************/
body {
margin: 0;
padding: 0;
/* Location of the image */
background-image: url("http://kb4images.com/images/red-wallpaper-hd/37940982-red-wallpaper-hd.jpg");
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
h1 {
color: white;
}
p {
font-family: Impact, Charcoal, sans-serif;
font-size: 20px;
}
/**********************/
/*------Nav-------*/
header {
width:100%;
position: fixed;
}
header nav {
width:100%;
background:#2f354e;
}
.menu_bar {
display:none;
}
header nav ul {
overflow:hidden;
list-style:none;
margin: 0px;
padding: 0px;
}
header nav ul li {
float:left;
}
header nav ul li a {
color:#fff;
padding:14px;
display:block;
text-decoration:none;
}
header nav ul li span {
margin-right:10px;
}
header nav ul li a:hover {
background:red;
text-decoration: none;
color:#ffffff;
}
#media screen and (max-width:800px ) {
header nav {
width:150px;
height:100%;
left:-100%;
margin:0px;
position: fixed;
}
header nav ul li {
display:block;
float:left !important
}
.menu_bar {
display:block;
width:100%;
background:#ccc;
text-align:center;
}
.menu_bar .bt-menu {
display:block;
padding:20px;
background:#2f354e;
color:#fff;
text-decoration:none;
font-weight: bold;
font-size:25px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.menu_bar span {
float:right;
font-size:30px;
}
}
/*--------End of the nav-------*/
/*-------- Generic styles-------*/
body{
overflow: scroll;
margin:0px;
font-family: sans-serif;
}
/*-------- Generic styles-------*/
body {
color: #fff;
}
footer {
background: #2f354e;
bottom: 0;
left: 0;
padding: 20px 0;
position: fixed;
right: 0;
text-align: center;
}
<!DOCTYPE html>
<html>
<title>test</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="favicon/popcorn-32.png">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/loader.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/filmtoevoegen.css">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
<script src="js/loader.js"></script>
</head>
<body>
<header>
<div class="menu_bar">
<span class="fa fa-bars"></span>test
</div>
<nav>
<ul>
<li><span class="fa fa-home"></span>Admin dashboard</li>
<li style="float:right"><span class="fa fa-sign-out"></span>Loguit</li>
</ul>
</nav>
</header>
<br>
<br>
<br>
<br>
<br>
<center>
<div class="gallery1">
<h3>Film toevoegen</h3>
</div>
<br>
<br>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">Film:</th>
<th class="text-left">Sales</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">Genre:</td>
<td class="text-left">$ 50,000.00</td>
</tr>
<tr>
<td class="text-left">Film omschrijving:</td>
<td class="text-left">$ 10,000.00</td>
</tr>
<tr>
<td class="text-left">Datum van uitkomst:</td>
<td class="text-left">$ 85,000.00</td>
</tr>
<tr>
<td class="text-left">Datum uit bioscoop:</td>
<td class="text-left">$ 56,000.00</td>
</tr>
<tr>
<td class="text-left">Film draai dagen:</td>
<td class="text-left">$ 98,000.00</td>
</tr>
<tr>
<td class="text-left">Zaal:</td>
<td class="text-left">$ 98,000.00</td>
</tr>
<tr>
<td class="text-left">Film afbeelding:</td>
<td class="text-left">$ 98,000.00</td>
</tr>
</tbody>
</table>
</center>
<footer>© Copyright test</footer>
</body>
</html>
Your footer is positioned with fixed position, that's why it is overlapping with your content of body.
In case of setting position fixed for header/footer, make sure to set padding of the body in top/bottom respectively.
So in this case setting the padding-bottom of the body to the height of the footer will make the content visible.
add below css line to your body tag.
body {
padding-bottom:58px; /* height of the footer */
}
you might need to reset the overflow-x to hidden html{ overfloq-x:hidden; }
I used a border to figure out that my wrapper is only wrapping my Header and I'm stumped as to why...I want to wrap the Header, all the way down to the footer... Anyone have any pointers?
I've seen a lot of articles say to specify a width and the height is set to auto if not stated, too, right?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title>Personal Transportation/Errands Services</title>
</head>
<body>
<header>
<div id="headleft">
<img src="images/new logo flattened.jpg" />
</div>
<div id="headright">
(717)***-****
<br />
********#yahoo.com
</div>
</header>
<nav>
Home
Contact
</nav>
<article>
Test
</article>
<aside>
<img src="images/car 1.png" id="car" />
</aside>
<footer>
Ftest
</footer>
</body>
</html>
/* Makeshift CSS Reset */
{
margin: 0;
padding: 0;
}
/* Tell the browser to render HTML 5 elements as block */
footer, header, aside, nav, article {
display: block;
}
body{
width:940px;
height: 100%;
margin:0 auto;
border-style: solid;
border-width: 3px;
}
header {
background-color: #1a8cff;
}
nav {
width: 100%;
float: left;
text-align: right;
background-color: #ff7f00;
font-family: bold 'Oswald', sans-serif;
color: #ffffff;
letter-spacing: 1px;
}
a {
text-decoration: none;
}
/* unvisited link */
a:link {
color: #FFFFFF;
}
/* visited link */
a:visited {
color: #FFFFFF;
}
/* mouse over link */
a:hover {
color: #FFFF00;
}
/* selected link */
a:active {
color: #FFFF00;
}
#headleft {
display:inline;
background-color: #1a8cff;
width: 100%;
}
#headright {
height: 87px;
padding-top: 37.5px;
vertical-align: middle;
display: inline;
float: right;
background-color: #1a8cff;
border-style: solid;
border-width: 3px;
}
body {
margin: 0 auto;
width: 1000px;
font: 13px/22px Helvetica, Arial, sans-serif;
background-color: white;
background-size: 100%;
}
article{
float: left;
}
aside{
float: right;
}
footer{
float:left;
background-color: #1a8cff;
width: 100%;
}
you need to clear your floated elements, you can use a clearfix or an empty div set to clear:both.
FIDDLE
You could also use a wrapper inside the body that wraps every element on the page and set that to overflow: hidden
ALT FIDDLE
Hi there I've been doing research on the site for some time now and i haven't been able to find an answer that correct my problem. I'm looking to expand my body div to fill 100% while maintaining my footer at the bottom of my page. As you'll see in my code the footer is a bit problematic since I'm using a "Banner" and below the contact info for the site. (See provided image).Anyway I've tried some solutions found on other questions but i haven't been able to apply the solution to my code correctly. If someone could point me in the right direction id deeply appreciate it. Also id like to maintain the code with html and css only if at all possible.
The page should not be scrollable on regular sized displays as i have very little content
to put on the website.Here i have provided a jsfiddle to further illustrate my problem. On it you'll see that what i want is my body(green) to dinamically change height to always fill the screen. taking into account that my footer(blue) should also be displayed on screen as well.
[My JSFiddle]http://jsfiddle.net/yuyocollores/3aJBP/2/
Here is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="dcterms.created" content="Fri, 30 May 2014 18:35:33 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Some Title</title>
<link href="gr.css" rel="stylesheet" type="text/css"></link>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
</head>
<body id="htmlbody">
<div id="container">
<div id="header">
<img src="images/bigLOGO.png" />
</div>
<div id="nav">
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div id="body">
<img src="images/homeCONTENT.png" id="homecontent">
<p id="hometext">
Some Slogan text
</p>
</div>
</div>
<div id="footerImageBanner">
<img src="images/LogoVersion2Small.png" />
</div>
<div id="footercontainer">
<p id="footertextsmall">
Address:
<span id="footertextsmall">Some address</span>
</p>
<p id="footertextsmall">
Copyright
<span id="footertextsmall">#2014</span>
</p>
<p id="footertextsmall">
Phone:
<span id="footertextsmall">(xxx)xxx-xxxx</span>
</p>
</div>
</body>
</html>
And here is my current CSS
#htmlbody{
margin:0px;
padding:0px;
background-color:#000000;
}
#container
{
width: 100%;
min-width:500px;
height: 100%;
margin: 0px;
padding: 0px;
overflow:hidden;
}
#header
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 100px;
background-image: url('images/headerBG.png');
background-size: auto;
display: block;
}
#header img
{
display: block;
margin-left: auto;
margin-right: auto;
}
#nav
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 54px;
background-image: url('images/navbarBG.png');
background-repeat: repeat-x;
text-align: center;
}
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
#nav li
{
margin: 0px;
padding: 0px;
float: left;
}
#nav a
{
margin: 0px;
padding-right:6px;
padding-left:-3px;
width: 114px;
height: 50px;
background-image: url('images/btn.png');
background-repeat: no-repeat;
text-decoration: none;
text-transform: uppercase;
text-align:center;
color: #ffffff;
display: table-cell;
vertical-align: middle;
text-shadow: 2px 2px 2px #333333;
}
#nav a:hover
{
background-image:url('images/btnHover.png');
}
#body
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height:auto;
min-height:500px;
background-image: url('images/contentBG.png');
background-repeat: repeat;
overflow:auto;
}
#homecontent
{
width: 100%;
min-width:500px;
height: auto;
margin-top: 40px;
margin-bottom:0px;
}
#hometext
{
padding:0px;
margin-top:20px;
margin-bottom:0px;
text-transform: uppercase;
color: #cccccc;
text-shadow: 2px 2px 5px #000000;
font-size: 165%;
font: arial;
text-align: center;
}
#hometextsmall
{
color: #cc9966;
text-align: center;
font-size: x-large;
}
#contactcontent{
width:720px;
height:400px;
min-height:400px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
padding-bottom:10px;
padding-top:5px;
border-radius: 15px;
background-color:#666666;
}
#pagecontent
{
width:550px;
height:450px;
min-height:450px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
padding-bottom:10px;
padding-top:5px;
border-radius: 15px;
background-color:#666666;
}
#pagecontent ul {
list-style-type: none;
padding-left:20px;
margin: 0px;
}
#pagecontent ul li {
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
#pagecontenttext{
margin: 0px;
padding: 0px;
color: #131010;
font: arial;
font-size:18px;
}
#contact{
float:left;
display:block;
width:350px;
height:400px;
margin-left:auto;
margin-right:auto;
}
#footercontainer
{
margin:0px;
padding: 0px;
width: 100%;
height:auto;
display: table;
table-layout: fixed;
background-image: url('images/footerBG.png');
background-repeat: repeat;
}
#footercontainer p
{
margin:0px;
padding: 0px;
display: table-cell;
text-align: center;
margin: 0px;
padding: 0px;
vertical-align: top;
}
#footertextsmall
{
margin: 0px;
padding: 0px;
color: #ffffff;
text-align: center;
font-size:small;
}
#footerImageBanner
{
margin: 0px;
padding: 0px;
width: 100%;
height: 80px;
background-image: url('images/footerImgBG.png');
background-size: auto;
display: block;
}
#footerImageBanner img
{
display: block;
margin-left: auto;
margin-right: auto;
}
hey do you mean......
#container div{
background-color:#fff;
margin:10px;
}
http://jsfiddle.net/kisspa/QFN9U/
this is my test responsive web page and first time to do responsive web site.
http://www.oldcompany.com.sg/test
everything is fine but when I look in mobile, there is a big gap or white space between slider and footer.. also in below of the footer..
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Old Company - Integrated Solution</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page styles-->
<link href="css/styles.css" rel="stylesheet">
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/fotorama.css">
<script src="js/fotorama.js"></script>
</head>
<body>
<div class="header">
<div class="fotorama-header">
<!-- header -->
<div style="letter-spacing: 1px; font-weight: bold; font-size: 16px;">
<a href="http://www.oldcompany.com.sg" style="text-decoration: none; color: #fff;">
<img src="img/oc_logo.png" />
</a>
</div>
<!-- /header -->
</div>
<div class="menu">
Home
About Us
Services
Contact Us
</div>
</div>
<div class="page-wrap">
<div class="fotorama" data-width="100%" data-height="100%" data-nav="none" data-autoplay="true"
data-minHeight="auto" data-fitToWindowHeight="true" data-fitToWindowHeightMargin="0" data-margin="0"
data-shadows="false" data-cropToFit="true">
<div class="caption" data-img="img/open.png">
</div>
<div class="caption" data-img="img/lead.png">
</div>
<div class="caption" data-img="img/dynamic.png">
</div>
</div>
<div class="push"></div>
</div>
<div class="site-footer">
<div>
Copyright © 2013, theoldcompany Pte Ltd. All right reserved
</div>
</div>
</body>
</html>
CSS:
/* Global reset */
* {
padding:0;
margin:0;
}
html , body{ height: 100%; }
img, object {max-width: 100%;}
/* Clear fix: nicolasgallagher.com/micro-clearfix-hack/ */
.group:before, .group:after { content:""; display:table; }
.group:after { clear:both; }
.group { *zoom:1; } /* IE6-7 */
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin: 0 auto -2.5em;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer
{
background: rgba(0,0,0, .7);
}
.site-footer::after {height: 0px;}
.site-footer > div
{
width: 90%;
margin: 0px auto;
text-align: center;
font-size: 0.8em;
color: #FFF;
padding-top: 10px;
}
.site-footer, .push {
/* .push must be the same height as footer */
height: 2.5em;
}
body {
font-family:century gothic, "Helvetica Neue", Helvetica, Arial, sans-serif;
background:#fff;
color:#111;
font-size:16px;
}
/* Header */
.header {
position:relative;
top:0;
left:0;
width:100%;
color:#ccc;
background:#111;
background:hsla(0,0%,0%,.6);
z-index:10;
}
.header a,
.header a:link,
.header a:visited {
color:#ccc;
}
.header a:hover,
.header a:active,
.header a:focus {
color:#fff;
}
.fotorama-header {
margin-left:8px;
}
.menu {
position:absolute;
top:25px;
right:8px;
font-size:13px;
}
.menu a {
margin-left:1em;
}
just remove .page-wrap{
min-height:100%}
from css
If you want fixed footer or header, you must set their heights and match the margins of page-wrap.
html, body {
margin: 0;
padding: 0;
height: 100%; /* needed for content height */
text-align: left;
vertical-align: top;
overflow: hidden;
position: relative; /* help with position absolute */
}
.header {
display: block;
position: relative;
height: 40px;
width: 100%;
background-color: black;
color: white;
overflow: hidden;
text-align: center;
}
.page-wrap {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top: 40px; /* same height as header */
margin-bottom: 40px; /* same height as footer */
}
.content {
overflow-y: auto;
overflow-x: hidden;
height: 100%;
text-align: left;
-webkit-overflow-scrolling: touch;
background-color: blue;
color: white;
}
.site-footer {
position: absolute;
bottom: 0px;
display: block;
height: 40px;
width: 100%;
background-color: black;
color: white;
overflow: hidden;
text-align: center;
}
http://jsfiddle.net/s2yZW/
use this:
.site-footer{over-flow-y:hidden;}