Image no longer responsive as put in table cell layout - javascript

I'm trying to center an image on a site. As I want it to be centered both horizontally and vertically I used a table/table-cell layout as following:
<div id="mainContainer>
<div id="horizon">
<img src="url">
</div>
</div>
Here mainContainer ist set to display: table and horizon is set to display: table-cell.
Unfortunately the image is no longer resizing proportionally as it becomes part of this structure. As soon as I move it into the table/table-cell divs it resizes to its original size (instead of being resized proportionally because of max-width: 100% and max-height: 100%)
see: http://jsfiddle.net/U8KcN/
EDIT:
My bad. I just tried to simplify the issue. I want to build a little slideshow for images. The problem here is that I do not know which sizes the images are (referring to someone else using the slideshow). So in simple terms I need a specific CSS that 1) centers the image vertically and horizontally in the div if its width and height are smaller than the div's dimensions, 2) resizes the image automatically if it is bigger than the div's dimensions (unnecessary to add, it is unknown whether it's width or height is bigger).
source: OP Comment

Every time I hear someone talk about the evils of using tables and then see them create a complete table structure out of DIVs with pretty much the same amount of markup -- sometimes more -- it really gets on my nerves.
By the way, have you ever developed a site for someone who wanted to do some of their own layouts in the content area using a CMS like Wordpress? The only way someone with almost no HTML knowledge can do that well is by allowing them to use table tools in Tiny MCE or another editor. So yes, tables are still important.
Recently, I had to do just that for a customer, but the images in the table cells were not responding and shrinking for smaller screen sizes. All I had to add to my CSS to care of that problem was:
table {
table-layout: fixed;
}
Now the images in the table cells are growing and shrinking accordingly, and the horizontal scrollbar is no longer appearing. Oh, of course you have to use percentages in your table width and td widths as well.

How about dropping that "CSS-table" stuff and doing it a bit easier?
<div style="width:auto;height:auto;margin:25%;text-align:center;vertical-align:middle">
<img src="URL">
</div>
At least, that’s how I would handle it...
EDIT:
Please note that I've put the CSS inline to show you what element should get what style. In production, you should — as a comment to this answer correctly stated — always separate style from code like. So, practically, you'll end up with something like this:
<style>
.centerimg {
width:auto;
height:auto;
margin:25%;
text-align:center;
vertical-align:middle
}
</style>
...
<div class="centerimg">
<img src="#">
</div>
EDIT 2:
Replying to the related comment, here's the update to make the image fit it's parent proportionally:
If your image has a bigger width than height...
<style>
...
img{
max-width:100%;
height:auto
}
</style>
or, if your image has a smaller width than height...
<style>
...
img{
max-height:100%;
width:auto
}
</style>
EDIT 3:
Looking at your fiddle, I came up with this which works like you want it to work:
<style>
*{
width:100%;
height:100%;
margin:0;
text-align:center;
vertical-align:middle
}
img{
width:auto;
height:100%;
}
</style>
I've forked your fiddle to show the updates: http://jsfiddle.net/LPrkb/1/
EDIT 3:
As the OP doesn't seem to be able to decide what he needs, I'm adding this final edit due to his latest comment.
You could also use a CSS background-image with "background-size:contain" on the "mainContainer" and be done with it... check http://jsfiddle.net/HGpfJ/2/ or look at this 100% working example taking a completely different approach which results in just the same effect/functionality:
<!DOCTYPE HTML>
<html itemscope="itemscope" itemtype="http://schema.org/WebPage">
<head>
<title>Example</title>
<style>
html,body{width:100%;height:100%;margin:0;padding:0}
#centerimg{
width:100%;
height:100%;
background:transparent url(http://oi42.tinypic.com/v9g8i.jpg) no-repeat scroll center;
background-size:contain;
}
</style>
<body>
<div id="centerimg"></div>
</body>
</html>
Let's face the facts: depending on where in the document structure you want to have the image "centered", there are more than a dozen of ways to do it.
If OP needs specific code, we will need the complete document structure from OP and not simply a "generalized" code-snippet which could be anywhere in whatever document structure.

Using tables (display: table-cell) for layout is a web development anti-pattern these days. Try using the <span> element with display: inline-block to vertically and horizontally center the image, as this method will work all the way back to IE 6. Also, you can change the image size to be a percentage if you want it to resize according to its container:
http://jsfiddle.net/hHWy8/1/
HTML:
<span class="horizontal">
<span class="vertical">
<img src="url" />
</span>
</span>
CSS:
span {
display: inline-block;
}
span.horizontal {
text-align: center;
width: 100%;
}
span.vertical {
vertical-align: middle;
border: 1px solid black; /* put a border on container for display purposes */
line-height: 1000px; /* this sets the vertical height */
overflow: hidden;
white-space: nowrap;
}
span.vertical img {
height: 50px; /* set your image height (could be percent) */
width: 50px; /* set your image width (could be percent) */
}
span.vertical br {
display: none;
}

To resize your image you could use this css:
html,body,div,img{
height:100%;
}
img { width:100%}
It sets the html and body's height to 100%, this is needed so the height of your page takes all available space

Related

HTML - CSS - How to left-align images in a centered and resizable parent

I have a lot of thumbnails in my page: I want them to be centered, but the last line looks awful while resizing and I have something like one or two orphan images floating in the center of the page.
The last line should be left-aligned.
How to do it?
I tried to insert another div with "margin:0 auto 0 auto;" but it doesn't work.
https://jsfiddle.net/4hw4fkm9/
What I try to have:
<div style="text-align:center;">
<img />
<img />
<img />
<img />
etc..
</div>
You should use CSS for this, not the HTML attribute "align", which is pretty old school. You can either float the images left, in which case they will stack to the left, or you could set all the images to display: inline-block, then use text-align: center on their container element (the div in this case).
Here are some references:
http://www.w3schools.com/css/css_float.asp
http://www.w3schools.com/cssref/pr_class_display.asp
I'm not sure if this is what you're looking for - as you mention that you both 'want them centered' but want them left-aligned, too.
What you can do is create another div that will act as a container, set width: 100% on the main div, set the width slightly lower on the container div and set margin: 0 auto; on the container. Then make the images relatively positioned with left:0;.
See Updated Fiddle Here. Is this what you're after?
EDIT: Re-Updated Fiddle for my attached comment. You can use set pixel values on the main and container div to account for the set pixel width of the thumbnails + any spacing that occurs.
Using the selectors in the fiddle.
.center {
text-align:center;
background-color:red;
margin:0 auto;
padding:0 20px;
}
.center:after{
content:'';
display:table;
clear:both;
}
img {
width: 100px;
height: 100px;
float:left;
}
From there the .center element would need a width of some multiple of 100px to include a fixed number of imgs. I added padding to make it look closer to the picture you provided.

Vertical Alignment

Please take a look at this: http://sources.freehosting.bg/landing.html
I am trying to vertically align #content so it looks good on larger (1920x1200) and smaller (1024x768) resolutions. By that I mean it does not have a scrollbar.
As you see there is plenty of free space so a scrollbar is unneeded.
The only solution I came up with is to calculate the height of #content with JS and to set a padding, but I realize it is the lamest possible solution.
Please advise me on how to achieve that.
See if this fiddle is what you are looking for. Simple solution IMO.
It works by forcing the containing div to behave as a table-cell, and making use of the vertical-align: middle style. It doesn't require you to know the heights of any elements at all.
Code used in the fiddle are below.
HTML:
<div class="a">
text inside div a
<div class="b">
text inside div b
</div>
</div>
The important styles are:
display: table-cell
vertical-align: middle
The rest are only there for demonstration. CSS:
div.a {
border: 1px solid red;
}
div.b {
border: 1px solid blue;
height: 200px;
display:table-cell;
vertical-align:middle;
}
If your content height is fixed put a div before the content
<div id="distance"></div>
<div id="content">
Vertically centered :D
</div>
and style it like:
html, body {
height:100%;
margin:0;
padding:0;
}
div#distance {
width:1px;
height:50%;
margin-bottom:-300px; /* half of website height */
float:left;
}
div#content {
text-align:left;
margin:auto;
position: relative;
width: 950px;
height: 600px;
clear: left;
}
​
The only way I know of that works using pure CSS, no JS and no hacks requires you to know the height of the thing you're trying to position:
<html>
<head>
<style type="text/css">
/* Give your document height */
body, #content {
height: 100%;
}
/* Give your element height */
.thing {
width: 20px;
height: 300px;
background: #000;
}
/* Position thing */
#content .thing {
position: absolute;
top: 50%;
margin-top: -150px; /* half the height of the thing */
}
</style>
</head>
<body>
<div id="content">
<div class="thing"></div>
</div>
</body>
</html>
EDIT: Updated height of item, container id. Still works just fine.
There is one way to do this without javascript and without knowing the height of the content - but purists will not like it. Then again, sometimes it doesn't matter if it's not approved by the trendy people. Sometimes all you need is to get the job done because you boss wants it that way.
And the solution is: use a table (told you purists wouldn't like it). Do layout the old school way and abuse the fact that HTML specifies lots of capabilities to tables.
A table cell is the only HTML element that has a vertical alignment attribute that does what most people expect it to do. Just give the table 100% width and height (so that is expands with the window size) and use cell alignment to position the content you want.
I've only ever had to use this trick once and it still makes me feel dirty* but when you really need it it works better than anything else.
*note: I'm a purist myself but understand that sometimes a man's got to do what a man's got to do.

Overlaying one div over another, but not knowing the size of the div

I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.
Solved here:
How to overlay one div over another div
So, here is my HTML:
<div class="container">
<div class="overlay"></div>
<div class="content"></div>
</div>
In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).
See my example on jsFiddle
The overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.
One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.
Is there any way of solving this problem in CSS?
You could set the position to absolute and then set all 4 positioning values to 0px which will make the box expand. See a demo here: http://jsfiddle.net/6g6dy/
This way you dont have to worry about recalculating things if you want padding on the overlay or the container (like you would if you used actual height and width values), because its always going to be adjusted to the outer dimensions of the box.
It's not possible to do this because:
The overlay is not contained by anything to restrict it's size (since there is no height/width applied to the container).
The size of the content div can change as content loads (since it has no fixed width/height).
I solved this by using JavaScript*. Eg.
function resizeOverlay() {
$('.overlay').css({
width: $('.content').width()
height: $('.content').height()
});
}
$('.content').find('img').on('load', resizeOverlay);
*Code not tested.
Hey are you looking like this : http://tinkerbin.com/Vc4RkGgQ
CSS
.container {
position:relative;
background:blue;
color:white;
}
.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}
I do not know what you are exactly trying to do but this might work:
container must be relative: anything from static
overlay and content are absolute :move top/left in first non static parent; no flow.
Give same top/left to be on top and higher z-index for upper element.
See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/
Are you trying to do as mentioned in above Demo?
CSS:
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay{
z-index: 10;
background: #ccc;
}
You can indeed do this without JavaScript. Your problem is that #container element has 100% width relative to the whole page. To fix this you can:
a) position it absolutely,
#container {
position: absolute;
}
b) make it float or
#container {
float: left;
}
c) make it display as table cell
#container {
display: table-cell;
}
One of the above is enough, you don't need to apply all. Also you should not position .content absolutely as this will prevent #container to have the same width/height.
If you are worried about images loading after the height is set you can go ahead and set the dimensions of the image in the containing div and use the padding-bottom hack. This way when the browsers paints over the page it knows how big the image will be before it loads.

Reverse HTML Layout

I will try to keep this as short and specific as I can.
This is what I need to display:
-----------------------------------------
#div1
-----------------------------------------
-----------------------------------------
#div2
-----------------------------------------
This is how I need the HTML structure to be:
<div id="div2">...</div>
<div id="div1">...</div>
The reason I need the second div to be higher in the HTML structure is because when the page is printed in Firefox, I have to use fixed position for an image that is contained in "div2". If "div2" isn't at the top of the structure, the image will be printed on the second page, and therefore cannot be moved to the first page using fixed position (as far as I know).
I cannot for the life of me think how I can do this with CSS2 (maybe CSS3?). I also looked into "Any Order Column" but I don't think that will work since I'm dealing with rows, not columns.
Any help would be appreciated :)
Edit: #div2 cannot be positioned absolutely because #div1 needs to be able to collapse, and therefore #div2 needs to follow.
For this you can use css3 display:box property for this. Write like this:
.outer{
-moz-box-direction: reverse;
-moz-box-orient: vertical;
display: -moz-box;
}
Check this http://jsfiddle.net/phSfD/2/
You can do it like this.
HTML:
​<div class="outer">
<div class="a"> [div a] </div>
<div class="b"> [div b] </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
CSS:
.outer { position:relative; }
.a { position:absolute; top:100%; }
​Test it out: http://jsfiddle.net/phSfD/1/
The benefit of this approach is you don't need to know the sizes of either element for it to work.
This works because the height of the outer element is determined by the height of its contents. Since div A is absolutely positioned, it doesn't affect the height of its container, so the container's height is the same as div B's height. Setting A's top to 100% (of the container's height) means it will appear just below the container (and therefore just below div B).
One way to solve this is to set absolute positioning of the two divs. You'll need to have a parent with relative position and then set the absolute position of the two divs: div1 above the div2.
When you do so, remember to indicate in the <style> tag that these styles only apply to the on-screen rendering and provide a separate set of styles for printing, so that on print div would would appear below div2.
When you set position: fixed on an element, it is positioned relative to the browser window, irrespective of its container.
So, this
#div1 img{ position: fixed }
and this
#div2 img{ position: fixed }
will render the same result. You can write them in any order.
You can use display: table-*-group properties for vertical reordering of blocks of arbitrary height (dynamically resized in particular):
<style>
#example {display: table; width: 100%; }
/* Will display at the bottom of pseudo-table */
#block-1 {display: table-footer-group; }
/* Will display in the middle */
#block-2 {display: table-row-group; }
/* Will display at the top */
#block-3 {display: table-header-group; }
</style>
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
</div>
Works in all browsers including IE8+ (there is a small limitation in IE8).
For IE6/7 (if they do matter), elements can be swapped with JavaScript.
For details, see my article.

Force <div></div> to the bottom of the web page centered

I have a <div>...</div> section in my HTML that is basically like a toolbar.
Is there a way I could force that section to the bottom of the web page (the document, not the viewport) and center it?
I think what you're looking for is this: http://ryanfait.com/sticky-footer/
It's an elegant, CSS only solution!
I use it and it works perfect with all kinds of layouts in all browsers! As far as I'm concerned it is the only elegant solution which works with all browsers and layouts.
#Josh: No it isn't and that's what Blankman wants, he wants a footer that sticks to the bottom of the document, not of the viewport (browser window). So if the content is shorter than the browser window, the footer sticks to the lower end of the window, if the content is longer, the footer goes down and is not visible until you scroll down.
Twitter Bootstrap implementation
I've seen a lot of people asking how this can be combined with Twitter Bootstrap. While it's easy to figure out, here are some snippets that should help.
// _sticky-footer.scss SASS partial for a Ryan Fait style sticky footer
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -1*($footerHeight + 2); /* + 2 for the two 1px borders */
}
.push {
height: $footerHeight;
}
.wrapper > .container {
padding-top: $navbarHeight + $gridGutterWidth;
}
#media (max-width: 480px) {
.push {
height: $topFooterHeight !important;
}
.wrapper {
margin: 0 auto -1*($topFooterHeight + 2) !important;
}
}
And the rough markup body:
<body>
<div class="navbar navbar-fixed-top">
// navbar content
</div>
<div class="wrapper">
<div class="container">
// main content with your grids, etc.
</div>
<div class="push"><!--//--></div>
</div>
<footer class="footer">
// footer content
</footer>
</body>
If I understand you correctly, you want the toolbar to always be visible, regardless of the vertical scroll position. If that is correct, I would recommend the following CSS...
body {
margin:0;
padding:0;
z-index:0;
}
#toolbar {
background:#ddd;
border-top:solid 1px #666;
bottom:0;
height:15px;
padding:5px;
position:fixed;
width:100%;
z-index:1000;
}
I just want to be clear on what your saying here:
bottom of the web page (the
document, not the viewport)
Naturally, a div will be at the bottom of the "document", depending on your layout.
If it's not going to the bottom of a document, or not paying attention to how tall your columns are, is it because your floating? Clear: both; would be in order to solve that.
The sticky footers are what I think your looking for, but when you say document, and not the viewport, I get a bit confused. Sticky footers typically do this: Watch for short pages, and if its shorter than the view port, the sticky footer tacks the footer div to the bottom.
Here's some sticky footers (there's gajillions of em, but this is in order of my favorites):
http://www.cssstickyfooter.com/
http://css-tricks.com/sticky-footer/
http://ryanfait.com/sticky-footer/ (listed previously)
http://brassblogs.com/blog/sticky-footer
http://alistapart.com/ (theres one there I just can't find it)
Maybe if you gave a quick illustration or were a bit more specific on what you want? Hope this helps :D
-Ken
Try this: Fixed footers without Javascript. I don't know if it will be a perfect fit, but I think it's close enough.
You can just give the div a:
clear:both; text-align:center;
and put the div as the last element before the closing body statement. That would force it to be the last element without anything next to it.
Your best bet is to use javascript to determine the size of your page. You can get the height with window.innerHeight with non-IE browsers and document.documentElement.clientHeight with IE. With that value you should be able to absolutely position your element on the page setting top to that value minus the height of your div. If the height of your div is variable you will need to check the div's offsetHeight property to get the real height.
For centering use the following example:
<!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>
<style>
.wrapper
{
width: 100%;
padding-left: 50%;
}
.test
{
width: 400px;
margin-left: -200px;
border: 1px solid black;
padding-left: -200px;
}
</style>
</head>
<div class="wrapper">
<div class="test">This is a test</div>
</div>
</html>
You have a wrapper div around the div you want centered. The wrapper div has a width of 100% the inner div has a width set to whatever you want it to be. Give the wrapper div a left padding of 50% and the inner div a negative left margin equal to half of its width.

Categories