I'm making a site that I'd like a (seeming) curve on the left side. I've managed to do this with making the document a table, and using different backgrounds in the table cells (backgrounds because I need to place text over them). And it looks fine initially.<br />
<br />
The problem is if the document becomes lengthy, the table cells sizes I specify become "suggestions" that it prefers to ignore/adjust [on both netscape, internet explorer, and most browsers that I've tried]. This leads to an unpleasant repeat of the background in the elongated cell.<br />
<br />
The page that seems initially fine is prototyped at: <!-- m --><a class="postlink" href="http://asuop.uop.edu/~webmaster/buggy.html">http://asuop.uop.edu/~webmaster/buggy.html</a><!-- m --><br />
On that page is also a link to an example of how the cell sizes distort: <!-- m --><a class="postlink" href="http://asuop.uop.edu/~webmaster/buggy2.html">http://asuop.uop.edu/~webmaster/buggy2.html</a><!-- m --><br />
<br />
I'm looking for (best case) a solution to keep this from happening (since the page will have dynamic data generated for it, I can't know what the length will be). Failing that, if anyone has any alternate suggestions as to how to get something nice working. Otherwise it's back to the drawing board to find a simple repeating shape for the left side.<br />
<br />
Thanks for any help you can give.<br />
-Akira<!--content-->You could try making the background image longer, so that you never get the repeating effect. Or alternatively using tables you could only use the image for the top curvy part of the page and then for the rest of the page, set the table background colors to match the black and the red so that they look like part of the image. Then when the table expands, so will your background.<br />
<br />
I hope that makes sense!<!--content-->Similar to what Goldilocks says "only use the image for the top curvy part of the page" then you can attach a stylesheet with the following style defined:BODY {<br />
background-color : #000000;<br />
background-image: url(images/Pattern1.gif);<br />
background-repeat: repeat-y; <br />
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;<br />
color : #000088;<br />
margin: 0px; <br />
}The Pattern1.gif would be an image of <desired width of menu> x 5px and would have the orange background (basically a filled rectangle). The repeat-y just repeats the image along the y-axis for as long as necessary.<!--content-->or, you can put the left side in a table by itself. and then the main content a seperate table so it doesn't pull the left down with it. I have run into this problem and that was teh only solution I have found that would work in all browsers.<!--content-->the css I posted is cross-browser compatible
<!--content-->close but I don't think NS4.xx will recognise this<br />
<br />
background-repeat: repeat-y;<br />
<br />
but could be wrong. also if the pattern1.gif is only so big Netscape will tile it if I'm not mistaken.<!--content-->NS4 does accept background-repeat: repeat-y; (according to TopStyle Pro, which is my CSS editor). <br />
<br />
The tiling you mention is a problem when setting the graphic as a table background. The solution I gave would tile down the page but as the width of the graphic is only the width of the menu it would only show on the left side therfore giving the desired effect (with very small file size as well).<!--content-->that makes alot of sense. it will support that but not <br />
no-repeat, but I know of the table tileing but if you load a graphic in a browser as a background it will tile if the page is longer than the picture. and that is what you set it as as the background of the page.<br />
<br />
or maybe I need to kick my brain....again....<!--content-->To stop you kicking your brain and making a mess all over the forum I have attached an example. I don't have access to NS4 where I am but I am fairly certain it works.<br />
<br />
Let me know if you have access to NS4 and it doesn't work. Tx.<!--content-->thanks Torrent. I will let you know tonight as I don't have NS here at work. they just say no to that for some reason. says it will mess up the network, dang administrators
<!--content-->---------------<br />
| | |<br />
| 1 | 2 |<br />
| | |<br />
----- |<br />
| | |<br />
| 3 | |<br />
| | |<br />
| | |<br />
---------------You need 3 to be a variable size; and 1 to be a fixed size. I made a new table from scratch, boiled it down to the basics. Even in this simplest example, I have trouble locking 1 to a specific size. Once it is locked, however, I'm pretty sure putting height="100%" into 3 will do what you want... But, how to lock it.. Arg...<br />
<br />
Edit:<br />
Well, if you can't control the cell height, then stick something in 1 that you can control. Another table. Put <table height=230 width=102> into 1. Fill the new table to the rim with the curvy left.gif. Merge 1 and 3, you don't need those two seperate anymore. ---------------<br />
||X|| | X - new table in table<br />
| | |<br />
| 1 | 2 | I'll just call them <br />
| + | | left cell<br />
| 3 | | and right cell.<br />
| | |<br />
---------------Put the long rectangular leftbg.gif as the background for the left cell. The new table will overlap it. I'm not sure if this will work in elderly browsers, but I think it should. <br />
Make sure to set valign of this left cell to top.<br />
<br />
It seems ridiculous to me. Why have a property, height is equal to some number, inside a TD, if it doesn't work? Is it supposed to? Do we actually know for a fact, somewhere it says, putting height=# inside a <TD> is supposed to do something???<!--content-->What I just described works in Internet Explorer 5.5.<br />
However, there is a serious bug in Netscape, 4.xx, I'll show you a picture below.<br />
<br />
The only way to fix this is to insert a invisible GIF to fill up the space. LOTS of web pages do this.. <br />
<br />
(Personally, I think the HTML code is faulty for needing a transparent gif to wedge open cells.. Like it's a short sight-ed-ness of the original programers... Arg. Well, if it's not the Markup Language's fault, is it Netscapes'?)<!--content-->This works properly in<br />
:sniper:Netscape 4.73<br />
:sniper:Internet Explorer 5.5<br />
<br />
You won't be able to see it working until you put the pictures in the proper directory. :crying:<br />
<br />
Enjoy!
<!--content-->Thank you all. I took the suggestion(s) to break the page into two side-by-side nested tables. A few other problems came because of it, but fortunatly, there was enough example code and suggestions that I was able to get what I needed done.<br />
<br />
Thanks again<br />
-Akira<!--content-->Cool good job.<br />
<br />
Torrent: that does work. if you take the background-repeat: repeat-y; out Netscape4.79 will tile the picture the rest of the page, not just the side. dang that makes 3 right for you this year, you almost caught up with me.
<!--content-->Originally posted by scoutt <br />
Cool good job.<br />
<br />
Torrent: that does work. if you take the background-repeat: repeat-y; out Netscape4.79 will tile the picture the rest of the page, not just the side. dang that makes 3 right for you this year, you almost caught up with me. <br />
<br />
lol. I can't claim to have "known" this off the top of my head. I used TopStyle Pro (and always do for CSS) to see if it is NS4 compat. I can actually tell you that according to TopStyle it is also Opera compliant, so could be a good all round solution.<br />
<br />
Btw, if anyone is interested in doing CSS I recommend TopStyle (<!-- m --><a class="postlink" href="http://www.bradsoft.com">http://www.bradsoft.com</a><!-- m -->) as a good CSS editor.<!--content-->Interesting comments guys. I hand code everything, but topstyle comes bundled within coldfusion studio-so I have had access to it since my humble web beginnings. I personally don't like visual editors anymore (unless they are part of a graphics package) but I may look at old topstyle just to see what it offers. <br />
<br />
I guess the main thing I dislike about a program coding up things for me is my eventual reliance on that program to get things done. I subscript to storing up tons of examples (snippets if you will) of code, and referencing them on demand. It just helps me retain the knowledge better.<!--content-->Originally posted by Dr. Web <br />
Interesting comments guys. I hand code everything, but topstyle comes bundled within coldfusion studio-so I have had access to it since my humble web beginnings. I personally don't like visual editors anymore (unless they are part of a graphics package) but I may look at old topstyle just to see what it offers. <br />
<br />
I guess the main thing I dislike about a program coding up things for me is my eventual reliance on that program to get things done. I subscript to storing up tons of examples (snippets if you will) of code, and referencing them on demand. It just helps me retain the knowledge better. <br />
<br />
I hear yer Doc. I would say though that my knowledge of CSS has improved immeasurably through the use of TopStyle. Unlike a WSYIWG editor it just provides wizards (if you wish to use them) to produce the styles you are after and also indicates the level of browser compatibility. However, at all time you see any styles it places, and a sample. I no longer use the wizards and code practically all of it by hand. It's strength lies in its ability to locate orphan styles, do site wide checking, style validation, and of course the browser compatibility.<br />
<br />
I guess the TopStyle included with CF is TopStyle Lite (this comes with DW4 and Homestie as well)? I use TopStyle Pro which is the shareware version (although I registered some time ago). <br />
<br />
Definitely worth a look. Let me know what you think.<!--content-->
<br />
The problem is if the document becomes lengthy, the table cells sizes I specify become "suggestions" that it prefers to ignore/adjust [on both netscape, internet explorer, and most browsers that I've tried]. This leads to an unpleasant repeat of the background in the elongated cell.<br />
<br />
The page that seems initially fine is prototyped at: <!-- m --><a class="postlink" href="http://asuop.uop.edu/~webmaster/buggy.html">http://asuop.uop.edu/~webmaster/buggy.html</a><!-- m --><br />
On that page is also a link to an example of how the cell sizes distort: <!-- m --><a class="postlink" href="http://asuop.uop.edu/~webmaster/buggy2.html">http://asuop.uop.edu/~webmaster/buggy2.html</a><!-- m --><br />
<br />
I'm looking for (best case) a solution to keep this from happening (since the page will have dynamic data generated for it, I can't know what the length will be). Failing that, if anyone has any alternate suggestions as to how to get something nice working. Otherwise it's back to the drawing board to find a simple repeating shape for the left side.<br />
<br />
Thanks for any help you can give.<br />
-Akira<!--content-->You could try making the background image longer, so that you never get the repeating effect. Or alternatively using tables you could only use the image for the top curvy part of the page and then for the rest of the page, set the table background colors to match the black and the red so that they look like part of the image. Then when the table expands, so will your background.<br />
<br />
I hope that makes sense!<!--content-->Similar to what Goldilocks says "only use the image for the top curvy part of the page" then you can attach a stylesheet with the following style defined:BODY {<br />
background-color : #000000;<br />
background-image: url(images/Pattern1.gif);<br />
background-repeat: repeat-y; <br />
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;<br />
color : #000088;<br />
margin: 0px; <br />
}The Pattern1.gif would be an image of <desired width of menu> x 5px and would have the orange background (basically a filled rectangle). The repeat-y just repeats the image along the y-axis for as long as necessary.<!--content-->or, you can put the left side in a table by itself. and then the main content a seperate table so it doesn't pull the left down with it. I have run into this problem and that was teh only solution I have found that would work in all browsers.<!--content-->the css I posted is cross-browser compatible
<!--content-->close but I don't think NS4.xx will recognise this<br /><br />
background-repeat: repeat-y;<br />
<br />
but could be wrong. also if the pattern1.gif is only so big Netscape will tile it if I'm not mistaken.<!--content-->NS4 does accept background-repeat: repeat-y; (according to TopStyle Pro, which is my CSS editor). <br />
<br />
The tiling you mention is a problem when setting the graphic as a table background. The solution I gave would tile down the page but as the width of the graphic is only the width of the menu it would only show on the left side therfore giving the desired effect (with very small file size as well).<!--content-->that makes alot of sense. it will support that but not <br />
no-repeat, but I know of the table tileing but if you load a graphic in a browser as a background it will tile if the page is longer than the picture. and that is what you set it as as the background of the page.<br />
<br />
or maybe I need to kick my brain....again....
<!--content-->To stop you kicking your brain and making a mess all over the forum I have attached an example. I don't have access to NS4 where I am but I am fairly certain it works.<br /><br />
Let me know if you have access to NS4 and it doesn't work. Tx.<!--content-->thanks Torrent. I will let you know tonight as I don't have NS here at work. they just say no to that for some reason. says it will mess up the network, dang administrators
<!--content-->---------------<br />| | |<br />
| 1 | 2 |<br />
| | |<br />
----- |<br />
| | |<br />
| 3 | |<br />
| | |<br />
| | |<br />
---------------You need 3 to be a variable size; and 1 to be a fixed size. I made a new table from scratch, boiled it down to the basics. Even in this simplest example, I have trouble locking 1 to a specific size. Once it is locked, however, I'm pretty sure putting height="100%" into 3 will do what you want... But, how to lock it.. Arg...<br />
<br />
Edit:<br />
Well, if you can't control the cell height, then stick something in 1 that you can control. Another table. Put <table height=230 width=102> into 1. Fill the new table to the rim with the curvy left.gif. Merge 1 and 3, you don't need those two seperate anymore. ---------------<br />
||X|| | X - new table in table<br />
| | |<br />
| 1 | 2 | I'll just call them <br />
| + | | left cell<br />
| 3 | | and right cell.<br />
| | |<br />
---------------Put the long rectangular leftbg.gif as the background for the left cell. The new table will overlap it. I'm not sure if this will work in elderly browsers, but I think it should. <br />
Make sure to set valign of this left cell to top.<br />
<br />
It seems ridiculous to me. Why have a property, height is equal to some number, inside a TD, if it doesn't work? Is it supposed to? Do we actually know for a fact, somewhere it says, putting height=# inside a <TD> is supposed to do something???<!--content-->What I just described works in Internet Explorer 5.5.<br />
However, there is a serious bug in Netscape, 4.xx, I'll show you a picture below.<br />
<br />
The only way to fix this is to insert a invisible GIF to fill up the space. LOTS of web pages do this.. <br />
<br />
(Personally, I think the HTML code is faulty for needing a transparent gif to wedge open cells.. Like it's a short sight-ed-ness of the original programers... Arg. Well, if it's not the Markup Language's fault, is it Netscapes'?)<!--content-->This works properly in<br />
:sniper:Netscape 4.73<br />
:sniper:Internet Explorer 5.5<br />
<br />
You won't be able to see it working until you put the pictures in the proper directory. :crying:<br />
<br />
Enjoy!
<!--content-->Thank you all. I took the suggestion(s) to break the page into two side-by-side nested tables. A few other problems came because of it, but fortunatly, there was enough example code and suggestions that I was able to get what I needed done.<br /><br />
Thanks again<br />
-Akira<!--content-->Cool good job.<br />
<br />
Torrent: that does work. if you take the background-repeat: repeat-y; out Netscape4.79 will tile the picture the rest of the page, not just the side. dang that makes 3 right for you this year, you almost caught up with me.
<!--content-->Originally posted by scoutt <br />Cool good job.<br />
<br />
Torrent: that does work. if you take the background-repeat: repeat-y; out Netscape4.79 will tile the picture the rest of the page, not just the side. dang that makes 3 right for you this year, you almost caught up with me.
<br /><br />
lol. I can't claim to have "known" this off the top of my head. I used TopStyle Pro (and always do for CSS) to see if it is NS4 compat. I can actually tell you that according to TopStyle it is also Opera compliant, so could be a good all round solution.<br />
<br />
Btw, if anyone is interested in doing CSS I recommend TopStyle (<!-- m --><a class="postlink" href="http://www.bradsoft.com">http://www.bradsoft.com</a><!-- m -->) as a good CSS editor.<!--content-->Interesting comments guys. I hand code everything, but topstyle comes bundled within coldfusion studio-so I have had access to it since my humble web beginnings. I personally don't like visual editors anymore (unless they are part of a graphics package) but I may look at old topstyle just to see what it offers. <br />
<br />
I guess the main thing I dislike about a program coding up things for me is my eventual reliance on that program to get things done. I subscript to storing up tons of examples (snippets if you will) of code, and referencing them on demand. It just helps me retain the knowledge better.<!--content-->Originally posted by Dr. Web <br />
Interesting comments guys. I hand code everything, but topstyle comes bundled within coldfusion studio-so I have had access to it since my humble web beginnings. I personally don't like visual editors anymore (unless they are part of a graphics package) but I may look at old topstyle just to see what it offers. <br />
<br />
I guess the main thing I dislike about a program coding up things for me is my eventual reliance on that program to get things done. I subscript to storing up tons of examples (snippets if you will) of code, and referencing them on demand. It just helps me retain the knowledge better. <br />
<br />
I hear yer Doc. I would say though that my knowledge of CSS has improved immeasurably through the use of TopStyle. Unlike a WSYIWG editor it just provides wizards (if you wish to use them) to produce the styles you are after and also indicates the level of browser compatibility. However, at all time you see any styles it places, and a sample. I no longer use the wizards and code practically all of it by hand. It's strength lies in its ability to locate orphan styles, do site wide checking, style validation, and of course the browser compatibility.<br />
<br />
I guess the TopStyle included with CF is TopStyle Lite (this comes with DW4 and Homestie as well)? I use TopStyle Pro which is the shareware version (although I registered some time ago). <br />
<br />
Definitely worth a look. Let me know what you think.
<!--content-->