Css Rescaling Fixed Banner - javascript

So quick question, I haven't been able to find the correct phrasing perhaps in google but I'm attempting to make a fixed banner will scale when the page is resized. I've found that using a percentage width works for at least the large container, however my banner container within the main container will not rescale into that adequately (The banner is extending longer than the main container).
CSS:
.contMain {
width:80%;
position: top
padding-top: 0;
border-top: 0;
margin: 0 auto;
background-color: #F1EDCC;
}
.contMain-banner {
position:fixed;
width: inherit;
background: #87AADF;
}
HTML:
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Some Title</h1>
{{> MeteorTemplate}}
</div>
</div>
The only higher level css is a .body tag in css for a background color. I am using MeteorJS for this. Cheers

Try this - codepen here
css
body {
height:100%;
width:100%;
}
.contMain {
height:150px;
width:80%;
padding:0;
margin: 0 auto;
background-color: #333333;
}
.contMain-banner {
position:fixed;
width: inherit;
height:auto;
background: #d7d7d7;
}
span {
color:#fff;
position:absolute;
top:125px;
}
HTML
<body>
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Main Content Banner</h1>
{{> MeteorTemplate}}
</div>
<span>This is the main container</span>
</div>
</body>

Related

How to put Transparent HTML form on the top of sliding image in background using Angular JS

I have created HTML Page which I will be make dynamic using Spring MVC.
I am new to HTML, CSS,JS as well but I need to create banner images which will slide with certain internal.
I need to do following things:
Bannner Image shoule slide with certain interval.
I need to put Fixed HTML Search form on the top of sliding images.
Currently banner image is coming as center of the page I need to stretch to total with with of the page I have tried to change like ".imageslide{width:100%;.." width 100% but it did not work.
I Need to create exactly like bellow image:
Sliding banner Image I am able to make with the below HTML and JS code but Search Form on the top of sliding banner image I am not getting idea how can i make it:
I have seeing this link but I could not make solution out if it :(.
index.html
<htm ng-app>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="./angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<link href='http://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="withinheader">
this is header
</div>
</div>
<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
<img src="./S_43_HomeDestinationImages_FriMar0420161099.jpg" alt="">
</div>
<div class="slider-content" ng-switch-when="2">
<img src="./S_43_HomeDestinationImages_FriMar042016420.jpg" alt="">
</div>
<div class="slider-content" ng-switch-when="3">
<img src="./S_43_HomeDestinationImages_FriMar042016575.jpg" alt="">
</div>
<div class="slider-content" ng-switch-when="4">
<img src="./S_43_HomeDestinationImages_FriMar0420161099.jpg" alt="">
</div>
</div>
<div id="mainbody">
this is body
</div>
</body>
</html>
script.js
function slideShowController($scope, $timeout) {
var slidesInSlideshow = 4;
var slidesTimeIntervalInMs = 3000;
$scope.slideshow = 1;
var slideTimer =
$timeout(function interval() {
$scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
slideTimer = $timeout(interval, slidesTimeIntervalInMs);
}, slidesTimeIntervalInMs);
}
style.css
/* Styles go here */
#header {
background-color: #FFFFFF;
width:100%;
height:100px;
border-bottom: 4px solid #EE514B;
}
.slideshow {
font-family: "Arial", sans-serif;
text-align: center;
position:relative;
width:600px;
overflow:hidden;
background: #1a1a1a;
margin: 0 auto;
color: white;
text-shadow: 1px 1px 1px #000;
border-radius: .3em;
margin-top: 30px;
}
#withinheader {
width:60%;
margin: 0 auto;
height: 100px;
}
.imageslide{
width:100%;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
overflow:hidden;
position:relative;
text-align: center;
}
.imageslide .slider-content {
position: absolute;
width:100%;
height:400px;
}
.animate-enter,.animate-leave {
-webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}
.animate-enter {
left:100%;
}
.animate-enter.animate-enter-active {
left:0;
}
.animate-leave {
left:0;
}
.animate-leave.animate-leave-active {
margin-left:-100%;
}
#mainbody {
background-color: #FFFFFF;
width:50%;
min-height:1024px;
height: auto;
border-radius: 5px;
border: 1px solid #EEEEEE;
margin: 0 auto;
}
Please help me on this
I need make this webpage using Angular JS, and MVC, how should I approach.
Thanks in advance for help and information to make it work.
Without seeing the complete HTML, I daresay this may just be a case of adding position: relative to the wrapper div css (.imageslide), and position: absolute (along with left/right/top/bottom css declarations as appropriate) to the search form container tag css.

How to dynamically change element alignment?

What I am trying to do:
I am creating a page footer using html, css, and bootstrap. When the page is open on a desktop, it looks like this (which is what I want):
But when the web page reaches the minimum width, it looks like this:
However, I would like it to look something like this when the web page has been decreased to the minimum width:
Problem/ What I tried:
So, I am have trouble with two things.
Problem 1: I can't seem to find a solution where I can get both the images and the text to center once there is no more room for them to be side by side.
Problem 2: I can't find a solution where I keep the size of the black jumbotron the same and that keeps the text from flowing out the bottom of it.
I tried creating a table (with text in place of the images to test it). I thought if I put the elements in a table with the images centered in the far left column and the text centered in the far left column, then, when the table got small enough, the columns would stack and the elements would be centered. But I couldn't get that to work.
I also tried adding two smaller jumbotrons within the larger one. One that holds the images and another that holds the text. But I still couldn't get the images to center properly, and there is still an issue with the text flowing out the bottom of the black jumbotron.
What am I doing wrong, and how can I do what I am trying to do using CSS and HTML? If Javascript is the only solution, I don't mind trying that, I just don't use it much.
Code:
Here is my HTML:
<div class="container">
<div class = "grid">
<div class="row">
<div class="jumbotron" id="footerJumbotron">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
Here is my CSS:
#facebookLogo{
float:left;
width:30px;
height:30px;
margin:5px;
}
#twitterLogo{
float:left;
width:40px;
height:30px;
margin:5px;
}
#youtubeLogo{
float:left;
width:40px;
height:25px;
margin:5px;
}
#footerFont{
float:right;
color:white;
font-size:10px;
padding-top:10px;padding-bottom:10px; text-align:right;
}
#footerJumbotron{
background-color:black;border-radius: 0 !important;
height:100px !important;padding-top:30px;
}
You can do this with bootstrap grid and media queries DEMO
#media(min-width: 768px) {
.custom-row p {
text-align: right;
}
}
#media(max-width: 768px) {
.custom-row {
text-align: center;
}
}
something i sorted out that can then be worked on.
http://codepen.io/simondavies/pen/jqjgxL
HTML
<footer>
<div class="footer-social-wrapper">
<div class="social-wrapper">
<div class="social-icons"><div class="facebook"></div></div>
<div class="social-icons"><div class="twitter"></div></div>
<div class="social-icons"><div class="youtube"></div></div>
</div>
</div>
<div class="footer-copy">
<p>© 2016 Company Name. All Rights Reserved.</p>
</div>
</footer>
CSS:
body {margin:0;padding:0;}
footer,
.social-wrapper {
margin: 0 auto;
padding: 0;
width: 100%;
height: auto;
position: relative;
height: 50px;
}
footer:before,
.social-wrapper:before,
footer:after,
.social-wrapper:after { content: " "; display: table;}
footer:after,
.social-wrapper:after {clear: both;}
.footer-social-wrapper {
margin:0;
padding: 0;
position: relative;
float: left;
width: 30%;
}
.footer-copy {
margin:0;
padding:0;
position: relative;
float: left;
width: 70%;
height: 50px;
}
.footer-copy {
text-align: right;
}
.social-wrapper .social-icons {
margin: 0px;
position: relative;
float: left;
width: 33.333%;
height: auto;
}
.social-wrapper .social-icons .facebook {
margin: 0 auto;
background:blue;
width: 40px;
height: 40px;
}
.social-wrapper .social-icons .twitter {
margin: 0 auto;
background: red;
width: 40px;
height: 40px;
}
.social-wrapper .social-icons .youtube {
margin: 0 auto;
background: yellow;
width: 40px;
height: 40px;
}
#media(max-width:700px){
.footer-social-wrapper,
.footer-copy {
margin: 0 auto;
width: 100%;
text-align: center;
}
}
without a frame work like bootstrap etc.
Inside jumbotron, create another element contentWrapper and put contents inside then add a media query for it. You need to set width and margin: auto to make it centered.
Try resizing the window width to below 800 pixels, and you will see the contents are aligned center.
#facebookLogo{
float:left;
width:30px;
height:30px;
margin:5px;
}
#twitterLogo{
float:left;
width:40px;
height:30px;
margin:5px;
}
#youtubeLogo{
float:left;
width:40px;
height:25px;
margin:5px;
}
#footerFont{
float:right;
color:white;
font-size:10px;
padding-top:10px;padding-bottom:10px; text-align:right;
}
#footerJumbotron{
background-color:black;border-radius: 0 !important;
height:100px !important;padding-top:30px;
}
#media (max-width: 800px) {
.contentWrapper{
width: 400px;
margin: auto;
}
}
<div class="container">
<div class = "grid">
<div class="row">
<div class="jumbotron" id="footerJumbotron">
<div class="contentWrapper">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
</div>
In Bootstrap 4 you can just use the responsive alignment classes, something like text-xs-center text-sm-left, Also your code is highly repetitive, consider something like this:
#footerJumbotron img {
width: 30px;
height: 30px;
margin: 5px;
}
#footerFont {
color: white;
font-size: 10px;
}
#footerJumbotron {
background-color: black;
border-radius: 0 !important;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="grid">
<div class="row">
<div class="container-fluid jumbotron" id="footerJumbotron">
<div class="col-sm-6 text-sm-left">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
</div>
<div class="col-sm-6 text-sm-right">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.
<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/veyytd6u/
* no need to set a fixed height if your footer is going be dynamic (in mobile when there are 2 rows, the height must change so leave it automatic)
* consider escaping the & in HTML => &

How to make a footer that sticks to bottom when content is short but not fixed in CSS? [duplicate]

This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 7 years ago.
How to make a footer that sticks to the bottom when content is shorter than screen height and float to bottom of the content when content is longer than screen height ?Now I am doing like this.
html
<body>
<div class='container'>
</div>
<footer>
</footer>
</body>
CSS
.container{
position:relative;
min-height:500px;
}
footer{
height:200px;
background-color:black;
position:absolute;
bottom:0px;
}
This code is fine when the content is shorter than the screen size or very short. But my issue is when the content is very much longer(eg.twice of the screen size), footer sticks to the bottom when it first loads the page. But when I scroll down, the footer is stacked to the top of the new scrolled content.
$(document).ready(function(){
var containerHeight = $('.container').outerHeight(true);
var windowHeight = $('window').height();
if(containerHeight < windowHeight ){
$('footer').css('position','fixed');
}
});
Please follow the structure to get the result.
<div class="container">
<div class="page-header">page-header</div>
<div class="page-content">page-content
<br/>
<div id="more-cont"></div>
<input type ="button"value="Add More Content" id="add-more">
</div>
<div class="footer">footer</div>
</div>
html,
body {
margin:0;
padding:0;
height:100%;
}
.container {
min-height:100%;
position:relative;
}
.page-header {
background:#ededed;
padding:10px;
background-color:green;
color:white;
}
.page-content {
padding-bottom:100px; /* Height of the footer element */
}
.footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Please see the demo
Demo
css code:
#footer {
position: fixed;
width: 100%;
clear: both;
bottom: 0;
padding: 0;
margin: 0;
height: 30px;
background: #333;
}
You can easily do this by adding a min-height and padding to body and setting the footer as absolutely positioned relative to it.
Here's a JSfiddle or you can use the Run code snippet button to view the result.
body {
min-height: 100%;
padding-bottom: 200px;
position: relative;
}
footer {
position: absolute;
bottom: 0;
height: 200px;
left: 0;
right: 0;
}
/* just for demo */
.container {
height: 1000px;
border: 1px solid green;
}
footer {
border: 1px solid blue;
}
<body>
<div class='container'>
container stuff
</div>
<footer>
footer stuff
</footer>
</body>

CSS window width resize issues

I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 div id box elements placed next to each other.
They are positioned fine however when I resize the screen they seem to fall below one another.
I have min-width: 947px; in the body of the CSS however this does not do anything.
HTML:
<div id ="featured1">
</div>
<div id ="featured3">
</div>
<div id ="featured2">
</div>
CSS:
#featured1{
float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;
}
#featured2 {
display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
}
#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
margin-right:200px;
}
For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.
Here is the working example: jsFiddle link
use
display: inline-block;
on all 3 divs, then they wont go down.
Note: this property will not work on IE7 and smaller versions.
You have given your body a min-width:947px but the actual width occupied by all divs including the margin and borders, etc is 1150px.
Thats why its breaking.
Please add vertical-align: top; property on all the divs
This should help. FYI. When writing in CSS make sure you minify the code. Google developer has a great section on this (https://developers.google.com/speed/pagespeed/service/MinifyCSS).
HTML:
<div id="container">
<div id="featured1">
Featured 1
</div>
<div id="featured2">
Featured 2
</div>
<div id="featured3">
Featured 3
</div>
</div>
CSS:
#container {
position: absolute;
width: 836px;
height: 190px;
}
#featured1, #featured2, #featured3 {
position: relative;
font-family: 'Lobster13Regular';
font-size: 35px;
float: left;
left: 20px;
top: 20px;
width: 250px;
height: 150px;
border: 1px solid #000;
overflow: hidden; /*Remove if you are not going to overflow text in each element*/
}
#featured2, #featured3 {
margin-left: 20px;
}

Scroll 2 DIV contents + main content with browser's main scrollbar

I can't figure out, on how to go around this problem for moving content within two pages + outside content.
I have following layout:
header + footer
book
pages with fixed width and height.
I want to scroll pages content from the main scrollbar without any page scroll bar (like gmail compose example)
The main problem is. book will show after header and if user is using smaller screen resolution, it will show scrollbar to scroll down to see book properly.
Then we have two pages, which content are different from each other and each page can be longer then the other one. so we want to scroll through all the data, before we continue scrolling back to footer again.
jsFiddle Example: http://jsfiddle.net/7vqzF/2/
It would be awesome to solve this from css only.
Layout Structure: (solution should have only one main browser scrollbar, to control the pages and outside book content from it.)
If I got your question right you are looking for the CSS attribute fixed. Here is some HTML including CSS that might do exactly what your are after:
<html>
<head>
<style>
body {
margin-top: 150px;
}
.header {
width: 100%;
position: fixed;
top: 0;
background-color: white;
border-bottom: 2px solid lightblue
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
background-color: white;
border-top: 2px solid lightblue
}
.book table td {
vertical-align: top;
}
.page1, .page2 {
border: solid 1px red;
width: 400px;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<ul>
<li>home</li>
<li>contact us</li>
</ul>
</div>
<div class="book">
<table>
<tr>
<td>
<div class="page1">
<h2>Page1</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
...
</div>
</td>
<td>
<div class="page2">
<h2>Page2</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
...
</div>
</td>
</tr>
</table>
</div>
<div class="footer">
My Footer
</div>
</body>
</html>
Here is a screenshot from my browser showing the above HTML:
The Browser-Scrollbar scrolls only the page1/page2 <div> elemtents but not the header and footer elements.
And finally here is the jsFiddle Link for the online-demo.
Put your header part which needs to be in fixed in separate div and apply these styles.
<div class="fix">
<h1> Header</h1>
<menu><ul><li>home</li><li>contact us</li></ul></menu>
</div>
.fix{
position:fixed;
top:0px;
left:0px;
background:#FFF;
width:100%;
border-bottom:1px solid black;
}
for space add another div to bottom of the header
<div class="space"></div>
.space{
width:100%;
height:150px;
}
Here is the jsfiddle.
You can use the following approach with pure CSS and no tables.
See online demo here.
Result:
It means however that you need to change the document structure a little (I am using HTML5 elements but this can easily be changed into normal divs if required) - as you can see the structure is fairly simple:
<header>Header
<nav>Menu</nav>
</header>
<main>
<div class="page">
<h3>Page 1</h3>
scroll from main scrollbar
....
</div>
<div class="page">
<h3>Page 2</h3>
scroll from main scrollbar
....
</div>
</main>
<footer>Footer</footer>
Now it's just a matter of styling this so that you can use main scroll-bar to scroll "both" pages. The essential class in this context is:
.page {
float:left;
margin:70px 10px 50px 10px;
border:1px solid #000;
width:45%;
}
The important part with the page class is that its top and bottom margin is set to match header and footer. This is what makes the two pages visible even if the header and footer are fixed.
The rest of the CSS is just for example:
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
header {
position:fixed;
top:0;
width:100%;
height:70px;
font:32px sans-serif;
color:#fff;
background:#555;
}
nav {
position:absolute;
bottom:0;
font:12px sans-serif;
}
footer {
position:fixed;
width:100%;
bottom:0;
height:50px;
background:#555;
}

Categories