Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Apr 8, 2014

CSS: floated elements with parent collapse and side menu

Having a floating side menu in CSS will cause problems with clearing floating elements in the content. For example, using .clearfix or clear:both will cause the clear to jump under the side menu.

The solution to this is somewhat counter-intuitive, but try using the property overflow:hidden; on the parent of the floating elements.


Now is the time for all good men to come to the aid of their country.
This is non-float content.





Now is the time for all good men to come to the aid of their country.
This parent has {overflow: hidden;}.

Sep 13, 2013

Embedding flash in Facebook link posts

If you want to have custom flash movies embeded in Facebook posts that link to your website, like these one from YouTube or SoundCloud:

 

It's fairly simple. 
BUT, it requires a SSL certificate, so that your website works over HTTPS, without browsers whining about security.

Here's what you do.
You've heard of OpenGraph protocol, right? Right. So, that's all there is to it. Proper metadata in the HTML of your website will instruct Facebook to include your flash movie, like this:
<meta property="og:title" content="Aljažev stolp | Triglav (2864m) | VR panorama"/>
<meta property="og:video" content="http://kafol.net/pano/aljazev-stolp/aljazev.stolp.swf"/> 
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://kafol.net/pano/aljazev-stolp/"/>
<meta property="og:image" content="http://kafol.net/pano/aljazev-stolp/preview.jpg"/>
<meta property="og:description" content="VR (virtual reality) panorama pri Aljaževem stolpu na vrhu Triglava. Panorama je posneta brez stativa."/>
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />


The next part depends on what the flash movie actually does. If it's a movie/music player that fetches media from other sources, or even an other part of your website, you'll need to configure crossdomain.xml. You put that file on the root of your website.

Here's a very liberal example, but fine for testing:
<?xml version="1.0" ?>
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>