Ad Folding without regions

Developer
James Nowland
Size
3,938 Kb
Views
18,216
  1. Ad Folding without regions Previews
  2. Ad Folding without regions HTML Codes
  3. Ad Folding without regions CSS Codes

How do I make an ad folding without regions?

What is a ad folding without regions? How do you make a ad folding without regions? This script and codes were developed by James Nowland on 31 October 2022, Monday.

Ad Folding without regions Previews
IQ Test

Ad Folding without regions - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ad Folding without regions</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
Trying to work around using padding-top and positon absolute to make ads that are absolute positoned but have an understanding of their surrounding context.
-->
<div class="main"> <section class="ArticleContainer"> <article> <h1>Demo for Ad Folding without "regions"</h1> <p><strong>Quick content folding demo with no regions - a little work around with percentage ratio padding and absolute positioning.</strong> </p> <p>Resize to see.</p> <p>Ad folding was one good use case of why css <a href="http://html.adobe.com/webplatform/layout/regions/">regions</a> would be a much needed feature to solve some responsive problems - it was added and <a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/kTktlHPJn4Q/YrnfLxeMO7IJ">removed from chrome</a>. </p> </article> <aside class="Aside"> <div class="AdUnit"> <div class="Ad Ad--200x125"> <img src="https://css-tricks.com/examples/AdRegions/ads/1.jpg" alt="Ad" class="Ad-image" /> </div> </div> <div class="AdUnit"> <div class="Ad Ad--200x125"> <img src="https://css-tricks.com/examples/AdRegions/ads/2.jpg" alt="Ad" class="Ad-image" /> </div> </div> </aside> </section> <section class="ArticleContainer"> <article> <h1> <a href="https://css-tricks.com/content-folding/">See Chris' Original Post</a> </h1> <p>Regions would be rather handy to have but you can sometimes use work arounds in situations like this one where I'm' using ratios along with <code>padding-top</code> and <code>position:absolute</code> which gives the desired outcome. It just isn't as flexible as the preposed regions solutions.</p> <figure> <img src="https://cdn.css-tricks.com/wp-content/uploads/2012/03/folding.jpg" alt="" class="responsive-img" /> </figure> <p>A little word of warning this example code likely could be cleaner and is mainly a proof of concept so yer!</p> </article> <aside class="Aside"> <div class="AdUnit"> <div class="Ad Ad--200x125"> <img src="https://css-tricks.com/examples/AdRegions/ads/3.jpg" alt="Ad" class="Ad-image" /> </div> </div> <div class="AdUnit"> <div class="Ad Ad--200x125"> <img src="https://css-tricks.com/examples/AdRegions/ads/4.png" alt="Ad" class="Ad-image" /> </div> </div> </aside> </section>
<section class="ArticleContainer"> <article> <h1><a href="https://css-tricks.com/examples/AdRegions/">See The orignal Demo using regions syntax.</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <figure> <img src="https://cdn.css-tricks.com/wp-content/uploads/2012/03/interdigitate.png" alt="" class="responsive-img" /> </figure> <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </article> </section>
</div>
</div>
</body>
</html>

Ad Folding without regions - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
* { box-sizing: border-box;
}
.AdUnit { float: left; width: 50%;
}
.AdUnit:first-child { padding-right: 6px;
}
.AdUnit + .AdUnit { padding-left: 6px;
}
.Ad { text-align: center; position: relative;
}
.Ad--200x125 { padding-top: 62.5%; padding-bottom: 12px;
}
.Ad-image { position: absolute; left: 0; top: 0; width: 100%; height: auto;
}
.ArticleContainer article { background-color: #fff;
}
.Aside { padding: 12px 0 0 0;
}
.Aside:after { visibility: hidden; display: block; content: ""; clear: both; height: 0;
}
@media (min-width: 700px) { .ArticleContainer { padding-right: 25%; margin-bottom: 12px; } .ArticleContainer + .ArticleContainer .Aside > .AdUnit:first-child { padding-top: 125%; } .ArticleContainer + .ArticleContainer .Aside > .AdUnit:first-child .Ad { margin-top: 24px; } .Aside { position: absolute; right: 0; width: 20%; top: 0; padding-top: 12px; } .Aside:first-of-type { padding-top: 0; } .AdUnit { float: none; width: 100%; } .AdUnit:first-child { padding-right: 0px; } .AdUnit + .AdUnit { padding-left: 0px; }
}
.ArticleContainer article { padding: 0.3em 0.7em;
}
.main { width: 80%; margin: 0 auto; background: #eee; position: relative;
}
body { background-color: #eee; font-family: 'Open Sans', sans-serif;
}
.responsive-img { height: auto; max-width: 100%;
}
figure { text-align: center; background-color: #efe; boreder: 1px solid #eee; padding: 0.5em 1em;
}
Ad Folding without regions - Script Codes
Ad Folding without regions - Script Codes
Home Page Home
Developer James Nowland
Username jnowland
Uploaded October 31, 2022
Rating 3.5
Size 3,938 Kb
Views 18,216
Do you need developer help for Ad Folding without regions?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Nowland (jnowland) Script Codes
Name
SVG Modified with Query String
Download Rebound
Smart Ratio CSS Photo Grid
Outer Gradient Circle Progress
Step 3
CSS3 Stroke and Gradient Text
Letting.js Demo using vanilla js.
Lorem pixel Images
Hamburger and Search CSS Animations
Animating Scale with text featuring blurry raster DPI issues
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!