The first should have vertical scroll bar when it's longer than 50% but it didn't work. I want to fix the 50% and if the text is longer it should show the scroll bar from the overflow.
<!DOCTYPE html>
<html>
<head>
</head>
<style>
html, body { height: 100%; }
</style>
<body>
<table style="height:100%; width:100%" border=1>
<tr style="height:50%">
<td style="width:30%;">
<div style="width:100px; height:50% overflow:auto;">
<table>
<tr><td>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</td></tr>
</table>
</div>
</td>
<td width="70%"></td>
</tr>
<tr style="height:50%"><td></td><td></td></tr>
</table>
</body>
</html>
You are doing almost right ... just ,missing a huge comma :P <div style="width:100px; height:50% ;overflow:auto;">
<!DOCTYPE html>
<html>
<head>
</head>
<style>
html, body { height: 100%; }
</style>
<body>
<table style="height:100%; width:100%" border=1>
<tr style="height:50%">
<td style="width:30%;">
<div style="width:100px; height:50% ;overflow:auto;">
<table>
<tr><td>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</td></tr>
</table>
</div>
</td>
<td width="70%"></td>
</tr>
<tr style="height:50%"><td></td><td></td></tr>
</table>
</body>
</html>
Related
I am trying to achieve following output -
But having trouble with that partial overlap at the bottom of each pic. I can have them separated out (see the code at the end of this post). I can put negative margin on the div that is below the images, but that puts text on image without white background covering the picture.
Couple of restrictions -
With the tool i am working, I have to stick with inline css, no grid or flexbox. And it needs to be responsive i.e. work with changing browser size (so probably providing fixed height and width in pixels will not work).
What i have below works well as far as responsiveness goes. But not able to achieve that partial overlap along with white background. Here is what i have so far
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="overflow: auto">
<img src="images/SIFT_Video.png" style="display:inline-block;max-width: 47%;min-width: 47%; float: left"/>
<img src="images/SIFT_User_Guide.png" style="display:inline-block;max-width: 47%;min-width: 47%; float: right"/>
</div>
<div style="clear: both"></div>
<div>
<table style="table-layout: fixed ; width:100%">
<tr>
<td style="width:2%"></td>
<td style="width:43%;text-align: left;color:#00AFAB;vertical-align:top">SIFT Video</td>
<td style="width:10%"></td>
<td style="width:43%;text-align: left;color:#00AFAB;vertical-align:top">User Guide</td>
<td style="width:2%"></td>
</tr>
<tr >
<td style="width:2%"></td>
<td style="width:43%;text-align: left;text-transform: uppercase; color:#083A97"><h3>SIFT Interview Demo</h3></td>
<td style="width:10%"></td>
<td style="width:43%;text-align: left;text-transform: uppercase; color:#083A97"><h3>Interviewer quick reference guide</h3></td>
<td style="width:2%"></td>
</tr>
</table>
</div>
</body>
</html>
Suggesting you to go with <div> based approach. Here is the solution from your current approach.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="overflow: auto">
<img src="https://images.unsplash.com/photo-1499084732479-de2c02d45fcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="display:inline-block;max-width: 47%;min-width: 47%; float: left"/>
<img src="https://images.unsplash.com/photo-1499084732479-de2c02d45fcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="display:inline-block;max-width: 47%;min-width: 47%; float: right"/>
</div>
<div style="clear: both"></div>
<div style="position:relative; top: -20px;">
<table style="table-layout: fixed ; width:100%;">
<tr>
<td style="width:2%"></td>
<td style="width:43%;text-align: left;color:#00AFAB;vertical-align:top; background: #fff">SIFT Video</td>
<td style="width:10%"></td>
<td style="width:43%;text-align: left;color:#00AFAB;vertical-align:top; background: #fff">User Guide</td>
<td style="width:2%"></td>
</tr>
<tr >
<td style="width:2%"></td>
<td style="width:43%;text-align: left;text-transform: uppercase; color:#083A97;"><h3>SIFT Interview Demo</h3></td>
<td style="width:10%"></td>
<td style="width:43%;text-align: left;text-transform: uppercase; color:#083A97"><h3>Interviewer quick reference guide</h3></td>
<td style="width:2%"></td>
</tr>
</table>
</div>
</body>
</html>
when I scroll horizontal the page, the background color disappear. How to solve?
This is the code
<html>
<head>
</head>
<body style="margin:0 auto;">
<div align="center" width="100%" style=" background-color: #183337; height: 50px; ">
<table align="center" width="100%" border="0">
<tr>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</table>
</div>
</body>
</html>
LOOK HERE
Add
display: inline-block;
To the styling for that div.
Here is how it will look. http://jsfiddle.net/3kdu6/4/
The website i am building has the requirement of increasing the size of a textarea as the resolution goes up.
I tried doing this with floating and non floating divs but in every scenario i tried so far the divs aligned nicely but i had no way of controlling the textarea size.
Standard tables do however provide this functionality out of the box except for 1 ie compatibility problem.
The following code works as intended in firefox and ie(quircks mode) standard ie fails to resize the textarea height.
I don't mind some out of the box thinking, it don't have to be tables divs or whatever as long as it gets the job done.
I am aware javascript can do some resolution calculations but that solution feels a bit too complicated for a simple layout issue. The simpler & lesser code the better imo.
<!DOCTYPE html>
<html>
<body>
<table style="width: 100%">
<tr>
<td style="width: 300px">
<table class="clsDataGrid" width="100%" height="350px">
<tr style="height:350px;background-color:blue;">
<td style="height:350px">test</td>
</tr>
</table>
<br/>
<table width="100%">
<tr>
<td style="background-color:red;height:100px">test</td>
</tr>
</table>
</td>
<td style="padding-left : 1em;height: 100%">
<table class="clsDataGrid" style="width: 100%;height: 100%">
<tr>
<th>Description</th>
</tr>
<tr>
<td style="height: 100%">
<textarea style="resize: none; width:99%;height: 100%">DATAAAAA</textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Ok so solution 3 - using no js - you have to go tables.
Watch out for how I had to force the description label in - its a bug fix not me being an idiot.
<!--Solution 3-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {padding:0; margin:0;}
table td {vertical-align: top;}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="height:350px; background-color:blue; color:white; padding:0 24px;">
Blue Test
</td>
<td rowspan="2" style="padding:31px 24px 0; position:relative; height:100%">
<label style="position:absolute; top:0; left:24px;">Description</label>
<textarea style="resize: none; width:100%; height:100%;">DATAAAAA</textarea>
</td>
</tr>
<tr>
<td style="height:100px; background-color:red; color:white; padding:0 24px;">
Red Test
</td>
</tr>
</table>
</body>
</html>
As with anything like this there are a bunch of solutions - here are two off the top of my head - a place for you to start - I haven't test cross browser.
Hope they help.
<!--Solution 1-->
<!DOCTYPE html>
<html>
<body>
<div style="display:table; width:100%">
<div style="display:table-cell; width:30%;">
<div style="height:350px; background-color:blue; color:white; padding:0 24px;">
Blue Test
</div>
<div style="height:100px; background-color:red; color:white; padding:0 24px;">
Red Test
</div>
</div>
<div style="display:table-cell; vertical-align:middle">
<div style="padding:0 24px;">
<span>Description</span>
<textarea style="resize: none; width:100%;height: 100%">DATAAAAA</textarea>
</div>
</div>
</div>
</body>
</html>
<!--Solution 2-->
<!DOCTYPE html>
<html>
<body>
<div style="width:100%">
<div style="display:inline-block; width:30%;">
<div style="height:350px; background-color:blue;">
Blue Test
</div>
<div style="height:100px; background-color:red;">
Red Test
</div>
</div>
<div style="display:inline-block; width:69%">
<span>Description</span>
<textarea style="resize: none; width:99%;height: 100%">DATAAAAA</textarea>
</div>
</div>
</body>
</html>
The vertical scroll works, but the horizontal doesn't. My code:
<html >
<body >
<table style=" height:100%; width:100%">
<tr>
<td >
<div style=" overflow:scroll; height:100%; width:100%">
<table style=" width:2000px; height:2000px; ">
<tr><td></td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Table is not an ideal element to use unless u want to display a table/table of contents.
Always prefer divs than tables.
This should do inside ur <body>
<div style="height: 100%; width: 100%">
<div style="overflow: scroll; height: 100%; width: 100%">
<table style="width: 2000px; height: 2000px;">
<tr>
<td>
</td>
</tr>
</table>
</div>
With Table u will have to set table-layout:fixed ,
<table style="height: 100%; width: 100%; table-layout:fixed">
<tr>
<td>
<div style="overflow: scroll; height: 100%; width: 100%">
<table style="width: 2000px; height: 2000px;">
<tr>
<td style="width:50%; display:none">
</td>
<td style="width:50%; display:none">
</td>
</tr>
<tr>
<td>control here will auto-align to 50%</td>
<td>control here will auto-align to 50%</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
I have modified the td template. Please note that as well.
i changed your code like this
<html >
<body >
<table style=" height:100%; width:100%">
<tr>
<td >
<div style=" overflow:scroll; height:2000px; width:100%">
<table style=" width:2000px; height:2000px; overflow:scroll;">
<tr><td></td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
try this.it will work..
This is my simple webpage :-
<html>
<head>
<style type="text/css">
.body{
max-width:3072px;
min-width:3072px;
margin:0px auto;
background: url('Stripes.png') no-repeat #293231;
background-attachment:fixed;
background-position:0% 25%;
}
.back{
z:index:0;
}
</style>
</head>
<body class="body">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img src='Main.jpg' class="back"/>
</td>
<td>
<img src='Page2.jpg'/>
</td>
<td>
<img src='Page3.jpg'/>
</td>
</tr>
<tr>
<td>
<img src='MiddleLeft.png'/>
</td>
<td>
<img src='MiddleMiddle.png'/>
</td>
<td>
<img src='MiddleRight.png'/>
</td>
</tr>
<tr>
<td>
<img src='footer.jpg'/>
</td>
<td>
<img src='footer.jpg'/>
</td>
<td>
<img src='footer.jpg'/>
</td>
</tr>
</table>
</body>
</html>
Problem here is due to my large monitor the footer doesn't appear at the bottom of the monitor. It appears somewhere in the middle. How do i ensure that footer appears only at the bottom of the screen irrespective of the size of the screen?
Have a look at:
A Bulletproof Sticky Footer, Woohoo!