How can one achieve the effect of having rounded corners for divs, similar to the dark blue header area of the <!-- m --><a class="postlink" href="http://www.mozilla.org/">http://www.mozilla.org/</a><!-- m --> site.
I have had a look at the css and html and it seems that to achieve this styling an image is used as background
<!-- m --><a class="postlink" href="http://www.mozilla.org/header_bl.png">http://www.mozilla.org/header_bl.png</a><!-- m -->
and that the header div is then styled using the the following CSS:
#header {
background: #455372 url("../../images/header_bl.png") bottom left repeat-x;
position: relative;
min-height: 39px;
height: 5em;
padding: 0;
voice-family: "\"}\"";
voice-family: inherit;
height: 3em;
padding: 15px 0;
}
I guess the relevant part is:
background: #455372 url("../../images/header_bl.png") bottom left repeat-x;
position: relative;
I have tried to copy this but am having problems. I cannot get the rounded corners to be repeated on the top left, top right and bottom right corners. As far as I can work out, there must obviously be something else at play that I am missing.
As you can probably guess, I have a basic knowledge of CSS and would like to learn how to achieve this effect. Any explanations or pointers to sites that can explain how this is done would be very gratefully accepted.<!-- m --><a class="postlink" href="http://www.mozilla.org/images/header_bl.png">http://www.mozilla.org/images/header_bl.png</a><!-- m -->
That is the image you were looking for. The rounded corners can be achieved by one of three ways:
I have had a look at the css and html and it seems that to achieve this styling an image is used as background
<!-- m --><a class="postlink" href="http://www.mozilla.org/header_bl.png">http://www.mozilla.org/header_bl.png</a><!-- m -->
and that the header div is then styled using the the following CSS:
#header {
background: #455372 url("../../images/header_bl.png") bottom left repeat-x;
position: relative;
min-height: 39px;
height: 5em;
padding: 0;
voice-family: "\"}\"";
voice-family: inherit;
height: 3em;
padding: 15px 0;
}
I guess the relevant part is:
background: #455372 url("../../images/header_bl.png") bottom left repeat-x;
position: relative;
I have tried to copy this but am having problems. I cannot get the rounded corners to be repeated on the top left, top right and bottom right corners. As far as I can work out, there must obviously be something else at play that I am missing.
As you can probably guess, I have a basic knowledge of CSS and would like to learn how to achieve this effect. Any explanations or pointers to sites that can explain how this is done would be very gratefully accepted.<!-- m --><a class="postlink" href="http://www.mozilla.org/images/header_bl.png">http://www.mozilla.org/images/header_bl.png</a><!-- m -->
That is the image you were looking for. The rounded corners can be achieved by one of three ways:
Put rounded corners in the background image. This way is probably best, and most universally compliant.
Use an overlying DIV with a transparent GIF. If you can make a transparent GIF with the rounded shape and place it over top of the background image, it will give the impression of a rounded corner. This is the second-best way to do it.
And finally, there's the easier, but Mozilla-proprietary way: -moz-border-radius (<!-- m --><a class="postlink" href="http://www.webreference.com/dhtml/column70/3.html">http://www.webreference.com/dhtml/column70/3.html</a><!-- m -->)
[/list=1]I am trying to work out how this effect is achieved on the mozilla site. The image:
<!-- m --><a class="postlink" href="http://www.mozilla.org/images/header_bl.png">http://www.mozilla.org/images/header_bl.png</a><!-- m -->
has a rounded corner bottom left and somehow this is used for all the corners. I would just like to know how this specific example actually works and which part of the css styling does what.
I tried using:
background: #455372 url("../../images/header_bl.png") bottom left repeat-x;
position: relative;
to repeat this but it does not seem to work, so I guess there must be something else involved.The way Mozilla does it involves four images:
<!-- m --><a class="postlink" href="http://www.mozilla.org/images/header_bl.png">http://www.mozilla.org/images/header_bl.png</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mozilla.org/images/header_tl.gif">http://www.mozilla.org/images/header_tl.gif</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mozilla.org/images/header_tr.gif">http://www.mozilla.org/images/header_tr.gif</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mozilla.org/images/header_br.gif">http://www.mozilla.org/images/header_br.gif</a><!-- m -->
And bottom right, top right, and top left corners are all transparent GIF's that cover up a portion of the corner of the header_bl.png image.
Now, without diving into the stylesheets, I imagine they use the corner images as backgrounds for 4 different block-level elements that are positioned in the top left, top right, and bottom right corners of the header.Thanks. Worked it out. One thing I am not quite sure about though are your methods 1 and 2. I guess the mozilla site uses method1 and this is the best method to achieve this effect (for IE compliance) or is there a better way?
Thanks again for your help.Well, since they are using an elastic layout (one that resizes with the text) the width of the header image does not have a set value in pixels.
Method #1 that I described involved having the rounded corners in the background image itself, which would of course be problematic on the Mozilla site if someone resized the text.
Mozilla uses Method #2 of rounded corners, which involves using small transparent GIF's to only show a rounded portion of the background image.
The reason that Mozilla did not use Method #3 is because it would ONLY work in Mozilla-based browsers (Mozilla and Firefox).