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
Related
I'm trying to adapt this hr so that it can appear on mobile on one line. This code is fine for a desktop view but for a mobile device it creates a jump to the line that breaks the hr.
div {
text-align: center;
}
hr {
display: inline-block;
width: 30%;
}
<div class="mcnTextContent">
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<div style="center">
<hr>TOGETHER
<hr>
</div>
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</div>
Your estimate of 20px for the width of TOGETHER was way out.
Below I have used 8em but you may want to adjust that a little one way or the other.
div { text-align: center; }
hr { display: inline-block; width: calc((100% - 8em)/2); }
<div class="mcnTextContent">
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<div style="center">
<hr>TOGETHER
<hr>
</div>
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</div>
Option One:
Use a single, full-width (or maybe something like 90%?) <HR> but move TOGETHER up so that it sits on top.
Option Two:
Use calc in your CSS so that the width of each <HR> is (width of parent - width of TOGETHER) / 2
(Guessing at 30% width is just too fragile in this case).
I am using tables because I am making a newsletter for emails. I have a picture, where I would like some padding on desktop screen. When a person is on a mobile, there should not be any padding on the picture. The following code works for the dekstop, but when I resize my window I still have a padding on the picture, even if I set it to 0px.
Can anybody see why that is happening?
.img-position {
padding: 40px 0px 40px 0px;
}
#media only screen and (max-width: 596px) {
.img-position {
padding: 0px 0px 0px 0px;
}
}
<!-- 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="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<!-- Top Picture End -->
The answer is:
#media only screen and (max-width: 596px) {
td.img-position {
padding:0px 0px 0px 0px;
}
}
The #media rule with padding changing due to desktop width change works fine for me. If you want to remove any padding of table, try to add extra css rules like in the example below (the img must be set to display:block to remove the bottom empty space). I've added yellow background to make the effect more visible.
.img-position {
padding:40px 0px 40px 0px;
}
#media only screen and (max-width: 596px) {
.img-position {
padding:0px 0px 0px 0px;
}
}
img{
display:block;
}
table{
border-collapse:collapse;
}
table *{
padding:0px;
margin:0px;
}
<!-- Top Picture Start -->
<table class="row background-color__blue" style='background-color:yellow'>
<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="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<!-- Top Picture End -->
I want to split screen to two area left and right,in right segment show a image and in right segment show textbox,for that purpose write this html code:
<table style="width:100%">
<tr>
<td style="width:50%;height:100%;" align="center">
<img src="../Content/45.png" style="display:block;height:100%;width:100%;" />
</td>
<td style="width:50%;">
behzad
</td>
</tr>
</table>
but when i run the html page ,image not fit to the table column height,and i must scroll the browser to see all of the page,i want just fit to the screen height,my out put i this :
Use viewport units vh/vw, and to keep aspect ratio on the image, set the style on the image to display:block;max-width:50vw;max-height:100vh
html, body {
margin: 0;
}
table {
border-collapse: collapse;
}
td {
padding: 0;
vertical-align: top;
}
<table style="width:100vw">
<tr>
<td style="width:50vw;height:100vh;" align="center">
<img src="http://lorempixel.com/600/600/animals" style="display:block;max-width:50vw;max-height:100vh" />
</td>
<td style="width:50vh;">
behzad
</td>
</tr>
</table>
in this case you'd better use background-image instead of <img> to avoid stretching
check the following demo
html,body{
height:100%;
}
table{
height:100%;
}
<table style="width:100%">
<tr>
<td style="width:50%;height:100%;background-image:url(http://placehold.it/600x600)" align="center">
</td>
<td style="width:50%;">
behzad
</td>
</tr>
</table>
emphasized text
instead of this section
<img src="../Content/45.png" style="display:block;height:100%;width:100%;" />
try this section
<img src="../Content/45.png" height="50%" />
I hope it works
I've made a table to act as a frame to lay my website out on but when I set the width of it to 100% and put a background on it I have an edge on the right hand side that won't fill.
Checkout my website linked to my profile and click on the altwebsite 2 link for what im getting.
Here is the code:
<table id="maintable">
<tr id="firstrow">
<th id="header" colspan="3">
</th>
</tr>
<tr id="menu" colspan="3">
<td>
<?php
include 'pagecontent/link.php';
?>
</td>
</tr>
<tr id="secondrow">
<td id="leftcol">
</td>
<td id="maincol">
<?php
include 'pagecontent/main.php';
?>
</td>
<td id="rightcol">
</td>
<td id="footer" colspan="3">
</td>
</tr>
</table>
and the css:
html, body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
table {
text-align: center;
border-width: 0;
border-style: none;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
width: 100%;
}
I'am trying to keep it all in a separate stylesheet.
Any help would be brilliant thanks
your id="header" and id="menu" [colspan] is set to 3, but your id="secondrow" has four <td>
Maybe you want this:
<table id="maintable">
<tr id="firstrow">
<th id="header" colspan="3"></th>
</tr>
<tr id="menu">
<td colspan="3">
<?php
include 'pagecontent/link.php';
?>
</td>
</tr>
<tr id="secondrow">
<td id="leftcol"></td>
<td id="maincol">
<?php
include 'pagecontent/main.php';
?>
</td>
<td id="rightcol"></td>
</tr>
<tr id="footer" >
<td colspan="3"></td>
</tr>
</table>
Try
table-layout:fixed;
for your table. I think this should work.
Try to put the attribute width="100%" in the table tag. This sometimes helps even when the css is set to 100% width.
ALSO:
I recreated the same basic code you used, and it was working fine on my machine so my guess is that you have some sort of surrounding div or tag that the table is taking up 100% of.
First things first i want to say thank you for all the replies, really appreciated.
And yeh i had 4 columns with a colspan of 3 thought i set it to another row. For all those table haters out there it helps me visualise the layout.
And thanks again for the help
Add this for your class. It worked for me
tbody, tr {
display: block;
width: 100%;
}
How can I center the table within a div using html?
I have placed my content within a div tag and set the text-align attribute to center like the following.
text-align: center;
This has not worked.
Below is my html.
<html>
<body>
<div style="text-align:center">
<p>
text test
</p>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</div>
</body>
</html>
Give width to table, and set margin auto horizontally.
table {
width:500px;
margin: 10px auto;
}
Try the below
<table style="margin:0px auto; width:500px">
<div style="text-align:center">
<table style="display: inline-table;">
</table>
</div>
Edit the table tag like below
<table border="1" align="center">
and then check.
<html>
<body>
<div style="text-align:center">
<p>
text test
</p>
<table border="1" style="margin: 0 auto;">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</div>
</body>
</html>
Instead of <div style="text-align:center"> you could write <div style="width:600px;margin:0 auto">
Which gives you a div with the width of 600 pixels and centers the div in the parent element.
Add margin: 0px auto to your table tag
you can put the style in the table
<table border="1" style="margin:0 auto;">
However I do suggest that you use a style sheet and not inline styles