On one of our Joomla 2.5 websites the images here
http://rodoyo.com/flatnews/index.php/benefits/event-organiser-benefits
appear correctly in firefox but are thumbnails in Chrome
Why is that?
have checked that the image sizes are correct in the backend
The problem is happening in all WebKit based browsers I currently have at hand i.e. Chrome (Win/OSX/IOS) and Safari (Desktop & Mobile)
In your bootstrap.css you will notice this:
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Specifically the max-width: 100% — I think you will find that as it's set to 100% of the container (in this case the surrounding <td></td>) that the problem lies in the width of the <table> columns.
Given that max-width percentages are used to calculate the width from the size of the containing block, not the element they are attached to the WebKit browsers are doing the right thing and Firefox apparently isn't (anyone with better insight please chime in here).
You could fix this by specifying the width of the first <td> like this:
<td style="width:102px;">
Or a better approach would be to not use tables for layout, as that's not what they are meant for.
Read more about using here and here.
Related
I'm a novice to coding and square space and was wondering if something like this was possible on square space: https://xd.adobe.com/view/a7d76d93-ca9e-4fa6-af5b-78a040a82bf3/
My company wants me to find a way to have the first image be clickable and bring up another image (depending where you click) to show the availability of the one place you clicked. Then, we also want the second image, when clicked, to bring up the third one.
Is this even possible in squarespace? If so, how do I do this?
To answer your first question directly, yes it is possible either via a Code Block or via Code Injection. Essentially, you would be adding entirely new, custom code to your Squarespace website.
To answer your second question generally, it would be an entirely custom implementation -- that is, there is no block nor build-in feature in Squarespace that will help facilitate this functionality. Therefore "how you do it" would boil down to a good amount of custom code development (again, said generally).
To offer additional perspective: Consider that, on mobile, screen real-estate is more limited (and clickable-areas may become prohibitively small) and that overlaying interactive elements may require additional testing to ensure intended behavior across different mobile devices, operating systems, operating system versions and browsers. Considering these things ahead of time (or perhaps testing during the process) may lead you to reconsider the interactions and UI behavior overall (that is, to get away from multiple overlaying images and to a more vertically-friendly set of behaviors and interactions, just as one possible example).
In the old days we used image-map. It still works. With image-map you can draw a polygon which is a clickable link to another page (or trigger some javascript).
If you want it to scale nicely (in a responsive design) you would need some kind of plugin.
In it's simplest form the links would take the user to another page with another image-map or some other navigation pattern. Example
I guess it would be possible to do this in some custom code block in Squarespace, and just link to several other pages with images/image-maps or galleries.
There are tools out there that can help you draw the polygons (search for "image map generator") if you don't have Dreamweaver or similar.
Other methods:
If you want it to scale without some plugin, you can use SVG instead of image-map. If you are ok with only rectangular hotspots, you can also try this site which uses CSS to replace image-map.
Here is an example using html and css only:
html, div, p, a {
font-family: arial;
}
.map-image {
display: inline-block;
position: relative;
overflow: hidden;
padding: 0;
}
.map-image img {
width: 100%;
height: auto;
display:block;
}
.map-image a {
text-decoration: none;
padding: 5px;
color: #FFF;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
margin: 0;
font-size: 4vw;
}
.map-image a:hover {
border: 1px solid #FFF;
margin: -1px;
}
<div class="map-image">
<img src="http://cdn.frooition.com/060129/images/100_1428.JPG">
Google
Facebook
Linkedin
</div>
(If you are a novice to coding, popup is probably not the right search term in this case. It is easier to link to other pages than to make everything "pop" on the same page.)
My problem is that images on my page (iutm.pl) are displaying properly for instance in Firefox (then I assume there is nothing wrong with my code), but on WebKit or Blink browsers (such as Chrome or Opera) they doesn't.
Maybe it is Paperclip fault which I use to store images (there is need to keep relation between database and images) cause images stored explicitly in assets display properly.
Anyway, i have no idea why everything works in Gecko, but not with other engines.
Thanks in advance.
Bootstrap overrides width and height of your images. The simplest solution is to add width and height attributes to existing styles where you define border for images. This code does the trick.
.event_frame .frame-top .frame-img img {
width: 200px;
height: 200px;
border: solid;
border-color: #b2b2b2;
border-width: 1px;
}
I'm trying to make a website and everything works fine on certain browsers like Google Chrome and Safari, but it doesn't work on Mozilla Firefox and Internet Explorer.
Here's a link to how it looks http://imgur.com/BmMOqw0,qiICBR4#0
The first image is how it looks in Chrome and Safari. The second link is IE and Firefox.
The HTML is basically a square image wrapped in many borders.
<div> <div> ... <div> <img> </div> ... </div> </div>
The CSS has the image and all the divs set to border-radius 100% and also has code along the lines of:
max-width: 574px;
max-height: 574px;
display:block;
max-height:100%; //repetitive, I know, but I've been frustratingly trying everything that might work
width:auto;
max-width:100%;
height: auto;
I've tried it with max-height, without max-height, with height: 100%, without height: 100%, etc. I've googled this problem countless times and the solutions that work for others don't seem to work for me. I've set html, body {height: 100%} and I've tried .cycle-slide {width:100%;} and section img { width: 100% } but those didn't work either.
edit: http://jsfiddle.net/zc3Y8/1/
The code is a little bit different because I'm using Ruby on Rails on Aptana. But this is pretty much how it looks
You are using two different images as link: First one, http://i.imgur.com/BmMOqw0.png and second one, http://i.imgur.com/qiICBR4.png
I am using this animated banner in my website.
Now I've copied the exact code from the tutorial but for some reason in my version the images seemed to be placed at the bottom of the table and cut off instead of as in the example. I've tried a number of possible solutions but either I've done them in the wrong place or they just don't work.
Normally I would add in the code but in this case (as you'll see from view page source) it's too long to post.
Any help will be appreciated
Well, I just opened Chrome Inspector changed few css properties and it worked. Here they are...
.photobanner
{
height: 232px;
width: 984px;
}
#container2
{
width: 748px;
overflow: hidden;
margin: 50px auto;
background: white;
}
I guess this would work.Tested in chrome..try your self with other browser and you should reduce margin of <h1> tag
I did give a search before I started to ask this question as it is a very simple question. I have an image and I would like to have it as the only element on our webpage. There is no other content as this image conveys what we want to convey. Now we would also like to resize itself depending upon the device it is being displayed. I hope this is achievable through HTML though I would like to know if there is any other options.
Thank you,
Karsnen
What you're looking for is the background-size property. By applying background-size:cover to your <body>, the image will resize itself accordingly regardless of viewport dimensions.
Note: Your image may clip with the use of cover.
An alternative value for background-size can also be contain. If you apply background-size:contain instead, it'll still resize the image accordingly just as the former would.
Note: While this approach promises to never clip the image, it'll also show negative/dead space as well (which sometimes isn't ideal).
Your CSS should reflect the following:
body {
background-image: url('bg.jpg');
background-position: center center;
background-size: cover; /* or background-size: contain */
}
You can use an image as a web resource (“page”). You could simply link to it using something like href="test.jpg", or you could announce its URL directly. Browsers will display it somehow, possibly scaling it to fit browser window width.
The next simpler, and better, approach is to use a page with just an img element as its content. It can be made to scale to browser window width by setting its width to 100% (in HTML or in CSS). This way, it will keep its width:height proportion when scaled. The quality of scaling in browsers varies but is generally good, unless you scale upwards a lot. In this approach, the inherent width of the image should be sufficiently large (say 2,000 pixels) to avoid considerable upwards scaling.
To remove default spacing around the image (default page margins), it’s simplest to use CSS.
Example (with “...” to be replaced by useful information):
<!doctype html>
<meta charset=utf-8>
<title>...</title>
<style>
html, body { margin: 0; padding: 0; }
</style>
<img src="demo.jpg" alt="..." width="100%">
Set it as a background-image and use the appropriate background-size (e.g. contain):
html {
height: 100%;
}
body {
background: url('to/your/image.png') no-repeat;
background-size: contain;
}
Here's a demo.
I use this:
css
#body{
background:url(../img/bg.jpg);
margin: 0;
}
javascript
$("#body").css('width',window.innerWidth)
$("#body").css('height',window.innerHeight)