• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 279
  • Last Modified:

Require: Image at page bottom. Text flow onto image.

I want an image at the bottom of a page. The page may grow or shrink in height depending on how much text it contains.

The 'text' (as mentioned above) should flow over the top-left part of the image: half-way down the image and 2/3 across the image.

Examlpe image: Tree on right. Grass on bottom. Lots of white space on left.

Solution: Text appears above image (currently in a table 70% width of larger table containing image) and ideally, would like text to continue onto image (but not all the way down).

As the text grows, it should contniue to flow onto image but push the image down so that it only covers about 75% (fron top-down). Also, as the image is pushed down, the page should grow so that the image is always fully visible.

I've tried to explain as best as I can.

Please advise whether I should do this with HTML, CSS and/or layers/tables etc. with clear easy-to-follow guide and example if possible.

Thank you.
0
paultomasi
Asked:
paultomasi
  • 9
  • 5
  • 2
1 Solution
 
paultomasiAuthor Commented:
Also, the text-width is about 75% of the image (and page).
0
 
darren-w-Commented:
Hi,

I assume you want the image as a footer, and would like to keep it at the bottom of your content, Try this link, it explains how to always keep the footer at the bottom:  http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Darren
0
 
darren-w-Commented:
Can you do a mockup of what you want as a drawing...
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
paultomasiAuthor Commented:
darren-w-

Thank you for replying.

The link you provided is really useful as that's another problem I am yet to face a little later on.

The image is not strictly a footer however, it will appear on most of the pages throughout the site I'm hoping to put together (with LOTS of help from you guys)...

There will indeed be a footer but the image will be part of the main body, not the footer.

Note: As part of a footer, I don't think it will be possible to allow text to flow from the main body of a page into, and onto, the footer region - let alone over part of an image (in the footer). Am I right here?
0
 
paultomasiAuthor Commented:
Here's a rough sketch...  Rough sketch
0
 
gavsmithCommented:
I would have a seperate image which is identical to the bottom 1/3rd of the original image, then set the original image to the background of the body of the page.

Then put the second image (bottom 1/3rd) in a div at the bottom (this will stay over the text):

<head>
<style ...>
body
{
    background-image: url('../images/original-image.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right bottom;
    padding:0px;
    margin:0px;
}

.footer1
{
    width: 100%;
    height:30px; //set this to same height as image
    background-position: center bottom;
    position: fixed;
    bottom: 0px;
    background-image: url('../images/bottom-part-of-image.jpg');
    background-repeat: repeat-x;
    background-attachment: fixed;
    padding:0px;
    margin:0px;
}

.maincontent
{
    margin-right:100px; // set this to the width of the tree in PX not %
    margin-bottom:35px; // this needs to be slightly higher than the height of the bottom part of the image
                                       // adding white space so you can still see the bottom when scrolling to the end
    margin-left:10px;

}
</style>
</head>
<body>
 <div class="maincontent">
   all your text goes in here
 </div>
 <div class="footer1"/>
</body>

hope that helps
0
 
gavsmithCommented:
I assumed from your question you wanted the text to go onto the grass a little!! Doesn't look that way on your sketch. I've probably over complicated it. you could do it with half of this:

<head>
<style ...>
body
{
    background-image: url('../images/original-image.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right bottom;
    padding:0px;
    margin:0px;
}

.maincontent
{
    margin-right:100px; // set this to the width of the tree in PX not %
    margin-bottom:35px; // this needs to be slightly higher than the height of the bottom part of the image
                                       // adding white space so you can still see the bottom when scrolling to the end
    margin-left:10px;

}
</style>
</head>
<body>
 <div class="maincontent">
   all your text goes in here
 </div>
</body>

hope that helps
0
 
paultomasiAuthor Commented:
gavsmith

Thank you for your reply.

Please allow me time to study (and implement) your code...
0
 
paultomasiAuthor Commented:
Dear gavsmith

Apologies for the delay. I was out most of the day.

Unfortunately, it did not work for me. Maybe the fault is at my end.

I have included my code (below) as well as the image file I will be using.

My intention will be to set the overall page width to 760px (the image is also 760px).

<head>
  <style type="text/css">
  <!--
  body {
    background-image: url(images/SEG_imgSunflower.jpg)
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right bottom;
    padding:0px;
    margin:0px;
  }

  .maincontent {
    margin-right:100px;
    margin-bottom:35px;
    margin-left:10px;
  }
  -->
  </style>
</head>

<body>
  <div class="maincontent">
    all your text goes in here
  </div>
</body>
</html>

Open in new window

SEG-imgSunflower.jpg
0
 
paultomasiAuthor Commented:
Please ignore the missing <HTML> tag at the top of the code. It exists in the original. I accidentally deleted it in EE.
0
 
paultomasiAuthor Commented:
Dreamweaver CS3 is showing a problem with the following lines (from above):

   background-image: url(images/SEG_imgSunflower.jpg)
   background-repeat: no-repeat;

and:

   margin-right: 100px;
   margin-bottom: 35px;
   margin-left: 10px;

Errors: 13, 21 and 22.
0
 
gavsmithCommented:
your missing a semi colon after  background-image: url(images/SEG_imgSunflower.jpg) probably why dreamweaver is giving you errors.

also don't know if it's another type fault but your image name is SEG-imgSunflower.jpg and in the style you have SEG_imgSunflower.jpg please double check they are both the same.

in the example below I've centered the background, aligned text to the center and set a width on the main content to try and get the width you want (all centered)

<html>
<head>
  <style type="text/css">
  <!--
  body {
    background-image: url(images/SEG_imgSunflower.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center bottom;
    padding:0px;
    margin:0px;
    text-align:center;
  }

  .maincontent {
    margin-right:100px;
    margin-bottom:35px;
    margin-left:10px;
    text-align:left;
    width:760px;
  }
  -->
  </style>
</head>

<body>
  <div class="maincontent">
    all your text goes in here
  </div>
</body>
</html>

Open in new window


hope it helps
0
 
paultomasiAuthor Commented:
gavsmith

Thank you for the pointing out the discrepancy in the filename. It is actually meant to be an underscore...

Apologies for coming back to you on this. I know you've put a lot of effort into this question already.

The HTML above is almost what I want. This is what I see:

It displays a full-length window (my browser's default) with the text at the top of the page and, the image at the bottom of the page.

If I add lots of additional lines of text, the text grows downwards and flows past the bottom of the window hence, a vertical scrollbar appears on the right. However, the image is still sitting at bottom of the browser's window  (instead of the bottom of the actual page and therefore out of view).

When I use the scrollbar, the text scrolls up and down but the image remains static (at the bottom of the browser's view).

When I shrink the browser (by grabbing the bottom of the browser and dragging it up and down), the image is 'stuck' to the bottom of the browser's view (ie, it moves up and down with the bottom of the browser) but the text does not move (in relation to the image).

It's this very last property that I need - the relationship between the 'end' of the text AND the position of the image (ie, the text should not flow past (nor onto) the grass of the image). As the text grows, if it reaches the grass it should start to push the image down (anchored just above the grass) so that the page will grow in relation to the amount of text there is. (The text WILL flow onto the image but never past the grassy bit) therefore, the image will always remain at the bottom of the page.

I'm trying to achieve an overlap effect - where the text overlaps the white part of the image.

Does this make any sense?
0
 
gavsmithCommented:
Sorry it's just me over complicating things again... I think I know what you mean now, I'm getting good at misunderstanding questions!... please try the example below:

<html>
<head>
  <style type="text/css">
  <!--
  body {
    padding:0px;
    margin:0px;
    text-align:center;
  }

  .maincontent {
    margin-right:100px;
    margin-left:10px;
    text-align:left;
    width:760px;
    position:relative;
    z-index:2;
  }
  
  .mainimage
  {
      position:relative;
      top:-170px;
      z-index:1;
      width:760px;
      padding:0px;
      margin:0px;
  }
  -->
  </style>
</head>

<body>
  <div class="maincontent">
    all your text goes in here
  </div>
  <img src="images/SEG_imgSunflower.jpg" alt="Sunflower Image" class="mainimage" />
</body>
</html>

Open in new window


you may need to play around with the top:-170; value to make it go higher/lower.
0
 
paultomasiAuthor Commented:
Never reall`y got it to work as I wanted it to so I reverted back to using tables with much more ease...

I'm usre somewhere in my HTML I have implemented something along the lines suggested by gavsmith because the page works albeit, with tables AND DIVs.

I'm awarding the points because of the effort gavsmith invested and because I'm sure his code probably does what I wanted I to do even though I myself, couldn't get it up and running.
0
 
gavsmithCommented:
You should have let me know you was still having problems, there is more than one way to acheive this... you could have tried setting the image as the background of a main content wrapper adding some padding to the bottom so it doesn't go over the grass and setting the width of the content. Like this:

<html>
<head>
<title></title>
  <style type="text/css">
  <!--
  .maincontentwrapper
  {
    min-height:300px;
    margin:0px auto;
    width:760px;
    background-image:url('images/SEG_imgSunflower.jpg');
    background-position:center bottom;
    background-repeat:no-repeat;
    padding-bottom:250px;
  }
  
  .maincontent
  {
      margin-right:250px;
  }
    -->
  </style>
</head>

<body>
    <div class="maincontentwrapper">
      <div class="maincontent">
        all your text goes in here
      </div>
    </div>
</body>
</html>

Open in new window


If it wasn't working as expected there may have been some tweaks to the original examples to get it right.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 9
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now