CSS BOX border [Archive] - Dynamic Drive Forums

hmvrulz

07-03-2008, 11:47 AM

http://img398.imageshack.us/img398/3324/researchcn0.gif

how to create the free products heading over the border...

with the border cut for tht part of the box ??? :confused:

techietim

07-03-2008, 11:54 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>box border</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
*{
font-family: tahoma;
}
fieldset{
width: 200px;
}
legend{
font-weight: bold;
font-size: 30px;
}
</style>
</head>
<body>

<fieldset>
<legend align="center">Welcome</legend>
<p>this is where the stuff goes</p>
</fieldset>

</body>
</html>

hmvrulz

07-03-2008, 01:28 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>box border</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
*{
font-family: tahoma;
}
fieldset{
width: 200px;
}
legend{
font-weight: bold;
font-size: 30px;
}
</style>
</head>
<body>

<fieldset>
<legend align="center">Welcome</legend>
<p>this is where the stuff goes</p>
</fieldset>

</body>
</html>

tht was fast...
i just noticed... the border needs to be curved... so i guess image is the only option !!!!

jscheuer1

07-03-2008, 03:10 PM

Different browsers render the fieldset and legend in different ways, some use a curved border for the fieldset and inset the legend about where you want it, and/or allow it to be moved to the desired location with positioning, padding and/or margin. Others do it other ways, or won't allow fine tuning without breaking the look.

There are ways of creating curved borders without images:

http://www.cssplay.co.uk/boxes/snazzy.html

and you could superimpose (with absolute positioning) a division with set dimensions, your free products heading text, and background over a portion of that border. In actual practice, this is rather cumbersome to do, but might be worth it. Images - if they can be kept to a minimum byte size, might actually be preferable though.

You could use images for the curved boarders and markup, style, and text only for the heading. But I don't think that font would be available on many user's systems.

Or you could do the borders with css and the heading with an image.

It's really up to you how involved you want to get. Doing it all with css and markup would be faster loading for sure. And would potentially allow for more legible resizing and potentially for more flexible adaptation to various resolutions than images can.

hmvrulz

07-03-2008, 04:26 PM

Different browsers render the fieldset and legend in different ways, some use a curved border for the fieldset and inset the legend about where you want it, and/or allow it to be moved to the desired location with positioning, padding and/or margin. Others do it other ways, or won't allow fine tuning without breaking the look.

There are ways of creating curved borders without images:

http://www.cssplay.co.uk/boxes/snazzy.html

and you could superimpose (with absolute positioning) a division with set dimensions, your free products heading text, and background over a portion of that border. In actual practice, this is rather cumbersome to do, but might be worth it. Images - if they can be kept to a minimum byte size, might actually be preferable though.

You could use images for the curved boarders and markup, style, and text only for the heading. But I don't think that font wouldn't be available on many user's systems.

Or you could do the borders with css and the heading with an image.

It's really up to you how involved you want to get. Doing it all with css and markup would be faster loading for sure. And would potentially allow for more legible resizing and potentially for more flexible adaptation to various resolutions than images can.

thanx for ur time.. this will really help me...
Thanx for solving my problem... i have a variety of ways to choose from