I have a problem adding 2 divs in parallel and giving them a full height.
i already have the divs in parallel, but the problem is when i want to give them the full height:100%; it happens nothing.
Which properties do i have to change to make possible this??
The idea is to have a cover page, without x-scrollbar and y-scrollbar, only a cover photo, divided
this is my code:
https://jsfiddle.net/davidlerma87/3u8v01b4/2/
Well
First: As you can see, i have a menu bar on top that actually is not working well.
Second: I want below 2 parallels columns with full height
Third: this is for mobile too.
The problem is the position of the divs that are misaligned
regards and thanks!!
Again quick explanation,
screen divided in two columns but with full height including the top menu
Please check this fiddle, I have made necessary changes in css
html,body { height:100%; }
body {
background: url("img/GProxpt.jpg") no-repeat center center fixed;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding:0;
margin:0;
color:#f1f3f5;
font-family: "Courier New";
font-size:14px;
}
.container-fluid {
background-color: rgba(0, 0, 0, 0.6);
/* position: absolute; */
/* top: 0; */
/* left: 0; */
/* width: 100%; */
height: 100%;
/* overflow: auto; */
}
.icon-menu {
margin-top:20px;
margin-right:7em;
float:right;
cursor:pointer;
width:30px;
height:40px;
}
.icon-menu:hover {
width:35px;
height:45px;
}
.row-menu { background:red; min-height: 100%;}
.left-side {
width:100%;
height:100%;
padding-left:20px;
margin-top:7em;
}
.left-side .title {
color:#DCEA5F;
font-size:50px;
}
.left-side .title .sub-title {
font-size:35px;
}
.left-side .text-par {
padding-top:20px;
padding-right:0;
font-size:20px;
}
.cols {
/* position: absolute; */
display: block;
min-height: 100vh;
margin-top: 20px;
float: left;
}
.outer-right-side {
position:relative;
background:#18232E;
margin-right:0;
margin-top:0;
}
.outer-left-side {
margin-bottom:0;
position:relative;
background:white;
}
https://jsfiddle.net/3u8v01b4/5/
Updated fiddle : https://jsfiddle.net/51wwmvqx/
Removed the scrolls and made HTML structure changes.
You can try this:
.cols {
height: 100vh;
}
Related
I've recently begun to learn HTML, CSS, JavaScript, and jQuery from this set of books.
I've tried every obvious answer I could dig up on Stack Overflow to do what is normally the very simple task of centering a div on a page. My particular page has an overlay, which I suspect is part of my problem. I'm working to adapt a CodePen to my project. In this CodePen, only one element, an H1 tag, needs to be centered on a page and it works fine.
On my page, I'm replacing a h1 tag with a div. I've included a link to jsFiddle with comments re: what I've tried to do. I know I'm missing something really simple, but I'm unable to figure out what it is.
Thank you for reading and I welcome your suggestions for this front-end noob.
Below is my problematic code:
<!DOCTYPE html>
<body>
<header>
<div class="hero" id="Portfolio">
<div class="overlay"></div>
<div class="page-subject">
<!-- Rather than a vanilla h1 tag following the div.overlay, I wrapped the h1 tag in a div called div.page-subject. I can't get this div to center -->
<h1>Portfolio</h1>
<div class="container space-around">
<div><img src="../images/icons/apple-app-store-128.png" alt="iOS Applications"></div>
<div><img src="../images/icons/amazon-echo-128.png" alt="Amazon Alexa Skills"></div>
</div>
</div>
</div>
</header>
html, body {
height:100%;
padding:0;
margin:0;
font-family: Raleway,sans-serif;
color:#FFF;
}
header {
height: calc(100% - 65px);
background:#333;
-webkit-perspective: 1500px;
perspective: 1500px;
perspective-origin: center bottom;
}
h1 {
margin:0;
vertical-align: middle;
text-align:center;
font-size:80px;
font-weight:600;
text-transform:none;
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
.hero#Portfolio {
position:relative;
background:#333 url(https://wallpaperscraft.com/image/surface_gray_dark_light_shadow_18440_2560x1600.jpg) no-repeat center center;
background-size:cover;
height: 100%;
width:100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display:table;
}
.hero .overlay {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
opacity:0;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
div.page-subject {
vertical-align: middle;
}
.container {
display: flex;
}
.container.space-around {
z-index: 10;
justify-content: space-around;
padding-bottom: 10px;
}
a {
position: relative;
z-index: 1;
}
a.hvr-pop img {
background: white;
border-radius: 25px;
display: block;
min-width: 64px;
max-width:128px;
min-height: 64px;
max-height:128px;
width: auto;
height: auto;
}
/* Pop */
#-webkit-keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
/*Does button animation from hover.css class*/
.hvr-pop {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
-webkit-animation-name: hvr-pop;
animation-name: hvr-pop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
'use strict';
// This creates to folding animation
$(window).scroll(function() {
var heroHeight = $('header').height();
var yPosition = $(document).scrollTop();
if (yPosition <= heroHeight) {
var effectFactor = yPosition / heroHeight;
var rotation = effectFactor * (Math.PI / 2 - Math.asin( (heroHeight - yPosition) / heroHeight ));
$('.hero').css({
'-webkit-transform': 'rotateX('+rotation+'rad)',
'transform': 'rotateX('+rotation+'rad)',
})
.find('.overlay').css('opacity', effectFactor);
}
/**
* Sticky nav-bar
*/
if (yPosition <= heroHeight) {
$('nav').removeClass('fixed');
} else {
$('nav').addClass('fixed');
}
});
$(document).ready( function () {
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$("nav ul a.current").removeClass("current");
$("nav ul a[href='" + pathname + "']").addClass("current");
});
Just add this:
div.page-subject {
vertical-align: middle;
display: table-cell;
}
Here is Fiddle.
How about this.
Use div.page-subject instead of the tag and use
div.page-subject {
vertical-align: middle;
display: inline-block;
width: 100%;
text-align: center;
font-size: 1.2rem;
margin: 1rem 0;
}
Centering things horizontally is easy.
display: block;
margin: auto;
position: relative, absolute, or fixed depending...
Centering thing vertically takes more work and I always do it this way.
top: 50%;
transform: translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;
However you can also do it all with transforms
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;
If using transforms don't forget to use vendor prefixes.
I use this auto prefixer: http://pleeease.io/play/
Try this
.hero{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
to center a div horizontally try to use this one
/* lets say its width is 500px */
.hero{
width:500px;
display:block;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
}
if you wanted to make it center both vertically and horizontally then you must have to set its position to absolute like this one,
.hero {
width:500px;
height:500px;
position:absolute;
left:50%; /* centers horizontally on the screen */
top:50%; /* centers vertically on the screen */
background-repeat:no-repeat;
background-position:center;
margin:-250px 0 0 -250px; /* is width and height divided by two */
background:#FFFFFF;
}
You have to set overlay element as a parent of a .hero element and overlay element should be like this one,
.overlay {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
z-index:9999; /* makes sure it stays on top */}
I want to edit flexisel listing <li> to start from right to left, currently the plugin starts list elements from left to right.
When I edit .nbs-flexisel-item float to right all listing items disappears.
CSS Code:
#flexiselDemo1, #flexiselDemo2, #flexiselDemo3 {
display:none;
}
.nbs-flexisel-container {
position:relative;
max-width:100%;
}
.nbs-flexisel-ul {
position:relative;
width:9999px;
margin:0px;
padding:0px;
list-style-type:none;
text-align:center;
}
.nbs-flexisel-inner {
overflow:hidden;
float:right;
width:100%;
}
.nbs-flexisel-item {
float:right;
margin:0px;
padding:0px;
cursor:pointer;
position:relative;
line-height:0px;
}
.nbs-flexisel-item img {
width: 100%;
cursor: pointer;
position: relative;
margin-top: 10px;
margin-bottom: 10px;
max-width:100px;
max-height:45px;
}
/*** Navigation ***/
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
width: 22px;
height: 22px;
position: absolute;
cursor: pointer;
z-index: 100;
opacity: 0.5;
}
.nbs-flexisel-nav-left {
left: 10px;
background: url(../images/button-previous.png) no-repeat;
}
.nbs-flexisel-nav-right {
right: 5px;
background: url(../images/button-next.png) no-repeat;
}
What should I do?
Thanks
this css code can solve the problem
.nbs-flexisel-inner{
direction: ltr;
}
I am trying to make my page look like the Facebook Android app. The app can be summarized as having a 3 column layout with only the central column having the header (there is no footer, but in my requirement I also need a footer).
This can be shown in the image below
The red and blue div's are the left and right side-bars. The green and purple div's are the center div. The purple div's are the header and footer div's and would be sticking to the top and bottom of the page respectively.
One more requirement is there will be buttons on the header (top purple) to hide and show the left and right sidebars. Initially only the center div will be visible and the rest can be called into view as and when required. Here is my code till now. (I am not able to get the width for the center div)
HTML Code
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="leftBar" class="main">Left Bar</div>
<div id="content" class="inner">
<div id="header">Head</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
<div id="rightBar" class="main">Right Bar</div>
</div>
</body>
</html>
CSS
body{
margin: 0px;
}
div.inner{
height: 500px;
width: 50%;
background: red;
}
div.main{
background: lime;
height: 200px;
overflow: hidden;
position: relative;
}
#leftBar{
float: left;
}
#content{
position: relative;
height: 100%;
float: left;
}
#rightBar{
float: right;
}
#header{
position: fixed;
top: 0px;
background: blue;
}
#body{
margin-top: 40px;
position: relative;
}
#footer{
position: absolute;
bottom: 0px;
}
I have also added the JavaScript code in the fiddle linked below
http://jsfiddle.net/mv6Bj/1/
The width should be such that the center div is full 100% width of the screen and when the right/left toggles come into the picture they should come to their position and push the center div to the left or right respectively. This is as per the standard Facebook app functionality.
These are the issues I am getting right now
The center div is not 100% and neither does it scale as elements appear and disappear
The height of the center div is not 100% (it is on Chrome, but strangely it is not on JSFiddle)
When I click on left, the leftBar disappears and the content div moves to the left but the header div remains where it is.
As per my understanding, I have updated the fiddle.
Working Demo
I have used display:table propery. You can refer this or this
html, body {
margin: 0px;
min-height:100%;
height:100%;
}
#main {
min-height:100%;
display:table;
width:100%;
height:100%;
}
#leftBar, #rightBar {
background: lime;
width:100px;
display:table-cell;
}
#content {
min-height: 100%;
display:table-cell;
background: red;
}
#header {
background: blue;
height:10%;
}
#body {
min-height:80%;
overflow:hidden;
}
#footer {
background: magenta;
height:10%;
}
Hope this works for you.
you can checkout this fiddle i made some changes in your css accordingly.
body {
margin: 0px;
}
div.inner {
height: 500px;
width: 50%;
background: red;
}
div.main {
background: lime;
bottom:0px;
top:0px;
overflow: hidden;
position: absolute;
width:20%;
}
#leftBar {
float: left;
}
#content {
position: absolute;
height: 100%;
top:0px;
right:0px;
width:60%;
left:20%;
float:left;
}
#rightBar {
float: right;
width:20%;
background: lime;
top:0px;
bottom:0px;
left:80%;
position:absolute;
}
#header {
float: left;
position: fixed;
top: 0px;
margin-left: 0px;
background: blue;
left:20%;
right:20%;
}
#body {
margin-top: 40px;
position: relative;
}
#footer {
position: absolute;
bottom: 0px;
position: fixed;
margin-left: 0px;
background: blue;
left:20%;
right:20%;
}
http://jsfiddle.net/mv6Bj/3/
I have a popup which will get shrink and the content will dislocate on the browser window resize. I am stuck with this
Here is the fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/
and here is the fullscreen fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/show/
Maybe you could view and check resizing the window
HTML
<div id="popup" >
<div id="img-section" >
<img src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/256/single-bird-icon.png" />
</div>
<div id="description">
//text content
</div>
</div>
<div id="fade" class="black_overlay"></div>
click here
CSS
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
min-width: 100%;
min-height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#popup {
display: none;
position: fixed;
top: 8%;
left: 10%;
max-width:1200px;
max-height:600px;
height:auto;
width:auto;
padding: 16px;
background-color: white;
z-index:1002;
overflow:hidden;
}
#img-section {
position:relative;
width:800px;
float:left;
background:black;
cursor:pointer;
height:600px;
padding:5px;
margin-top: -20px;
margin-left: -15px;
margin-right: 10px;
}
#description {
position:relative;
background-color: #fff;
max-width:400px;
overflow-y: auto;
position: relative;
word-wrap: break-word;
max-height:600px;
height:auto;
padding: 20px;
}
#img-section > img {
display:inline-block;
height: auto;
vertical-align:middle;
width:auto;
}
I want the poup to remain as it is, It should not shrink
Thanks in advance
Side scrolling for a popup is horrible, but:
make the popup position: absolute instead of fixed
give the body a min-width of left margin + popup width (currently that would be calc(1200px + 10%)
same for height?
make all max-width => width, because you know how much room you have
Your existing CSS is mighty strange, but this might do it: http://jsfiddle.net/rudiedirkx/ZjdU4/1/
Highlights:
body {
min-width: calc(1200px + 10%);
}
.black_overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#popup, #popup * {
box-sizing: border-box;
}
#popup {
position: absolute;
width: 1200px;
height: 600px;
padding: 0;
}
You are using percentage for your height and width.
The browser change its size on Resize, therefore the value of the percentage depreciates.
Like 10% of 100px differs from 10% of 10px.
Use px to keep your height and width the same size on resize.
Of course depending on what you want neither is better than the other
In this example http://bit.ly/t2ImYS width of wrapper of all elements is fixed 8520px
#scroller {
width: 8520px;
height: 100%;
float: left;
padding: 0;}
I want width dynamic so if i add more elements inside <div id="scroller"> this #scroller should take the width upon elements inside it.
So tried to set width
#scroller {
width: 100%;}
and
#scroller {
width: auto}
but then scroller doesn't work properly.
is there a way to get width in % with properly working scroll?
Set the li elements to display:inline-block; and remove the float:left; (you could also remove the vertical-align, since that will only work on table-cell elements)
Remove the fixed width from the wrapper.
Add white-space:nowrap; to the ul
And you should be fine...
(Except in <=ie7, but I suppose that's no problem in your case?)
#scroller li {
display: inline-block;/* changed */
/*float:left; */ /* deleted */
padding: 0 10px;
width: 120px;
height: 100%;
border-left: 1px solid #CCC;
border-right: 1px solid white;
background-color: #FAFAFA;
font-size: 14px;
}
#scroller ul {
list-style: none;
display: block;
float: left;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-align: left;
white-space:nowrap; /* added */
}
#scroller {
/* width: 8520px; */ /* deleted */
height: 100%;
float: left;
padding: 0;
}
If you are using iScroll4 you should refresh the scroller or destroy and recreate it.
Excerpt from here:
"iScroll needs to know the correct dimensions of both the wrapper and the scroller. They are computed the first time at start up but if your code changes the elements size, iScroll needs to be warned that you are messing with the DOM."
Using Display:inline-block
and using percentages worked for me:
#scroller li {
height: 100%;
width: 2%;
display: inline-block;
}
#scroller ul {
list-style: none;
display: block;
float: left;
width: 100%;
height: 100%;
}
#scroller {
width: 5000%;
height: 100%;
float: left;
}
Try calling the iscroll refresh() method after adding dynamic items within the scroller to set the width.
try this css code, it worked for me: http://jsfiddle.net/manseuk/r9VL2/2/
#wrapper {
z-index:1;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
z-index:1;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
}
#scroller ul {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li
{
background-color: White !important;
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}