Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 122
  • Last Modified:

Help with html pages changing length

I've built a very basic, simple html site. Each of the pages have a different amount of text. I've created the site in Photoshop, using slices to create the html pages.

My question is this: What's the simplest way to set up the pages so that if I add more text, the images on the side (the blue vertical pieces) automatically fill in as more text is added, and everything expands down to fit the added text? I don't know much about css, so the simplest solution or explanation is needed. You can see the page here:

mwebdev.com/em
0
isaacr25
Asked:
isaacr25
  • 8
  • 5
3 Solutions
 
Julian MatzJoint ChairpersonCommented:
Hello!

I would use a repeated background:


background: url('path/to/image.gif') repeat-y;
0
 
isaacr25Author Commented:
Where would that code be placed?
0
 
Julian MatzJoint ChairpersonCommented:
If you have two table cells on either vertical borders, you would give them an id like this:

<table width="800px">
  <tr>
    <td id="tlc"><!-- Top Left Corner --></td>
    <td id="top-border"><!-- Top Border --></td>
    <td id="trc"><!-- Top Right Corner --></td>
  </tr><tr>
    <td id="left-vertical-border"><!-- this is your left border --></td>
    <td>Main Content for Text</td>
    <td id="right-vertical-border"><!-- this is your right border --></td>
  </tr><tr>
    <td id="blc"><!-- Bottom Left Corner --></td>
    <td id="bottom-border"><!-- Bottom Border --></td>
    <td id="brc"><!-- Bottom Right Corner --></td>
  </tr>
</table>

Then in your style definitions (either in .css file or between your <style> tags) you would add:

#left-vertical-border {
 background: url('/em/images/emfergusson_05.gif') repeat-y;
 width: 5px;
}

#right-vertical-border {
 background: url('/em/images/emfergusson_22.gif') repeat-y;
 width: 5px;
}


Hope this helps.

There's a good site for learning more about CSS here also:
http://www.w3schools.com/css/default.asp
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
isaacr25Author Commented:
Did you take a look at the page I sent a link to? Is your code suited to this page, or is it just a generic layout? Thanks.
0
 
Julian MatzJoint ChairpersonCommented:
I did have a look at your page and my code is a little more generic, but I thought I'd show you how to do it rather than doing it for you.

Give me some more time and I'll have another look at your page and see what I can do.
0
 
Julian MatzJoint ChairpersonCommented:
Here you go:

http://www.netlink.ie/EE/Q_22906627/

That's a working page. All you have to do is download these two images and upload them to your images folder:

http://www.netlink.ie/EE/Q_22906627/images/bg-lb.gif
http://www.netlink.ie/EE/Q_22906627/images/bg-rb.gif

... And here's the code you need to download:

http://www.netlink.ie/EE/Q_22906627/code.txt

Let me know if you need any more help with it.
0
 
isaacr25Author Commented:
julianmartz,
     This seems to work great. There is one thing I can't figure out: if you look at the image at the very bottom left, you'll see that its broken. There is a small space in the middle of the image. You can compare it to the page I linked to in my original post. How do I fix this? Thanks.
0
 
Julian MatzJoint ChairpersonCommented:
Do you mean this image? :
http://mwebdev.com/em/images/emfergusson_31.gif

That image doesn't seem to exist at that location. Try uploading it again...
0
 
isaacr25Author Commented:
I'm referring to the light blue bubbles in the lower left corner. They're broken a bit... you have to look closely to see it.
0
 
Julian MatzJoint ChairpersonCommented:
Ok, I see what you mean now. Let me take another look at the code...
0
 
Julian MatzJoint ChairpersonCommented:
Ok, should be fixed now. Here are the updated pages:

http://www.netlink.ie/EE/Q_22906627/
http://www.netlink.ie/EE/Q_22906627/code.txt
0
 
isaacr25Author Commented:
Awesome... can you explain what you did so that I can apply this to future pages? Thanks.
0
 
Julian MatzJoint ChairpersonCommented:
Sure. I assigned an id to both bottom corner cells.

Left table cell:

            <td id="blc" rowspan="3" bgcolor="#FFFFFF">
                  <img src="images/emfergusson_26.gif" width="82" height="98" alt=""></td>
            <td>

Right table cell:

            <td id="brc" colspan="2" rowspan="2">
                  <img src="images/emfergusson_29.gif" width="118" height="75" alt=""></td>
            <td>

Then in your style definitions I added the following:

#blc, #brc {
 vertical-align: bottom;
}

That sets the vertical alignment of both table cells to bottom.

Let me know if you need any more details.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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