want to develop this image using css code

**Dan Schulz** · Jan 6, 2008 04:43

Unfortunately I don't have the ability to approve attachments (yet). Can you toss up a link to the image?

**Dan Schulz** · Jan 6, 2008 05:41

Ok, one quick question. Does the width have to stay the same, or can it expand when the text is resized? (If it's the former, it'll be a LOT easier to implement.)

**Erik J** · Jan 7, 2008 04:15

Had the time to give it a try (your deadline was near?).
If this will do? Most certainly Dan has better solutions, I'm still a newbe.

Code CSS:

#directors_word {
  height: 194px;
  width: 264px;
  background: url("img_directors_word.jpg");
}
#directors_word p {
  padding: 55px 20px 0;
  height: 120px;
  text-align: left;
  font-size: 12px;
  line-height:18px;
}
#directors_word span {
	padding-left:50px;
}

Code HTML4Strict:

<div id="directors_word"><p>“ Lorem ipsum dolor sit amet consectetuer sagittis Aliquam egestas Curabitur aliquam. Lacus sem convallis Maecenas lacinia auctor Nunc dapibus Morbi urna In... ”</p><span>Directors Name</span></div>

**Erik J** · Jan 7, 2008 07:59

Here is a suggestion for the quote-marks. I took the whole div:

Code CSS:

#directors_word {
	height: 194px;
	width: 264px;
	background-image: url(img_about_quality_coos_word.jpg);
	margin-top: 20px;
}
#directors_word p {
	height: 100px;
	text-align: left;
	font-size: 12px;
	line-height:18px;
	vertical-align: base-line;
	font-family: "Trebuchet MS";
	color: #575757;
	padding-top: 50px;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 20px;
}
#directors_word span {
	font-family: "Trebuchet MS";
	font-size: 14px;
	line-height: 50px;
	color: #000000;
	padding-left: 50px;
}
#directors_word p span {
	padding: 0;
	color: #207EC9;
	font-size: 30px;
	line-height:18px;
	vertical-align: text-top;
}

Code HTML4Strict:

	<div id="directors_word"><p><span>“</span> Directors text About Reed Exhibition India will be
	placed here. Directors text About Reed Exhibition India will be placed here. Directors text About
	Reed Exhibition India will be placed here. <span>”</span></p><span>COO's Name</span></div>

In IE the quote-marks seems to be on text base-line. I dont know if that's a bug or if it's my coding.

**Erik J** · Jan 7, 2008 08:52

I had an idea about positioning the qoute marks. This displays the same in IE6-7 and Firefox 2. But if it is good coding I'm not the person to tell. I'm still a newbe!

Code CSS:

#directors_word {
	height: 194px;
	width: 264px;
	background-image: url(img_about_quality_coos_word.jpg);
	margin-top: 20px;
}
#directors_word p {
	height: 135px;
	text-align: left;
	font-size: 12px;
	line-height:18px;
	vertical-align: base-line;
	font-family: "Trebuchet MS";
	color: #575757;
	padding-top: 35px;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 20px;
}
#directors_word span {
	font-size: 14px;
	line-height: 21px;
	color: #000000;
	padding-left: 50px;
}
#directors_word p i {
	position: relative;
	top: 7px;
	left: 0;
	color: #207EC9;
	font-size: 30px;
	line-height:30px;
}
#directors_word p em {
	position: relative;
	top: -12px;
	left: 0;
	color: #207EC9;
	font-size: 30px;
	line-height:18px;
	vertical-align: -20px;
}

Code HTML4Strict:

	<div id="directors_word"><p><i>“</i> Directors text About Reed Exhibition India will be
	placed here. Directors text About Reed Exhibition India will be placed here. Directors text About
	Reed Exhibition India will be placed here. <em>”</em></p><span>COO's Name</span></div>

Edit) If you want the first text-line to align left as in the image in your original #1 post:

Code CSS:

#directors_word p i {
	margin-left: -0.66em;

**Erik J** · Jan 8, 2008 01:26

On my WinXp browsers it looks ok.

Experiment with this example, (to be more flexible, the relative positioning could better be in em):

Code HTML4Strict:

<!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>Directors Word</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
	margin:0;
	padding:0;
}
#directors_word {
	height: 194px;
	width: 264px;
	background-image: url("http://www.r-interactive.net/clients/reed_css/images/main_images/img_about_quality_coos_word.jpg");
	margin-top: 20px;
	font-family: "Trebuchet MS";
}
#directors_word p {
	height: 135px;
	text-align: left;
	font-size: 12px;
	line-height:18px;
	color: #575757;
	padding-top: 40px;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 25px;
}
#directors_word span {
	font-size: 14px;
	line-height: 21px;
	color: #000000;
	padding-left: 50px;
}
#directors_word p i {
	position: relative;
	top: 7px; /* or rather 0.2em */
	left: 0;
	margin-left: -0.66em; /* aligns first line text start with the left text edge*/
	color: #207EC9;
	font-size: 30px;
	line-height:30px;
}
#directors_word p em {
	position: relative;
	top: -12px; /* or rather -0.4em */
	left: 0;
	color: #207EC9;
	font-size: 30px;
	line-height:18px;
	vertical-align: -20px;
}
</style>
</head>
<body>
	<div id="directors_word"><p><i>“</i> Directors text About Reed Exhibition India will be
	placed here. Directors text About Reed Exhibition India will be placed here. Directors text About
	Reed Exhibition India will be placed here. <em>”</em></p><span>COO's Name</span></div>
</body>
</html>

**Erik J** · Jan 8, 2008 02:17

I learned a lot myself.

**Erik J** · Jan 8, 2008 03:01

Can't test this error on my system now.

But it looks as IE6 can't fit the right_coloumn in the parent width.
As a last resort try widthen the container boxes for IE6 with a little hack to be placed after the #main coloumn declaration:

Code CSS:

* htlm #pagewidth {
	width: 774px;
}
* htlm #main_coloumn {
	width: 774px;
}

**Erik J** · Jan 8, 2008 03:07

A better solution would be to try overflow:hidden on the #directors_word div:

Code CSS:

#directors_word {
	height: 194px;
	width: 264px;
	background-image: url(img_about_quality_coos_word.jpg);
	margin-top: 20px;
	font-family: "Trebuchet MS";
	overflow: hidden;
}

Edit ) I think that IE6 doesn't respect the width here when the child grows with padding.

**Dan Schulz** · Jan 8, 2008 04:14

Erik, it's * html, not * htlm.

Anyway, I was about to rewrite this my way, but since you seem to have a handle on it, I'll let you take it from here.

**Erik J** · Jan 8, 2008 04:52

Please Dan, this and do have a check in her other thread and have a look on the menu in Opera. I have told her I'm a newbe but I try to help the best I can (and I have lot of time of my own right now

).

**Erik J** · Jan 8, 2008 11:50

I have tested this code implemented to your page locally on WinXP in all major browsers exept Win-Safari. On browsers with user controlled text size the quote marks follows the text. The text is constrained to image area. Have put in comments to explain how I thought.

Stand alone version of the "directors_word" part of main.css and html:

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Directors Word</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
	margin:0;                 /* reset all elements for this stand alone version*/
	padding:0;
}
#directors_word {
	margin-top: 20px;
	height: 194px;            /* heights can expand, but allows the background image height */
	width: 264px;
	background-image: url("http://www.r-interactive.net/clients/reed_css/images/main_images/img_about_quality_coos_word.jpg");
	font-family: "Trebuchet MS";
	padding-top: 1px;         /* padding to keep child margin from (css ruled) collapsing, */
	overflow: hidden;         /* prevents IE6 to expand the div width and so breake the page */
}
#directors_word p {
	height: 120px;            /* keeps text inside image area, b-margin pushes the span down */
	text-align: left;
	font-size: 12px;
	line-height:18px;
	color: #575757;
	margin: 39px 0 10px;      /* top -sides - bottom, controls text-start and span position */
	padding: 0 15px 0 25px;   /* top - right - bottom - left */
	overflow: hidden;         /* prevents content or large text-size showing below the image */
}
#directors_word span {
	font-size: 14px;
	line-height: 21px;
	color: #000000;
	padding-left: 50px;;      /* inline-box can have horizontal margins and padding*/
}
#directors_word p i {       /* <i> is an in-line element */
	position: relative;       /* position absolute wouldn't move with user text size  */
	top: 0.2em;               /* positive top visually moves the object down against font-height */
	left: 0;
	margin-left: -0.66em;     /* pulls real object to align first line start with text edge */
	color: #207EC9;
	font-size: 30px;
	line-height:30px;         /* calculated with the 30px pushes the first text line down */
}
#directors_word p em {      /* <em> is an in-line element */
	position: relative;       /* visually move, occupies the original space */
	top: -0.4em;               /* neg moves the object up against vertical down-alignment*/
	left: 0;
	color: #207EC9;
	font-size: 30px;
	line-height:18px;         /* same as p line-height to align with the text line */
	vertical-align: -0.66em;  /* neg text align to pull down the 30px font-height */
}
</style>
</head>
<body>
	<div id="directors_word"><p><i>“</i> Directors text About Reed Exhibition India will be
	placed here. Directors text About Reed Exhibition India will be placed here. Directors text About
	Reed Exhibition India will be placed here. <em>”</em></p><span>COO's Name</span></div>
</body>
</html>

**Dan Schulz** · Jan 8, 2008 13:23

I'm not home right now, so I'll have to check it when I get back (trying to dodge some whacky severe weather that's been making itself feel at home around Chicago, including tornadoes) in a few hours.

If you'd still like me to whip up my take of it, please let me know.

**Erik J** · Jan 8, 2008 13:41

Edit ) In the meantime... This ultimate last version works perfectly the same in IE 5.5 too.

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Directors Word /2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
	margin:0;
	padding:0;
}
#directors_word {
	margin-top: 20px;
	height: 194px;
	width: 264px;
	background-image: url("http://www.r-interactive.net/clients/reed_css/images/main_images/img_about_quality_coos_word.jpg");
	font-family: "Trebuchet MS";
	padding-top: 1px;
	overflow: hidden;
}
#directors_word p {
	height: 120px;
	text-align: left;
	font-size: 12px;
	line-height:18px;
	color: #575757;
	margin: 43px 0 6px;
	padding: 0 15px 0 25px;
	overflow: hidden;
}
#directors_word span {
	font-size: 14px;
	line-height: 21px;
	color: #000;
	padding-left: 50px;;
}
#directors_word p i {
	position: relative;
	top: 0.2em;
	left: 0;
	margin-left: -0.6em;
	color: #207EC9;
	font-size: 30px;
	line-height:30px;
}
#directors_word p em {
	position: relative;
}
#directors_word p em span{
	position: absolute;
	top: 0;
	left: -53px;
	color: #207EC9;
	font-size: 30px;
	line-height:18px;
	vertical-align: -0.6em;
}
</style>
</head>
<body>
	<div id="directors_word">
		<p>
			<i>“</i> Directors text About Reed Exhibition India will be placed here.
			Directors text About Reed Exhibition India will be placed here. Directors text
			About Reed Exhibition India will be placed here. <em><span>”</span></em>
		</p>
		<span>COO's Name</span>
	</div>
</body>
</html>

**Erik J** · Jan 14, 2008 06:21

I think you missed the html changed too. A span is added inside the em tag.

**Erik J** · Jan 15, 2008 03:23

Something went wrong when you pasted the code I think.
Here is a working code-snippet for the main.css: (also made the font-rules in shorthand)

Code CSS:

#directors_word {
	height: 194px;
	width: 264px;
	background-image: url("../images/main_images/img_about_quality_coos_word.jpg");
	margin-top: 20px;
	font: 12px/18px "Trebuchet MS";
	padding-top: 1px;
	overflow: hidden;
}
#directors_word p {
	height: 120px;        /* the height (you had 135px) together with the margins controls the COO-span position */
	text-align: left;
	color: #575757;
	margin: 43px 0 6px;   /* if height is changed to 135px, the bottom margin needs to be -9px */
	padding: 0 15px 0 25px;
	overflow: hidden;
}
#directors_word span {
	font: 14px/21px "Trebuchet MS";
	color: #000000;
	padding-left: 50px;
}
#directors_word p i {
	position: relative;
	top: 0.2em;           /* top/right controls the start-quote mark related to the start of first line */
	right: 0;
	margin-left: -0.55em; /* aligns the paragraph text first line start with the text edge (mind if it starts with a space) */
	color: #207EC9;
	font: normal 30px/30px "Trebuchet MS";
}
#directors_word p em {
	position: relative;
}
#directors_word p em span{
	position: absolute;
	top: 0;               /* top/left controls the end-quote mark related to the last character */
	left: -3px;
	padding-left: 0;
	color: #207EC9;
	font: normal 30px/18px "Trebuchet MS";
	vertical-align: -0.6em;
}

**Loredana** · Jan 15, 2008 05:02

Originally Posted by Dan Schulz

Ok, one quick question. Does the width have to stay the same, or can it expand when the text is resized? (If it's the former, it'll be a LOT easier to implement.)

I was very happy when I saw this topic because I too was looking to achieve this. One little differrence: the width expands when resizing the text, so I was wondering how could it be achieved if the width expands.

**Erik J** · Jan 15, 2008 05:55

Originally Posted by Loredana

I was very happy when I saw this topic because I too was looking to achieve this. One little differrence: the width expands when resizing the text, so I was wondering how could it be achieved if the width expands.

Try set a flexible width and height to #directors_word, and flexible height to "#directors_word p" , you'll see that it works the same.

It is the background image that don't expand with the box. To solve that would take a different solution.

**Loredana** · Jan 15, 2008 07:21

Originally Posted by erik.j

Try set a flexible width and height to #directors_word, and flexible height to "#directors_word p" , you'll see that it works the same.

It is the background image that don't expand with the box. To solve that would take a different solution.

Hi Erik!
Yes, I'm looking to expand the background image with the box, but my guess is that can't be done. That is why I don't necessarily want to use one single image, I don't mind using 2 that combined look like 1 when rendered by the browsers (i don't know if that's clear enough).
Could you tell me more about your solution?

**Erik J** · Jan 15, 2008 08:07

Maybe you can describe what you are trying to achieve in a new thread, otherwise I'm afraid it would be OT.

Maybe you can get more answers also, if you start a new thread about it.

**Loredana** · Jan 15, 2008 11:13

Originally Posted by nisha

hi,

As all of u know by now that i am developing a site in css for the first time
i have one more problem in css coding. i am not able to change the attached image to a css code to appear in my site.

so hope u expert in site point will help me one more time.

also view the image in the below link to get the perfect idea :

http://www.r-interactive.net/clients...ty_policy.html

Hope i get a quick reply for this thread.

Erik, I'm sure I'm on topic since I want to achieve the same visual result as Nisha

. The thing is he had fixed design, while I have fluid design.

**Erik J** · Jan 15, 2008 15:09

Ok, you are right. She (the TO) also wanted to help.

Here is a possible solution. Hope it comes to use:

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Fluid Quote Bubble</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
* {
	margin:0;
	padding:0;
}
#quotebubble {                              /* I'm new to this, so I explain thoughts in case things needs correction ;-) */
	margin: 20px 20px;                        /* The percentage instead of fix padding is only to try fluid vertical centering. */
}
#quotebubble div {
	width: 66%;
	background: url(fluid_quote_bubble_right.gif) no-repeat 100% 0; /* positioned 100% from left, comes before left in the flow */
	font: medium/130% "Comic Sans MS", "Trebuchet MS";
}
#quotebubble span {
	display: block;                           /* only block can have vertical margin */
	font: 1.6em/1em "Trebuchet MS";
	color: #207EC9;
	margin: -15px 0 0 120px;                  /* margins controls the position of quoted person's name */
}
#quotebubble div p {
	height: 190px;                            /* height+padding makes the bg-image show, and keeps quoted person in place */
	text-align: justify;
	padding: 3% 8% 0;                         /* percentage padding shrinks with box size, height is adjusted approximatly */
	background: url(fluid_quote_bubble_left.gif) no-repeat 0 0; /* position tight to left, comes after in html to overlap right */
}
* html #quotebubble div p {                 /* star-html hack will be read by IE5-6 only */
	height: 210px;                            /* IE5.5 will include padding in this, so it is reversed padding off-adjusted */
	he\ight: 190px;                           /* a backslash makes only IE6 read the rule; IE6 doesn't need this hack */
}
#quotebubble div p i {                      /* <i> is an in-line element and it will be the start of first text-line */
	position: relative;
	top: 0.3em;                               /* positive top visually moves the object down against font-height */
	right: 0;
	margin-left: -0.5em;                      /* pulls real object towards left to align first text-letter with text edge */
	color: #207EC9;
	font: normal 2.5em/1em "Trebuchet MS";    /* left typograph quote mark as html numeric =  & # 1 4 7 ; */
}
#quotebubble div p em {                     /* <em> is an in-line element so it will follow tight with end of text */
	position: relative;                       /* visually move, occupies the original space and attached to text */
}
#quotebubble div p em span{
	position: absolute;                       /* position absolute makes the object independent of parent em's surrounding */
	top: -0.1em;                              /* negative top pulls the object up towards the above text line*/
	left: 0;
	margin: 0;
	color: #207EC9;
	font: normal 2.5em/1em "Trebuchet MS";    /* right typograph quote mark as html numeric = & # 1 4 8 ; */
}
</style>
</head>
<body>
	<div id="quotebubble">
		<div>
			<p>
				<i>“</i>Lorem ipsum dolor sit amet. Consectetuer tincidunt. Curabitur felis
				commodo tempus risus id. Eleifend sed dictum nec porttitor. Velit ipsum dolor id.
				Tincidunt eget. Phasellus Orci lobortis id quis vitae. Neque Vivamus iaculis sapien...
				<em><span>”</span></em>
			</p>
		</div>
		<span>Cordelia</span>
	</div>
</body>
</html>