May 21, 2008
These buttons work in iWeb pages! View Live Example
CSS3 will bring a whole new collection of great features to CSS. One of those will be easy rounded corners! This feature is already supported by the major browsers EXCEPT you know who :-/ Your buttons on their browsers will be square, but on the other major browsers, they’ll be beautifully round.
I’ve written the code so you can control every aspect of these buttons: width, height, normal and hover colors for text and background, margins and more. We’ll cover customization via the comments so ask how to do it if you have questions.
Style 1
Here’s the first style I’ve created for you. They’re just like the big buttons I use here at 11Mystics.com. Get the code!
Style 2
Here’s a smaller version with normal text and smaller corners. This produces a more subtle look for your list. Get the code!
Style 3: Why Be Boring?
Hey, don’t create buttons like everyone else – make them cool!. These have background images specified, text shadows and they also illustrate the variable width feature. Get the code!
Style 4: Horizontal Menu
Here’s the menu style Yuan Li requests in the comments below. This menu is horizontal and will space the buttons 5px apart (even if they wrap to two lines) Get the code!
About This Article
This entry was posted by Suzanne on Wednesday, May 21st, 2008 at 3:35 PM and was filed in the Solutions category using the tags: code, css, html, snippet, widget. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.
Dynamic Refresh of Page
Create Pop-Up Content Using Highslide JavaScript
Okay for Yuan Li – you’re very welcome. This kind of stuff is fun for me and I enjoy teaching others how to do it.
I’ve created another style, Style 4 to include a horizontal menu. In that code, I changed a few things to make the buttons appear one after the other horizontally. The line I added to the code to make them do that was:
display: inline;
And that was added in the section that begins with #roll ul li {
I also changed a few things in the section below that one. I changed the margin and padding values to accommodate this kind of menu. I added a 5px margin to the right side of the button by changing:
margin: 0 0 5px 0;
to
margin: 0 5px 5px 0;
Remember, the first number here controls the top margin, the next number controls the right margin, the third controls the bottom margin and the fourth controls the left margin. Since our buttons are now in a line, a right margin of 5px was necessary to space them just a bit. If you prefer a bigger space, use 8px or 10px. Side note: a right margin assumes your buttons are aligned from the left or centered. If your buttons are aligned from the right, you would want to set a left margin instead of a right margin. I explain how to align your buttons in the comment after this one.
The other thing I changed was the padding value. Padding is the space within the button where margin is the space outside of the button. Now this is something new to learn. I changed the padding from:
padding: 0 0 0 15px;
to
padding: 0 15px;
Now if you remember from the margin discussion above, we have four values, one for each side of the button right? How come we now only have two values?
Well this is a short-hand way to specify values for margin or padding. If you only have two values, the browser will interpret that as top and bottom get zero padding and left and right get 15px padding.
There you go – beautiful rounded-corner buttons in a horizontal menu! :)
FYI, the code I give you for the horizontal menu aligns naturally to the left of your widget. However, you might want the menu centered like my demo above.
To center your menu, change:
#roll ul {
list-style: none;
}
to
#roll ul {
text-align: center;
list-style: none;
}
To right align your menu buttons, change:
#roll ul {
list-style: none;
}
to
#roll ul {
text-align: right;
list-style: none;
}
That change should teach you something about how to specify text alignment using CSS no? No matter what kind of object (selector) you’re trying to style, the text alignment property is always text-align and the values you can use with that are left, center, right, and default.
Knowing this, you might want to align the text within the button itself, the button name. If you want to do that, then you need to add the text-align property to the section of the code that starts with:
#roll ul li a,
That is an important section as it controls nearly all the styles the buttons use and that’s why it contains the most properties as well.
I added another feature you can add to your own menus too. It’s a menu background. When I originally created this code set, I wrapped the menu in (what’s called) a DIV. The term DIV is short (if I recall correctly) for division but someone correct me if my memory is failing here.
In HTML, a DIV is just a container for content. If you’ve ever looked at iWeb’s published HTML, you’ll see it’s full of DIVs. A DIV really does nothing unless you tell it to do something. DIVs are very handy when it comes to segregating content however. In the case of our menus, we’re going to fire-up that DIV and give it some styles of its own in order to create a nice menu background for your buttons. Here’s how…
At the very top of your code, you’ll see two lines:
<style type=”text/css”>
#roll a {
Were going to insert some new stuff in between those two lines:
<style type=”text/css”>
#roll {
padding: 20px 20px 15px 20px;
background: #B0E5FF;
-moz-border-radius: 16px;
-khtml-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
}
#roll a {
If you’re learning some things about CSS here, you’ll notice that we inserted a new section, one that controls #roll. All the other sections have been #roll ul, or #roll ul li or #roll a, etc. Those sections control the unordered list (ul) within the div identified as roll. #roll ul li points to all list items (li) within an unordered list that’s in the div identified as roll.
Are you catching on? So this new section we inserted here refers to nothing within the div identified as roll, but the div identified as roll itself. Here are the properties I assigned to the div to give it that menu background appearace:
padding: 20px 20px 15px 20px;
We want some space around the buttons so I padded the div by 20px. You might notice however that the value for the padding on the bottom is set to 15px. Why? Well because our buttons themselves have a margin of 5px already and that adds to the space. Therefore I only use 15px padding for the bottom padding of the menu background.
background: #B0E5FF;
The background property allows you to specify how the background of the div will appear. I’ve given you a color here, but you may also specify an image if you like. You need to upload the image to your web server and provide the url to it yourself. You would specify that this way:
background: #B0E5FF url(http://mysite.com/image.jpg);
Notice I left the background color in there as well. That’s useful in case for some reason, your image is not available, the background will revert to the color you specified.
The last thing I added to our menu background was the round-corner code. You don’t have to use that if you don’t want to. Just delete the four lines that produce it. Otherwise, you can adjust the radius value on all four lines to suit your taste.
Wow, hard to believe that’s possible right there in iWeb… oh, I gotta create something NEW now, just to test this out! :)
I expect great things from you Master Kenji – post a link when you have something to share with the class :)
Many thanks for you help, How to make the left and right end of the menu to extend to the edge of the page, as I want to use it as the universal navigation menu for the whole site, and how to add hyperlink to each button to let it clickable to direct to the right page within the site.
The menu should naturally extend to the edges of your your pages if you sized the HTML widget that wide. That may be one step people don’t realize is necessary. When you first place the HTML widget on the page, you get a square box that’s probably 300 x 200. You need to stretch that widget box as wide as your page. That will allow your buttons to spread the full width of the widget.
I wrote in a comment above how to hyperlink your buttons. See that section for more detail, but all you have to do is replace the # sign in each button with the URL of the page you want the button linked to.
By the way, I’d like to ADD that I’m SO HAPPY I don’t have to design anything for IE… :)
Amen to that brother.
Is there a way to stroke this object? I’ve been doing some searching, but not EXACTLY sure what I’m looking at :)
also, does it work with ../ form url’s? And where’s a safe directory to place a file that iWeb won’t erase it when you publish?
Here’s one part of it. border: 2px solid #000; :D
Okay I’m just catching up with you here… you want to put a “stroke” around the outside of your menu? I think that’s what you mean, and YES, you have the correct code there to do that:
border: 2px solid #000;
CSS borders are very simple. The first value is how thick the border should be. The second value there (solid) is the style of the border. You can also use: dashed, dotted, double, groove, ridge, inset and outset. For color, well I’ve covered that above but as you know you can use HEX values, RGB values, color names and more, but most people use HEX.
Does it work with form URLs? I don’t know what you mean. You’ll have to elaborate on that one. Remember I’m rusty with the real-world use of iWeb. That goes for your question about where to store stuff so iWeb won’t erase it. I’m guessing maybe in the Sites folder, but maybe someone else can respond to that one.
With URL’s that include “dot, dot, slash” as part of the path. IE, go back up one directory level. I’ve been playing with it, but not sure what I’m doing right or wrong as I found out halfway through that iWeb was deleting my images (should have remembered that one!!)
What I’m trying to create is a single button to replace a recurring image hyperlink I’ve been using thus far. So, I remove all but one button and I’m playing with that last one to see what I get. As an aside, iWeb doesn’t LIKE widgets that small, but I figured out a way around that, so a widget with a 26 pixel height is no problem at all now :)
Oh right I’m with you… I have not tried this with .Mac, but is it possible to use an absolute reference using a slash like this:
/Sites/myimage.jpg
I can’t remember if iWeb publishes a baseref= statement in the head section of iWeb pages or not but if it does, then I think the use of the absolute path using just a / would work.
The whole ../../ thing can be a pain.
Oh, hum… some hosts don’t allow absolute path specification like that tho in HTML files. I forgot about that.
The widgets are in an iframe so breaking out of that might be hard unless you specify the entire path:
http://web.mac.com/rockstar/Sites/myimage.jpg