If I have an image bigger than 200px height I will crop this image with a div:
.voltaimgdiv{
max-height:200px;
display:block;
line-height:200px;
overflow:hidden;
margin-bottom:10px;
}
html
<div class="voltaimgdiv">
<img src="http://www.pineswcd.com/vertical/Sites/%7BB4CF315C-B365-47D6-A226-5F80C04C0D48%7D/uploads/tree_clipart.gif">
</div>
my problem is, I want this div to grow and show full image if user clicks on it.
Any ideas?
https://jsfiddle.net/64f36m4y/
I recommend by using toggleClass.
Better set the height and width of the div and image auto. After using on click function.
JS
jQuery(function($){
$('.voltaimgdiv').click(function(){
$('.voltaimgdiv').toggleClass('full')
})
})
CSS
.full img{
width:100%;
}
.full{
max-height:100% !important;
line-height: 0;
}
DEMO
you can maximize image height on click using this css code
.voltaimgdiv:active{
max-height:500px;
}
if you want to do with CSS.Just Assign ID And Use it in CSS.
HTML:
<div id="clkme" class="voltaimgdiv">
<img src="http://www.pineswcd.com/vertical/Sites/%7BB4CF315C-B365-47D6-A226-5F80C04C0D48%7D/uploads/tree_clipart.gif">
</div>
CSS:
#clkme:active{
max-height:500px;
}
You can Write Javascript As Well And Javascript is a better choice.
by using
Onclick="Name"
Function In div.
and make a body of javascript
function Name{
\\your code ..
}
Try this:
$('.voltaimgdiv').click(function() {
$('.voltaimgdiv').css('height', 'auto');
});
.voltaimgdiv {
height: 200px;
display: block;
line-height: 200px;
margin-bottom: 10px;
border: 1px solid #000;
overflow-y: hidden;
}
<div class="voltaimgdiv">
<img src="http://www.pineswcd.com/vertical/Sites/%7BB4CF315C-B365-47D6-A226-5F80C04C0D48%7D/uploads/tree_clipart.gif">
</div>
show all image on click?
I have a fixed navbar using curved ribbon images that have transparent bits above and below the actual ribbon and I have a scaling full size background (so I can't make a navbar with a matching background at the top). I would like the page content to disappear behind the ribbon, halfway through the navbar as the user is scrolling.
It's the same problem as these two questions and the answers (which are good) aren't working for me.
Hide scrollable content behind transparent fixed position divs when scrolling the page?
Hide Scrolling Content Under Transparent Header
This is what I don't want:
http://imageshack.us/photo/my-images/213/badnr.jpg/
This is kind of what I want but without the scrollbars:
http://imageshack.us/photo/my-images/534/scrolled.jpg/
Thanks in advance for any help, it's greatly appreciated, this site has and will continue to teach me a lot.
The css z-index attribute should do the trick to place any element in front of or behind another element. Like so:
<style type="text/css">
body, html {
margin:0 auto;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
/* Header Styling */
#header {
color:#FFF;
background: url(/images/header-back.png) repeat-x;
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
z-index:1;
}
#headerWrap {
width:1024px;
margin:0 auto;
height:50px;
}
/* Sub Header */
#subHeader {
position:fixed;
top:50px;
margin:0 auto;
z-index:1;
}
#subHeaderWrap {
height:30px;
width:830px;
border-bottom:thin solid #333;
background: url(../images/subheader.png) repeat-x;
}
/* Contaier */
#container {
margin:0 auto;
width:1024px;
min-height:600px;
}
#containerWrap {
margin-top:50px;
}
/* Menu */
#sidebar {
float:left;
width:140px;
min-height:600px;
}
#content {
border-left:#333333 solid thin;
border-right:#333333 solid thin;
border-bottom:#333333 solid thin;
float:left;
width:830px;
min-height:600px;
padding-top:30px;
margin-bottom:10px;
}
#contentWrap {
width:830px;
margin:0 auto;
padding-bottom:10px;
}
</style>
<div id="container">
<div id="header" style="z-index:1;"/* Places div on top */">
This is transparent.
</div>
<div id="containerWrap">
<div id="sidebar">
Menu Items Here
</div>
<div id="content">
<div id="contentWrap">
<div id="subHeader" style="z-index:1;"/* Places div on top */">
<div id="subHeaderWrap">
This div is transparent too, but is now on top.
</div>
</div>
Anything here is scrollable and will scroll under the divs above with z-index:1;
</div>
</div>
I have found the solution you're looking for.
You're going to use a little Jquery and some CSS. I will assume you're loading the latest version of Jquery in your footer.
The header will be fixed, the elements inside it will be absolute. We will not focus on elements inside the header because that really doesn't matter for this, but if you were to put a menu and logo in the header you would make them absolute.
HTML Div with class header assigned or if you prefer you could just create a <header></header> element, whichever. But for this example we will use a class.
<div class="header">...Your Header Elements In this...</div>
CSS
body {background: url('../img/page-background.jpg') no-repeat top center fixed; background-size: cover;}
.header {position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: transparent;}
JS - I use a seperate JS file and then load this after I've loaded Jquery in the footer.
$(window).scroll(function() {
"use strict";
var windowYmax = 1;
var scrolledY = $(window).scrollTop();
if (scrolledY > windowYmax) {
$('.header').addClass("hide-content");
} else {
$('.header').removeClass("hide-content");
}
});
Add this CSS for new class assigned:
.hide-content {background: transparent url('../img/page-background.jpg') no-repeat top center fixed; background-size: cover;}
Here is a JSfiddle: The Fiddle
I was not able to get the JS to work in JSfiddle for some reason, maybe someone can fix that issue, but I don't really have the time to mess with JSfiddle much, but wanted to provide an example to the end result. So I just added the class that gets assigned by the JS to the div in the HTML and you can see the result in the preview pane.
So yet another question about vertically aligning an image within a div, but I think mine is different than the others I've found on here. I can't seem to find a solution that works for my situation.
I have a DIV that is 100% width (to it's container, which is floating left and has a set pixel width) and has a set pixel height. I have an image inside that I am positioning absolute to get it to the background of content within the DIV. The image is fluid with a width of 100%.
All works well, but I want to get the image to vertically align to the middle of the container and height is unknown.
Here is some sample code that shows what I'm trying to do:
<div class="container">
<div class="image-wrapper">
<img src="http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg"
width="100%" />
</div>
<p>Some text</p>
</div>
And some sample CSS:
.container {
width:100%;
margin-top:10px;
height:100px;
overflow:hidden;
}
.image-wrapper {
position: relative;
}
.image-wrapper > img {
position: absolute;
z-index: -1;
}
p {
text-align: center;
padding-top: 10px;
color:#fff;
font-weight: bold;
}
But the flower should show up with it's center visible within the container div.
Any thoughts? I'm trying to avoid any Javascript sizing (the outer container, not shown in this sample, is already being sized). I'm not opposed to more DIVs, tables.. whatever you got!
A jsFiddle to demo this:
http://jsfiddle.net/JonMcL/sNz9h/
Why not go for the background-image property? That allows vertical centering...
http://jsfiddle.net/urrWS/
Assuming you want to only scale the image down and not stretch it beyond its native resolution this should do the trick. A little bit of jQuery is involved but it's minimal. Essentially, this adjusts the top-margin of the IMG on the window.resize event.
HTML
<div id="container">
<img id="image" src="image.jpg"> <!-- native size is 480x300 -->
</div>
CSS
#container {
margin: auto;
width: 80%;
height: 300px;
border: 1px solid gray;
}
#image {
display: block;
width: 100%;
max-width: 480px;
margin: auto;
}
jQuery
function adjustImage() {
$("#image").css('margin-top', ($("#container").height() - $("#image").height()) / 2);
}
$(window).load(function() {
adjustImage();
$(window).resize(function() {
adjustImage();
});
});
If I get what you need I would suggest setting the background image via css, then you can set the position correctly etc.
.container {
width:100%;
margin-top:10px;
background-image:url("http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg");
background-repeat:no-repeat;
background-position:left center;
height:100px;
overflow:hidden;
}
http://jsfiddle.net/sNz9h/6/
I have that problem: I want to have a centered layout with or without a right-side sidebanner (it should float right to the content). so my css has to center content+sidebanner IN CASE there is a sidebanner tag or just the content (content and sidebanner have a fixed width) if there is no sidebanner tag - there are some pages where there should be the sidebanner and on some it isn't. css should format both possibilities well.
so it should like this:
<div id="wrapper"><div id="content"></div><div id="sidebanner"></div></div>
i tried a couple of things with floats and display:inline but it didn't really work out :(
Try this...
#wrapper {
position:relative;
left:50%;
margin-left:-500px;
width:1000px;
}
margin-left should be negative half of the width.
For the sidebanner, when its there, you can add a class .wsidebanner to the content block as follows:
<div id="content" class="wsidebanner"></div>
and the css would be:
#content {
background-color:#199;
}
.wsidebanner {
float:left;
width:800px;
}
#sidebanner {
background-color:#919;
float:right;
width:200px;
}
i would use following
#wrapper {
width:1000px;
margin:0 auto; //centering the wrapper
position:relative; //so we can position the ad absolutely
}
#sidebanner {
width:120px;
position:absolute;
top:0;
right:-120px; // same as width
}
Since selecting an element's parent is not possible with CSS, you'll have to add a class to the wrapper div when there's no sidebar.
HTML
<div id="wrapper">
<div id="sidebanner">...</div>
<div id="content">...</div>
</div>
<div id="wrapper" class="nosb">
<div id="content">C</div>
</div>
CSS
#wrapper {
width: 400px;
margin: 0 auto;
}
#wrapper.nosb {
width: 300px;
}
#content + #sidebanner {
margin-right: 100px;
}
#sidebanner {
float: right;
width: 100px;
}
See fiddle.
Note: IE6 doesn't support the adjacent sibling selector.
In the markup shown below, I'm trying to get the content div to stretch all the way to the bottom of the page but it's only stretching if there's content to display. The reason I want to do this is so the vertical border still appears down the page even if there isn't any content to display.
Here is my DEMO:
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100%
}
#menu, #content {
width:1024px;
margin: 0 auto;
}
div#menu {
height: 25px;
background-color:#50657a;
}
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
</form>
Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:
html,body { height:100%; }
You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.
This site has some excellent examples:
http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
I also recommend going to http://quirksmode.org/
I'll try to answer the question directly in the title, rather than being hell-bent on sticking a footer to the bottom of the page.
Make div extend to the bottom of the page if there's not enough content to fill the available vertical browser viewport:
Demo at (drag the frame handle to see effect) : http://jsfiddle.net/NN7ky
(upside: clean, simple. downside: requires flexbox - http://caniuse.com/flexbox)
HTML:
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
CSS:
* { padding: 0; margin: 0; }
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
body > * {
flex-shrink: 0;
}
.div1 { background-color: yellow; }
.div2 {
background-color: orange;
flex-grow: 1;
}
ta-da - or i'm just too sleepy
Try playing around with the following css rule:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Change the height to suit your page. height is mentioned twice for cross browser compatibility.
you can kinda hack it with the min-height declaration
<div style="min-height: 100%">stuff</div>
You can use the "vh" length unit for the min-height property of the element itself and its parents. It's supported since IE9:
<body class="full-height">
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content" class="full-height">
</div>
</body>
CSS:
.full-height {
min-height: 100vh;
box-sizing: border-box;
}
While it isn't as elegant as pure CSS, a small bit of javascript can help accomplish this:
<html>
<head>
<style type='text/css'>
div {
border: 1px solid #000000;
}
</style>
<script type='text/javascript'>
function expandToWindow(element) {
var margin = 10;
if (element.style.height < window.innerHeight) {
element.style.height = window.innerHeight - (2 * margin)
}
}
</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
The min-height property is not supported by all browsers. If you need your #content to extend it's height on longer pages the height property will cut it short.
It's a bit of a hack but you could add an empty div with a width of 1px and height of e.g. 1000px inside your #content div. That will force the content to be at least 1000px high and still allow longer content to extend the height when needed
Try Ryan Fait's "Sticky Footer" solution,
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Works across IE, Firefox, Chrome, Safari and supposedly Opera too, but haven't tested that. It's a great solution. Very easy and reliable to implement.
Try:
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
Haven't tested it yet...
Sticky footer with fixed height:
HTML scheme:
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
</body>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#footer {
height: 60px;
}
Try http://mystrd.at/modern-clean-css-sticky-footer/
The link above is down, but this link https://stackoverflow.com/a/18066619/1944643 is ok. :D
Demo:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="author" content="http://mystrd.at">
<meta name="robots" content="noindex, nofollow">
<title>James Dean CSS Sticky Footer</title>
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
</body>
</html>
I think the issue would be fixed just making the html fill 100% also,
might be body fills the 100% of the html but html doesn't fill 100% of the screen.
Try with:
html, body {
height: 100%;
}
Also you might like this: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm
It isn't quite what you asked for, but it might also suit your needs.
I dont have the code, but I know I did this once using a combination of height:1000px and margin-bottom: -1000px; Try that.
Depending on how your layout works, you might get away with setting the background on the <html> element, which is always at least the height of the viewport.
It is not possible to accomplish this using only stylesheets (CSS). Some browsers will not accept
height: 100%;
as a higher value than the viewpoint of the browser window.
Javascript is the easiest cross browser solution, though as mentioned, not a clean or beautiful one.
#content {
height: calc(100% - the amount of pixels the content div is away from the top);
}
So if your div is 200px from the top, the code you need would be
#content {
height: calc(100% - 200px);
}
I know this is not the best method, but I couldnt figure it out without messing my header, menu, etc positions. So.... I used a table for those two colums. It was a QUICK fix. No JS needed ;)