Can't get this text layout to work

olepix · 09-01-2011, 07:55 PM

Hi guys,

I'm having a bit of problem getting a company message to look the way I want I've designed it.

Here's what I'm trying to achieve

I've tried span layouts, setting each element with a different class, and floats.

No matter what I do the image breaks and I can't get that paragraph to work within that specific space.

Any help would be greatly appreciated!

flyingfisch · 09-01-2011, 08:28 PM

try using this code:

HTML:

Code:

<span class="bracket">{</span>
<div id="motto">Experience that delivers</div>
<div id="paragraph">paragraph text</div>
<span class="bracket">}</span>

CSS:

Code:

.bracket {
float: left;
padding-left: 3%;
}

#motto {
float: left;
padding-left: 3%;
width: 60%;
}

paragraph {
float: left;
padding-left: 3%
width: 35%
}

olepix · 09-02-2011, 05:11 AM

Still doesn't work

the right hand bracket keeps on dropping. I've spent all day trying to get this to work. I don't even know what to do anymore.

Thanks for your help

vikram1vicky · 09-02-2011, 06:07 PM

Try to adjust width, padding and margin.... it will solve your issue surely....

Stardog · 09-02-2011, 07:03 PM

Im guessing you're chopping up an image from PS? That's not really the way to do it. I would only make the two brackets images (or just text if you have the right font).

HTML

Code:

<body>

	<div id="site-width">

		<div class="bracket-left">
		<div class="bracket-right">
		
			<div id="content">
				<div id="title">Experience that delivers</div>
				<div id="paragraph">Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah .</div>
			</div>
		
		</div>
		</div>
		
	</div>

</body>

CSS

Code:

body {
	font-family:Arial, Helvetica, sans-serif;
}

#site-width {
	margin:auto;
	width:900px
}

.bracket-left {
	/* LEFT BRACKET IMAGE */
	background:url(bracket.jpg) no-repeat left;
}
.bracket-right {
	/* RIGHT BRACKET IMAGE */
	background:url(bracket.jpg) no-repeat right;
}

#content {
	/* HEIGHT = BRACKET IMG HEIGHT */
	height:100px;
}
#title {
	float:left;
	width:50%;
	border:1px solid black;
	/* MARGIN = BRACKET IMG WIDTH */
	margin-left:60px;
	font-size:2.5em;
}
#paragraph {
	float:right;
	width:30%;
	border:1px solid black;
	/* MARGIN = BRACKET IMG WIDTH */
	margin-right:60px;
	font-size:.7em;
}