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>
Related
I need a table-structure in HTML, which i could insert in a HTML-widget for WordPress. i have no chance to use a separate CSS-file for definitions. Border=0 doesn't work. i always get grey line in the cells.
I try to set border color to white, because the template has a white background. But the global CSS-definitions overwrite that i think.
<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
You have to put border:0 into the "style" attribute so that it becomes more important than external CSS, like this:
<html>
<head>
<link rel="stylesheet" href="test1.css">
<table style="text-align: left; width: 100%;border:0" cellpadding="2"
cellspacing="2">
</head>
<tbody>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</html>
I am making a test site to practice Practice Page. I have set up a logo and a picture in the foundation framework for emails. The site is responsive now. The picture with the racoon there is a padding on 40px on the top and bottom. When I go down under 596px there is still the padding even if I tried to set the padding to 0px.
When I reach 596 px I need to padding to go to 0px, but why does that not work now? I can make it work setting a !important on media only screen. But that is bad coding behaviour, right?
There is a lot of CSS in the framework. Therefore I made a fiddle
Desktop CSS
.img-position {
padding:40px 0px 40px 0px;
}
Mobile CSS
#media only screen and (max-width: 596px) {
.img-position {
padding:0px 0px 0px 0px;
}
}
HTML
<body>
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!-- Logo Start -->
<table align="center" class="wrapper header float-center background-color__white">
<tbody>
<tr>
<td class="wrapper-inner">
<table align="center" class="container" style="background-color:transparent">
<tbody>
<tr>
<td>
<table class="row collapse">
<tbody>
<tr>
<th class="img-headline">
<center>
<img src="http://www.fontmagic.com/files/animal-silence.gif" alt="TestPicture" align="center" class="float-center" width="250" height="80">
</center>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Logo End -->
<!-- Top Picture Start -->
<table class="row background-color__blue">
<tr>
<td class="center img-position" align="center">
<center>
<table class="container">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<img width="580" height="300" src="http://animalhumanhealth.com/wp-content/uploads/2016/07/racoon1.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<!-- Top Picture End -->
<!-- Row 1 End -->
<!-- Email Button End -->
</center>
</td>
</tr>
</table>
</body>
Add
.img-position {
padding:40px 0px 40px 0px;
}
above media queries which you have defined. Here is working fiddle working fiddle
The padding (or the space) that appears at 596px originates from the container class here:
table.body .container {
width: 95% !important;
}
So change the above to:
table.body .container {
width: 100% !important;
}
here's working example https://jsfiddle.net/sdk3dsyt/ your #media-query goes before you defined the initial paddings, that is why your #media-query rules are overriden
When more than 1 overlapping styles are applied to the same element, only the last style is visible https://developer.tizen.org/dev-guide/web/2.3.0/org.tizen.mobile.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm
I need curved bordered CSS for IE8 and all major browsers. currently I am trying with CSS PIE
jsfiddle demo is here. But I would suggest the answerers to download the PIE.htc file form here and try the HTML as a standalone page to get the real effect in IE8.
My problem is the <td> containing the "Thank you for registering" text is not curving in IE8 in jsfiddle. If I run it as a HTML page, it is curving in IE8 but the blue background is overlapping the "Thank you for registering" <td> (but its background is "#f2f2f2").
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0px; padding:0px;">
<tr>
<td> </td>
<td style="width: 60%; text-align: center;background: #0067C8;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="3" style="height: 50px; background-color: #262626; width:100%; text-align: left;">
<img src="twitter_logo.png" width="200" height="50" alt"Twitter" />
</td>
</tr>
<tr>
<td colspan="3" style="height: 25px;"> </td>
</tr>
<tr>
<td style="width:3%;"> </td>
<td style="width: 94%; background-color: #f2f2f2; height: 400px; font-family: arial; font-size: 30px; color: #2DB8ED; text-align: center; border: 2px solid #bcbcbc;text-align: center;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; behavior: url(PIE.htc);">
Thank you for registering
</td>
<td style="width:3%;"> </td>
</tr>
<tr>
<td colspan="3" style="height: 25px;"> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
I think its mainly because of Problems with z-index.
Check here for more details. general issues encountered when using PIE
Have you tried, http://jquery.malsup.com/corner/ jquery plugin to add curves?
$(function () {
$('table table tr:eq(2) td:eq(1)').corner();
});
Demo : http://jsfiddle.net/bDvRd/4/
Try add
position:relative;
z-index: 0;
by Using CSS3Pie htc for border-radius in IE8
OR CSS3 PIE - Giving IE border-radius support not working?
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>
I have the following code
<table style="height: 275px; width: 188px">
<tr>
<td style="width: 259px;">
main page
</td>
</tr>
</table>
The main page appears in the center of the cell I want it to appear at the top.
https://developer.mozilla.org/en/CSS/vertical-align
<table style="height: 275px; width: 188px">
<tr>
<td style="width: 259px; vertical-align:top">
main page
</td>
</tr>
</table>
?
Add a vertical-align property to the TD, like this:
<td style="width: 259px; vertical-align: top;">
main page
</td>
Use <td valign="top" style="width: 259px"> instead...
I was facing such a problem, look at the picture below
and here is its HTML
<tr class="li1">
<td valign="top">1.</td>
<td colspan="5" valign="top">
<p>How to build e-book learning environment</p>
</td>
</tr>
so I fix it by changing valign Attribute in both td tags to baseline
and it worked
here is the result
hope this help you
you can use valign="top" on the td tag it is working perfectly for me.