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;
}
Related
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.
I'm trying to set an img width to 100% of it's container, the container changes size based on screen width, when the image is lower than its original size, i want to set the img width to 100%, however when the image-container is larger than the original width of the image, I want th position the image centrally inside of the container.
Any ideas?
.server-listing {
width: 100%;
height: auto;
margin-bottom: 10px;
}
.server-listing .image {
text-align: center;
}
.server-listing .image img {
width: 100%;
height: auto;
}
My current CSS, pretty basic really, I need direction - thanks guys!
<?php foreach($this->model->data['servers'] as $server) { ?>
<div class="server-listing">
<div class="image">
<img src="x.jpeg">
</div>
</div>
<?php } ?>
My phtml page
(NOTE: The image can be literally any size)
max-width is the CSS property you should be using!
.server-listing {
width: 100%;
height: auto;
margin-bottom: 10px;
background-color: lime;
}
.server-listing .image {
text-align: center;
}
.server-listing .image img {
max-width: 100%;
height: auto;
}
<div class="server-listing">
<div class="image">
<img src="http://placehold.it/500" />
</div>
</div>
You probably have to enter fullscreen mode to really play with this!
Please try max-width:100%; instead of width.
The max-width property is used to set the maximum width of an element.
This prevents the value of the width property from becoming larger than max-width.
See how it works for both small and large images:
.server-listing {
display: inline-block;
max-width: 100vw;
height: auto;
}
.server-listing .image {
text-align: center;
margin-bottom: 10px;
background-color: gray;
}
.server-listing .image img {
max-width: 95vw;
height: auto;
}
<div class='server-listing'>
<div class='image'>
<img src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xap1/v/t1.0-1/c0.0.50.50/p50x50/10342461_799073063461766_6339462327156793350_n.jpg?oh=169a0d52644a444c2f723b1d1ec6c64b&oe=558BEB09&__gda__=1435700277_205a1d24a106c52496fe0e3eb20470e6' />
</div>
<div>
<div class='server-listing'>
<div class='image'>
<img src='http://www.zastavki.com/pictures/1680x1050/2010/Animals_Cats_Cat_023761_.jpg' />
</div>
</div>
I think you have to add margin and display:
.server-listing .image img
{
width: 100%;
height: auto;
margin: 0px auto;
display: block;
}
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'm having some trouble figuring out how to do this. I want to have a wrapper so my site is centered, but one of the header elements needs to stretch all the way to the right edge of the page, but without expanding the width of the page and adding scrollbars.
See here: http://i49.tinypic.com/6rkaxc.jpg (new poster so can't add image)
The blue outline represents the centered wrapper, and the orange box is the header div that I'm trying to get to fit to the right side of the page. I've got it to work using 100% width but it creates a horizontal page scroll since it's making it the same width as it's parent. I want it to expand for users that have higher resolutions so it always fits snug to the right side. I hope this makes sense.
my code looks something like...
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
CSS:
div#wrapper {
margin: 0 auto;
width: 1020px;
position: relative;
}
div#header {
height: 150px;
position: absolute;
left: 510px;
width: 100%;
}
div#left {
width: 510px;
float: left;
}
div#right {
width: 100%;
float: left;
}
I'm pretty new to this stuff so if you notice any errors here or bad practices please point them out! Thanks for the help! :)
Since you want your content to be fixed width, a strategy would be to have containers for both left and right contents. This allows you to use width: 100% for the header which will extend to the end without scroll bars. You then make the header relative to the right container. Here is a jsfiddle you can play with.
Note I made the widths smaller so it would fit in my jsfiddle window.
HTML:
<body>
<div id="wrapper">
<div id="leftContainer">
<div id="left">
This is left
</div>
</div>
<div id="rightContainer">
<div id="header">
This is a header
</div>
<div id="right">
This is right
</div>
</div>
</div>
</body>
CSS:
div#wrapper {
text-align: center;
width: 100%;
position: relative;
white-space: nowrap;
overflow-x: scroll;
}
div#header {
z-index: 1000;
height: 150px;
position: absolute;
left: 0;
width: 100%;
background: green;
}
div#leftContainer {
float: left;
width: 50%;
height: 500px;
display: inline-block;
}
div#left {
float: right;
width: 260px;
height: 300px;
background-color: purple;
}
div#rightContainer {
position: relative;
float: right;
width: 50%;
height: 500px;
display: inline-block;
}
div#right {
width: 260px;
height: 300px;
background-color: yellow;
}
Try this one. I changed the wrapper width to 80%. Not sure if that's ok. But I works well when expanding the page. Moved the header outside of wrapper and also added background color for clarity.
Note 1: right DIV's margin-top is same size as header DIV's height.
HTML
<div id="outerWrapper">
<div id="header">
Header
</div>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</div>
</div>
CSS
div#wrapper {
margin: 0 auto;
width: 80%;
height: 100%;
position: relative;
background-color: #CCCCCC;
}
div#header {
height: 150px;
float: right;
position: absolute;
left: 50%;
width: 50%;
background-color: yellow;
}
div#left {
width: 50%;
height: 100%;
float: left;
background-color: red;
}
div#right {
width: 50%;
height: 100%;
float: left;
margin-top: 150px;
background-color: blue;
}
Hope this helps.
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.