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 Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Background Images


    Ok, I have been going in cirlces.

    What I am tring to do is lay text on 3 background images. Top Box, Middle Box, Bottom Box.

    The middle box should expand depending on the amount of text. "repeat-y"

    1st problem-The TOP of the middle box is at the 0 0 point or under the Top Box. I tried margin-top and padding, but then it move my text.

    2nd problem(biggest issue)- I can not get the text to go into the bottom box.

    My objective:
    1) have a box that expands depending on amount of text.
    2) Have text sit in the top box and middle box and BOTTOM box.


    I am totally stumped so any help would be really, really apreciated.

    Here is the code I am using:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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 {
    	
    	text-align:center;
    	padding:20px 0;
    }
    h1, p {
    	margin:0 0 1em
    }
    #outer {
    	width:738px;
    	margin:auto;
    	border:1px solid #000;
    	text-align:left;
    	padding:5px;
    }
    .main {
    	width:738px;
        clear:both;
    	background:url(images/Middle.png) repeat-y 0 0;
    }
    .inner {
    	width:738px;
    	background:url(images/Top.png) no-repeat 0 0;
    	padding:11px 0 0;
    }
    .base {
    	clear:both;
    	width:738px;
    	background:url(images/Bottom.png) no-repeat 0 0;
    	height:210px;
    	overflow:hidden;
    }
    h1,h2 {
    	text-align:center
    }
    .content {
    	float:left;
    	width:470px;
    	margin:25px 0 0 134px;
    	display:inline;
    	position:relative;
    	z-index:99;
    }
    #footer{
    	clear:both;
    	text-align:center;
    	width:738px;
    }
    </style>
    </head>
    <body>
    <div id="outer">
    	<h1>Main Heading</h1>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices euismod lorem. Nulla cursus. Etiam aliquet venenatis tellus. Morbi et eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ante. Quisque in diam. Quisque ac neque. Integer semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempor. Aenean vel felis ut dui porttitor semper. Nulla facilisi. Duis id magna sit amet tellus tincidunt molestie. Vivamus gravida pulvinar lorem. Ut aliquet felis id est. Etiam enim est, pharetra quis, bibendum eu, tempor ac, lectus. Pellentesque h</p>
    	<h2>Welcome</h2>
    	<div class="main">
    		<div class="inner">
    			<div class="content">
    				<p>START!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices euismod lorem. Nulla cursus. Etiam aliquet venenatis tellus. Morbi et eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ante. Quisque in diam. Quisque ac neque. Integer semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempor. Aenean vel felis ut dui porttitor semper. Nulla facilisi. Duis id magna sit amet tellus tincidunt molestie. Vivamus gravida pulvinar lorem. Ut aliquet felis id est. Etiam enim est, pharetra quis, bibendum eu, tempor ac, lectus. Pellentesque h</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices euismod lorem. Nulla cursus. Etiam aliquet venenatis tellus. Morbi et eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ante. Quisque in diam. Quisque ac neque. Integer semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempor. Aenean vel felis ut dui porttitor semper. Nulla facilisi. Duis id magna sit amet tellus tincidunt molestie. Vivamus gravida pulvinar lorem. Ut aliquet felis id est. Etiam enim est, pharetra quis, bibendum eu, tempor ac, lectus. Pellentesque h</p>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices euismod lorem. Nulla cursus. Etiam aliquet venenatis tellus. Morbi et eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ante. Quisque in diam. Quisque ac neque. Integer semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempor. Aenean vel felis ut dui porttitor semper. Nulla facilisi. Duis id magna sit amet tellus tincidunt molestie. Vivamus gravida pulvinar lorem. Ut aliquet felis id est. Etiam enim est, pharetra quis, bibendum eu, tempor ac, lectus. Pellentesque h END!</p>
                    
                    
                </div>
                <div class="base">
    			 </div>
    		</div>
    	</div>
    	<div id="footer"><p>Copyright</p></div>
    </div>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Background Images-bottom.png   Background Images-middle.png   Background Images-top.png  
    Attached Files Attached Files

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello cc4digital,
    After removing some divitis I'm not seeing problem 1 at all. Top of middle box #content comes well after the h2.

    Text is easily placed in .base

    Your Middle.png does not lend itself well to repeat-y since it's top and bottom borders are repeated as well. Have a look here at using image borders on fluid sized boxes.

    Try starting with this example. I've put background colors on each element so you can see where they fall.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;	
    	text-align:center;
    }
    #outer {
    	width: 650px;
    	margin: 0 auto;
    	border: 1px solid #000;
    	text-align: left;
    	padding: 0 25px;
    	background: #0f0 url(Top.png) no-repeat 0 0; /*green for demonstration only*/
    }
    .content {
    	width: 470px;
    	margin: 25px 0 0 134px;
    	float: left;
    	display: inline;
    	background: #f00 url(Middle.png) repeat-y 0 0; /*red for demonstration only*/
    }
    .base {
    	clear: both;
    	width: 100%;
    	background: #00f url(Bottom.png) no-repeat 0 0; /*blue for demonstation only*/
    	height: 210px;
    	overflow: hidden;
    }
    #footer{
    	clear: both;
    	text-align: center;
    	width: 100%;
    	background: #f99; /*pink for demonstration only*/
    }
    	h1,h2 {text-align:center}
    	h1, p {margin:0 0 1em}
    </style>
    </head>
    <body>
    <div id="outer">
    	<h1>Main Heading</h1>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
                </p>
    	<h2>Welcome</h2>
    			<div class="content">
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                        sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                        sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>               
                <!--end .content--></div>
                <div class="base">
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                        sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
    			 <!--end .base--></div>
    	<div id="footer"><p>Copyright</p></div>
    </div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Excavator: Thanks for the link. It is close, but if the text expands over 1800 pixels the box breaks.

    In your example, I think I may have confused you. The text is all one flow of text.

    I believe my current example is much clear in what I am trying to do.
    I have included 2 files showing what the current code is doing and what I am trying to do.
    Current code results-->current.jpg
    What I want the code to do-->finished.jpg
    I colored the borders to help clarify. You will notice in the finished code--
    what I want to do:
    ->The pink from the Middle.png does not extend into the green or yellow images
    -> The last ling with the word "END" almost touches the yellow(currently the writing stops at the top of the yellow image.

    Attached are all relevent files.
    Thanks again for you suggestions.
    Attached Thumbnails Attached Thumbnails Background Images-current.jpg   Background Images-finished.jpg  
    Attached Files Attached Files

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by cc4digital View Post
    but if the text expands over 1800 pixels the box breaks.
    Because that's the size image I used in that example.

    Another method of borders can be seen here - http://www.alistapart.com/articles/customcorners/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Nice article Excavator!

    I am still absorbing and playing with the information. I get the impression that inorder to do what I am trying to do you need to have 5 images. It seemed to me that it would be easier if you just stacked background image on top of each other. My guess why you can not do this involves the text. The text can only go over one of the background images.

    I am still learning. I am going to go break the code in the example to see what each section does. This should give me a better understanding of what is happening.

    Thanks again for the quick response.

    Chuck


  •  

    Posting Permissions

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