Stylesheets - How do i do this?

Author

How do i do this?

Mark

2005-10-09, 6:27 pm

Hello

i want to have a rounden corner, then some text and then another rounden
corner. To explain it better, go to this site; there is a image how it
should be beneath the code how it is now:

http://www.keyone.nl/temp.php

I am not able to get this right. I tried a lot...
Can anyone help me in the right direction?

thanks,
Mark

It is the footer in the CSS. This is the code for the footer:

<code>
/* footer */
#footer {
clear:both;
padding:0;
margin:0;
}

#footer_left {
background: url(../img/footer_left.gif) bottom left no-repeat;
margin: 0;
padding:0;
height:3em;
width:10em;
}

#footer_right {
float:right;
background: url(../img/footer_right.gif) bottom right no-repeat;
margin: 0;
padding:0;
padding-right:10em;
height:3em;
width:10em;
}

#footer_text {
float:right;
background: #AF0000 url(../img/footer.gif) repeat-x left;
color:white;
text-align:center;
font-size:0.8em;
width:40em;
margin:0 0 0 0;
}
</code>

Spartanicus

2005-10-09, 6:27 pm

Mark <scheper@xs4all.nl> wrote:

[footer text displayed on top of a box's bottom "border"]

>http://www.keyone.nl/temp.php

Most rounded border methods use background images, the scalability of
text and the fact that the footer text may wrap makes positioning it on
top of such images an exercise that is prone to failure.

--
Spartanicus

Rincewind

2005-10-09, 10:19 pm

On Sun, 09 Oct 2005 18:38:40 +0200, Mark wrote:

> Hello
>
> i want to have a rounden corner, then some text and then another rounden
> corner. To explain it better, go to this site; there is a image how it
> should be beneath the code how it is now:
<snip>
Have you tried to Google for css rounded corners, 169,000 results

Jim Moe

2005-10-09, 10:19 pm

Mark wrote:
> Hello
>
> i want to have a rounden corner, then some text and then another rounden
> corner. To explain it better, go to this site; there is a image how it
> should be beneath the code how it is now:
>
> http://www.keyone.nl/temp.php
>
> I am not able to get this right. I tried a lot...
> Can anyone help me in the right direction?
>
The layout suggested below wraps when the browser's viewport is down to
about 60 pixels.
Set footer_left and footer_right widths and heights to the size of the
images. Remove the float:right from footer_text, set footer_text height to
the size of the image, the width to 100%. This way footer_left and _right
overlay footer_text.
Place in this order:
<div id="footer_left"> </div>
<div id="footer_right"> </div>
<div id="footer_text">website versie 4 || copyright 2002 - 2005</div>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

dingbat@codesmiths.com

2005-10-10, 6:27 am

Mark wrote:

> i want to have a rounden corner

Avoid rounded corners. The minor visual "niceness" of having the
rounded box effect is _far_ outweighed by the sheer cussedness of
getting the damned things to work well across browsers, across the
combinations of text size/screen resolutions. Designers love 'em - but
they're just not worth the trouble.

If you really must, this one is about the best of the bunch:
http://www.redmelon.net/tstme/4corners/