...

View Full Version : 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
http://img98.imageshack.us/img98/6954/screenshot20110901at251.png

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:


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


CSS:


.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

<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

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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum