Of course, FireFox currently supports CSS rounded corners for DIVs, but sadly, the same cannot be said for IE. As developers and designers, we have to either accept that some people will not get the full effects of our website, or else we have to use the old methods to achieve parity for all browsers. This post is just to show you the easiest way to get the rounded corners effect in the old-school manner.
The big thing is to plan on how big you want your rounded corners to be. The reason is that you will have to fight with setting top and bottom margins of the same size as your corner radius, or just accept that there will be some space there. This easy way of going about things assumes you’ll be ok with a 12px radius and a 12px margin to match. We’re going to make a DIV 580px wide by 200px tall.
Start by opening up Adobe Illustrator or whatever other vector graphic tool you usually use for thsi type of thing and make a box that is 100px tall and 580px wide. Fill that box with the color of your non-bubbled background – that part of the web page that lies outside your bubble, in other words. My background color is #FFFFEE.
On a new layer, create another box with rounded corners of 12px radius, in exactly the same size. This new box should for the most part completely cover up the old box and should be the color you want the bubble to be. We’re assuming you want no border, but if you do, you’ll probably want to play around with this example a bit to figure out how it’s going to work best for you.
Now, you should have an image that looks like this:
Example of the DIV bubble background.
Next we need to setup our CSS rules. Because we have a box with all four rounded corners, there’s no need to create or load a second image for our borders, but rather set it up like this:
#bubble_wrap {
width: 580px;
display: block;
}
#bubble_top {
display: block;
margin: 0px;
height: 20px;
background-image: url(/wp-content/themes/akitsu_home/img/feature_bubble.gif);
background-repeat: no-repeat;
background-position: top;
}
#bubble_bottom {
display: block;
clear:both;
margin: 0px;
height: 20px;
background-image: url(/wp-content/themes/akitsu_home/img/feature_bubble.gif);
background-repeat: no-repeat;
background-position: bottom;
}
#bubble_center {
display: block;
}
We can then assemble the pieces like this:
<div id="bubble_wrap"> <div id="bubble_top"></div> <div id="bubble_center"> <p>content goes here</p></div> <div id="bubble_bottom"></div> </div>
If you’re like me, you like to have a fair amount of control in the way your websites look to the user. As you know, this is not always easy based on the way browers were meant to behave. Browsers were meant to allow differently-sized monitors and windows show the same content, and thus allow for a lot of proportional widths, with the page stretching and scaling to adjust to the different readers. But in these modern days, we can anticipate certain screen resolutions and many pages conform to a rigid width.
Keeping this width is actually quite important from design, usability and branding perspectives, as a matter of fact: my keeping pages a consistent width, we increase the chances that people recognize our pages as something unique (branding), we allow our users to be accustomed to the locations of key navigational components (usability) and we decrease the chances that something unexpected on the page will break the overall design (design).
However, there are very real problems with fixed-width pages that many novices encounter, making fixed width pages a real bear to deal with. I thought I’d take the time to discuss the reasons that – even in a fixed-width page – using proportional sizes has benefits to the designer.
This is just a “public service announcement” for those web designers looking for a fast way to get a nice, even hanging indentation on their pages. That’s when the top line goes all the way to the margin and the text below it is what is indented. You might use them for a non-bulleted list such as those in the typical WordPress sidebar. It is a very simple fix, but I’ve been surprised by the lack of adequate answers in Google and figure someone out there might be looking for an answer would appreciate it.
So, the fix is: create a left margin of Xpx, then use text-indent with a -Xpx value. Ho! Is that easy, or what? And it works with IE and Firefox, both:
#blogwire ul {
margin-left: 15px;
}
#blogwire ul li {
text-indent: -15px;
}
There’s lots of information available on WordPress’s codex about how to create themes for your blog, all of it dealing with the filters and actions you can use to manipulate the active content on your blog in cool ways. It goes without saying that those are important pieces of information, and in fact there are some outstanding tutorials for putting together a theme that you should definitely check out. WPBits is one such resource.
But I’d like to talk about some concepts that happen before you get to the active content: the HTML, and how you go about designing a theme which has to exist in all those varying pieces yet all go together to create one cohesive whole. This is a very high-level tutorial, meaning that specific details will be omitted in order to introduce the most basic concepts. I’m writing more about the workflow than about the process, if you follow me!
Follow Me:
