Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 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
    New Coder
    Join Date
    Aug 2011
    Location
    OH, USA
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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%
    }

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Try to adjust width, padding and margin.... it will solve your issue surely....

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    39
    Thanks
    0
    Thanked 1 Time in 1 Post
    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;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •