I'm using a sticky footer and it keeps being pushed down past the browser height, causing a large amount of whitespace to appear between my main content and the footer. When I use Firefox's inspect element tool however it appears exactly how I want it, removing the white space.
I also have a jQuery slider I'm using called nivoslider but I don't think that's having any affect on it.
Any suggestions?
HTML
<!DOCTYPE>
<html>
<head>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<title>Page Title</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/nivo-slider.css" rel="stylesheet" type="text/css" media="screen">
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 400, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: false, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Last', // Prev directionNav text
nextText: 'Next', // Next directionNav text
});
});
</script>
</head>
<body>
<div id="header">
<div class ="title">
<img src="res/title.png" id="title-img" alt=" ">
</div>
<div class="navbar">
<div class="navbar_inner">
<ul>
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="wrapper">
<div id="content">
<div id="column-left" class="column">
<p>text text text text text text TEXT</p>
</div>
<div class="C-wrapper">
<div id="column-right" class="column">
<p>text text text text text text TEXT</p>
</div>
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="res/slider/slider-img1.jpg" alt="LAN" title="#caption1" data-transition="" />
<img src="res/slider/slider-img2.jpg" alt="LOL" title="#caption2" data-transition="" />
<img src="res/slider/slider-img3.jpg" alt="Starcraft" title="#caption3" data-transition="" />
</div>
</div>
<div id="caption1" class="nivo-html-caption">
<h3>Title</h3>
<p>text text text text</p>
</div>
<div id="caption2" class="nivo-html-caption">
<h3>Title</h3>
<p>text text text text text</p>
</div>
<div id="caption3" class="nivo-html-caption">
<h3>Title</h3>
<p>text text text text text</p>
</div>
<div id="column-center">
<p>text text text text text text TEXT</p>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
</div>
</body>
CSS
*{
margin:0;
padding:0;
text-decoration:none;
}
html{
height: 100%;
}
body{
height: 100%;
min-height: 100%;
background:#1010bf url(../res/bg/bg-hex.png);
}
#header{
margin: 0 auto;
width: 100%
margin-top: 10px;
}
.title{
margin: 0 auto 0 auto;
position: relative;
width: 50%;
}
.navbar{
margin-top: 20px;
margin-bottom: 35px;
padding-top: 10px;
position: relative;
min-height: 30px;
width: 100%;
background: #525454;
float: left;
border-top-color: #000;
border-top-width: 5px;
border-top-style: solid;
border-bottom-color: #000;
border-bottom-width: 5px;
border-bottom-style: solid;
}
.navbar_inner{
margin: 0 auto;
width: 50%;
}
.navbar .navbar_inner ul li{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
padding: 10px 40px;
display: inline;
}
.navbar a:link{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #059695;
}
.navbar a:visited{
color: #059695;
text-decoration: none;
font-weight: bold;
}
.navbar a:active{
text-decoration: none;
font-weight: bold;
}
.navbar a:hover{
text-decoration: none;
font-weight: bold;
color: #00f7ff;
}
.navbar a:focus{
text-decoration: none;
font-weight: bold;
padding: 40px 40px;
color: #00f7ff;
}
#wrapper{
margin: 0 auto -75px auto;
width:1100px;
min-height: 100%;
height: auto !important;
height: 100%;
}
#content{
margin: 0 auto 0 auto;
clear: both;
}
.column{
background-color: #fff;
width: 250px;
height: 500px;
}
#column-left{
float: left;
}
#column-right{
float: right;
}
#column-center{
margin: 10px 30px;
float: left;
width: 540px;
height: 240px;
background-color: #fff;
}
.C-wrapper{
clear: right;
position: relative;
}
.slider-wrapper{
margin: 0 auto;
width: 540px;
border-style: solid;
border-color: #000;
border-width: 5px;
}
.footer{
background-color: #525454;
border-top-color: #000;
border-top-width: 5px;
border-top-style: solid;
}
.footer, .push{
clear: both;
height: 70px;
}
The #wrapper div is currently set to be a minimum height of 100%; try removing that declaration, as it is likely causing the main content to be a minimum size of the entire browser window, which will naturally push all other content below the window.
I would recommend removing the min-height: 100%; and instead adding background-color: #525454; to the html in css.
Looks like this:
html {
background-color: #525454;
}
This will fill anything under the footer with that color making it fill to the end of the browser.
My portfolio reference
I also found this link if you want your footer to be a set height and stay at the bottom.
Set height footer
Related
I'm new to coding, this is my first week in my Fullstack course and we have some homework that I've been working on for a while now. I've managed to get my wireframe to look similar to the homework example (we're supposed to make it look the same) and I'm not sure where I'm going wrong with this html/css code.
Also, I'm not sure exactly how else to show what I am working on other than posting the majority of my css, so i apologize if I do this wrong.
:)
I've placed red borders around the content I'm attempting to align evenly on all sides. I've tried changing the padding, margins, float positions, width (all that I know that would adjust the box(es), but I still cannot seem to get the "aside" content to align with the rest of the wireframe objects.
`````HTML````
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
``` </div>
`````````external css```````````````````
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;}
article {
color:#777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color:#ebebeb;
background-color: #777;
}
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;
}
article {
color: #777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
<div class="layout">
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
</div>
this is what I'm trying to do - https://gyazo.com/6f27f40e4f3e75831b5e4728387ea11f
this is what I've done so far - https://gyazo.com/79299a16a0eb2208db98519005b3bf9d
This is just a quick edit. Also your link tag should be above in tag
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div {
border: 1px solid #000000;
}
.aside1 {
width: 49%;
float: left;
height: 165px;
}
.aside2 {
width: 49%;
float: right;
height: 165px;
}
article {
background-color:green;
padding: 20px;
margin: 5px
}
footer {
width: 100%;
}
</style>
</head>
<body>
<header class="main-head">
<p>header</p>
</header>
<nav>nav</nav>
<section class="divCont">
<div class="aside1">
<p>Section</p>
<article>
Article
<div style="background-color:white; margin: 5px;">
H1,h2,H3
</div>
<div style="background-color:yellow;margin: 5px; ">
p
</div>
</article>
</div>
<div class="aside2">
Aside
</div>
</section>
<footer> Footer </footer>
</body>
</html>
I have a fixed header that I've set up with a higher z-index than the body content so the content slips underneath it. In order to position the content div right below the fixed header, I set its position:relative and gave it a top value
This seemed to work fine, until I started to add items to the content div. First I added an h1 and as I attempted to give it a little margin-top the entire page (header and all) shifted down the value I specified for my margin-top.
I've run into this before (collapsing divs yes?) and I've usually been able to fix it with a set width or a float or a display block, but none of these seem to be doing the trick.
Can someone tell me what I am missing?
*
{
padding: 0;
margin: 0;
}
header
{
background-color: white;
color: #724444;
width: 100%;
height: 90px;
border-bottom: 1px solid rgba(140, 140, 140, .2);
position: fixed;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15px;
text-align: center;
line-height: 1.3;
z-index: 1000;
}
#header-fixedWidth
{
width: 1000px;
height: 90px;
margin: 0 auto;
display:flex;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
nav ul
{
list-style: none;
display: flex;
}
nav ul li
{
margin: 0 10px;
}
#main-content
{
width: 100%;
min-height: 100px;
position: relative;
top: 89px;
}
#main-content-fixedWidth
{
width: 1000px;
min-height: 100px;
margin: 0 auto;
position: relative;
}
.headers
{
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 1.3;
margin-top: 20px;
}
#image-deck
{
width: 1000px;
border: 1px solid #ccc;
position: relative;
display: block;
}
/*Media Queries*/
#media (max-width: 1000px)
{
header
{
width: 100%;
}
#header-fixedWidth
{
width: 100%;
}
}
<html>
<head>
<title>Pic Monkey Recreation</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
</head>
<body>
<header>
<div id="header-fixedWidth"
<img src="Images/logo.png" alt="randomLogo" id="randomLogo" />
<nav>
<ul>
<li>
<img src="Images/iconMenu/edit.png" alt="">
<br>
<p>Edit</p>
</li>
<li>
<img src="Images/iconMenu/touchUps.png" alt="">
<br>
<p>Touch Up</p>
</li>
<li>
<img src="Images/iconMenu/design.png" alt="">
<br>
<p>Design</p>
</li>
<li>
<img src="Images/iconMenu/collage.png" alt="">
<br>
<p>Collage</p>
</li>
</ul>
</nav>
<div id="user-help">
<img src="Images/signIn.png" alt="signIn" id="signIn" />
</div>
</div>
</header>
<div id="main-content">
<div id="main-content-fixedWidth">
<div id="test">
<p class="headers">Here is a header for you to look at</p>
</div>
<div id="image-deck"></div>
</div>
</div>
</body>
</html>
You will need a counter minus margin to offset the amount you have moved it. So if your box has a top value 50px and your inner h1 have a margin-top value 100px you'd need to reset your box top value to -50px to counter.
I am trying to place footer to the bottom of a div using bootstrap without applying margin to the div I want to push to the bottom of the div as footer. This is my attempt but the footer aligns to the top
<div style="background-color:#191919;" class="container">
<h3 style="color: #32CD32; font-family: Copperplate; align:left;">
HEADER TEXT
</h3>
<h5>... reaching out</h5>
<hr style="width:101.6%;">
<div class="col-lg-12">
<nav id="main_menu">
<div align="center" class="menu_wrap">
</div>
</nav>
<div class="row">
<div class="contents">
The contents in each page
</div>
</div>
<footer style="color:#fff; text-align:center;"> © 2016 All rights reserved
<br> For more information visit our website
</footer>
</div>
</div>
Please how can I place the footer to the bottom of .
There are multiple ways to do that, i think the faster way for you is this case is using position: absolute on the footer;
First move out you footer from .col-lg-12 to be a directly children of .container. I also added a class .myFooter
<footer class="myFooter">
copy 2016 All rights reserved
<p>You can visit our website for more info</p>
</footer>
And then the css. Don't use css inline on the markup. I moved the color and text-align to the class.
.myFooter {
color:#fff;
text-align:center;
position: absolute;
bottom: 0;
}
The last step is to add position:relative to the .container. That way the position:absolute on .myFooter works properly.
.container {
position: relative;
}
Here is a working example:
http://plnkr.co/edit/Ypl82cdqxuHFIjAcpRo8?p=preview
<html>
<head>
<title>
Lugah Salisu Foundation
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<style type="text/css">
#media (max-width: #screen-xs) {
body{font-size: 10px;}
}
#media (max-width: #screen-sm) {
body{font-size: 14px;}
}
h3{
font-size: 300%;
margin-bottom: 0px;
clear: both;
margin-left: 7px;
}
h5{
margin-top: 0px;
padding: 0px;
margin-left: 15px;
color: #fff;
margin-bottom: 1px;
clear: both;
}
hr{
margin: 0px;
}
.container {
width: auto;
margin-left: 200px;
margin-right: 200px;
height:500px;
max-height:500px !important;
padding-left: 0px;
}
.nav>li {
position: relative;
display: inline-block!important;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color:transparent!important;
color:#d3d3d3;
}
.nav>li>a {
padding: 10px 4px!important;
color:#fff;
}
.golden-base {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight:bold;
-webkit-margin-before: 0.3em;
-webkit-margin-after: 0.2em;
}
.golden1 {
background-image: -webkit-linear-gradient(#FFF65C, #3A2C00);
text-shadow: -0.02em -0.03em 0.005em rgba(255, 223, 0, 0.60);
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
</style>
</head>
<body style="background-color:#1f5060;">
<div style="background-color:#191919;" class="container">
<h3 style="color: #32CD32; font-family: Copperplate; align:left;">
HEADER TEXT
</h3>
<h5>... reaching out</h5> <hr style="width:101.6%;">
<div class="col-lg-12">
<nav id="main_menu">
<div align="center" class="menu_wrap"></div>
<ul class="nav sf-menu">
<li class="sub-menu"><small>Home</small></li> |
</ul>
</div>
</div>
</nav>
<footer style="color:#fff; text-align:center;"> © 2016 All rights reserved
<div class="row">
<div class="contents">
The contents in each page
</div>
</div>
</div>
</footer>
</body>
</html>
I've got a bunch of divs, one after the next, each with an image inside it. When I set min-height to a value higher than the height of the image, everything works fine:
But if I have it set to 50px while the image is 100+px, the images kind of "cascade"
What can I do to force the div to be at least as tall as the image inside it?
CSS
body {
background: #cccccc;
margin: 0px;
}
a {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
}
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
}
.post {
padding-top: 10px;
/*background-color: #ff0000;*/
}
.postimage {
float: left;
padding-right: 10px;
}
.postcomment {
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="reply">
One
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Two
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Three
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Four
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
</body>
</html>
Add clear: left to your div.
See this?
.postimage {
float: left;
padding-right: 10px;
}
When you float the contents of the div, the div does not stretch vertically to accommodate.
So, adding this:
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
clear: left;
}
Will resolve the issue.
Alternate solution
Another solution which I tend to prefer is to use the overflow hack, rather than clear:
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
width: 100%;
overflow: hidden;
}
You would expect that this would hide the part of the image below the div, but it has a different result: The overflow: hidden does not hide the contents, but rather causes the div to stretch down to contain the entire image.
Note: for this method to work on older browsers, you must specify a width (notice that I added that in the css above).
I have a layouting problem while using this html/css coding.
Actually I want the symbols to be vertically aligned to the center of the div.
The second layout is displaying fine with float value set to left on child divs.
Whats wrong with the first layout. Any ideas?
Here is the code
<html>
<head>
<style type="text/css">
div, p {
margin:0;
padding:0;
}
div.wrapper {
background: #FFFFFF;
border-radius: 3px;
padding: 20px;
}
/* LAYOUT 1 STYLE */
div.list1 div {
display: inline-block;
}
div.thumb1 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol1 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
/* LAYOUT 2 STYLE */
div.list2 {
overflow: hidden;
}
div.list2 div {
float: left;
}
div.thumb2 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol2 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
</style>
</head>
<body>
<div class="wrapper" id="layout1">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list1">
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>=</p></div>
<div class="thumb1"></div>
</div>
</div>
<div class="wrapper" id="layout2">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list2">
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>=</p></div>
<div class="thumb2"></div>
</div>
</div>
</body>
</html>
Just give vertical-align:middle to your to mentioned below class
div.list1 div {
display: inline-block;
vertical-align: middle;
}
Demo