8 replies [Last post]
technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 6 years 11 weeks ago
Timezone: GMT+1
Joined: 2004-06-09
Posts: 260
Points: 8

I am looking to create the box as in the attached image, without using images or tables or even using the line-height property. I have been looking into something like:

#box {
background-color: #ff99cc;
width: 100px;
font-family: times, serif;
font-size: 30px;
font-weight: normal;
color: #000000;
border-top-style: solid;
border-top-color: #ccccff;
border-top-width: 10px;
text-decoration: none;
}

<div id="box">TEXT</div>

but irritantingly enough, the border will not take up the upper half of the text, and indeed it should be exactly 50% for both colors. Thanks all in advance.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Box with borders

First up, use "Times New Roman" instead of times.

The border, you can simply write

border-top: 10px solid #ccf;

To be honest though, I'm not sure what you're trying to achieve.

Verschwindende wrote:
  • CSS doesn't make pies

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 6 years 11 weeks ago
Timezone: GMT+1
Joined: 2004-06-09
Posts: 260
Points: 8

Box with borders

Thanks for the reply. The split up of the border attributes is done to be Netscape compliant.

The idea is to create a box, with two colors (top and bottom) and a piece of text aligned in the middle. Again, no tables or images to be used, just pure parametrically.

Thanks again.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Box with borders

The border won't take up half the text it's a border! make it any size you like it will still have to leave the space for the contents I think to achieve what you want you may have to use three divs one full size one colour, second half size another colour and a third full size transparent with the text, then play around with top/left and poss z-index to position them overlapping.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Box with borders

Yeah, you could have the top box with no bottom border, the bottom box with no top border, and give the transparent div with text in a margin of the border width. That might work.

Verschwindende wrote:
  • CSS doesn't make pies

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 45 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Box with borders

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/tr/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> twotone </title>
<style type="text/css">
.outer {height:4em; position:relative;}
.inner1 {position:absolute; top:0; left:0; height:1em; font-size:4em; background:#f88;}
.inner2 {position:absolute; top:0; left:0; height:0.6em; overflow:hidden; font-size:4em; background:#aaa;}
</style>
</head>

<body>
<div class="outer">
<div class="inner1">&nbsp;TEXT&nbsp;</div>
<div class="inner2">&nbsp;TEXT&nbsp;</div>
</div>
</body>
</html>

It should be posible with just two nested divs but this is a 'quick and dirty' method.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 16 years 28 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

Box with borders

Basically what Hugo said.

Set the font-size in the container.
#container holds the bottom colour
#color2 holds the top color (confusing that)
Z-index on the #text (I have no idea why that was needed but it was)
Line-height:55% and the &nbsp; in the #color2 div are important for IE6 to work properly.

Works in IE6 and FF0.9. You can alter the width of the #container and it will work with text zoom and also multiple lines of text when they wrap, but not in IE.

Enjoy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
	<title>Untitled Document</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
		#container{
			background-color:#FF0000;
			position:relative;
			font-size:500%;
		}
		#color2{
			position:absolute;
			background-color:#0000FF;
			left:0px;top:0px;
			height:50%;
			width:100%;
			line-height:55%;
		}
		#text{
			color:#fff;
			position:relative;
			z-index:10;
		}
	</style>
</head>
<body>
<div id="container">
	<div id="color2">&nbsp;</div>
	<div id="text">Text</div>
</div>
</body>
</html>

//edit: haha stu, beat me by a minute Tongue I see we have totally different methods though.

//edit edit: Mine suddenly stopped working in IE6.... I'll edit it again when it it works :?

//edit edit edit: Fixed for IE6

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 45 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Box with borders

Or~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> border writing </title>

<style type="text/css">
.borderwrite {position:relative; display:block; height:0; width:15em; border-top:3em solid #aaa; border-bottom:3em solid #f88; overflow:visible; margin:0; background:#aaa;}
.borderwrite p {position:absolute; top:-1.5em; color:#000; font-size:5em;}
* html .borderwrite p {top:-0.5em;}
</style>
</head>
<body>
<div class="borderwrite">
<p>&nbsp;TEXT&nbsp;</p>
</div>
</body>
</html>

Just one div.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Box with borders

Well there's the answer, Very nice, single div; I take my hat off to you sir! you have a gift Wink
Of course I was thinking in that direction as well Smile :roll:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me