So currently I have a div that houses an image. The css is setup as so
.InnerBanner{
position:relative;
text-align:center;
margin-bottom:0px;
margin-top:0px;
}
.InnerBanner img{
width:100%;
height:auto;
position: absolute;
top:0;
left:0;
}
and since the outer container no longer sees the height as anything i have to use jquery to load the height after the fact and it is an obvious switch on the page. I was wondering if there is either a way to do this soley in css or a way to do this before the page loads in jquery. I've exhausted search engines trying to find a way to do this. Odds are I'm not phrasing it right but hey you win some and you lose some.
the jquery for loading is below
function Height(){
var height = $(".BannerImage").height();
var em = height/200;
var newfont = em * 24;
$(".InnerBanner a").css("font-size", newfont);
$(".InnerBanner").height($(".BannerImage").height());
}
the function is currently called like so
$(document).ready(function(){
You need to call jquery on document load so it actually loads the image so you can get it's height. On document ready the image will not be loaded(depending on the size, butt 99% it will not be fully loaded). Because of position absolute the image does not take any space in it's parent, so it behaves like a totally independent element.
So to do it with jQuery :
$(window).on('load', function(){
$('.InnerBanner').height( $('.InnerBanner img').height() );
});
Also, as I can see from the css .InnerBanner img will take up the complete width of it's parent element, so why do you add position:absolute to the image?
Since you are asking to do this in CSS,
.InnerBanner{
position:relative;
text-align:center;
margin-bottom:0px;
margin-top:0px;
}
.InnerBanner img{
position: absolute;
top:0;
left:0;
}
<!--Same height and width for both class-->
.InnerBanner img,
.InnerBanner{
width:100%;
height:auto;
}
other trick is here
<div class="layout">
<div class="columns-container">
<div class="column"></div>
<div class="column"></div>
</div>
</div>
.layout {
display: table;
}
.layout .columns-container {
display: table-row;
}
.layout .columns-container .column {
display: table-cell;
}
Since we don’t know the columns’ heights, we can’t set a fixed height
on their parent. Also setting height: 100% or something like that on
the columns won’t work: we are counting on them to spread to the
maximum height and thus make their parent taller.
In your case
.InnerBanner{
display: table-row;
}
.InnerBanner img{
display: table-cell;
}
.InnerBannerlayout {
display: table;
}
keep an extra layout parent div with class InnerBannerlayout .
Related
This question builds upon that one, where in order to apply full screen width to a child of a non full width parent element, the following rule is used on the child element:
width: 100vw;
margin-left: calc(-50vw + 50%);
As shown in this Fiddle, this solution doesn't work in the presence of a vertical scrollbar though: 100vw doesn't take the scrollbar into account and hence the child element ends up being wider than the screen (note: works perfectly without scrollbar).
Is there a way to solve this problem so that the child element takes exactly full screen width? If not in pure CSS then with JS?
Note: an overflow rule on body isn't acceptable in my case as I need the child to fill the exact width of the screen.
https://jsfiddle.net/k3nvkL35/4/
One of the issues you'll come across with the solution here is that I believe scrollbar widths are not universal, and so you may need to implement some conditional logic to affect width/margin based on that.
That being said, you may find this useful. The function below will check to see if the document has a vertical scrollbar by comparing the document's height to the window's height. Based on the existence of said scrollbar, it will modify the child's width and margins to fit the window.
Again, it likely requires tweaking, though it should provide a decent foundation.
function adjustWidth() {
if ($(document).height() > $(window).height()) {
$(".child").css({
"width": "calc(100vw - 18px)",
"margin-left": "calc(-50vw + 50% + 9px)"
});
} else {
$(".child").css({
"width": "",
"margin-left": ""
})
}
}
$(window).resize(adjustWidth).trigger("resize");
.parent {
width: 500px;
height: 500px;
margin: 0 auto;
border: 3px solid green;
}
.child {
height: 100px;
background: red;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
content
</div>
</div>
Simple. Since the parent isn't positioned in any way, then the child can be positioned absolutely. No messing with calc or otherwise, works everywhere.
.child {
height: 100px;
background: red;
position:absolute;
left:0;
right:0;
}
Here is a working fiddle:
https://jsfiddle.net/vgbr6qw2/
I found this solution, which was sourced by this guy, but I don't know who originally did it. I haven't fully tested it, so it may not work in all browsers. I know the vw unit isn't supported in IE8, as if anyone cares.
body {
margin:0;
}
.wrapper {
width:100%;
max-width:400px;
margin:0 auto;
background:pink;
/* margin is for display purposes on stack overflows fullscreen snippet view */
margin-top:80px;
}
.full-width {
width:100vw;
margin-left:-50vw;
left:50%;
background:red;
position:relative;
color:white;
}
<div class="wrapper">
<span>Hi. I'm a paragraph.</span>
<div class="full-width">
<p>You aint no paragraph, sucka!</p>
</div>
<strong>Be quiet, you weak losers.</strong>
</div>
I have a div that I want to be able to click and shrink to the top ~10% of a page. I have code similar to this where one DIV should cover everything, then the second DIV would have the content for the page:
<div id="cover">Optimized the javascript so that all code is based on jQuery.
</div>
<div id="content" style="height:300px;" class="hide" >Optimized the javascript so that all code is based on jQuery.
</div>
This is a partial example of what I want to do:
JSFiddle
The problem with this is that the slideUp() function seems to completely hide the "cover" DIV rather than shrink it to part of it's size. The other problem I have is that the background doesn't scale with the DIV. I would like the background image to shrink to a reasonable size in the cover DIV. Is this possible? In my example JSFiddle, the white space should have the "cover" DIV, and a smaller version of the background image.
jQuery slideToggle(); is actually supposed to hide or show an element completely due the fact that you're not supposed to hide or show it with the element you're hiding / showing.
So to solve your problem I've created an extra div that will hide or show the element giving it the appearence of only partly hiding the element. You can find the fiddle here:
JSFiddle
I've also scaled the background for you.
I would use jquery's animate() for this and replace background-attachment:fixed with background-size: 8em;
Tweak this part depending on the size of your divs { "height": "30%","background-size": "6em" }
$(function () {
$('#cover').click(function () {
$(this).animate({ "height": "30%","background-size": "6em" }, 400, function () {
$(this).next().show();
});
});
});
* {
margin: 0px;
padding: 0px;
}
html {
width:100%;
height:100%;
}
.hide {
display: none
}
.show {
}
#cover {
background-color: black;
width:100%;
height: 100%;
top:0;
left:0;
position:fixed;
background-size: 8em;
margin: 0 auto;
background-image: url('http://i.stack.imgur.com/JVX13.png');
background-repeat:no-repeat;
background-position:center;
}
#content {
background-color: #CCCCFF;
padding: 5px 10px;
width:100%;
height: 100%;
top:30%;
left:0;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="cover">Optimized the javascript so that all code is based on jQuery.</div>
<div id="content" class="hide">Optimized the javascript so that all code is based on jQuery.</div>
Is there a way to make position'ed elements scale correctly relative to the window size using only CSS or I got to step it up to javascript/jQ? I tried adding a container with 100% width and height and then scale accordingly.
.container{
position: relative;
width: 100%;
height: 100%;}
.transblock{
position:absolute;
width:44%;
height:5%;
top:90%;
left:0%;
background:green;
opacity: 0.6;
z-index:5; }
.h1text{
position:absolute;
width:30%;
height:5%;
top:90.75%;
left:13.5%;
z-index:10;
color:white;}
http://jsfiddle.net/cyaXL/
The gap between the paragraph and the menu is the issue. It's too small on 1280p screen and too large on 1920p. Is there any way to make it adjust better?
You can as well us 'viewport' units like this:
div {
width: 50vw; //means it should take 50% of the window size
}
I think the fact that you have the .menu4 with a left of 25% is the problem here:
.menu4 {
left: 25%;
}
better:
.menu4 {
left: 0%;
width:auto;
margin-right:1%;
}
.menu4 ul {
float:right;
clear:both;
}
This must be done through css and not with any scripts and Yes your are doing it right, making the container go 100% of windows size then placing items in that container.
You are using font size in pixel. Please try with "em". while doing the layout with %, we need to used "em" instead of "px". please refer the conversion table and try.
say i have
<div id ="outer" class="outer">
<div id= "inner" class="inner">
//some stuff
</div>
</div>
the inner div has a dynamic height, it changes depending on what is inside the div. the outer div is just a container which is set to have the height of the window.
I want to set it so that the inner div is vertically centered within the outer div. Is there a way to do this easily in CSS or is JavaScript necessary?
THE SOLUTION I FOUND:
var container= document.getElementById("outer");
var inner= document.getElementById("inner");
var inHeight=inner.offsetHeight;
container.style.height=(window.innerHeight-10);
container.style.width=window.innerWidth;
var conHeight=container.offsetHeight;
inner.style.marginTop=((conHeight-inHeight)/2);
In case anyone else searching for a solution to the same problem, this worked for me.
emphasized text
try this out http://jsfiddle.net/gLChk/12/
but it won't be supported in IE<8 browsers. To make it work on all the browsers, you'll have to write a js which will find the height of .inner and apply these css properties
$(document).ready(function(){
var inner = $('.inner'),
ht = inner.height();
inner.css({'position':'absolute','top':'50%','margin':-ht/2+'px 0 0 0'});
});
Hope this helps. :)
.outer {
display: table;
position: relative;
width:100%;
height:200px;
border:1px red solid;
}
.inner {
display: table-cell;
position: relative;
vertical-align: middle;
}
Try it with
.inner {
top: 50%;
bottom: 50%;
}
jsfiddle
greets
use:
.inner
{
margin-top:auto;
margin-bottom:auto;
}
I have a container element which I need to resize as its contents change. It contains 2 absolutely positioned divs which can both change height. If I don't specify the height of the container then anything after the container disappears under the contents.
At the moment I am doing the following but I'd be pleased to find a less laborious alternative:
(container has position:relative, #main and #sidebar are position:absolute, the contents of #sidebar have no positioning specified)
css:
div#mapcontainer { position:relative; width:100%; height: 600px; }
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; }
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;}
html:
<div id="container">
<div id="main">variable height content here</div>
<div id="sidebar">
<div id="foo">...</div>
<div id="bar">....</div>
...
</div>
<div>
js:
fixHeights = function() {
var children_height = 0;
$('#sidebar'). children().each(function(){children_height += $(this).height();});
$('#container').height(Math.max(children_height, $('#main').height()));
};
This is a very odd question, as div's height is always the height of its children.
Are you floating content in your container div? When you float child content the containing div doesn't act the same anymore.
If you're floating content that extends past the bottom of the container div, add the following div to the very bottom of the children of the container div:
<div style="clear:both;"></div>
That will not allow children to float over it, thus forcing the containing div to be the height of its tallest child...
<div id="container">
<div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div>
<div id="static" style="margin-left:104px;">Lots of static stuff here</div>
<div style="clear:both;"></div>
</div>
Okay, I'm not sure why you're doing the positioning the way you are, but I've done something similar for a website that had to look like a desktop application. I don't believe there is any way to do this other than with javascript. Html documents are designed to flow, not be rigid. If you want to bail on the javascript, you'll have to let go of the positioning styles and use your floating and clearing divs. Its not that horrible...
if you're floating the container div "overflow: auto" can also work magically, esp with regard to the whole IE hasLayout debacle
You didn't specify but I think you are having a problem with floating elements and you want the container they are in to be at least the size of the biggest floating element. You should try the following CSS hack that forces the browser to rerender the size of the container element to the size of the floating elements:
#wrapper:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
Let me know what you come up with and if this works. There are many other hacks to try, depending on your browser.
I would try changing the css not to use absolute positioning. In Firefox you would need to use the wrapper trick mention in the comments to get the mapcontainer the right height.
div#mapcontainer { clear:both; width:100%; min-height: 600px; }
div#main { float:left; margin-left: 10px; width: 500px; height: 400px; }
div#sidebar { float:left; margin-top:10px; margin-right:10px; width: 155px; height: 405px;}
Overflow:visible; That's the ticket. overflow:auto will create a scroll bar, if needed.