(2010-10-09, 03:45 AM)wigiman Wrote: [ -> ] (2010-10-08, 11:27 PM)Damion Wrote: [ -> ] (2010-10-08, 11:18 PM)wigiman Wrote: [ -> ]ok, that works, but how do I round the edges and center the whole thing?
CSS:
margin:0 auto;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
It centers the entire board including text, the logo etc, and the edges are not rounded.
did you put it in #container ?
CSS rounded corners aren't supported by all browsers either, most notably internet exploder.
(2010-10-09, 04:10 AM)Damion Wrote: [ -> ] (2010-10-09, 03:45 AM)wigiman Wrote: [ -> ] (2010-10-08, 11:27 PM)Damion Wrote: [ -> ] (2010-10-08, 11:18 PM)wigiman Wrote: [ -> ]ok, that works, but how do I round the edges and center the whole thing?
CSS:
margin:0 auto;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
It centers the entire board including text, the logo etc, and the edges are not rounded.
did you put it in #container ?
Yes I did
(2010-10-09, 06:27 AM)AJS Wrote: [ -> ]CSS rounded corners aren't supported by all browsers either, most notably internet exploder.
the other rounded corners work and I use firefox.
Ah, it won't work because there's no background or border set in the container. You'll need to apply the border radius to #logo and #footer .lower instead.
For #logo
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
For #footer .lower
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
(2010-10-10, 08:42 AM)AJS Wrote: [ -> ]Ah, it won't work because there's no background or border set in the container. You'll need to apply the border radius to #logo and #footer .lower instead.
For #logo
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
For #footer .lower
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
Still won't make the corners round.
Can you put the code back in the CSS? You'll probably have to add some margins to the container for it to be noticeable.
Ok, I put the code back on the css.
(2010-10-10, 08:42 AM)AJS Wrote: [ -> ]Ah, it won't work because there's no background or border set in the container. You'll need to apply the border radius to #logo and #footer .lower instead.
For #logo
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
For #footer .lower
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
You should use short hand css:
For #logo
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
For #footer .lower
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
May only save 4 lines but think if you used it a lot.
That works, but how can I add shading behind like on this forum ---------------------------->
(2010-10-19, 04:08 PM)wigiman Wrote: [ -> ]That works, but how can I add shading behind like on this forum ---------------------------->
#container {
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
box-shadow:0 0 5px #000;
}