I've got this image here, Just a simple bootstrap website.
Heres the code for it. I've tired 100% height as you can see but its not working ,I'm wanting the black background to be full height of the screen.
<div class="col-md-8" style="background-color:#333333; height:100%">
<p style="color:white; padding-top:10%; font-size:80px" align="right">Some</p>
</div>
<div class="col-md-4" style="background-color:#ffffff;">
<p style="color:#333; padding-top:20%; font-size:80px">Text</p>
</div>
In order for percentage heights to work, there needs to be a height set on the parent element. If the height of the parent is a percentage, then it will require it's parent to have a height set on it also. This is the reason why simply applying html, body { height: 100%; } might/is not working - your element might not be a child of the <body> and therefore breaking the chain.
For example, does not work, chain is broken:
<html class="percentage-height-set">
<body class="percentage-height-set">
<div class="no-height-set">
<div class="no-height-set">
<div class="percentage-height-set"></div>
</div>
</div>
</body>
</html>
Works, chain is unbroken:
<html class="percentage-height-set">
<body class="percentage-height-set">
<div class="percentage-height-set"></div>
</body>
</html>
Since percentage heights require a height to be set on their parent element the math might look like this:
[parent height] * [percentage height of child] = [pixel height of child]
And what you're doing:
?? * .05 = ??
With a set height on parent:
500px * .05 = 25px
In css:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
Make sure, that your div isn't a child of another div
Related
Why is it so difficult (or as one answer said, "It is not possible.") to center an arbitrary image horizontally? I have had centralized images working for several years; suddenly they sit obstinately at the left. Has there been some recent change in CSS that causes this?
I expect the code below, modified from the CSS DIY, to work, but it does not.
<!DOCTYPE html>
<html><head>
<style>
img { display:block; }
</style>
</head>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div style="margin: 0 auto;">
<img src="paris.jpg" alt="Paris"
width=15% >
</div>
</body></html>
I realize that scaling an image by percent width is (for no known) reason disallowed, but Jukka advised me to use it anyway, because it works in all browsers I have tried and does exactly what I want, which is to maintain image size proportional to page width. If I float the image right or left it works fine, and I can run a caption alongside the image, but the obvious 'margin : 0 auto;' fails, for no good reason I can see.
Margin : Auto
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins
Add
img {
display:block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div>
<img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Paris" >
</div>
</body>
</html>
You should add the styles
display:block;
margin: 0 auto;
To your img element
<div style="width:100%;background:skyblue;">
<img style='display:block;width:25%;margin:0 auto;' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvl0jMbupgXjeP66hak-u3uwUPcqI3Ovx7zqiWkVhav2V8FjeY1A'/>
</div>
<!doctype html>
<html>
<head>
<title>Satya</title>
<meta charset="utf-8"/>
</head>
<body margin="0">
<div class="topheader">
<div class="banner">
<img src="../img/header2.png" alt="header banner" width="100%" height="15%"/>
</div>
</div>
</body>
</html>
Where is my fault that i am not getting the banner at 15% of the page. I also have tried an external style sheet but that's also not working. if i remove doctype declaration from code than its absolutely working.
help me getting it right.
`
<img src="../img/header2.png" alt="header banner" style="width: 100%, height: 15%" />
width and height attributes support only pixel size, not percentage
You can either change your html to this
<img src="../img/header2.png" alt="header banner" width="100%" style="height: 15vh"/>
Or if you want to use % units, add this CSS in a separate stylesheet.
body, html, .banner, .topheader {
height: 100%;
}
vh units, in the first example, set the heigh to 15% of the screen height. Using 15% as a unit, will set it to 15% of the parent container, but your image parent does not have a fixed height, so CSS does not know how to compute this. By giving the parents of the element a fixed height this allows the image to take a percentage height.
If it were me, I would just use a separate stylesheet and add this:
.topheader img {
height: 15vh;
}
fiddle: https://jsfiddle.net/9Lcn0wf4/
I am using imgix to server my images. They have a great library for serving jpegs at just the right size and pixel density. But it doesn't work when I need to add links to those images.
Here's the fiddle & the code:
jsfiddle.net/L95suygs/1/
<style>
...
.feature-img {
width:23%;
margin:0 1% .5em;
height:320px;
float:left;
overflow: hidden;
text-align: center;
overflow:hidden;
}
#media (max-width:1024px){
.feature-img {
width:48%;
margin:0 1% .5em;
}
}
#media (max-width:480px){
.header-img{
width:100%;
margin:0 0 .5em 0;
}
.feature-img {
width:100%;
margin:0 0 .5em;
height:200px;
}
}
</style>
<div class="container" id="example1">
<!-- Header Image -->
<div class="header-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/octopus.jpg?fit=crop&crop=faces" >
</div>
<div class="feature-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/jellyfish.jpg?fit=crop&crop=faces">
</div>
<div class="feature-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/lionfish.jpg?fit=crop&crop=faces">
</div>
<div class="feature-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/clownfish.jpg?fit=crop&crop=faces">
</div>
<div class="feature-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/fin.jpg?fit=crop&crop=faces">
</div>
</div>
<script type="text/javascript">
var options = {
updateOnResizeDown : true,
updateOnPinchZoom : true,
fitImgTagToContainerWidth: true,
fitImgTagToContainerHeight: true,
pixelStep : 10,
onChangeParamOverride: function(w, h) {
var dpr = Math.ceil(window.devicePixelRatio*10) /10;
return {"txt": "w:" + w + " h:" +h + " dpr:" + dpr,
"txtalign": "center,bottom",
"txtsize": 20,
"txtfont":"Helvetica%20Neue,bold",
"txtclr":"ffffffff",
"txtpad":20,
"txtfit":'max',
"exp":-2
}
}
};
imgix.onready(function() {
imgix.fluid(options);
});
</script>
The Short Answer
Add something like the following to your CSS:
.feature-img > a {
display: block;
width: 100%;
height: 100%;
}
This gives a definite size to your <a> tag, so its child image will be sized accordingly.
-- OR --
Change your HTML from this:
<div class="feature-img">
<img class="imgix-fluid" data-src="..." >
</div>
to this:
<a href="http://google.com" class="feature-img">
<img class="imgix-fluid" data-src="...">
</a>
This applies the .feature-img style that's already nicely defined to your <a> tag, rather than applying it to an unnecessary parent <div> and using the <a> tag as a child.
The Long Answer
Marking an image as imgix-fluid means it will always size itself to fit its container's width (and in this case height, since you're passing in fitImgTagToContainerHeight: true).
In your standard case (<img> tag wrapped in a <div>), this behaves exactly as expected. Your <div> tags size themselves properly thanks to your CSS, and imgix.js ensures that the images inside it are the proper size, because you've marked them as imgix-fluid.
However, when you wrap an image in an <a> tag as you've done with the second image in the example, the <img>'s parent container is no longer the handsomely-sized <div>, it's now an <a> with no styling applied to it whatsoever. And, because <a> is an inline element by default, it has no inherent sizing of its own--inline elements size themselves to fit their contents. The <a> sizes itself to fit the <img> inside of it (which has no src attribute, and therefore will be sized to something small but inconsistent from browser to browser), and imgix.js sizes the image inside it to be as small as its parent <a>. It's kind of a chicken-and-egg problem, but it ends in disappointment instead of continuing indefinitely.
As stated above, there are two solutions you could use:
Simply apply some styles to your <a> tag. If you set it to display:block; and set width and height to 100%, the anchor will automatically fill the space created by its parent <div> and consequently imgix.js will size the child <img> appropriately.
Ditch the parent <div> in this case and just make the <a> the container! Replacing the outer <div> with an <a> works perfectly, as long as you give the <a> the feature-img class.
For my money, the second approach seems cleaner and makes more sense.
Hope this helps!
I'm using jquery-mobile and I'd like to have the control-elements of my main-view to fill the entire available height and width, like in this picture:
To set the height like:
<div id="ButtonContent" style="height:100%>
<button style="height:50%/>
<button style="height:50%/>
</div>
doesnt work. See
jsFiddle
I also would like to have this div-container to fill the entire space:
Therefore I have this jsFiddle
I tried to set the height of the div-conatiner and it's content to 100%, but that doesn't work.
There are some concepts you have to understand:
The answer from Hiigaran.
Button are inline elements.
This could be what you want:
<div id="ButtonContent" style="height: 500px">
<div style="height: 50%"><button style="height: 100%"/></div>
<div style="height: 50%"><button style="height: 100%"/></div>
</div>
Try on JSFiddle
To my understanding, you can't set height:100%; if you don't have an absolute value height on the parent element. For example, if you have the following HTML:
<body>
<div class="something"></div>
</body>
This CSS will not work:
.something{height:100%;}
But this one should:
body{height:500px;}
.something{height:100%;}
If you are tailing to mobile devices, continue using percentage as you normally would, but make sure that the body tag is set to the pixel height that the relevant device(s) have.
Add following code in your css file.
#boxBrowserContent .ui-btn{height:150px;margin:10px;}
#boxBrowserContent{padding-top:100px;}
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c {
height: 400px;
width: 33.25%;
}
I have looked at this question which has been suggested as a duplicate:
Make a div fill the height of the remaining screen space
However it's from 2008 and is fairly old. I'd rather not use Javascript or tables to solve this and would prefer a CSS solution if at all possible.
Here's the code for the container divs up to and including the left hand nav:
/* Header Wrapper */
#header-wrapper {width:100%;height:120px;margin:0 auto;background:transparent url(/images/Structure/blue-transparent-repeat2.png);background-position:50% 50%;}
#clouds {height:120px;width:100%;margin:0 auto;background:transparent url(/images/Structure/clouds.png) repeat-x;background-position:50% 50%;}
#opaque {width:100%;margin:0 auto;height:120px;background:transparent url(/images/Structure/white-transparent.png);}
#header-content {margin:0 auto;position:relative;width:100%;max-width:1280px;height:85px;}
/* Content Wrapper */
#content-wrapper {float:left;background:url("/images/cream.jpg") repeat-x;width:100%;}
#shell {height:100%;width:100%;background:#fffef8 url("/images/Structure/signpost.gif") 5% 100% no-repeat}
/* Page Content Wrapper */
#page-outer{height:100%;margin:0 auto;padding:0 0.5% 8px;max-width:1280px;}
#page-content {height:100%;clear:both;margin:0 0.7%;}
/* Left Nav */
#left-nav {padding-top:7px;border-right:1px solid #ede9e8;float:left;width:20%;margin:0 0 110px 0;background:url(/images/header-repeat-left.png) repeat-y;background-position:right top;}
And here's a simplified page code showing the main content divs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inside <%=server.HTMLEncode(Session("PublicFranchiseName"))%> Business Directory and Local Guide – Your Inside Guide to <%=server.HTMLEncode(Session("PublicFranchiseName"))%></title>
</head>
<body class="home">
<div id="header-wrapper">
<div id="clouds">
<div id="opaque">
<div id="header-content"></div>
<div class="menu2"></div>
</div>
</div>
</div>
<div id="content-wrapper">
<div id="shell">
<div id="page-outer" class="clearfix">
<div id="page-content" class="clearfix">
<!--Start Left Nav-->
<div id="left-nav">
First of all sue the content in the left-nav bar is causing it to stretch so long. so if you want that , add more content. other way you can use height attribute and set it as long as you can. from what i understand html all elements are arranged according to width and once it runs out of screen they stack down .. since your div is 20% width , adding more elements will cause it to stretch downwards . Vote up if i am right !!
Instead of using floats use display: table; on the parent and display: table-cell; on the children. This will effectively "float them left" and also stretch their height to 100% of the parent.
Because I can't see your markup I can't provide an example, but you should be able to follow :)
I ended up fixing this using JS in head.css:
<script type="text/javascript">
matchColumns=function(){
var divs,contDivs,maxHeight,divHeight,d;
divs=document.getElementsByTagName('div');
contDivs=[];
maxHeight=0;
for(var i=0;i<divs.length;i++){
// make collection with <div> elements with class attribute "equal"
if(/\bequal\b/.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
maxHeight=Math.max(maxHeight,divHeight);
}
}
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight + "px";
}
}
window.onload=function(){
if(document.getElementsByTagName){
matchColumns();
}
}
</script>