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 4 of 4
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    877
    Thanks
    53
    Thanked 6 Times in 5 Posts

    padded border within a div

    I'm not sure how to go about this.

    I want to make the text fit only within the white space - with a border, say 80px, all around. I've tried padding, but it doesn't work on the right and probably bottom.

    The demo page is here: http://www.aapress.com.au/gmc/demo.html

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    <title></title>
    <link rel="stylesheet" href="css/style2.css" type="text/css" media="all">
    <style>
    body{margin:0}
    #frame {background:url(images/frame1.png) top left no-repeat;height:760px;padding:100px 80px 80px 80px}
    </style>
    </head>
    
    <body>
    
    <div id="frame">
    	<div class="content">
    		<font color="#000">xxxxxxxxxxxxxxxxxxxuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxuuudb</font>
    	</div>
    </div>
    
    </body>
    
    </html>
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there tpeck,

    try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    body {
        margin:0;
        background-color:#000;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
     }
    #container {
        width:873px;
        height:780px;
        padding:78px 0 0 46px;
        background-image:url('http://www.aapress.com.au/gmc/images/frame1.png');
        margin:auto;
     }
    #content {
        width:776px;
        height:684px;
        padding:25px;
        overflow:auto;
        font-size:100%;
        line-height:1.2;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    <div id="content">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet 
    sollicitudin auctor. Nullam quis velit eget velit lobortis bibendum at 
    sit amet enim. Sed vel metus id mauris placerat pulvinar non a nunc. 
    Aliquam felis risus, viverra quis commodo vel, pharetra et sapien. Sed 
    at arcu felis. Vestibulum ante ipsum primis in faucibus orci luctus et 
    ultrices posuere cubilia Curae; Curabitur varius tempus euismod. 
    Maecenas id congue nibh.
    </p><p>
    In ut nisi et nisi mattis congue. Sed feugiat velit in neque porttitor 
    ornare. Aliquam nibh eros, cursus non cursus a, suscipit non lorem. 
    Aliquam ipsum nulla, ullamcorper id dapibus rhoncus, ultrices sit amet 
    ipsum. Integer pretium quam vitae ipsum rhoncus condimentum. Phasellus 
    at tellus ut eros vehicula scelerisque ut id tellus. Aliquam erat 
    volutpat. Cras vel felis quis enim ornare hendrerit a et lorem. Integer 
    sed ipsum elit. Pellentesque ante erat, consectetur nec tempor cursus, 
    laoreet nec metus. Pellentesque habitant morbi tristique senectus et 
    netus et malesuada fames ac turpis egestas.
    </p><p>
    Morbi rutrum cursus metus eget mattis. Pellentesque magna enim, commodo 
    nec mollis eu, dapibus in sapien. Pellentesque eget auctor tellus. Etiam 
    ante lorem, tempus in elementum et, vestibulum sit amet nulla. Fusce at 
    orci justo. Aenean lacus dolor, blandit a sodales a, blandit a justo. 
    Duis pellentesque eros at eros lobortis sagittis. Vivamus in augue quis 
    elit molestie euismod. Vivamus vitae nulla et augue feugiat faucibus 
    blandit non dui. Donec ultricies est nec urna aliquam sed rutrum lorem 
    eleifend. Pellentesque eu nibh massa, vel auctor quam. Integer ut diam 
    at augue hendrerit tincidunt. Morbi elementum feugiat libero in 
    condimentum. Nam lacinia ultrices sapien, et malesuada felis tempus at.
    </p><p>
    Fusce varius orci orci, eget rhoncus nunc. Nam luctus purus et arcu 
    ornare vel auctor turpis bibendum. Vivamus tincidunt arcu nec eros 
    porttitor aliquet. Fusce hendrerit viverra orci, ut vehicula lacus 
    luctus sit amet. Nullam sapien quam, vehicula eu viverra ut, elementum 
    ac magna. In aliquet, ligula ut mattis posuere, nulla nisl commodo nulla, 
    sit amet luctus nisi sapien id tellus. Sed convallis, nisl in iaculis 
    placerat, neque enim congue est, ut rhoncus nisi augue at nisi. Vivamus 
    a odio eros. Donec sit amet leo sem. Pellentesque lorem neque, bibendum 
    vel dignissim vel, lobortis ac odio. Nullam semper suscipit libero et 
    sollicitudin. Aenean metus nunc, venenatis ac sollicitudin quis, blandit 
    ut turpis.
    </p><p>
    Nullam sit amet odio nisi, eget pretium nisl. Aliquam hendrerit risus ut 
    turpis hendrerit malesuada. Proin bibendum, ligula in tristique malesuada, 
    diam urna dapibus leo, eu tincidunt felis felis sit amet massa. Aliquam 
    rutrum scelerisque ante nec hendrerit. Nunc sodales felis sit amet tortor 
    tincidunt varius. Maecenas convallis molestie ullamcorper. Aenean 
    ultricies augue risus, vitae suscipit leo. Sed facilisis, urna id 
    tristique egestas, turpis neque varius magna, et mollis mauris libero 
    egestas turpis. Aliquam semper elit ac ante tempor varius. Proin molestie, 
    neque nec congue tempus, ipsum justo ultricies turpis, id euismod risus 
    nisl quis tellus.
    </p>
    </div>
    </div>
    
    </body>
    </html>
    
    coothead

  • Users who have thanked coothead for this post:

    tpeck (10-28-2011)

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    877
    Thanks
    53
    Thanked 6 Times in 5 Posts
    Works great! So that's how it's done. Thanks...
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    No problem cobber, you're very welcome.


  •  

    Posting Permissions

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