I'm trying to create a email signature that consists of a banner image, and three clickable areas for social media icons.
I was having an issue with the scaling the banner and not working correctly, but after resolving that I'm now having an issue with trying to set the "max-width".
<a href="http://xbox.com/"><!--CHANGE THIS URL FOR EACH IMAGE!--><img src="http://www.thegamescabin.com/wp-content/uploads/2013/04/next-xbox-logo-5.png" width="100%" alt="Xbox" max-width="600px"/>
The image resizes to the device (WHICH IS PERFECT) however, I'm struggling to get it to have a "max-width" of 600px.
max-width is a CSS attribute, not a HTML one (your max-width="" doesn't exist and is thus ignored), so you'll want to use a style attribute:
<a href="http://xbox.com/"><!--CHANGE THIS URL FOR EACH IMAGE!--><img src="http://www.thegamescabin.com/wp-content/uploads/2013/04/next-xbox-logo-5.png" width="100%" alt="Xbox" style="max-width:600px;"/>
Try something like this.
<!--CHANGE THIS URL FOR EACH IMAGE!--><img src="http://www.thegamescabin.com/wp-content/uploads/2013/04/next-xbox-logo-5.png" width="600px" alt="Xbox""/>
and in css
img{max-width:100%}
Related
I am trying to keep my Instagram embeds under a certain width, and I've tried putting into my scss files a max-width, which NEVER have gotten into the file. The only way I can get it to my preferred with is to use inspector and manually change it but that doesn't do me any good. Here is the HTML with the part I wanna change highlit:
I wanted to do
iframe[class^="instagram-media"]{
width:328px;
}
but that doesn't work. Neither did
iframe{
max-width:328px
}
How can I get this?
Keep in mid that width and height you dont need css to apply on iframe you can simple assign to width and height attributes, like this:
<iframe src="https://www.w3schools.com" width="500px" height="500px">
</iframe>
Just change width="" and height="" iframe attributes for your need.
I am facing a problem and any kind of response would be respectful.
I want to show people's cv's ( pdf type ) on my page and I am using flexpaper to do so.
I have some iframes with some specific style ( width,height ) and inside those iframes I place my document.
My problem is that he document's size is much bigger than the iframe's, which forces it to create scroll bars.
I want to make my document preview appear smaller in order to fit the iframe size without any scroll bars appearing. Below is an image of my preview so far.
<div class="some class that i get from my php">
<i class="icon-download-alt"></i>
<a href="a link that i get from my php">
Cover Letter</a> <a onclick="$(this).parent().find('iframe').toggle();return false;">(Preview)</a><br><br>
<iframe src="/flexpaper/php/split_document2.php?subfolder=&doc=documentsName" style="width:100%; min-height:400px; display:none;"></iframe>
<br>
</div>
Thank you.
Try setting the FitWidthOnLoad parameter to true in the viewer like so:
FitWidthOnLoad : true
make sure you have 100%/100% on width/height on the viewer and you should be sweet
I have an css background-image that needs to be linked to the site index. However I cannot seem to be able to link it. I have tried using:
#header-bg {
background-image: url("./styles/duffcraft/theme/images/bg_header.png");
}
Then using:
But it didn't work. The url for the site is: http://bindmind.net/dev/
Its the image in the middle with the DuffCraft and etc on it. The file name for the image is header.png.
Basically it has to link to the site index but because ill be transferring this to another domain soon I can't have it linking to http://www.bindmind.net/dev/.
EDIT: I have managed to get it to link, but now there is a massive gap bewteen the image and the actual content. (fixed that.)
You should use instead of a background image a read image in your HTML code. It should look like that:
<a href="/">
<img src="./styles/duffcraft/theme/images/bg_header.png"/>
</a>
This should show your link as an image only, with the size of the image, and by clicking on the image, your index page will be shown.
you can do this:
<div id="header-bg"></div>
or probably you can do it with JavaScript
I'm working on a web application and I'm using the img tag (<img...>).
When the src property is empty, it shows the red x figure indicating that there is no image.
Is there any way to hide that red X icon?
An <img /> tag without an src attribute is invalid HTML. If you do not want to display an image, do not output the <img />tag at all.
If you must output the image tag, thus breaking your html (I wouldn't encourage this), you can hide the [X] in most browsers with one of the following css styles:
<img style="visibility: hidden"/> which hides the image, but still has it taking up space in the page
<img style="display: none"/> which removes the image from the page, making it take up no layout space
The other alternative is to actually link to an image that won't be seen. The classic example of this is to use a 1 pixel transparent gif image. The image won't be visible, although it will effect the page layout.
There's no need adding img tags if you set src to empty string.
If you don't want to print the image, but show it on the screen you can use CSS media types:
<style>
#media print
{
img.noprint {visibility: hidden}
}
</style>
and then add a class to all the images you do not want printed
<img class="noprint" .../>
I have the following problem:
My landing page is composed of 2 images: a background image (top-banner) assigned to the body element and another image where I am presenting my content.
My problem is that both images are quite large and always, I have to wait for the main image to show up first, and than the background image.
This is very annoying for my and it does not look nice.
I have created an online version with sample images that clearly show my problem. Please check it: here
I have tried many different JavaScript techniques and online solutions, but none of them solved my problem.
All I want is the background image to show first, and than the main image.
Here is the html code:
<body background='top-banner2.jpg' style='background-position: top center; background-repeat:no-repeat;'>
<a href="#">
<img border='0' style='position:absolute; width:965px; left:50%; margin-left:-487px; top:440px;' src='main2.jpg' />
</a>
</body>
I am open to any solution, JavaScript, AJAX, whatever, just to see it working!
Thank you for sharing your time and expertise.
All the best,
Spiro K.
The problem is that you are using the background attribute. Never use that again, and stop using style attributes. Put all your presentation into an external stylesheet and link to it using a link tag. Doing this will solve your problem as the CSS renders progressively with the DOM.