abannet
06-14-2005, 07:23 PM
I have 2 problems. The first is as follows.
1) I am doing a "folder" look with a BGCOLOR for the lower part of the folder. It looks great, but I'm trying to put two notebook pages on top of this BGCOLOR. The best I've done so far is tiling the image (by putting the BACKGROUND on the same line as the BGCOLOR). I've tried nested tables and anything else I could think of. The reason that I need these pages as a background is so that I can write on top of them (Paper picture attached). The code is short and as follows:
<HTML>
<HEAD>
</HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD ALIGN="center" VALIGN="top"><img src="tc.jpg" WIDTH=600 HEIGHT=120></TD>
</TR>
</TABLE>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD WIDTH=100% VALIGN="top"><img src="backgroundfolder1.jpg" WIDTH=100% HEIGHT=110></TD>
<TD ALIGN="right" VALIGN="top"><img src="aboutussecond.jpg" HEIGHT=110></TD>
</TR>
</TABLE>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100% HEIGHT="100%" ALIGN="center" VALIGN="top">
<TR VALIGN="top" ALIGN="center">
<TD BGCOLOR="#F8E1B8" VALIGN="top" WIDTH=100%><img src="paper.jpg">  <img src="paper.jpg"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Any help is appreciated.
2) Once I have these images the way I want, how do I write on top of them (in every resolution) on each blue line? I have no ideas here. Again, help is appreciated.
That's it.
Cheers.
-Alan
harbingerOTV
06-15-2005, 01:31 AM
yeah Alan that's going to be insanely hard to. take a look at this trail:
<HTML>
<HEAD>
</HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD ALIGN="center" VALIGN="top"><img src="tc.jpg" WIDTH=600 HEIGHT=120></TD>
</TR>
</TABLE>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD WIDTH=100% VALIGN="top"><img src="backgroundfolder1.jpg" WIDTH=100% HEIGHT=110></TD>
<TD ALIGN="right" VALIGN="top"><img src="aboutussecond.jpg" HEIGHT=110></TD>
</TR>
</TABLE>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100% HEIGHT="100%" ALIGN="center"
VALIGN="top">
<TR VALIGN="top" ALIGN="center">
<TD VALIGN="top"><div style="background:url(paper.jpg) repeat-x;width:900px;
height:550px;border:1px solid red;">
<div style="float: left; margin: 48px 20px 30px 48px; border: 1px solid green; width:
370px;height: 470px; text-align:left; text-indent: 6px;font-size: 14pt; line-height: 24px;
font-family: tahoma;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam odio leo, accumsan ut,
viverra nec, cursus id, dui. Quisque mi dolor, rutrum consequat, dictum non, porta vitae, wisi.
Donec laoreet eros in neque. Ut id leo venenatis purus consequat ornare. Quisque laoreet
consectetuer lectus. Pellentesque congue lorem non lectus. Vivamus eros. Aenean tempus, ante et
venenatis tincidunt, tortor dui lobortis augue, eget dapibus pede sem ut ligula. Suspendisse
molestie augue in tellus. Fusce in erat ut nunc vulputate feugiat. Nullam orci. Nulla facilisi.
Vestibulum sagittis feugiat eros. Praesent sed sem. Suspendisse sodales arcu eu lacus.
</div>
<div style="float: right; margin: 48px 30px 30px 20px; border: 1px solid green; width:
370px;height: 470px;
text-align:left; text-indent: 6px;font-size: 14pt; line-height: 24px; font-family: tahoma;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam odio leo, accumsan ut,
viverra nec, cursus id, dui. Quisque mi dolor, rutrum consequat, dictum non, porta vitae, wisi.
Donec laoreet eros in neque. Ut id leo venenatis purus consequat ornare. Quisque laoreet
consectetuer lectus. Pellentesque congue lorem non lectus. Vivamus eros. Aenean tempus, ante et
venenatis tincidunt, tortor dui lobortis augue, eget dapibus pede sem ut ligula. Suspendisse
molestie augue in tellus. Fusce in erat ut nunc vulputate feugiat. Nullam orci. Nulla facilisi.
Vestibulum sagittis feugiat eros. Praesent sed sem. Suspendisse sodales arcu eu lacus.
</div>
</div></TD>
</TR>
</TABLE>
</BODY>
</HTML>
the way I tried it was to build a holder div inside your TD. then float another 2 divs left and right and try to place the font above your line rules. since the font size determines the line-height as well you would have to fiddle with it and to your liking and then remake the background image so the lines were spaced accordingly.
Then there is the problem the since line height and font size are a givebn size and the fact that different browsers renders each of those a little diffrently, even if you did it might look great in IE and completely horrid in Mozilla.
another option might be something like this. but I'll warn you it's going to be a pain as well:
<HTML>
<HEAD>
<style type="text/css">
span {
border-top: 1px solid blue;
width: 370px;
display: block;
margin-top: -4px;
}
</style>
</HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD ALIGN="center" VALIGN="top"><img src="tc.jpg" WIDTH=600 HEIGHT=120></TD>
</TR>
</TABLE>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD WIDTH=100% VALIGN="top"><img src="backgroundfolder1.jpg" WIDTH=100% HEIGHT=110></TD>
<TD ALIGN="right" VALIGN="top"><img src="aboutussecond.jpg" HEIGHT=110></TD>
</TR>
</TABLE>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100% HEIGHT="100%" ALIGN="center"
VALIGN="top">
<TR VALIGN="top" ALIGN="center">
<TD VALIGN="top"><div style="width:900px; height:550px;border:1px solid red;">
<div style="float: left; margin: 48px 20px 30px 48px; border: 1px solid green; width:
370px;height: 470px; text-align:left; text-indent: 6px;font-size: 12pt; line-height: 24px;
font-family: tahoma;">
Lorem ipsum dolor sit amet, consectetuer<span> adipiscing elit. Aliquam odio leo,
accumsan</span><span> ut, viverra nec, cursus id, dui. Quisque mi</span><span>dolor, rutrum
consequat, dictum non, porta</span><span>vitae, wisi. Donec laoreet eros in neque. Ut</span> id
leo venenatis purus consequat ornare. Quisque laoreet consectetuer lectus. Pellentesque congue
lorem non lectus. Vivamus eros. Aenean tempus, ante et venenatis tincidunt, tortor dui lobortis
augue, eget dapibus pede sem ut ligula. Suspendisse molestie augue in tellus. Fusce in erat ut
nunc vulputate feugiat. Nullam orci. Nulla facilisi. Vestibulum sagittis feugiat eros. Praesent
sed sem. Suspendisse sodales arcu eu lacus.
</div>
<div style="float: right; margin: 48px 30px 30px 20px; border: 1px solid green; width:
370px;height: 470px;
text-align:left; text-indent: 6px;font-size: 14pt; line-height: 24px; font-family: tahoma;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam odio leo, accumsan ut,
viverra nec, cursus id, dui. Quisque mi dolor, rutrum consequat, dictum non, porta vitae, wisi.
Donec laoreet eros in neque. Ut id leo venenatis purus consequat ornare. Quisque laoreet
consectetuer lectus. Pellentesque congue lorem non lectus. Vivamus eros. Aenean tempus, ante et
venenatis tincidunt, tortor dui lobortis augue, eget dapibus pede sem ut ligula. Suspendisse
molestie augue in tellus. Fusce in erat ut nunc vulputate feugiat. Nullam orci. Nulla facilisi.
Vestibulum sagittis feugiat eros. Praesent sed sem. Suspendisse sodales arcu eu lacus.
</div>
</div></TD>
</TR>
</TABLE>
</BODY>
</HTML>
ias you type all your content over the lines youthen view it and note where each line starts and stops. then wrap each one of those lines in a span tag (which I styled in the head). don't do the first line as the span is actually the top border of the lines.
then you can just take your line rule image and cut out the lines them selves.
hope some of this can be usefull.
good luck,
alan
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.