Skip to content

Instantly share code, notes, and snippets.

@hughbris

hughbris/img.cut-in.html

Last active August 29, 2015 14:21
Show Gist options
  • Save hughbris/0e87b419b9f4c1017eb1 to your computer and use it in GitHub Desktop.
Save hughbris/0e87b419b9f4c1017eb1 to your computer and use it in GitHub Desktop.
Download ZIP
Design pattern: very basic cut-in image (right-aligned by default)
Raw
img.cut-in.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ" lang="en-NZ"> <!-- brah! -->
<head>
<title>Right aligned cut-in</title>
<style type="text/css">
/* <![CDATA[ */
img.cut-in {
float: right;
margin-left: 1em;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
height: 251px; /* optional */
width: 451px; /* optional */
}
/* next line not needed, but assumed to be elsewhere in your stylesheet */
/* ***** */ img { border: 0; } /* ***** */
/* ]]> */
</style>
</head>
<body>
<p>
<img class="cut-in" src="https://avatars0.githubusercontent.com/u/288202" alt="5 octotcats in a box it is not">
Ipsum lorem is standard here, so let's keep the meme alive. The cut-in would be to the right of this content.
I say it again, in case your screen is wide: <q>Ipsum lorem is standard here, so let's keep the meme alive. The cut-in would be to the right of this content.</q>
</p>
<p>You'd have to place your cut-in image element before any content you want to wrap and also <em></em>look out for <del>sharks!</del>any elements you use adajacently with the clear CSS property set!</em></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment