Multiple images making up a single image

[traviscoop]

I have 3 images that I want to make look like a single image as a background to some text. I have looked at a lot of "rounding" techniques, basically this will look like a box with rounded corners, but I don't like the amount of css and/or html involved in all the techniques I have seen. My next attempt was to put 3 cells together to make up the image, this is okay except that I need it to span the entire width, so the first cell is the width of the image, the second repeats for the width of the page minus the width of the left image minus the width of the right image, the last cell is the width of the image. I will be using this in multiple places on multiple pages, so I need an elegant solution that puts as much work in one place for reuse.

[traviscoop]

PS This needs to work in IE, but we might support firefox as well, still deciding, so preferrably something that works in both.

[jhardman]

I think it makes most sense to use css to position your images:

<img src="leftSide.gif" alt="" style="position: absolute; top: 100px; left: 20px; z-index: -1;" height="75" width="12"><img src="middle.gif" alt="" style="position: absolute; top: 100px; left: 32px; z-index: -1;" height="75" width="100"><img src="rightSide.gif" alt="" style="position: absolute; top: 100px; left: 132px; z-index: -1;" height="75" width="12"><div style="position: absolute; top: 115px; left: 30px; z-index: 1;">Button</div>

Some browsers might have different interpretations when positioning is absolute, so make sure you test it well.

Or is that what you meant by using too much css? You don't need all the code to be inline:

.left {
   position: absolute;
   left: 20px;
   z-index: -1;
   }
 

Jared

[traviscoop]

I really need something that is more generic. Assume all you know is the heigth of your images. You don't know how wide it will be on the page, this is the biggest problem I'm having, you just want the 3 images to take up 100% of that space so the middle image you are assuming goes for 100px but I don't know how wide it really will be.

Another goal is to make it so the coder has as little code to write as possible, because we will use this in a lot of situations written on various pages by different programmers. If the solution has a fair amount of html, that is okay because we are using jsf and I can make a tag to generate that html.

So really my 2 biggest problems are, how to take up 100% of the width when you don't know what that width is, and make it flexible enough to be used in multiple places with out writing a large amount of code over and over again.

BTW thanks for your quick response.

[traviscoop]

This is kind of what I have been playing with, but like I said I'm having trouble with the width. The center image is taking up too much space. So it doesn't look like I want it to. Something along these lines also means that I can make this into a simple tag for programmers to use that is flexible enough for what we need.

<table width="100%" cellspacing="0" cellpadding="0">
  <tr height="49px">
    <td style="height: 100%; background-image: url(images/backgrounds/titleBarLeft.gif);">
      &nbsp
    </td>
    <td style="width: 100%; height: 100%; background-image: url(images/backgrounds/titleBarCenter.gif); background-repeat: repeat-x;">
      Your Title Goes Here
    </td>
    <td style="height: 100%; background-image: url(images/backgrounds/titleBarRight.gif);">
      &nbsp
    </td>
  </tr>
</table>

[drhowarddrfine]

My brain is fried right now but I'll probably have a simple css solution by tomorrow. Do not use a table. Are these images to go along the bottom only?

PS This needs to work in IE, but we might support firefox as well, still deciding, so preferrably something that works in both.

Depending on where you are in the world, 16% to 40% of your users use Firefox (parts of Europe and Australia) and up to half or more don't use IE. If you write standards compliant code, it will work in all browsers including old, buggy, non-standard IE.

[drhowarddrfine]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html,body{
    height:100%;
    width:100%;
    margin:0;
    padding:0
    }
 
div{
    height:100%;width:100%;
    background-image: url("titleBarCenter.gif");
    background-repeat: repeat-x;
}
</style>
</head>
<body>
 
<div>
    <img src="titleBarLeft.gif" style="float:left">
    <img src="titleBarRight.gif" style="float:right">
</div>
 
</body>
</html>
 

[traviscoop]

Well, that looks okay in IE, but in Firefox the center image doesn't even show up. And the biggest problem comes when I try to put in text, this is supposed to be like a header, so I need text that is centered vertically, the text makes the right image shift down, which makes sense. So I don't know how you can do this without putting it in a table.

[drhowarddrfine]

Well, that looks okay in IE, but in Firefox the center image doesn't even show up.

Looks fine to me in FF and IE. I'll look at the text thing in a minute.

[drhowarddrfine]

I don't see any problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html,body{
    height:100%;
    width:100%;
    margin:0;
    padding:0
    }
 
div{
    height:100%;width:100%;
    background-image: url("titleBarCenter.gif");
    background-repeat: repeat-x;
}
</style>
</head>
<body>
 
<p>hello</p>
<div>
    <img src="titleBarLeft.gif" style="float:left">
    <img src="titleBarRight.gif" style="float:right">
</div>
 
</body>
</html>
 

[traviscoop]

Hmm.. I don't know what I did before but you're right it seems to be fine in FF and IE. I don't know if that last post you expected that the hello showed up on the image, if so it doesn't but the title bar looks good now.

[drhowarddrfine]

No, hello should not be on the image. Which browser?

[traviscoop]

I was just making sure you didn't expect that hello to be showing up because it isn't. It looks the same on both browsers now, the three images are showing up like I expect, but I can't put text in there. So if you figure out how to get that text to show up that would be great.

[drhowarddrfine]

I'm confused. I don't understand where the text is supposed to go.

[traviscoop]

The images are making up a title bar. So I need to put a title on it. The text will go on top of the center image.

[eragon]

you tried making a table, like, say, this one:

<table height="150px">
<tr>
<td width="30px" background="img1.gif"></td>
<td width="75%" background="img2.gif><strong>Title</strong></td>
<td width="30px" background="img3.gif></td>
</tr>
</table>

Sorry my html isnt fancy and indentented and colored, i use notepad...

this might work, you may need to mess with the percentage in the middle cell, but this will always fit the width of any screen, and text will go on it. The text may be pushed to the right a little cuz the fact its not writing in the left column, but this should look pretty decent, especially with a centered title. another thing, im not sure if the center background will repeat, if not theres probly another attribute you can add on.

anyways, im glad i can try and help...

Eraogn

[eragon]

Thats cool, i didnt know this site colores my scripts...


i misspelled my own name, ain't that something?

Sincerely,

Eragon

[drhowarddrfine]

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html,body{
height:100%;
width:100%;
margin:0;
padding:0
}

div{
height:100%;width:100%;
background-image: url("titleBarCenter.gif");
background-repeat: repeat-x;
}
</style>
</head>
<body>

<div>
<p style="position:absolute;left:20px;">hello</p>
<img src="titleBarLeft.gif" style="float:left">
<img src="titleBarRight.gif" style="float:right">
</div>

</body>
</html>
[/HTML]
Eragon,
We stay away from using tables for layout.

[eragon]

an see why, well, your method works, ive seen it on alot of sites. in fact, im gonna change my sites to divs, cuz tables dtont work right on my friend's mac. thx for the tips. =p

sincerely,

Eragon

[mi2arun]

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>website.title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
html, body {
margin : 0px;
padding : 0px;
font-family : Verdana, Arial;
font-size : 12px;
background : #f2f2f2;
}
.body {
background : #ffffff;
margin-left : 10%;
margin-right : 10%;
border : 1px solid #c0c0c0;
}
.nav {
color : #000000;
padding-top : 6px;
padding-bottom : 6px;
padding-left : 4px;
padding-right : 4px;
font-size : 11px;
border-bottom : 1px solid #c0c0c0;
background-color: #f9f9f9;
margin-bottom: 2px;
}
a.nav-link:link {
color : #000000;
text-decoration : none;
padding-right : 4px;
padding-left : 4px;
}
a.nav-link:visited {
color : #000000;
text-decoration : none;
padding-right : 4px;
padding-left : 4px;
}
a.nav-link:hover {
text-decoration : none;
padding-right : 4px;
padding-left : 4px;
background : #ffffff;
padding-top : 6px;
padding-bottom : 6px;
color : #85add6;
border-bottom : 1px solid #6d92b9;
}
.content {
padding-left : 4px;
padding-right : 4px;
padding-bottom : 4px;
padding-top : 2px;
}
.edge-top-right {
background : url(images/layout.png) 0px -27px;
height : 5px;
width : 5px;
float : right;
margin-right : -1px;
margin-top : -1px;
}
.edge-top-left {
background : url(images/layout.png) 0px -32px;
height : 5px;
width : 5px;
float : left;
margin-left : -1px;
margin-top : -1px;
}
.edge-bottom-right {
background : url(images/layout.png) 0px -17px;
height : 5px;
width : 5px;
float : right;
margin-right : -1px;
margin-top : -4px;
}
.edge-bottom-left {
background : url(images/layout.png) 0px -22px;
height : 5px;
width : 5px;
float : left;
margin-left : -1px;
margin-top : -4px;
}
.title {
font-family : Arial;
font-size : 22px;
color : #6d92b9;
}
.header {
font-family : Arial;
font-size : 16px;
color : #a5a5a5;
}
.footer {
text-align : right;
font-size : 11px;
margin-top : 4px;
padding-right : 5px;
height : 17px;
background : url(images/layout.png) 0px 0px;
}
a:link, a:visited {
color : #6d92b9;
}
a:hover {
color : #85add6;
text-decoration : none;
}
.body span {
margin-left : 16px;
line-height : 1.5em;
}
</style>
</head>
<body>

<div class="body">
<div class="edge-top-left"><!-- --></div>
<div class="edge-top-right"><!-- --></div>
<div class="nav">
<a href="/welcome" class="nav-link">Home</a>
<a href="/projects" class="nav-link">Projects</a>
<a href="/tutorials" class="nav-link">Tutorials</a>
<a href="/articles" class="nav-link">Articles</a>
<a href="board/" class="nav-link">Community</a>
</div>
<div class="content">
<div class="title">website.title</div>
<div class="header">header</div>
<span>Nunc nobis videntur parum clari. Parum claram anteposuerit litterarum formas. Mutationem consuetudium lectorum Mirum est notare quam littera gothica quam nunc putamus parum claram anteposuerit.</span>
</div>

<div class="footer">Copyright © 2006 <a href="http://www.quate.net/" target="_blank">Quate</a> Development.</div>
<div class="edge-bottom-left"><!-- --></div>
<div class="edge-bottom-right"><!-- --></div>
</div>

</body>
</html>[/HTML]


http://www.quate.net/newsnet/read.php?id=48