Web Analytics Made Easy -
StatCounter Can't get this text layout to work - CodingForum

Announcement

Collapse
No announcement yet.

Can't get this text layout to work

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Can't get this text layout to work

    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!

  • #2
    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%
    }

    Comment


    • #3
      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

      Comment


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

        Comment


        • #5
          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;
          }

          Comment

          Working...
          X