CSS BOX border

**hmvrulz** · 07-03-2008, 11:47 AM

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

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

**techietim** · 07-03-2008, 11:54 AM

HTML Code:

<!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

Originally Posted by techietim

HTML Code:

<!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

Originally Posted by jscheuer1

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

Thread: CSS BOX border

Thread Tools

Search Thread

CSS BOX border

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions