I'm wondering if anyone can help me. I am working on a website and one of the pages has a weird overflow to the right of the page. I honestly cannot work out what is causing it after inspecting all of the elements. Would anyone mind taking a look to see if you can see what's causing this as I am stuck. Very grateful for any help! The url is: https://diabetesand.me/recipes/quick-and-easy-tacos
You problem:
<img src="//ir-uk.amazon-adsystem.com/e/ir?t=diabetesandme-21&l=ur2&o=2" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important; position: absolute!important;">
The quick solution is:
<img src="//ir-uk.amazon-adsystem.com/e/ir?t=diabetesandme-21&l=ur2&o=2" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important; position: absolute!important; width: 1px;">
Related
I know this is simple for most people on here but I am trying my best. I need a little guidance with a project I am trying to do. I am working on a strictly html block widget on my wordpress site. I am trying to do a two column layout with images in each column. I have it working but I cannot figure out how to make the two images full width without space in between. Ive tried a millions ways but I am struggling. Any help would be amazing and appreciated!
The code I am currently using is
<table style="margin-left: 0px; margin-right: 0px; width: 100%;" border="0px" cellspacing="0px" cellpadding="0px">
<tbody><tr><td>
<img src="https://www.dailymutt.com/wp-content/uploads/2020/10/Untitled-1_01.jpg" alt="" /></td><td>
<img src="https://www.dailymutt.com/wp-content/uploads/2020/10/Untitled-1_02.jpg" alt="" /></td></tr></tbody>
</table>
Ive attached two images explaining the errors I am having with the coding I am doing.
This is where the two images have a padding of somesort
This is what I am trying to achieve.
So i figured it out myself. This is the new html code I had to use because there were css that my theme was over riding for the
<table>
<tbody><tr><td style="margin-left: 0px; margin-right: 0px; width: 100%; padding: 0px 0px !important;background-color:#000" border="0px" cellspacing="0px" cellpadding="0px">
<img src="https://www.dailymutt.com/wp-content/uploads/2020/10/Untitled-1_01.jpg" alt="" /></td><td style="margin-left: 0px; margin-right: 0px; width: 100%; padding: 0px 0px !important;background-color:#000" border="0px" cellspacing="0px" cellpadding="0px">
<img src="https://www.dailymutt.com/wp-content/uploads/2020/10/Untitled-1_02.jpg" alt="" /></td></tr></tbody>
</table>
Amazon has a facility that generates HTML snippets for you to show images of products from their store.
However when running locally the image is not displayed, when run on jsbin it is.
The local code is:
<img border="0" src="//ws-eu.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=0789722569&Format=_SL160_&ID=AsinImage&MarketPlace=GB&ServiceVersion=20070822&WS=1&tag=valuehistor0e-21"><img src="https://ir-uk.amazon-adsystem.com/e/ir?t=valuehistor0e-21&l=li2&o=2&a=0789722569"
width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
The JSBIN example is here.
You don't state how you run the page: locally from file or via a local server.
In the former case all links with "//*" will adopt the protocol (e.g. "file://") which won't be a valid link.
You can hard-code the protocol instead:
<a href="https://www.amazon.co.uk/Complete-Idiots-Guide-Creating-Page/dp/0789722569/ref=as_li_ss_il?ie=UTF8&qid=1506425682&sr=8-10&keywords=web+development+for+idiots&linkCode=li2&tag=valuehistor0e-21&linkId=fc910756748618e2854e81a581107b24" target="_blank">
<!-- The img src below -->
<img border="0" src="https://ws-eu.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=0789722569&Format=_SL160_&ID=AsinImage&MarketPlace=GB&ServiceVersion=20070822&WS=1&tag=valuehistor0e-21"></a>
<img src="https://ir-uk.amazon-adsystem.com/e/ir?t=valuehistor0e-21&l=li2&o=2&a=0789722569" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
Proper set img src tag in image url.
For example:
<img border="0" src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" width="1000" height="300">
I'm currently making responsive-design for the website. I've tried many ways to make it great. Unfortunately, it didn't work out for me.
Here is my html code:
<div class="custom" >
<table class="yslygi">
<tbody>
<tr>
<td><img src="/images/pencil.png" alt="" /></td>
<td><img src="/images/arrow.png" alt="" /></td>
<td><img src="/images/larry.png" alt="" /></td>
<td><img src="/images/arrow.png" alt="" /></td>
<td><img src="/images/tools.png" alt="" /></td>
<td><img src="/images/arrow.png" alt="" /></td>
<td><img src="/images/clock.png" alt="" /></td>
</tr>
And here is my CSS:
.yslygi tr:first-child td:nth-child(2n+1) {
width: 150px;
padding: 20px 0 11px;
}
yslygi {
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
text-align: center;
}
Responsive-design image
to make a responsive website, first rule is never user Table layout, instead use div base column layout. If you are new to responsive stuff, I suggest get familiar with Bootstrap Framework. It have good community and a great documentation. Get yourself familiar how responsive work and what are basic coding structure you need to follow.
First of all don't use table, avoid tables when ever you can. flex is your friend when it comes to stuff like this.
Sometimes y good use a framework like bootstrap.. its easy to manage the content but if you want only mantain the HTML as the image use width percentage to keep the proportion on multiple devices
Td.arrowImage{width: 10%;}
Td.Image{width: 17%}
Td.img{width: 100%}
.yslygi{width: 100%}
Trying to code for Outlook and I want to cry. I have no idea how to test or figure out where it's going wrong. But it looks awful in Outlook and fine everywhere else. I've already spent 5 hours trying to re-work it with some success, but none of the padding or spacing is maintained in the logo header area or the right sidebar.
Any help would be BEYOND appreciated: http://cdpn.io/GAzqh
Thank you, thank you, thank you
Looks like outlook html rendering is powered by Microsoft Word http://www.howto-outlook.com/faq/wordhtml.htm. There are some tips in the link that talk about how to work around the issues.
You need to set the widths on your cells. Outlook doesn't know how wide to make them.
Your header code should look something like this. I simplified it a bit for you:
<table border="0" cellpadding="0" cellpadding="0" width="100%">
<tr>
<td width="40%" align="center" valign="top" style="padding-top: 10px; padding-bottom: 10px; padding-left: 25px">
<img align="left" alt="MD Logistics" border="0" width="167" src="http://www.mdlogistics.com/emailassets/logo.png" title="MD Logistics"/>
</td>
<td width="60%" align="right" valign="center" style="padding-top: 10px; padding-bottom: 10px; padding-right:25px;">
<img src="http://www.mdlogistics.com/emailassets/linkedin.jpg"/>
<img src="http://www.mdlogistics.com/emailassets/facebook.jpg"/>
<img src="http://www.mdlogistics.com/emailassets/youtube.jpg"/>
<img src="http://www.mdlogistics.com/emailassets/twitter.jpg" />
</td>
</tr>
</table>
Because you have ample space for the social icons, I just put them inline. You could keep them in cells though, but it was more code to do it that way.
Can anyone tell me how can I add an image over another image without using Z-index or Z-order?
Difficult to answer properly without knowing exactly what you want to achieve, z-index probably isn't what you actually need. For instance the following would work:
<div id="container">
<img src="img1.jpg" id="img1" />
<img src="img2.jpg" id="img2" />
</div>
#container {
position:relative;
}
#img2 {
position: absolute;
left: 50px;
top: 50px;
}
Also whether you use <img> tags or background-images depends on the semantic valueof the images, i.e. are they presentational or actualy content of the page?
The easiest way is to make sure they're both the same size, one has transparency, and you use this snippet:
<img style="background:url(image.jpg)" src="overlay_image.gif" alt="" />
Set the main image's background image in CSS with the background-image property
You can also use text over image by using the following code:
<TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
<TR>
<TD WIDTH="221" HEIGHT="300" BACKGROUND="samplepic.jpg" VALIGN="bottom">
<FONT SIZE="+1" COLOR="yellow">Sample Text</FONT>
</TD
</TR>
</TABLE>
Hope that helps.