html tags, rounded corners
Hello,
Is here any people that have knowledge in html, especially in working with div tags? So, what i want is to create a block on my page with rounded corners, but without using images(!) i've searched, but found only tuts with using images Thanks |
Re: html tags, rounded corners
I don't think it's possible without images. HTML isn't designed for that purpose.
|
Re: html tags, rounded corners
Quote:
PS: NiftyCube is browser-independent, works on any decent browser/platform. |
Re: html tags, rounded corners
Search for "rounded corners with css" and you will find what you need.
|
Re: html tags, rounded corners
Quote:
So, apparently it is possible but it probably looks the best with images. Looks like it will probably be supported by all browsers soon. http://jonraasch.com/blog/css-rounde...n-all-browsers You learn something new everyday!:) EDIT: Yay, I can make circles! |
Re: html tags, rounded corners
Quote:
Quote:
Quote:
Quote:
Quote:
Code:
<!doctype html> |
Re: html tags, rounded corners
Actually there is a way of accomplishing this with using just HTML + CSS. This came around before all this fancy browser action.
I stumbled across this years ago and thought it was nifty. Depending on how rounded you want your corners (5px is normal, but up to 15 is cool), you'll need to use that many 'b' tags, for each corner. I know this sounds odd right now but I'll try to explain it a bit but I recommend googling it to find the tut somewhere. I'm going to describe just the top left corner, each corner will be the same but reversed and/or inversed with height and top margin. You start with a top-row div class that holds: both corners and a title bar. Then a div for the main content section of the box, then another row called bottom-row that holds the same thing as the top row. Each corner has the amount of b tags as your round-ness. Each b tab will be 1px in width, with a background color of whatever color you want the inside of the bordered box to be, has a display: block, margin and padding of 0; Then for the top left corner you play with height and margin-top. For my example I'm going to use a box rounded at 5. The HTML of the top row: HTML Code:
<div class="top-row">Ok, the CSS for the top row, left corner Code:
.top-row, .top-row div, .top-row div b{Code:
Code:
If you're fuzzy on the concept here's a diagram: Top left Corner b tags, each column is a separate tag. Code:
----*[EDIT] Wow, making this made me feel like I've been in the industry a while...I guess my age in this field shows. |
Re: html tags, rounded corners
Wow, crazy stuff. It will make many things much easier.
|
Re: html tags, rounded corners
Quote:
Quote:
|
Re: html tags, rounded corners
It is possible with just CSS.
I guess just works in Firefox. Here is a qucik copu from a CSS file I've done. Feel free to use. I am beer hence no indepth post: #mainbox { /* Box size */ width: 94%; margin-left: 3%; margin-top: 8px; /* Borders and background */ border: 3px solid #A30EC4; background: #FFFFFF; background-image: url('bgr_main.png'); background-repeat: repeat-x; padding: 3px; /* ROUND CORNERS HERE: */ -moz-border-radius: 15px 15px 15px 15px; } |
| All times are GMT -4. The time now is 19:47. |
Powered by vBulletin®
Copyright ©2000 - 2024, vBulletin Solutions, Inc.