How to Create A Colored Text Box with Rounded Corners - Dreamweaver Tutorial
Nov 3rd, 2008 | By Adobe-Masters.com | Category: Dreamweaver, Tutorials | 18,996 views | Subscribe | PDFWhat’s up! I just made comments popup in wordpress and now I’m creating a text box for my new shopping page while taking a break from differing with politicians…
Ever wanted to post a box with rounded corners some place on your website to display some text message to your web visitors?
Here we will take the second option to compose our text box with xhtml and css for better search engine optimization. We can add text to the actual web page, where in the first option we’d be adding the text to an image. Search engines are good for crawling text on a page, but they cannot pick up text in the form of an image (unless you’re using alt or title tags, but that’s a different story).
Friday the 13th (Feb 2009) Update: I’ve recently learned how to add text via AP Div in Dreamweaver. Read more about AP Div boxes here because you can easily change the color from the properties menu.
How to Create A Colored Text Box with Rounded Corners - Dreamweaver Tutorial
So why not do it the easy way? Use the CSS Rounded Box Generator as a tool. Be sure to follow the steps below to generate the box.
- Enter your colors
- Save all five corner images, upload them to your images folder
- Copy the css, and paste it into your css file
- Copy the html, and paste it into your html file
Want to see it? Let me show you an example. I’ve created a Yellow colored text box for my new shopping template. Its at the top on the left sidebar.
After using the generator tool, I happened to noticed that their were two modifications that were necessary to properly fit the box on the left sidebar. I changed the both width settings to a fixed 160px, specifyed my image locations, then I changed the the auto setting in the margin to 0 to remove the indent. All of these were css modifications for a brand new round corner text box.
Now for some good web videos…
[...] What’s up! I just made comments popup in wordpress and now I’m creating a text box for my new shopping page… Ever wanted to post a box with rounded corners some place on your website to display some text message to your web visitors? … Read more [...]
One way to do it is by placing your rounded corners either to the sides or top and bottom of a perfectly rectangular text box. Make everything the same color, and you have the effect!
In fact it’s such an easy advice!
How didn’t I got it myselves much earlier?!