I'm trying to get a vertical-align to work on a div whose display is table-cell.
See http://jsfiddle.net/midnitesonnet/Rwahk/ for html/css.
I can't seem get the to display vertically align to the bottom. Any help would be much appreciated.
Thanks.
You define display:table-cell & position:absolute which create a problem. Just remove your .title DIV height.
#whats_available .title {
position: absolute;
z-index: 1000;
bottom: 0;
left: 0;
text-align: center !important;
width: 100%;
color: #fff;
}
Check this http://jsfiddle.net/Rwahk/5/
http://jsfiddle.net/Rwahk/7/ works as you wanted...
The changes made were to add display: table; to the #whats_available > div and to change the .title to position: relative;
You should change the height of the inner div to something like 30px instead of 100%
http://jsfiddle.net/Rwahk/4/
You shouldn't use dimensions attributes in pure html (the only exception could be image but it's still a bad idea).
I wrote this small jQuery function which might comes in handy to you or to other readers.
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
return this;
}
use:
$(selector).center();
Enjoy and have a great day :)
Related
I have a project in Angular 4 and I need to do sticky header. Everything is good when I'm using position: sticky but sticky doesn't work on IE.
1.) I created component with good method (I know that I can simplify if loops but it's not important now):
#HostListener('window:scroll', ['$event'])
checkScroll() {
if(window.pageYOffset >= 200){
this.isSticky = true;
this.isNonSticky = false;
}
if(window.pageYOffset < 200){
this.isSticky = false;
this.isNonSticky = true;
}
}
2.) I have view in html with different div's and I have one div with ngClass:
[ngClass]="{ 'summary-row': isNonSticky, 'sticky' : isSticky}"
which should be sticky when window.pageYOffset is bigger or equal 200 pixels.
3.) I have a CSS too like below for my div:
.summary-row {
display: flex;
padding: 0 30px;
padding-right: 100px;
}
.sticky {
position: fixed;
background-color: brown;
top: 70px;
left: 0px;
width: 100%;
}
When I'm scrolling down I see my sticky header but he's blinking.
I have some theory but I don't know if I'm right.
This div is in the middle like:
When I'm setting position: fixed; I know that this element is removed from the normal document flow MDN so I think because of that I have different pageYOffset (less than 200 px) so that's why I see blinking.
Can someone explain if I'm right? If it's the truth what can I do to do it right?
Everything was ok except height. I had to set height for mydiv and it worked.
I'm new to HTML5 and I'd like some help adapting this particular code: http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect to be used as a background for a webpage. I've got the snow falling but when I use it as a background, nothing else displays.
You can use z-index with a value of -1 on it:
#myCanvas {
position: fixed; /* or absolute */
z-index: -1; /* put it behind all other elements */
}
Made a JSFiddle to have something to work with. As others stated, position: fixed; and z-index: -1; for the canvas works fine.
This worked for me...
CSS
#myCanvas
{
display: block;
position: absolute;
z-index: -1; //optional.. Depends if you have used z-index for any other element
}
Hope it helps someone...!!
This works for me as well. For future reference to manipulate the z-index you are required to also set the position to absolute or it will not work.
#canvas {
background: #202020;
position: absolute;
z-index: -1;
}
In my css file, I set
#background_layer0{
width: $(window).width();
height: $(window).height();
}
And it works. However, As I set
#background_layer0{
top: $(window).width() * 0.5;
left: $(window).height() * 0.6;
}
It can't work. I can't see any differences between this two kind of attribute:
width , height and top left.
Please correct my fault and explain why. Also, I hope you can give me some reference to read.
UPDATE: I need to deploy the webpage to another device like: cellphone.
If I only use percentage as value, can it work?
Use a separate JavaScript file or include this in a script tag
$('#background_layer0').css('top', function() {
return $(window).width() * 0.5;
});
$('#background_layer0').css('left', function() {
return $(window).height() * 0.6;
});
You can simply use percentage:
#background_layer0{
width: 100%;
height: 100%;
}
#background_layer0{
top: 50%;
left: 60%;
}
So, in CSS, you cannot use $(window).height() and $(window).width(), you must specify it in percent, pixels, etc. (it must be absolute)
To make an object's width same with the window width and height, you must use javascript/jquery
Somewhere in a page, how to make div-a2 position above div-a1? Of course, I cannot make div-a2 above div-a1 in the layout below.
<div id=a>
<div id=a1> something here
</div>
<div id=a2> show this part first
</div>
</div>
still looking for better solution. thanks
You can achieve this with pure css. Write like this:
#a{
display:-moz-box;
display:box;
display:-webkit-box;
-moz-box-direction:reverse;
box-direction: reverse;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;
}
'
Check this http://jsfiddle.net/ASVtx/1/
You will need to give the elements absolute position css, and then position them appropriately depending on the content size of each like:
#a1,#a2{position:absolute;}
#a2{ top: 0; }
#a1{ top: 200px;}
OR, within the parent:
#a1,#a2{position:relative;}
#a2{ top: 0; }
#a1{ top: 200px;}
Or, a perhaps better alternate is to change the layout order (but I assume that is not possible for some reason not stated).
Here is an example: http://jsfiddle.net/MarkSchultheiss/CRCvU/
See this updated example where I used em instead of px for the position, gave the parent a border so you see its scope, and added stuff around the parent. http://jsfiddle.net/MarkSchultheiss/CRCvU/1/
Just in case you want to go that way, here is the jQuery code to do this:
var ah1 = $('#a1').height();
var ah2 = $('#a2').height();
var ah = $('#a').height();
var relpos = {float:"left",
display: "inline-block",
position: "relative",
clear: "both"
};
$('#a').css({
height: ah
});
$('#a1, #a2').css(relpos);
$('#a2').css('top', -ah1);
$('#a1').css('top', ah2);
Working scripted example here: http://jsfiddle.net/MarkSchultheiss/CRCvU/3/
I was wondering, what is the best way (using html, css, and graphics) to create a web page whose top header section appears to be beveled, as opposed to straight across? Please see the below image as an example:
I'm not sure how to use images in a way such that they would expand/contract in accordance with different browser sizes/resolutions...
Can anyone offer me some help? Or perhaps point me to a resource?
Thanks!
You could use border-radius.
See my example on jsFiddle.
Mine is a cleaner version of #Alex's:
Live Demo
.head {
-webkit-border-top-left-radius: 40% 80px;
-webkit-border-top-right-radius: 40% 80px;
-moz-border-radius-topleft: 40% 80px;
-moz-border-radius-topright: 40% 80px;
border-top-left-radius: 40% 80px;
border-top-right-radius: 40% 80px;
background: blue;
height: 280px
}
<div class="head"></div>
It obviously won't work in IE.
You could use CSS3 or webkit-specific properties, but this is not well supported as far as cross-browser compatibility is concerned. If you want to support as many browsers as possible, your best bet would be to use a background image to achieve this effect.
Here's a cross-browser version, which i made with help of jquery. Basically, the script creates many spans, with white background and decreasing width.
You can play around with STEPS and FACTOR variables, which will change the result. The step function sets the easing of the curve. You may replace it later with better functions than mine, it's just an example.
var STEPS = 53;
var FACTOR = 5;
var $el = $('div.header');
var width = $el.outerWidth();
var $span = $('<span></span>');
for(i=0;i<STEPS;i++){
tmpWidth = stepWidth(i, width);
$span.clone().css({
'bottom': i + 'px',
'width': tmpWidth,
'left': (width - tmpWidth)/2
}).appendTo($el);
}
function stepWidth(i, width){
return -(1 / FACTOR * Math.pow(i, 2)) + width;
}
You can find the entire code (html + css on the Fiddle)
Here is another way of achieving this.
Draw an overlay with pseudo element with width and height larger than element itself.
Apply border-radius to create round effect and background-color.
Add overflow: hidden on parent to hide excess part.
Output Image:
body {
background: linear-gradient(lightblue, blue);
min-height: 100vh;
margin: 0;
}
.box {
position: relative;
margin: 5vh auto;
overflow: hidden;
height: 90vh;
width: 500px;
}
.box:before {
border-radius: 100% 100% 0 0;
position: absolute;
background: white;
bottom: -200px;
right: -200px;
left: -200px;
content: '';
top: 0;
}
<div class="box">
</div>