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 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Inline / block problems.

    Hi all. I want my paragraphs to have splits between them. But I also want them to have this jagedy effect when the line ends when with display:inline, rather than have it expand to the width of the container.

    I want this effect, but this display:inline bunches up each paragraph:

    (also I'd like to add padding at the end of each line)

    This is with display:block - I don't want a box!




    Code:
    section {
    	top: 10%;
    	left: 0;
    	width:40%;
    	
    }
    
    h1, h2, p {
    	background: #000;
    	color:#FFF;
    }
    
    #about {
    }
    
    #about p {
    	display: block;	
    }
    
    <section id="about">
    <article>
    <p>I am Oliver Benns, a web enthusiast and 2nd year student at Nottingham Trent University studying Multimedia Design.</p>
    
    <p>My fascination of art and design formed at a fairly young age. Lunch times would often be spent in the computer room working away at a little HTML on Freewebs, Piczo and <a href="http://en.wikipedia.org/wiki/Matmice" target="_blank">Matmice</a>. That 2003 stepping stone lead me to explore the computer and all such technology.</p>
    
    <p>At college, my media and technical passion went further by obtaining A levels in Media Studies and ICT. After </p>
    
    <p>I now study Multimedia Design at Nottingham Trent University, which I am happy with. I have the creative thrill to get me out of bed each day but also look forward to graduation, in July 2012.</p>
    
    
    
    </article>
    </section>
    Thankyou!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,638
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    The simplest thing would be to put a span around the text (inside the paragraph) and apply the background color to this.


  •  

    Posting Permissions

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