Image floats, without the text wrap! November 13, 2005 75 comments
How many times do you have an image floated left in a block of content, but want to keep that content from wrapping around your image?
You’ve tried to accomplish this before, but what you really need is something that plays nicely with any HTML & any amount of content you, or more realistically, your database can throw at it.
The example below can easily fall apart without the proper CSS in place:
The HTML:
<div class="callout"><h3>team report, replaced image</h3><h2>Team Report 10-06-05</h2><p>Eric Koston and Rick McCrank are still in Toronto, having a killer time filming for the upcoming éS video with filmer Scuba Steve.</p></div>
And the CSS to get started:
.callout {width: 275px;}.callout h3 {width:115px;height:65px;float:left;text-indent:-8008px;background:transparent url(team-report.gif) no-repeat 0 0;}
The important part is that you have your <h3> (in this case, an image replacement) floated left. Any html that comes after your <h3> will now wrap around it. Take a paragraph for example:
That’s the easy part. Now, how do we keep that paragraph from wrapping? Your first instinct might be to increase the height of .callout h3, we’ve all tried to get away with that method in the past. You’ll tell yourself - the content will never be more than five lines long. Deep down inside - you know this isn’t the case & that you’ll be editing that bit of CSS in the near future. And then a month after that; and then the following month and then… well you’ll be editing that css until the entire site gets redesigned; which you know isn’t happening anytime soon.
So, we need a future proof method to keep this content tight, the way your pixel princess intended it to be.
One solution might be to put a width on the paragraph tag and float it right. Let’s try:
.callout p {width:160px;float:right;}
Resulting in:
Not a bad start. With this in place, any content in a paragraph tag will never wrap under your image. Unfortunately, chances are this content is variable & is being pulled from a database. Who knows what HTML will be spit out. It’ll fall apart if say, instead of a paragraph, you had an unordered list:
This doesn’t quite hold up very well, does it? So let’s change the .callout p { } declaration to .callout * { } instead. The * selector will select P’s, UL’s & any HTML that falls under .callout :
.callout * {width:160px;float:right;}
Our new declaration solves that quite nicely indeed. There’s just one problem. What if some HTML appears deeper? Take these potential list items for example:
- An anchor tag perhaps?
- Or a strong tag perhaps?
Some basic HTML, will render as this:
This really screws things up. Cleary we only want .callout * { } to apply to parent elements, and not their children, no matter what they are. So let’s overwrite any child’s width & float values with:
.callout * * {width:auto;float:none;}
Quite literally, the .callout * * { } declaration says: if any html element contains any HTML element, do { width:auto;float:none;}.
There it is, exactly what we want & it’ll work in all current browsers (including IE!). Throw any HTML at it, with any varying amount of content & you’ve got some lean & mean & pretty basic CSS to prevent it from wrapping under your floated image.
Your final css:
.callout {float:left;width:275px;}.callout h3 {width:115px;height:65px;float:left;text-indent:-8008px;background:transparent url(team-report.gif) no-repeat 0 0;}.callout * {width:160px;float:right;}.callout * * {width:auto;float:none;}
You can view the source of float, no text wrap or see it in use on éSfootwear.com.
Did you find this post helpful?
blogging your blogs November 7, 2005
soupenvy.suprglu.com - All your daily web activites (any that offer RSS feeds anyway), recorded on a single blog.
Using this service made me notice that netflix RSS feeds don’t properly provide the date of transactions. They stick the date in w/ the content of a feed. If they provide the date in proper format (<pubDate> ?), a service like SuprGlu could easily blog when movies were shipped out, when they’re expected to ship & when they were returned.
Yahoo TV listings added Tivo online scheduling. Tivo’s existing system has always been a little jacked, so at least there’s now another option.
Flock October 20, 2005 1 comment
Checking out this flock browser…
Highlight a passage on a web page that you would like to blog about.? Right-click that selection and choose Blog This. The blog editor opens with that selection already inserted. Not only that, the selection is properly formatted as a Blockquote and appropriate citation is included.
For the blogging portion, I’m sure they have plans to integrate it more with a users version of wordpress, mainly categories & plugins…
Road Trip October 10, 2005 12 comments
Anyone have good ideas for planning a road trip online? I want a google maps interface where I can plot multiple spots along a desired route. An online version of AAA’s Triptiks (maps of just your desired route, along w/ places of interest) would be ideal & I’m suprised something along those lines is not readily available online. You know - one of those google maps mashups. There is gmaptrack.com, but seems pretty limited at this point. How about google earth, Anyone using that? Backpackit seems like its too much work, If I’m going that far I’d just create my own website, plus the free version are pretty limited.
Simple, Unordered List August 3, 2005 16 comments
A buddy of mine desired an easy way of formatting a single Unordered List so it would resemble the neat & tidy rows of a table. I’m sure there’s several ways of doing this & by no means is this anything new; just thought it might come in handy for someone else too.
Super simple, the most important part is to float each List Item left. Using percentages is not necessary, but does make your list expandable. Set anchors to display as block, with a width of 100% for that large clickable area. Hope this helps, Cpawl.
The CSS used:
ul {
display:inline;
list-style-type:none;
}
li {
float:left;
width:25%;
border-bottom:1px solid #333;
}
li a {
display:block;
width:100%;
}
li a:hover {background-color:#FF5C00;}
Grease Monkey July 24, 2005 4 comments
Grease Monkey is a firefox extension that enables you to add scripts & bits of code to any site on the web. Installed grease monkey scripts can be as simple as preventing links from opening in new windows, and as complex as visulaizing change in a wiki. There’s a ton of scripts available on greasemonkeyed.com.
Thanks to online documentation, Dive into Grease Monkey, it’s real simple to learn how to create your own user scripts. The tiniest bit of javascript familiarity will help, as you copy & paste your way to your very own grease monkey script. Which leads to my personal need for a better way of viewing baseball statistics in my yahoo fantasy league.
When updating your daily rosters it’s nice to compare, say - today’s 3 potential first basemen; and their stats over the past week. It’s currently not very usable for comparing stats. It’d be nice if you could highlight multiple rows, that way you can visually compare the rows of stats to see your best option for today’s first baseman. Super simple, but not built into yahoo. As I said earlier, thanks to Grease Monkey and some basic js knowledge you can make yahoo’s fantasy league even better.
Some more functionality would be nice; right now you have to refresh the page to remove any highlighted rows, It’d be nice if another click would remove the highlighting, so please - feel free to improve.
Install the script - fantasyleague.user.js
Yahoo’s My Web 2.0 July 8, 2005 3 comments
Yeah I know, it’s old news already. There’s plenty of other places (waxy.org, a.wholelottanothing.org) that will tell you what yahoos my web 2.0 is all about. If you remember that it exists, and like to check it out occasionally, this greasemonkey script enables an “Add to My Web” link in google, next to each search result. Makes the process of adding content much easier. Now if my other yahoo contacts would start adding some content, we could start to see what it’s really capable of.
Did I mention, you can import a delicious RSS feed to get yourself started?
Goofy Vs. Regular July 7, 2005 6 comments
We launched a site for an upcoming contest called Goofy Vs. Regular. What do you think? Vote for goofy when you get there.
Update- You might see this posted on (the recently un-designed) Hot Crew:
Another showdown between Goofy & Regular. We loaded this one up w/ activities for the kids and technology for the nerds. Watch Goofy & Regular riders battle it out right on the site by selecting who you think will win (as of this post, I’m happy to point out that Goofy leads with 53% of the vote). Lay down the smack on each & every rider with your gravatar lighting up the comments. Then our personal favorite, rate your rider on a scale of 1-10 to watch those weighted lists grow & shrink! A visual representation of who you, the user, thinks will dominate the contest.
Your favorite Wiki June 22, 2005 12 comments
What’s your favorite wiki? Everyone’s used wikipedia; What other encyclopedia contains entries for both Abraham Lincoln, and Goatse.cx? Are you using a wiki resource (Wordpress users have the Wordpress wiki) . Have you seen any unique implementations of one? What would you like to see? Are you like, “WTF is a wiki”?
update - I’m starting to see how all wikis look alike, and can become a pain in the ass to use.
What’s YOUR favorite part? June 1, 2005 5 comments
Mozilla released firefox, Deer Park Alpha 1 with a slew of support for the latest & greatest.
What Web dev features in Deer Park Alpha 1 are you looking most forward to?
Some portions that I look forward to include, but are not limited to:
- The outline property - “Outlines may be non-rectangular” - how sweet is that?
- Multi-column layout - (of course, we all want this)
- (continued) Support of basic css3 selectors
- overflow-x and overflow-y properties
Unfortunately, as we continue to develop for IE on both the mac & pc, these techniques will continue to go unused. Who else wants a simple input[type="radio"] to work cross-browser? In preperation for the day these sweet joints can be utilized freely, let’s celebrate and declare classes that cleary overwrite our css3 selectors!!
Are you using the Deer Park release of Firefox yet? Have you read through the latest supported features? What’s YOUR future favorites?