i am new to designing html pages..i have searched for answer through the day.. but no luck.. i have problem in fixing my html page height fit to the browser . i am developing web page with the help of apache tiles for page layout. so in my layout i will have header , body and footer. below is my tiles layout jsp
<body>
<table width="100%" height="100%" align="center">
<tr height="20%">
<td><tiles:insertAttribute name="header" /></td>
</tr>
<tr height="60%">
<tiles:insertAttribute name="menu" ignore="true" />
<td align="left">
<tiles:insertAttribute name="body" />
</td>
</tr>
<tr height="20%">
<td><tiles:insertAttribute name="footer" /></td>
</tr>
</table>
</body>
and i have css defined for body and table as follows
body {
background-color: #f0f0f0;
width: 100%;
height: 100%;
margin: 0%;
padding: 0%;
}
table {
table-layout: fixed;
overflow: auto;
}
i want to design my pages with percentage and i dont want to use pixels for scaling issues on different screen resolution.
when i load the page.. the table height shrinks with respect to the body page content size.. for e.g - if i have body page size of two line. then my footer moves up (looks weird) . i would like to fix header, body and footer with 20 % 60% and 20% respectively, and this should be fixed.
Thanks in advance
Related
First, I'm new to mobile development, so apologies in advance for what might be a simple question. But I've researched this for a couple of days and just can't seem to get it to work.
I can't get a particular DIV to render at the appropriate height when I switch to a mobile view. All the other divs work fine in both desktop and mobile. The div in question looks fine in the desktop view but not in mobile.
Here's a link to the page: http://echoflyfishing.com/2016
The div in question is the "DOUBLE HAND". I want it the same height as the "SINGLE HAND" above it. No matter what I do, I can't get it to size correctly. I know there's a simple solution but I've tried everything I can think of in terms of height and am stumped.
Here's the relevant HTML:
<div class="sh_container_m">
<table cellpadding="0" cellspacing="0" class="sh_container_table_m">
<tr>
<td style="font-size: 3.5vw;padding-top: 2vw; padding-bottom: 2vw;"><p>Single Hand</p></td>
</tr>
</table>
<div class="sh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the single hand image carousel will be</td>
</tr>
</table>
<div class="dh_container_m">
<table cellpadding="0" cellspacing="0" class="dh_container_table_m">
<tr>
<td style="font-size: 3.5vw;"><p>Double Hand</p></td>
</tr>
</table>
<div class="dh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the double hand image carousel will be</td>
</tr>
</table>
</div>
</div>
</div>
</div>
And the CSS:
.dh_container_m
{
display: block;
visibility: hidden;
margin: 0 auto;
width: 100vw;
text-align: center;
}
.dh_container_table_m
{
margin: 0 auto;
width: 100vw;
border: none;
background-color: #fbaa27 !important;
}
Did you mean for your dh_images_container_m div to be nested inside the sh_images_container_m div? It is going to take on it's "parents" properties which may also be contributing to some of your sizing issues.
On a side note, you have your links to the css files in the header as type="text". They should be type="css/text".
use px not vw because it's percentage and define the width of both divs as you want simple one more suggestion is use bootstrap css framework it's better for you you can make responsive site easily with the help of it.
I try to Shrink an Iframe to show whole page in a small frame!
iframe {
width: 1108px;
height: 710px;
-webkit-transform:scale(0.25);
-moz-transform:scale(0.25);
-o-transform:scale(0.25);
transform:scale(0.25);
}
<table border =1>
<tr>
<td>
<iframe src ="http://example.com"/>
</td>
</tr>
</table>
this code works but I have a problem in Table!
when I put the iframe in a table , the cell size become as the real iframe size (1108*710) but the iframe is shown small because of the codes!
how can i fit the i frame to the cells?
The only way I would see to approach what you want it to use a em trick:
iframe {
width: 69.250em; /* 1108px = 69.250em */
height: 44.375em; /* 710px = 44.375em */
font-size: 0.25em; /* base scale: 0.25 */
}
<table border=1>
<tr>
<td>
<iframe src="http://example.com"/>
</td>
</tr>
</table>
But your iframe content will render as you were using a 277px * 177.5px resolution.
Consider the following code. How can I implement the table in a responsive manner such that on a large screen the table height and width is equal to the sum if the images (e.g. 600x600) and on a smaller screen such as a mobile device the table shrinks the images proportionally. For example, on an iPhone where the screen width is 320 pixels I want the table to scale down to 320x320 while preserving the image aspect ratio.
<HTML>
<head></head>
<body>
<div id="header"></div>
<div id="table"
<table style="height: 100%">
<tr>
<td>
<img id="topleft" src="300x300.png">
</td>
<td>
<img id="topright" src="300x300.png">
</td>
</tr>
<tr>
<td>
<img id="bottomleft" src="300x300.png">
</td>
<td>
<img id="bottomright" src="300x300.png">
</td>
</tr>
</table>
</div>
<div id="footer"></div>
</body>
</html>
Here's an image showing how the above code renders in a mobile Safari browser.
You can set table width to 100% and td and img widths to rougly 49% (to keep the border) if you have 2 images per row. Additionally, if you might have images smaller than the possible screen size, use something like img {max-width: 49%;}
Adaptive table dimension can be tricky. First thing I would recommend is to put table inside of a div with attribute as position: relative and then control your margins and size this way.
<div id="myCont" style="">
<table>
<tr>
<td> Hello! </td>
<td> Aloha! </td>
</tr>
<tr>
<td> Goodbye! </td>
<td> Aloha! </td>
</tr>
</table>
</div>
Then some css:
#myCont {
position: relative;
width: 100%;
}
#myCont table {
width: 100%;
}
#myCont table tr td {
width: 50%;
position: relative;
}
.imgCls {
width: 100%;
}
If you then set table to <table cellspacing="0" cellpadding="0">, you're going to have a lot easier time getting the accurate dimensions and a "clear slate" to start with.
Also, img tags will ALWAYS respect the aspect ratio if you only set the width attribute.
For this, I might recommend a jQuery solution.
<img class="imgCls" src="/path/to/img.png" />
<script type="text/javascript">
$(document).ready(function(){
var imgw = $('.imgCls').parent('td').css('width');
$('.imgCls').css('width',imgw);
});
</script>
Something like this should work as long as the images with the imgCls class are (or desired to be) uniform in width, the var imgw will take the width of the first .imgCls it finds.
I suggest you to try with this css code:
img{ width: 49%; }
http://jsfiddle.net/xeSLA/
I'm trying to create a relatively simple page with a that is on the left side, taking up the whole height of the browsers window, with a fixed width (say 200px), and then an that uses the rest of the window width, and also the whole windows height. I want to use CSS to do it, no javascript. I don't mind wrapping the in a if I have to.
<html>
<head>
<style type="text/css">
body{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" height="100%" width="100%">
<tr>
<td style="min-width: 200px;" bgcolor="#333333">
</td>
<td width="100%" bgcolor="#666666">
</td>
</tr>
</table>
</body>
Now what I should say is that I have only tested this in Firefox and Safari (mac user) so I don't know how it will look in Internet Explorer etc, but feel free to try it, this should give you what you want :)
Have a border, bgr_left.jpg, that I want to continue down the y-axel on my page...
the bgr_left.jpg is 30px by 30px and I have placed it in a div tag... Also I want the same border on the right side, and on the top all the way across...
I cant get this done, heres my css for the left border:
.bgr_left {
background-image: url(../Graphics/bgr_left.jpg);
background-repeat: repeat-y;
background-position: left;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 30px;
background-color: #E7F5F0;
}
Thanks for all help
You can do this using a table or by dynamically sizing a div.
Table method
Although something like this should fine in a web browser, search engines and other computer consumers might misinterpret it because you using the table tag to markup non-tabular content.
<table>
<tr>
<td colspan="3" class="bgr_top"/>
</tr>
<tr>
<td class="bgr_left" />
<td>Content content content</td>
<td class="bgr_bottom" />
</tr>
<tr>
<td colspan="3" class="bgr_bottom"/>
</tr>
</table>
Dynamic div
With the help of jQuery, we can emit semantically correct HTML but also create the desired rendering in web browsers. Untested sample:
<p class="bgr">Content content content</p>
<script type="text/javascript">
$('.bgr').each(function(i,el){
$('<div class="bgr_left"/>').height($(this).height()+'px').appendTo($(this));
// similar for top, right, and bottom
});
</script>