SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fitting text into a container

    Hello

    I found these forums by accident after a Google search to problem solve an issue I was having with my website build. I've learnt so much already - thank you!

    As my user name suggests, I'm an amateur at web design and so forgive me if this question seems extraordinarily dumb to some of you and also I apologise in advance for the non-technical language but I hope to convey what I am trying to achieve! (I did search the forums before posting but didn't find what I was looking for).

    So I have a body background image set for my design in my css file and also a background image for the container, which I intend all my text and images to sit within. The background image has a height of 1100px. For most of my pages this is perfectly adequate but for a couple the text overshoots the image.

    So I wondered if it was possible to extend the background image somehow? I did think about repeating it but it has curved edges and a border so I can't see how this would work.

    The only work-around my pea brain can think of (other than reducing the text!) would be to create another [bigger] image and creating a separate div id for those pages with more text than fits within the 1100px container.

    Any other suggestions, please? (You may have to speak slowly as I'm a bit slow at this )

    Many thanks in advance!

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, novicehere. Welcome to the forums.

    It sounds like you want to adjust the size of the background image in the text container.

    If the size and aspect ratio of that image is not important, then you can use:
    Code:
    background-size:100% 100%;
    and it will scale to fit the area required. That means that the dimensions will change to fill the container used by the text.

    Another possibility might be:
    Code:
    background-size:cover;
    but since the image has curved edges, that will probably not be satisfactory.

    If neither of these work, let us know.

    Cheers.

  3. #3
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ronpat

    Thank you for your quick reply and for your welcome.

    Sadly neither of those suggestions worked - nothing happened

    Could it be because the image is in a container div but the text is in a different div (my design has a header and a left and right column)?

    Thanks again!

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by novicehere View Post
    Could it be because ...
    I would assume that the background image is in an outer container and the text is somewhere within that outer container. Somewhat like this diagram.

    A background-image can be assigned to any of these divs or even the paragraph in CSS.
    Code:
    <div class="outer"> 
        <div class="content">
            <p>text is in here.</p>
        </div>
    </div>
    I'm afraid that without seeing the actual code, the best I can do is guess.

    If you can provide a link to the site, that would be great. If not, then perhaps you can prepare a valid standalone page that demonstrates the problem and paste the code in a post. You can click the link at the bottom of my post and find information about posting code and images.

    It doesn't sound like a tough problem, but we need to see the code to give sound advice.

    Thanks.

  5. #5
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    If you can provide a link to the site, that would be great.
    Here's the link.

    Quote Originally Posted by ronpat View Post
    It doesn't sound like a tough problem, but we need to see the code to give sound advice.
    I do hope you're right - I've been banging my head off the keyboard!

    Thank you.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    A quick fix would be to do this:
    Code:
    #container {
        background: url("../images/container980.gif") no-repeat 0 0;
       background-size:100% 100%;
        height:auto;/* never give a fixed height to fluid height containers that hold text */
        margin-left: auto;
        margin-right: auto;
        padding: 0 0 25px;
        position: relative;
        text-align: left;
    }
    Background-size is only supported in IE9+ so if you need older browsers support you would need to do either of these things.

    1) Slice the image into three parts. A top, a repeating middle section and a base. The top and bottom top and tail the layout while the middle section is a repeating gif of the two lines. This is the old fasioned way and will support old browsers but is a pain to code.

    2) Use CSS borders and border-radius for the round corners (IE9+) and let older browsers have square borders. No images required. Old browsers just get square layout elements.

    Note that generally you would not give a height to elements that hold content like text. The reason is that you never know what size text the user has defined (or zoomed) so your layout may be twice as tall on someone else's computer. text containers should have their height defined by their content so you have to create your backgrounds with that in mind and not use fixed width and height backgrounds where there is a chance that the content will change.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Here's an example using border-radius and no images.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0
    }
    body {
    	background:#ff2ed1;
    	padding:45px 0 25px;
    }
    .outer {
    	width:80%;
    	max-width:1170px;
    	min-width:320px;
    	margin:auto;
    	background:#fff;
    	position:relative;
    	border:5px solid #aa66b2;
    	border-radius:25px;
    	padding:10px;
    	box-shadow:10px 10px 10px rgba(0,0,0,0.3), inset 2px 2px 2px rgba(0,0,0,0.3);
    }
    .logo {
    	width:200px;
    	height:200px;
    	text-align:center;
    	position:relative;
    	line-height:200px;
    	float:left;
    	margin:-40px 20px 20px -40px;
    	display:inline;/* ie6 hack */
    	border:4px solid #aa66b2;
    	background:#fff;
    	border-radius:50%;
    }
    </style>
    </head>
    
    <body>
    <div class="outer">
    		<h1 class="logo">Logo</h1>
    		<p>Colonies culture shores of the cosmic ocean made in the interiors of collapsing stars emerged into consciousness, radio telescope, rings of Uranus of brilliant syntheses rich in mystery the sky calls to us. The ash of stellar alchemy a billion trillion bits of moving fluff the only home we've ever known! Euclid Hypatia take root and flourish laws of physics quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident colonies. Worldlets the sky calls to us, not a sunrise but a galaxyrise the sky calls to us radio telescope the ash of stellar alchemy Cambrian explosion with pretty stories for which there's little good evidence, another world Sea of Tranquility.</p>
    		<p>Vanquish the impossible trillion kindling the energy hidden in matter, something incredible is waiting to be known. Bits of moving fluff the carbon in our apple pies the ash of stellar alchemy consectetur adipisicing elit, hundreds of thousands how far away adipisci velit the ash of stellar alchemy vastness is bearable only through love extraplanetary consciousness, stirred by starlight radio telescope. Star stuff harvesting star light colonies preserve and cherish that pale blue dot light years paroxysm of global death vastness is bearable only through love are creatures of the cosmos astonishment venture. Quasar, culture Vangelis, the </p>
    </div>
    </body>
    </html>

  8. #8
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that, I will give those suggestions a try. Evidently I have a lot to learn!


Bookmarks

Posting Permissions

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