Wholy shit
- Started
- Last post
- 9 Responses
- clearThoughts
How do you achieve this?
http://www.interviewmagazine.com…Scroll down the page and check the NARS ad, with the wrapping text around it!!
I thought all flash movies had to be rectangular?
How do they do that!!
- monospaced0
"Wholy?"
Is that merger between "whole" and "holy?" I don't really get it.
- haha - sorry holy - managed to grab your attention thoughclearThoughts
- clearThoughts0
oh - just noticed the SWF is rectangular!
But the HTML text is wrapped around the 5???
- rounce0
They formatted the HTML text to fit the content of the SWF?
- shitehawke0
this way?
<iframe src="/include/lib/ads/overstitial_iframe.html" id="overstitial_iframe" name="overstitial_iframe" style="display:none"></iframe>
<div id="ad-adsnars-200912" class="breakout-item-bg" style="margin: 0px 0px 0px -149px; width:506px; height:618px; ">
<div id="ad-adsnars-200912-inner"></div><script type="text/javascript">
var l_xAdUnitNarsPrefix = 'interview_nars_2009_12_v1_';function adadsnars200912Click(p_sTag){
$('#overstitial_iframe')[0].cont...
}
function adadsnars200912Trigger(){var l_xObj = new Object();
l_xObj.p_nId = 'adsnars-200912';
l_xObj.p_nCompanionHeight = '750';
l_xObj.p_nCompanionAd = 'ads/nars/200912/NARS_Parent3.sw...
l_xObj.p_bShowCurtain = true;
l_xObj.p_sFlashVars = 'p_sChild='+_xAds.baseURL+'files...
_xAds.breakthroughClick(l_xObj);
}var s1 = new SWFObject(_xAds.baseURL+'files/a...
s1.addParam("wmode","transparent...
s1.addParam("allowscriptaccess...
s1.addParam("menu","false");
s1.addVariable("p_nId","adsnars...
s1.addVariable("p_sAdPrefix",l_x...
s1.addVariable("p_nDomain","1");
s1.addVariable("width","506");
s1.addVariable("height","618");
s1.write('ad-adsnars-200912-inne...setTimeout( function(){ adadsnars200912Click(l_xAdUnitNa... }, 1000);
</script>
</div>
<div style="height: 22px; width: 201px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 201px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 341px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 341px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 253px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 253px;" class="image-wrap-row"></div><div style="height: 22px; width: 253px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 283px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 325px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 356px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 364px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 371px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 381px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 380px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 373px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 372px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 357px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 341px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 301px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 280px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 200px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 200px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 200px;" class="image-wrap-row"></div><div style="height: 22px; width: 200px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 200px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 200px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 200px;" class="image-wrap-row"></div>
<div style="height: 22px; width: 200px;" class="image-wrap-row"></div>
- rounce0
How messy.
- baseline_shift0
haha. so entirely shit? I thought it was quite nice.
and i dont know how that is achieved.
- rounce0
They used a load of inline divs to push out each line of text. Answered.
- that's what shite said, I thinkmonospaced
- I know, except I did a little more than copypasta, and instead made a sentence.rounce
- aaaah...I seemonospaced
- Diggin the folio btw Benrounce
- oh, that old thing? hahaha, I need to update it badly...but thanks!monospaced
- monospaced0
Maybe the guy who designed it provided the code for the text wrapping. I don't do this kind of thing normally, but it seems achievable.
- clearThoughts0
It's cool. I always find the HTML box model somehow a bit limiting when designing.
I never thought of creating 20 unnecessary divs to get around it, but it's interesting to see somebody else out there doing it.Imagine being able to have weird shaped images, with text wrapping around them. The possibilities from a design point of view could be endless.
I'm sure all the Web standardistas out there probably think that is unnecessary, but they can go and shove the W3C site up their ass for all I care.
- Really...tossing in a few divs to get that effect is worth the effort. It's an elegant design with the flush-left layout.monospaced