I would like to fit an image in a non-fixed heigth container. This code is not working and I have no idea why.
<!DOCTYPE html>
<html>
<head>
<style rel="stylesheet" type="text/css">
.wrapper {
/*height: 50vh;*/
max-height: 50vh;
background: #a00;
}
.wrapper img {
max-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="http://www.nasa.gov/sites/default/files/thumbnails/image/7395_saturn_gill_infrared.jpg">
</div>
</body>
</html>
You get the expected result when uncommenting the height: 50vh; but I don't want to fix the height.
Any idea?
Update: Why would I want to do that?
The real world example is a slider of images with pagination bullets that are below the slide (not overlaying them but really outside). In case a user is using a viewport with a height smaller than the default height of the slider, then I want the user to be able to see an entire slide AND the pagination bullets in the viewport.
Slides (images) are content, not styling elements. Therefore, solutions based on css background are not what I am looking for.
You need to make the image a background to a div or container like this
<div id='box'>
<div id='image'></div>
</div>
html, body {
width: 100;
height: 100%;
}
#box {
width: 90%;
height: 90%;
background: #eee;
}
#image {
background-image: url(http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg);
background-size: 500px;
background-repeat: no-repeat;
width: 500px;
height: 500px;
}
You see the image has a fixed height, the container can have a variable % based width or height.
Don't use the wrapper to enforce height. Instead, directly set the max-height for the <img> tag in your CSS. I've added a snippet below with a slider (I did not include the functionality for the slide pagination buttons):
(function() {
var sliderItemIdx = 0;
setInterval(function() {
var allSliderItemEls = document.querySelectorAll('.slider > .slider-item');
var activeSliderItemEls = document.querySelectorAll('.slider > .slider-item.active');
// Update the current item index
sliderItemIdx = (sliderItemIdx + 1) % allSliderItemEls.length;
// Remove active class
[].forEach.call(activeSliderItemEls, function(sliderItemEl) {
sliderItemEl.classList.remove('active');
});
// Add active to current item
allSliderItemEls[sliderItemIdx].classList.add('active');
}, 2000);
})();
html, body { margin: 0px; padding: 0px; }
.slider {
background: #a00;
overflow: hidden;
text-align: center;
white-space: nowrap;
}
.slider-item {
position: absolute;
left: 100%;
}
.slider-item.active {
position: relative;
left: 0%;
margin: 0px;
}
.slider-item img { max-height: calc(50vh - 30px); }
.pagination { line-height: 30px; }
.pagination > .page { text-decoration: none; font-size: 2.5em; }
.pagination > .page::before { content: '\2022'; }
<div class="slider">
<figure class="slider-item active">
<img src="https://i.stack.imgur.com/memI0.png">
</figure>
<figure class="slider-item">
<img src="https://i.stack.imgur.com/P59NF.png">
</figure>
<figure class="slider-item">
<img src="https://i.stack.imgur.com/OVOg3.jpg">
</figure>
<div class="pagination">
<a class="page" href="#item-1" title="Item 1"></a>
<a class="page" href="#item-2" title="Item 2"></a>
<a class="page" href="#item-3" title="Item 3"></a>
</div>
</div>
Note that I am using calc to allow for the pagination to fit below it.
Related
I'm trying to set map height according to page height. In my case, i have pop-up window, which contains two divs: on the left is "directions" div, which can be higher than popup window and is normal scrolable, on the right is map-direction. Map is full height of popup, but when i scroll down, i get white stripe at the bottom. Link (when open, re-size it down to smaller window and try mentioned):
Link to page
HTML:
<div class="search_box">
<div id="header">
<img src="<?php echo base_url('images/logo.jpg'); ?> ">
</div>
<div class="content">
<div id="directions">
</div>
</div>
</div>
<div id="map_box">
<div id="slo_map">
<?php echo $map['html']; ?>
</div>
</div>
CSS
.search_box {
width: 390px;
float: left;
min-height: 800px;
overflow: hidden;
}
#header {
height: 121px;
width: 100%;
text-align: center;
}
.search_box .content {
padding: 15px;
}
#directions {
background-color: white;
float: left;
width:350px;
height: 100%;
}
#slo_map {
height: 100%;
width: auto;
overflow: hidden;
}
#map_box {
height: 100%;
width: auto;
overflow: hidden;
border-left: 1px solid #6d6d6d;
}
popup javascript:
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=1200,height=800,scrollbars=yes');
return false;
}
Any ideas how to regularly set css to show map with full height of page, not just visible window?
Thank you!
The opposite approach might fit your needs: set the sidebar to 100% height and let the overflowing content scroll.
.search_box {
width: 390px;
float: left;
height: 100vh;
overflow-y: scroll;
}
For a graphic effect, I'm attempting to create a div with a specific width (800 or 1000 px) surrounded by 2 equally sized fluid divs.
The left div is green, the middle div is white and contains a left-aligned logo image that starts with the same green, and the right div is white. The middle div should always be centered.
Is there a good way to do this using CSS? Otherwise, what other clean looking and browser-friendly approaches are there?
Edit(x2) my current test file:
This works, but the right div overlaps the center div, and I'd prefer if the left and right divs were exactly the remaining width instead of going under the center div (in case I would like to do a similar thing later)
<html>
<head>
<style>
.header {
width: 100%;
height: 60px;
background-color: grey;
}
.headercontents {
width: 800px;
height: 60px;
display: inline-block;
background-color: red;
float: left;
z-index: 99;
}
.left {
display: inline-block;
background-color: green;
height: 60px;
width: 49%;
margin-right: -400px;
float: left;
z-index: 1;
}
.right {
display: inline-block;
height: 60px;
background-color: blue;
width: 49%;
margin-left: -800px;
float: right;
z-index: 1;
}
</style>
<div class="header">
<div class="left"></div>
<div class="headercontents"></div>
<div class="right"></div>
</div>
Code functioning perfectly with JavaScript:
<html>
<head>
<style>
BODY {
padding: 0;
margin: 0;
}
.header {
width: 100%;
height: 60px;
background-color: grey;
}
.headercontents {
width: 800px;
height: 60px;
display: inline-block;
background-color: red;
z-index: 99;
}
.left {
height: 60px;
display: inline-block;
background-color: green;
z-index: 1;
}
.right {
height: 60px;
display: inline-block;
background-color: blue;
z-index: 1;
}
</style>
</head>
<body>
<div class="header">
<div class="left edge"></div><!--
--><div class="headercontents"></div><!--
--><div class="right edge"></div>
</div>
<script>
var leftEle = document.body.querySelector(".left");
var rightEle = document.body.querySelector(".right");
window.onresize = function() {
var width = window.innerWidth || document.documentElement.clientWidth;
if (width > 800) {
var lrWidth = width / 2 - 400;
leftEle.style.display = 'inline-block';
rightEle.style.display = 'inline-block';
leftEle.style.width = lrWidth;
rightEle.style.width = lrWidth;
} else {
leftEle.style.display = 'none';
rightEle.style.display = 'none';
// It would be nice to scroll the page horizontally to the center here
}
}
window.onload = window.onresize;
</script>
</body>
</html>
I think your best off using javascript for that specific effect. Floats and inline-block fill according to content if width isn't given.
var leftEle = document.body.querySelector(".left");
var rightEle = document.body.querySelector(".right");
window.onresize = function() {
var width = window.innerWidth || document.documentElement.clientWidth;
var lrWidth = width / 2;
leftEle.style.width = lrWidth;
rightEle.style.width = lrWidth
}
I would probably try to use a mix of fluid design (using percentages on layout) with media queries to get the document to look right at different screen sizes.
Maybe if you use float:left and display:inline-block on each div. See how that works.
Try creating a wrapper and nesting the 3 divs inside.
For example:
<div class="wrapper">
<div id="leftDiv"> div content </div>
<div id="centerDiv"> div content </div>
<div id="rightDiv"> div content </div>
</div>
The cleanest and less problematic way is comment out the space between the child elements in your html code and use the property display: inline-block on the child elements so they... well display inline without breaking the layout:
<div class="billboard grid">
<div class="grid__item"></div><!--
--><div class="grid__item"></div><!--
--><div class="grid__item"></div>
</div>
Then use the css :nth-child(n) psudo-selector to manually set the properties according to your needs
.grid {
width: 100%;
overflow: hidden;
height: 4rem;
}
.grid__item{
display: inline-block;
height: 100%;
}
.grid .grid__item:nth-child(1) {
background: color;
width: 10%
}
.grid .grid__item:nth-child(2) {
background: color;
width: 80%
}
.grid .grid__item:nth-child(3) {
background: color;
width: 10%
}
Here is an view for this example.
Okay so I've started making myself a website for a project that I'm working on. I'm currently sorting out the layout for my website but am stuck on the navbar.
I want my navbar to span 100% of the website, and horizontally/vertically center my buttons (images).
What I've got works ... but I'm just wondering if I'm doing it the most efficient way?
Here is my html.
<div id="wrapper">
<div id="header">
<div id="navbar_left">
</div>
<div id="navbar_buttons">
<img src="../Originals/button_home.png" />
<img src="../Originals/button_logo.png" />
</div>
<div id="navbar_right">
</div>
</div>
</div>
Here is my CSS:
#wrapper {
width: 100%;
margin: 0 auto;
padding: 0;
}
#header {
height: 123px;
width: 100%;
background-image: url(../../Originals/header_background.png);
}
#navbar_left {
width: 25%;
height: 123px;
float: left;
}
#navbar_buttons {
height: 123px;
width: 50%;
float: left;
line-height: 123px;
text-align:center;
}
#navbar_buttons::after {
content: ".";
visibility: hidden;
}
#navbar_right {
width: 25%;
height: 123px;
float: left;
}
Check out this jsFiddle for one example of how you could simplify your markup and CSS. It makes use of inline-block for your images.
HTML (using the header element):
<div id="wrapper">
<header>
<img src="http://placehold.it/200x100" />
<img src="http://placehold.it/200x100" />
</header>
</div>
And CSS:
header {
text-align: center;
background: #222;
}
header img {
display: inline-block;
vertical-align: bottom;
}
Note that a div is display: block by default, so you don't need to specify the width of 100%: it will fill the available width. Similarly, you don't need to declare a margin or padding as they aren't doing anything.
I'd also avoid declaring a fixed height if you can avoid it: just let your parent div expand to the height of its contents.
I've got a question regarding positioning of two objects: image and div. I want bg2.png image to stay under div. I keep encountering problem with image pushing div down by img's height. How do I avoid that?
I tried pushing down image with "top:" value but of course it leaves me with empty area above div. Also I tried adding negative "top:" value and relative position to "maincontent" div but again it left me with empty area, only difference was that this time it was under the div.
HTML:
<body>
<img src="./images/bg2.png" class="bgimg" />
<div id="maincontent">
</div>
</body>
CSS:
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
Thanks in advance.
edit - what I'm trying to achieve:
Click me!
2 solutions:
Change your HTML structure:
<body>
<div id="maincontent">
</div>
<img src="./images/bg2.png" class="bgimg" alt="some">
</body>
or make it as the background-image:
<body>
<div id="maincontent">
</div>
</body>
#maincontent {
background: url(./images/bg2.png) no-repeat 0 100%;
padding-bottom: height_of_image_in_px;
}
<style>
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
</style>
<body>
<div id="maincontent">
<img src="./images/bg2.png" class="bgimg" alt="some info about image here">
</div>
</body>
if you want that image inside the div use this code. or if you want make that image background of that div use css background property
as you can tell by the title I want to have a footer stick to the bottom. I know that there are a lot of topics on that. I already read through them. But I can not get it to work, because of my navigation, which is fixed to the top.
The layout looks like this:
<header class="navbar navbar-fixed">
</header>
<div class="content">
<div class="container">
</div>
<div class="clearfooter"></div>
</div>
<footer>
</footer>
And here is the CSS:
html, body {
height: 100%;
}
body {
padding-top: 40px; /* height of the navbar */
}
.navbar-fixed {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
}
.content {
margin-bottom: -30px;
min-height: 100%;
position: relative;
}
.clearfooter {
clear: both;
height: 30px;
}
#footer {
height: 30px;
position: relative;
}
I tried this tutorial. But the footer is not pinned to the bottom of the window it is further down (not in the viewport anymore). I already tried to fix it with additional padding/margin but nothing worked :(
Instead of adding padding to the body to push your page just create a push div to add some space between your fixed header and your content, like so:
HTML
<div class="push"> </div>
CSS
.push { height:40px; }
.push:before, .push:after {
display: table;
content: "";
zoom: 1;
}
.push:after {
clear: both;
}
Here is a demo:
http://jsfiddle.net/andresilich/fVpp2/1/show/
Edit here http://jsfiddle.net/andresilich/fVpp2/1/
Note: Added a bunch of break lines to illustrate the positioning of the footer.
(edit: jsfiddle cut my CSS, added it back.)
I did an experiment and it worked, here is the html:
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="contain">
</div>
<div class="footer">
</div>
</div>
</body>
and the css:
.header {
height: 100px;
background-color: red;
}
.contain {
height:1500px;
background-color: black;
}
.wrapper {
width: 960px;
background-color: yellow;
margin: 0 auto;
}
body {
margin: 0;
}
.footer {
height: 200px;
background-color: blue;
}
it has both header and footer fixed, I hope you get the clue out of it.