I have a site which should be suitable for mobile visitors, and therefore should scale to the dimensions of the user's screen, both in width and height. Furthermore, I have 2 navigation menus (1 left, 1 right), and some fixed info on the bottom (like a footer). All these parts contain images that should be scaled to fit into the menu's dimensions. Concretely, the page is something like (adding a random image that is too big by default):
<body>
<table class="wholepage">
<tr class="top">
<td class="left">
<table>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
</table>
</td>
<td class="middle">Middle content</td>
<td class="right">
<table>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
</table>
</td>
</tr>
<tr class="bottom">
<table>
<tr>
<td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
<td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
</tr>
</table>
</tr>
</table>
</body>
With the following CSS:
.wholepage {
width: 100%;
height: 100%;
}
.wholepage img {
width: 100%;
height: 100%;
}
.top {
height: 80%;
}
.left, .right {
width: 15%;
}
.middle {
width: 70%;
}
.bottom {
height: 20%;
}
Like that, the width of the page adapts itself perfectly, sticking to the 15%-70%-15% distribution between left-middle-right. However, vertically, all the images refuse to scale. How can I get the page to fit to the 80%-20% distribution for top-bottom?
EDIT: Here's a way to see it, if you fill this in in http://www.w3schools.com/css/tryit.asp?filename=trycss_default
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
}
.wholepage {
width: 100%;
height: 100%;
}
.wholepage img {
width: 100%;
}
.top {
height: 80%;
}
.left, .right {
width: 15%;
}
.left {
position: fixed;
top: 0px;
left: 0px;
}
.right {
position: fixed;
top: 0px;
right: 0px;
}
.middle {
width: 70%;
margin-left: auto;
margin-right: auto;
}
.bottom {
height: 20%;
position: fixed;
bottom: 0px;
}
</style>
</head>
<body>
<div class="wholepage">
<div class="top">
<div class="left">
<table>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
</table>
</div>
<div class="middle">Middle content</div>
<div class="right">
<table>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
</table>
</div>
</div>
<div class="bottom">
<table>
<tr>
<td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
<td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
</tr>
</table>
</div>
</div>
</body>
Thanks!
Don't use width & height, just use max-width:
.wholepage img {
max-width: 100%;
}
IE < 8 scales images poorly and to get good quality scaling you need to use AlphaImageLoader with the SizingMethod set to scale. Probably the easiest way to do that is with Drew Diller's DD_BelatedPNG library. Be aware there are performance implications to using the AlphaImageLoader. Also, IE6 doesn't support max-width so use width: 100% in a conditional comment if you need to support IE6.
Also, I can say enough about Ethan Marcotte's A List Apart Article on Responsive Design (which is an excerpt from also excellent his book.)
First; don't use tables for styling. Use divs, or even better the html5 tags like <header> and <footer> and such.
To ensure correct handling of height with percentages, you should set html and body to 100% height as well, like:
html, body { height: 100%; }
I ended up hacking it. Unless someone knows a better way, here's what I did:
function fixHorizontalDimension(){
maxHeight = window.innerHeight * [% height desired] * 0.9;
imgs = document.getElementsByClassName([classname of wrongly sized objects]);
for(i=0; i<imgs.length; i++){
imgs[i].style.height = maxHeight;
}
}
Since the site is only to be used personally, and using a mobile browser, this fix does the job. Resizing (e.g. switching from portrait to landscape) doesn't work though.
Related
What I am trying to do is to have 4 images align in a cross like pattern. I was thinking of using a table, but I do not want the corners, which will be while space to be the same as the image. And I want to be able to use different size images without having the page change if the image is a different dimension. I do not know how to approach this.
Below is an image of a rough sketch of what I am trying to do. One thing is that the images might be taller or longer.
Thanks in advance.
One solution would be to create invisible div elements that occupy the same height as your images, and inject them in the correct locations in the HTML:
div, img {
float: left;
width: 33%;
height: 100px;
}
See the fiddle with same image sizes here.
You can slightly modify this to use variable heights for your images by wrapping each row in its own div, then setting them height of each of those:
.top *, .middle *, .bottom * {
float: left;
width: 33%;
height: 100%;
}
.top, .bottom {
height: 100px;
}
.middle {
height: 200px;
}
See this fiddle for variable heights.
Update:
There's also the option to change the 'inset' of the middle row by giving the div a smaller width and adding margins to the two images in the middle row:
.middle div {
width: 20%;
}
.middle img:nth-of-type(1) {
margin-left: 6.5%
}
.middle img:nth-of-type(2) {
margin-right: 6.5%
}
Fiddle demonstrating this.
You can always play around with the width of the invisible div and the margins in order to get the desired output :)
Note that I've used widths that add up to 99% in these examples. You can get more specific if you'd like, but you'll never be able to reach 100% ;)
Hope this helps!
Here is another option using Flex-box
this solution can accommodate images of different sizes
and you can read more about it here
.wrapper {
font-size: 150px;
/* <-- adjust this to proportiantly scale everything */
outline: 1px dotted red;
}
img {
width: 1em;
}
.container,
.row-container {
display: flex;
width: 3em;
}
.container {
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.row-container {
justify-content: space-between;
flex-direction: row;
}
<div class="wrapper">
<div class="container">
<div>
<img src="http://placehold.it/100x150">
</div>
<div class="row-container">
<div>
<img src="http://placehold.it/150x120">
</div>
<div>
<img src="http://placehold.it/170x110">
</div>
</div>
<div>
<img src="http://placehold.it/190x200">
</div>
</div>
</div>
And here is a table solution
which can also use images of varying size with radius corners
td {text-align:center;vertical-align:center;}
td img {border-radius:4px;}
<table cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td><img src="http://placehold.it/310x120"></td>
<td></td>
</tr>
<tr>
<td><img src="http://placehold.it/175x110"></td>
<td></td>
<td><img src="http://placehold.it/300x150"></td>
</tr>
<tr>
<td></td>
<td><img src="http://placehold.it/280x100"></td>
<td></td>
</tr>
</table>
I was trying to make image table that fill window.
The following is my full source:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ready</title>
<style type="text/css">
html,
body {
min-width: 2048px;
height: 100%;
}
.player_buttons {
table-layout: fixed;
height: 100%;
width: 100%;
}
.playerimg img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<table class="player_buttons">
<tr class="team" id="team_A">
<td class="playerimg">
<img src="../assets/profiles/1.jpg" />
</td>
<td class="playerimg">
<img src="../assets/profiles/2.png" />
</td>
<td class="playerimg">
<img src="../assets/profiles/3.jpg" />
</td>
</tr>
<tr class="team" id="team_B">
<td class="playerimg">
<img src="../assets/profiles/4.jpg" />
</td>
<td class="playerimg">
<img src="../assets/profiles/5.jpg" />
</td>
<td class="playerimg">
<img src="../assets/profiles/6.jpg" />
</td>
</tr>
</table>
</body>
</html>
It is work when the images are small enough,
But in the case of image has big size, table (=.player_buttons) ignore its height (it over body and HTML's height).
I think image keep its aspect and min-size is problem.
How can I adjust images to their cell size?
Thanks.
ADD.
.playerimg img {height: 500px;}
-> it works (but I don't want to set height to 500px)
.playerimg img {height: 10%;}
-> ignore height.
html,body {
margin:0px;
}
.player_buttons {
table-layout:fixed;
height:100vh;
width:100%;
margin:0px;
}
.playerimg {
height:50vh;
}
.playerimg img {
height:100%;
width:100%;
}
Since you want to fit your images within your browser window, vh is a good option. This code isn't responsive but I hope it is what you're looking for.
What i would like to suggest you is that dont take min-width of body as 2048px because it is spanning more area in some screens,instead you should use min-width as 100% as will fit perfectly in every screen also take max-width and max-height attribute in your img tag,in that way height of your image will not overflow.Just paste the following code inside your <style></style> tag instead of your code.
html, body {
min-width: 100%;
height: 100%;
}
.player_buttons {
table-layout: fixed;
height: 100%;
width: 100%;
}
.playerimg img {
max-width: 100%;
max-height: 100%;
}
I hope it helps.Comment for further query
I am wanting to have a page with a fixed-height header and footer, and with the contents taking 100% of the remaining height.
I currently have the behavior I desire working in Chrome, but in Internet Explorer, the row will grow beyond the desired height, forcing the footer off of the page (as evidenced by the scrollbar on the page). I can't find a fix for the Internet Explorer problem for the life of me.
Here is the desired behavior (in Chrome), note the row does not expand to fit contents, and instead has the ability to scroll:
Here is the undesired behavior I am experiencing with Internet Explorer:
Here is the approach I am taking:
<head>
<style>
body {
margin: 0px;
table-layout:fixed;
}
table {
border-collapse:collapse;
}
table, tr, td {
overflow:hidden;
padding: 0px;
}
</style>
</head>
<body>
<table style="width:100%; height:100%; top:0px; bottom:0px;">
<!--HEADER-->
<tr style="height:100px;">
<td colspan="2" style="background-color:#ff0000; text-align:center;">
<h1>Piano Festival</h1>
</td>
</tr>
<!--CONTENTS-->
<tr>
<!--LEFT CONTENT PANE-->
<td style="background-color:#ff00ff;">
<div style="height:100%; overflow-y:scroll;">
<form>
<!--Form contents here-->
</form>
</div>
</td>
<!--RIGHT CONTENT PANE-->
<td style="background-color:#00ffff; width:100%;">
</td>
</tr>
<!--FOOTER-->
<tr style="height:100px;">
<td colspan="2" style="background-color:#00ff00";>
</td>
</tr>
</table>
</body>
I'd prefer to avoid using any Javascript or CSS extensions. How can I work around this problem so that I get the same behavior in IE that I have in Chrome right now (scrollable contents instead of a growing row height)?
I also highly recommend not using tables for this. Here is a refactored version using divs to get you started.
HTML:
<div class="header">
<h1>Piano Festival</h1>
</div>
<div class="registration">
...lots of stuff....
</div>
<div class="main">
Main section
</div>
<div class="footer">
footer
</div>
And here's the CSS:
body, html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.header {
margin: 0;
background: darkgreen;
height: 10%;
}
.registration {
background: deeppink;
width: 20%;
overflow: auto;
height: 80%;
float: left;
}
.main {
display: inline-block;
}
.footer {
background: blue;
height: 10%;
position: fixed;
width: 100%;
bottom: 0;
}
Here's a working demo.
I'm struggling to get my 3 tables to be centered in the page.
Here's a picture of what it looks like currently:
Basically (from look at the image), I want the second/middle table ("Work" table) to be the only table in center, and the other 2 tables ("About" and "Collaborate" tables; left and right from the middle, respectively) to have spread out a bit (using margin, I would assume).
Here's my HTML:
.fixedWidth2 {
margin: 0 auto;
width: 1000px;
height: 350px;
background-color: green;
border: 2px solid yellow;
}
.tableProp1 {
width: 200px;
float: left;
margin-left: ;
}
.tableProp1 tr td {
height: 200px;
color: red;
}
.tableProp2 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp2 tr td {
height: 200px;
color: pink;
}
.tableProp3 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp3 tr td {
height: 200px;
color: blue;
}
<div id="mainContent">
<div class="fixedWidth2">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
<!-- Fixed Width 2 DIV for Main Content DIV -->
</div>
<!-- mainContent DIV -->
Since you are using fixed widths for your tables and you're floating them, I would wrap them in a container, set the width on that to match all three tables+margin and set margin: auto on the container
.table-wrapper{
width: 680px;
margin: auto;
}
JSFIDDLE
Alternatively you can just use display: inline-block instead of float:left and add text-align: center to .fixedWidth2
ALT FIDDLE
I would not use <table> at all... table are good for tabular content, not for templating....
I would use DIV or even HTML5's <article> and <section>.
Think also about SEO, <h2> is a better mirror to your website semantic toward search engines than table's TH ...
To center three elements you can simply set them display: inline-block; with some vertical-align, than just setting the <div class="centered"> to text-align: center; will center-align your inner elements. You can also use float:left; but I've not covered that example.
http://jsbin.com/roruqo/1/
<div id="container">
<div id="slider"></div>
<div id="mainContent">
<div class="centered">
<div class="fixedWidth2">
<h2>About</h2>
<p>Learn more about me and my accomplishm...</p>
</div>
<div class="fixedWidth2">
<h2>Work</h2>
<p>I tend to get involved with a lot of d...</p>
</div>
<div class="fixedWidth2">
<h2>Collaborate</h2>
<p>Have a brand new or idea of a project?...</p>
</div>
</div>
</div><!-- mainContent DIV -->
</div>
h2, p{
padding:15px;
margin:0;
}
#container{
width:960px;
margin:0 auto;
background:#eee;
}
#slider{
background:blue;
height:400px;
}
.centered{
text-align:center;
}
.centered > div{
text-align:left;
}
.fixedWidth2{
min-height:170px;
background:#ddd;
display:inline-block;
vertical-align:top;
width: 250px;
margin: 15px;
}
.fixedWidth2 h2{
text-align:center;
background:#aaa;
}
<div id="mainContent">
<div class="fixedWidth2">
<div class="row">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
</div>
</div>
add this style in style sheet
.row {
margin: 0 auto;
width: 680px;
}
add "row " division and apply this style then check it's working properly.
I'm trying to make a simple web interface with a table with two columns:
Left: width 400px
Right: the rest of avalaible width
I think that is very simple, but i can't do it. The more closer that I were from the success was with this code
HTML:
<table id="container">
<tr>
<td style="width: 20%">
<div id="sidebar" style="z-index:1;"></div>
</td>
<td style="width: 80%">
<div id="map_canvas" style="z-index:10;"></div>
</td>
</tr>
</table>
CSS:
#map_canvas {
position: absolute;
min-height: 99%;
height: auto !important;
height: 99%;
_height: 99%;
width: 80%;
}
but always appears the horizontal scroll bar and the map overflows the width of the window
Thanks, and sorry about my bad english...
The scroll is probably for the default margin of the body and also the border of your table. You can try this
HTML
<table id="container">
<tr>
<td style="width:400px">
<div id="sidebar" style="z-index:1;"></div>
</td>
<td>
<div id="map_canvas" style="z-index:10;"></div>
</td>
</tr>
</table>
CSS
* {
padding:0;
margin:0;
}
table {
width:100%;
border-collapse:collpse;
border:0 none;
}
Review this Demo http://jsfiddle.net/pTZKa/
Edit
As an asnwer for your commentary : That happens because you have positon:absolute so he is searching for his closest parent with a non absolute position declared to be positioned. To fix that add this on the css:
table td {
position:relative;
}
New Demo http://jsfiddle.net/pTZKa/4/