What I am trying to achieve is a page with a sticky footer, which is a vector island.
The island is always at the bottom of the page, but when the browser height is too small it invokes vertical scrolling.
Behind the island is a sunburst that then falls behind all the page content. This is quite big, about 1417px high. This doesn't affect vertical scrolling though.
Here is what I have so far and I've been stuck for hours! Any help would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="../../docs-assets/ico/favicon.png" rel="shortcut icon">
<title>Sticky Footer Template for Bootstrap</title><!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,
body {
height: 100%;
background-color: #6ec8e4;
}
#wrap {
min-height: 100%;
height: auto;
}
.testBox{
height: 300px;
width: 100%;
background: red;
margin: 20px 0;
}
.footer-image-container {
margin: 0 auto;
position: absolute;
width: 100%;
height: 1417px;
}
.footer-image {
position: absolute;
bottom: 0;
z-index: -1;
}
</style>
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<div class="row">
<div class="testBox"></div>
</div>
<div class="row">
<div class="testBox"></div>
</div>
<div id="footer">
<div class="footer-image-container"><img class="img-responsive footer-image" src="http://i.imgur.com/wSNrfJD.png">
<img class="img-responsive footer-image" src="http://i.imgur.com/alDv0tE.png"></div>
</div>
</div>
</div><!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
It would be better to use the images as background images in css:
see https://jsfiddle.net/6t9vxq1o/1/
.body{
height:100%;
background: url(http://i.imgur.com/wSNrfJD.png) no-repeat center bottom;
}
#wrap{
background:url(http://i.imgur.com/alDv0tE.png) no-repeat center bottom;
}
This way the images will be always on bottom, the sunburst behind the content, and the grass behind the footer
Related
I want my header to be a full screen background.
Code works on other sites that i previously made but now it doesn't work.
Please help.
The code is same on other websites. And it works.
Here is my html5 and css3:
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
header {
background: url('./pics/bg1.jpg') 50% 50% no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome | SoundNet</title>
<meta name="theme-color" content="#6699ff">
<!--Meta-->
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, user-capable=yes">
<!--Js-->
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<!--Link-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<header>
<div class="menu">
<ul>
<li>Categories</li>
<li>Playlists</li>
<li>Login</li>
</ul>
</div>
<div class="logo">
<span class="border-n">N</span>ESTA
<div class="button">
Sign Up
</div>
</div>
</header>
<section>
<div class="party">
<h3>Get the party started</h3>
<p></p>
</div>
</section>
</body>
</html>
[Edit: Added snippet but no image, for the moment.]
Define a height for the body. 100% height and width takes its parent height and width.
Because your body dont have both a width and height, the 100% height and width of your header won't have any effect.
Snippet
html, body {
width: 100%;
height: 100%;
margin: 0;
}
header {
height: 100%;
width: 100%;
background: url('https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg');
background-repeat: no-repeat;
background-size: cover;
}
<header></header>
I am newbie with CSS; so, I do not want to use CSS frameworks.
After reading some questions about fixed header and footer with CSS (on StackOverflow), I tried to create a HTML layout, as this:
In this layout, both header and menu are fixed.
I have created an HTML file with 2 column: left for menu, right for content. But, it comes with an scrolled-menu:
#menu {
width: 33%;
height: 100%;
float: left;
}
#page {
width: 66%;
height: 100%;
float: left;
}
#header {
width: 100%;
height: 100px;
position: fixed;
}
#content {
width: 100%;
position: absolute;
top: 100px;
}
#footer {
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
}
<div id="menu">
MENU
</div>
<div id="page">
<div id="header">Header</div>
<div id="content">
<p>Some content...</p>
</div>
<div id="footer">Footer</div>
</div>
When I add this line: position: fixed; in #menu, the layout will be broken. Could help help me to fix it?
Currently you could use the Tag directly as <header> <body> <footer> you need to establish position : block. I would like to recommend that you uses a Framework like Bootstrap, today is commonly uses for design webpages, if you are new un webpages it Will be useful for you
http://getbootstrap.com/
<!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">
<title>Example of Bootstrap 2 Unequal Column Layout for Tablets and Desktops</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.row > div{
margin-bottom: 15px;
}
.header{
min-height: 90px;
}
.footer{
min-height: 60px;
}
.header, .footer{
background: #2f2f2f;
}
.sidebar{
background: #dbdfe5;
}
.content{
background: #b4bac0;
}
.sidebar, .content{
min-height: 300px;
}
</style>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="header"></div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="sidebar"></div>
</div>
<div class="col-sm-9">
<div class="content"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="footer"></div>
</div>
</div>
</div>
</body>
</html>
I have a fiddle with a right and a left sidebars. The bootstrap container class works great with the left side bar with text wrapping and all that.
But the Right Sidebar doesn't work quite right. Text gets tucked underneath it and doesn't wrap correctly. I also want to hide the sidebars at certain media points as well and want the container to work correctly at that point as well...
Can someone give me some pointers on getting my right sidebar and container to work correctly with each other?
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>sidebar test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<style>
.sidebar-fixed-left {
width: 200px;
position: fixed;
border-radius: 0;
height: 100%;
}
.sidebar-fixed-left + .container {
padding-left: 220px;
}
.sidebar-fixed-right {
width: 200px;
position: fixed;
border-radius: 0;
height: 100%;
right: 0;
}
.sidebar-fixed-right + .container {
padding-left: 220px;
}
</style>
</head>
<body>
<div class="navbar-inverse sidebar-fixed-left">
</div>
<div class="navbar-inverse sidebar-fixed-right">
</div>
<div class="container">
<div class="row">
<h2>Left and Rigth sidebars (Fixed)</h2>
<p>Left and Right sidebars</p>
</div>
</div>
</body>
</html>
It's my first post and I'm trying to fix my CSS. I have a .jumbotron (Bootstrap) and my image is too big. Re-sizing it won't work as people have different sized screens. Here's the code.
.jumbotron {
background-image: url('SONUBANNER.png');
height: 500px;
width: auto;
margin-top: 5rem;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section class="jumbotron">
<div class="container">
</div>
</section>
</body>
</html>
I tried having the the min-width: CSS selector, but that had the same affect. I do not want to have my viewers scroll to see the rest of the .jumbotron. Can anyone show me the fix?
/* Latest compiled and minified CSS included as External Resource*/
dna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.jumbotron {
height: 500px;
display: flex;
align-items: center;
background: url("SONUBANNER.png") center center;
background-size: cover;
margin-top: 5rem;
}
<div class="jumbotron">
</div>
You won't be able to use all of the features in Bootstrap if you are adding image with your CSS class.Just use the bootstrap features which comes.Add your image in to img-responsive class.
.jumbotron {
height: 500px;
width: auto;
margin-top: 5rem;
}
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<section class="jumbotron">
<div class="container">
<img src="http://weknowyourdreamz.com/images/evening/evening-09.jpg" class="img-responsive" alt="Cinque Terre">
<!-- <img src="SONUBANNER.png" class="img-responsive" alt="Cinque Terre"> -->
</div>
</section>
</body>
</html>
I am having trouble trying to center an image both horizontally and vertically, using Bootstrap and a sticky footer. It needs to be fluid, responsive and work on both desktops and mobiles.. I don't want the footer to go over the image if the window/screen size is too small (obviously).
Any help or insight would be great appreciated!
Here's what I've got..
404.php
<html lang="en">
<head>
<title>Error 404</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Error 404</title>
<!-- Bootstrap -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles -->
<link href="/assets/css/sticky-footer.css" rel="stylesheet">
<link href="/assets/css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
</head>
<body>
<div class="container-fluid">
<div class="panel-default">
<div class="panel-body">
<div class="text-center top"><h2>Error 404</h2>
</div>
<div class="form-group text-center">
<h4>Nothing to see here, nothing to see</h4>
<img src="/assets/images/404.jpg" class="img-responsive center-block">
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted text-center">
<small>© 2015</small>
</p>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>
</html>
sticky-footer.css
/* Sticky footer styles */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 40px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 40px;
}
Sticky bottom footer
Bootstrap has a navbar that I find is useful for footers. Try using navbar navbar-default navbar-fixed-bottom instead of your custom footer class.
Center vertically
This question has a lot of great information regarding centering vertically. This is what I use:
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
Center horizontally
I've found the easiest solution to centering horizontally is just using center-block. Hasn't failed me yet.
I would suggest you have a loook at this stackoverflow question first.
This might also get you started (change it in your sticky-footer.css):
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 40px;
display: table; /*<<<< this line was added*/
}
.container {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.cent {
margin: 0 25% auto 25%;
}
Add the class cent to you paragraph in your webpage, i.e.:
<p class="cent text-muted text-center">
<small>© 2015</small>
</p>