I cannot seem to figure out why my middle div(menu-item-middle class) inside the menuitem class won't stretch accross. I've spent quite a bit of time on this now and I thought I better post this one because I cannot figure this out. This is what my code looks like.
.menu-item div
{
display:inline-block
}
.menu-item-left
{
left:0px; float:left; border:1px solid #000000
}
.menu-item-middle
{
padding-top:5px; padding-bottom:6px; padding-right:5px; left:39px; float:left; border:1px solid #000000
}
.menu-item-right
{
width:26px; height:44px; right:0px; clear:right; background-image:url('images/Menu_Item_Arrow.jpg'); background-repeat:no-repeat; border:1px solid #000000
}
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="menu-item">
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-middle">
<table border="0" cellpadding="0" cellspacing="0" style="margin-left:5px">
<tr>
<td>
<a href="#">
<span style="font-family:Verdana; font-size:.95em; font-weight:bold">Technology</span>
</a>
</td>
</tr>
<tr>
<td>
<span style="font-family:Arial; font-size:.7em; color:#0b83bb">Computers &
Office Supplies</span></td>
</tr>
</table>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item">
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-middle">
<table border="0" cellpadding="0" cellspacing="0" style="margin-left:5px">
<tr>
<td>
<a href="#">
<span style="font-family:Verdana; font-size:.95em; font-weight:bold">Intersts</span>
</a>
</td>
</tr>
<tr>
<td>
<span style="font-family:Arial; font-size:.7em; color:#0b83bb">Movies Books &
Music</span></td>
</tr>
</table>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item">
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-middle">
<table border="0" cellpadding="0" cellspacing="0" style="margin-left:5px">
<tr>
<td>
<a href="#" style="text-decoration:none; color:#0b83bb">
<span style="font-family:Verdana; font-size:.95em; font-weight:bold">
Entertainment</span> </a>
</td>
</tr>
<tr>
<td>
<span style="font-family:Arial; font-size:.7em; color:#0b83bb">Software &
Digital Games</span></td>
</tr>
</table>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
</td>
</tr>
</table>
This is because you have set the float property. If you want to keep it then try adding a width: 100% to the class.
I think it happen because, the content of this div is not same as other two. You can try with
CSS
.menu-item-middle {min-width:150px}
It works from IE8&+
Related
I have an html table on my website (emma-moore.com) that I'm using for layout instead of tabular data:
<table border="0" cellpadding="5px" width="100%" class="followFont">
<tbody>
<tr>
<td align="left">Follow your heart</td>
</tr>
<tr>
<td align="left" style="padding-bottom: 10px">and you'll always</td>
</tr>
<tr>
<td align="left">
<img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
</td>
</tr>
<tr>
<td align="left" style="padding-top: 10px">end up where your</td>
</tr>
<tr>
<td align="left">soul needs to be.</td>
</tr>
</tbody>
</table>
Best practice is not to use inline styles and tables for layout, and I'm wondering how to replace the table with a div block and put the text and the jpg inside the div block in such a way that the text and jpg display the same way as they do when using the table. How can I best do this with css and a div block?
Thanks,
William
.followFont
{
padding:5px;
border:0;
cellpadding:5px;
width:100%;
display:table;
}
<div class="followFont">
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">Follow your heart</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left; padding-bottom: 10px;">and you'll always</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">
<img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left; padding-top: 10px;">end up where your</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">
soul needs to be.
</div>
</div>
</div>
Link:-https://html-cleaner.com/features/replace-html-table-tags-with-divs/
<h2>Phone numbers</h2>
<table width="300" border="1" cellpadding="5" style="text-align: center">
<tr>
<th width="75"><strong>Name</strong></th>
<th><span style="font-weight: bold;">Telephone</span></th>
<th> </th>
</tr>
<tr>
<td>John</td>
<td>0123 456 785</td>
<td><img src="images/check.gif" alt="checked" /></td>
</tr>
<tr>
<td>Cassie</td>
<td>9876 532 432</td>
<td><img src="images/check.gif" alt="checked" /></td>
</tr>
</table>
<h2>Phone numbers</h2>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Name</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Telephone</span></div>
<div class="rTableHead"> </div>
</div>
<div class="rTableRow">
<div class="rTableCell">John</div>
<div class="rTableCell">0123 456 785</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
<div class="rTableRow">
<div class="rTableCell">Cassie</div>
<div class="rTableCell">9876 532 432</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
</div>
You can use
<div id="table" style="display: table;">
<div class="cell" id="cell1"></div>
<div class="cell" id="cell2"></div>
<div class="cell" id="cell3"></div>
</div>
You'll be using like table
Div can have the same properties as table
like
#table
{
vertical-align:middle;
text-align:center:
border:solid 1px #ddd;
width:100%;
}
.cell
{
display:table-cell;
vertical-align:middle;
text-align:center;
border:solid 1px #ddd;
width:25%;
padding:10px;
}
and soon....
Hope this helps
I have 4 divs and 4 images and each of them has an ID. I need to show another div when you hover the first div's image.
I wrote this code but only the first image with ID="insta2" and div ID="iinsta2" worked.
<style type="text/css">
#insta1{display:none}
#insta2{display:none}
#insta3{display:none}
#insta4{display:none}
#iinsta1:hover + #insta1 {
display: block;
}
#iinsta2:hover + #insta2 {
display: block;
}
#iinsta3:hover + #insta3 {
display: block;
}
#iinsta4:hover + #insta4 {
display: block;
}
</style>
And body:
<tr>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<div id="insta1"><p> Hover 1 </p></div>
<img id="iinsta2" src="url" style="width:100% ; height:auto">
<div id="insta2"> <p> Hover </p></div>
</td>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta1" src="url" style="width:100% ; height:auto">
</td>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<div id="insta3"><p> Hover 3 </p></div>
<img id="iinsta3" src="url" style="width:100% ; height:auto">
<div id="insta4"> <p> Hover 4 </p> </div>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta4" src="url" style="width:100% ; height:auto">
</td>
</tr>
Use this way:
#insta1,
#insta2,
#insta3,
#insta4 {
display: none;
}
#iinsta1:hover + #insta1,
#iinsta2:hover + #insta2,
#iinsta3:hover + #insta3,
#iinsta4:hover + #insta4 {
display: block;
}
<table>
<tr>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<div id="insta1">
<p>Hover 1</p>
</div>
<img id="iinsta2" src="url" style="width:100% ; height:auto">
<div id="insta2">
<p>Hover</p>
</div>
</td>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta1" src="url" style="width:100% ; height:auto">
</td>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<img id="iinsta3" src="url" style="width:100% ; height:auto">
<div id="insta3">
<p>Hover 3</p>
</div>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta4" src="url" style="width:100% ; height:auto">
<div id="insta4">
<p>Hover 4</p>
</div>
</td>
</tr>
</table>
The + object can be used only with siblings that are next. Also, I have reduced your CSS. Please use absolute positions for positioning the :hovers. And, if you wanna maintain the HTML layout, you need to use JavaScript for this.
img ~ p {
visibility: hidden;
}
img:hover ~ p {
visibility: visible;
}
<table border=1>
<tr>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
</tr>
</table>
The example here seems complicated so I boiled it down to what I understood the question to be. I hope this helps. Feed back is welcome.
Not sure why the valign="middle" not working here. Can someone please help me out with what is missing here.
HTML
<table id="my_table" style="width:100%;height:450px" cellpadding="0" cellspacing="0">
<tr>
<td width="5%" valign="middle">
<div id="left_arrow" align="center">
<img src='./button/3.png' id='leftArrow' /
</div>
</td>
<td width="60%" valign="middle" >
<div id="left_table" >
<div id="holder" >
<img src=".images/3.jpg" id="slideshow" />
</div>
</div>
</td>
<td width="5%" valign="middle">
<div id="right_arrow" align="center">
<img src='./button/2.png' id='rightArrow' />
</div>
</td>
</tr>
</table>
You want to take the inline styles out if possible, but here's the full solution.
<table id="my_table" style="width:100%;height:450px" cellpadding="0" cellspacing="0">
<tr>
<td width="5%" style="vertical-align:middle">
<div id="left_arrow" align="center">
<img src='./button/3.png' id='leftArrow' />
</div>
</td>
<td width="60%" style="vertical-align:middle">
<div id="left_table" >
<div id="holder" >
<img src=".images/3.jpg" id="slideshow" />
</div>
</div>
</td>
<td width="5%" style="vertical-align:middle">
<div id="right_arrow" align="center">
<img src='./button/2.png' id='rightArrow' />
</div>
</td>
</tr>
</table>
Click here for live demo
The valign attribute of is not supported in HTML5. Use CSS instead.
CSS syntax: <tr style="vertical-align:middle">
The issue I'm facing is that a TD in my table is inheriting the table's width despite having it's own width explicitly set.
The code is as follows:
<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center">
<tr>
<td>
<img src="header.gif" alt="New Releases">
</td>
</tr>
<tr style="font-size: 0;">
<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>
<td width="85px">
<img src="product1.jpg" width="85" height="85" alt="image" >
</td>
<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 1</a>
</td>
<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<img src="view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="10px">
</td>
<td width="85px">
<img src="product2.jpg" width="85" height="85" alt="" >
</td>
<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 2</a>
</td>
<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<img src="view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="30px"><img width="30px" height="95px" src="rightsep.gif" alt=""></td>
</tr>
<tr>
<td>
<img src="footer.gif" alt="">
</td>
</tr>
</table>
</div>
</div>
Specifically, the TD being affected is the first in the table:
<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>
Which is inheriting the table width of 640px instead of the 30px it should be.
It seems regardless of what I change, the issue is still there.. I've tested both locally and in JSFiddle.
I'm by no means experienced in HTML so I'm not sure what the problem is.
Updated Code
<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center" style="border-spacing: 0;">
<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases.gif" alt="New Releases">
</td>
</tr>
<tr>
<td width="30"><img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-left.gif" alt="" ></td>
<td width="85">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/1/_/1.jpg_14603.jpg" width="85" height="85" alt="image" >
</td>
<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">Clydie King - Direct Me - Inc Never Like This Before</a>
</td>
<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="85">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/4/_/4.jpg_14418.jpg" width="85" height="85" alt="" >
</td>
<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">T.M.V.S. - Don't Be Shy</a>
</td>
<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="30">
<img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-right.gif" alt="">
</td>
</tr>
<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-bottom.gif" alt="">
</td>
</tr>
</table>
</div>
</div>
I now have a gap above and below the middle row which I can't get rid of.
Every row in a table must have the same number of cells. If you want to use less cells in a row you must explicitly set the colspan attribute to match:
<tr>
<td colspan="9"> <!-- set this to the maximum number of cells there will be in a row -->
<img src="header.gif" alt="New Releases">
</td>
</tr>
You can mix and match the colspan:
<tr>
<td colspan="5">
<img src="header.gif" alt="New Releases">
</td>
<td colspan="4">
<img src="header.gif" alt="New Releases">
</td>
</tr>
but the total must always match the maximum number of cells used in the table.
This process must be repeated for every row in the table.
I believe it should be:
<td width="200">
or
<td style="width: 200px">
You have a table with 3 rows, but different numbers of cells.
If you want a cell to span the whole table, like the header and footer do, you need to specifiy a rowspan on them like this:
<tr>
<td rowspan="9"><img src="header.gif" alt="New Releases"></td>
</tr>
In this case a 9, because your middle row has 9 cells.
Otherwise the browser will render the table wrong.
I'd just like to put in an email a series of 4 social icons centered (horizontally) but they keep being put by gmail and yahoo on the left side!
<body bgcolor="#FFFFFF" style="margin: 0;padding: 0;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;width: 100%;">
<table style="margin: 0;padding: 0;width: 100%;border-collapse: collapse; background-color: #F2F2F2;">
<tr>
<td style="margin: 0 auto; padding: 0;display: block;max-width: 600px;clear: both; align: center; valign: top; background-color:#ffffff ;">
<table width="100%" style="padding:0px 5px 0px 5px;" cellspacing="0" border="0" bgcolor="#ffffff" align="center">
<tbody>
<tr>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px; margin-bottom: 30px;">
<a rel="nofollow" target="_blank" href="<%= t("social_urls.facebook_page_url") %>">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/facebook_icon.png" alt="Facebook">
</a>
</td>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/twitter_icon.png" alt="Twitter">
</a>
</td>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/pinterest_icon.png" alt="Pinterest">
</a>
</td>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/tumblr_icon.png" alt="Tumblr">
</a>
</td>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/instagram_icon.png" alt="Instagram">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
Here is a jsfiddle.
I want them not split over the whole line but quite "concentrated" as you see each icon must only have a few pixels horizontally between them (6px left, 6px right)
I believe that should be text-align: center instead of just align: center in your main table data cell (because you're calling it as a css style parameter). Also, vertical-align instead of valign.
If that doesn't do it, try adding text-align: center; to the table style, then switch out the float:left on each td so they're display: inline-block; instead.
Good luck!
EDIT---------------------------------------------------------------------------
How about this approach using only tables?
Check the new Fiddle
HTML
<table style="margin: 0;padding: 0;width: 100%;border-collapse: collapse; background-color: #F2F2F2;">
<colgroup>
<col width="20%" />
<col width="60%" />
<col width="20%" />
</colgroup>
<tr>
<td>
</td>
<td style="text-align:center">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/facebook_icon.png" alt="Facebook" />
</a>
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/twitter_icon.png" alt="Twitter" />
</a>
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/pinterest_icon.png" alt="Pinterest" />
</a>
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/tumblr_icon.png" alt="Tumblr" />
</a>
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/instagram_icon.png" alt="Instagram /" />
</a>
</td>
<td>
</td>
</tr>
</table>
In email always use align="left|center|right" for horizontal alignment and valign="top|middle|bottom" for vertical. Apply this to your table cells <td align="center"> in your case.
Here is the jsfiddle with two methods that will work
Here is a very basic example of both align and valign:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#252525">
<tr>
<td align="center" valign="middle" height="100">
<img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
<img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
<img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
<img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
</td>
</tr>
</table>