[CODE] Flexible width tables
#1
FLUID WIDTH TABLE

For a true fluid width table, you want to be sure that your background image, whatever it is, either repeats or is fixed in a way that lets text flow around it.

Repeating background image
You can use a repeating pattern, such as squares, and make them alternate (eg: black square <-> white square) horizontally. You can do this with a lot of things. Just remember to change the background in the code:

Code:
background:#6AA2B1 url(http://img638.imageshack.us/img638/844/claudius03.jpg) y-repeat right;width:100%

y-repeat makes the background repeat across the y-axis (vertically up and down). You can position this either right or left.

You can also make a background repeat across the top or bottom with x-repeat top or x-repeat bottom.

Fixed background image
For example, if you have a picture of a house, make sure you blend two of the four corners so that it blends in with the background. The image I use, below, is an example of this. The left and bottom fade into the background.

Reminders
  • Make sure you save your image as a .jpg. If you save it as a .png, it will not blend in with the background properly.
  • Don't forget to test your table in the older, newer, and mobile skins to make sure it looks good in all formats! If you use a wide background image, it might squish your text a lot in an older skin.
  • Don't forget to make sure your table is readable. Check out the awesome graphics guide!
[html]<style type="text/css">
.fluid {margin:0 auto;padding:0;background:#6AA2B1 url(http://img638.imageshack.us/img638/844/claudius03.jpg) no-repeat right top;width:100% }
.fluid .in {padding:10px 10px 10px 20px; font-family:arial;font-size:1em;color:#000;}
.fluid .box {width:250px;height:400px;float:right;}
.fluid p {margin:0;padding:0;text-indent:30px;}
.fluid .ooc {font-size:0.95em;font-style:italic;}
.fluid .line { border-bottom:1px dotted #5A899B; margin:0 220px 5px auto;}
.fluid b {color:#0C1C33;font-family:georgia}
.fluid .header {color:#CFDB62;font-family:georgia;font-size:140%;font-style:italic;text-align:center;padding-bottom:10px}</style>

 
header text

OOC text goes here!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac enim eros. Praesent eget fringilla ante. Nulla risus purus, varius in ullamcorper sit amet, aliquet id arcu. Nullam mauris sem, tristique eu aliquet eget, vehicula quis massa. Praesent vel turpis odio, sit amet hendrerit lorem. Aliquam tincidunt lorem eu odio lobortis ut varius lorem convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquam odio id neque aliquet pretium. Vestibulum nec neque lacus, ac tristique lectus.


Nam ac magna vel velit semper vehicula ut vel orci. Cras in quam et purus mattis vestibulum. Etiam euismod vehicula metus vitae varius. Integer ac posuere ipsum. In at felis nulla. Maecenas tortor lorem, faucibus eu cursus nec, pretium vitae est. Fusce eget pellentesque ipsum. Sed venenatis, dui in egestas condimentum, sapien risus viverra arcu, eu porttitor lectus eros in nisi. Praesent metus nunc, ornare ac faucibus ut, condimentum quis orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum viverra vestibulum enim quis vehicula. Vestibulum et nisl at nisi consectetur congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nisl orci, bibendum id laoreet at, iaculis at enim. Quisque feugiat, orci eu pharetra mattis, purus felis lobortis tellus, ut consequat neque diam non risus. Quisque eget erat turpis. Nunc vel purus massa, at malesuada risus. Donec quam arcu, pharetra non interdum sit amet, tristique quis nibh.

Vivamus laoreet feugiat velit, a ultricies nibh aliquet vel. Quisque sem elit, facilisis a aliquam nec, ornare dapibus turpis. Curabitur tempor ultricies interdum. Curabitur non convallis nibh. Sed vulputate, magna quis auctor volutpat, felis arcu ultricies augue, eget sollicitudin magna libero rutrum nunc. Donec tempor, lorem et malesuada interdum, dui erat gravida nulla, nec fermentum est ipsum nec est. Mauris arcu massa, lobortis id ultrices ut, placerat ut metus. Maecenas adipiscing velit ultricies tellus porttitor sollicitudin rhoncus enim accumsan.

[/html]

Code:
[doHTML]<style type="text/css">
.fluid {margin:0 auto;padding:0;background:#6AA2B1 url(http://img638.imageshack.us/img638/844/claudius03.jpg) no-repeat right top;width:100% }
.fluid .in {padding:10px 10px 10px 20px; font-family:arial;font-size:1em;color:#000;}
.fluid .box {width:250px;height:400px;float:right;}
.fluid p {margin:0;padding:0;text-indent:30px;}
.fluid .ooc {font-size:0.95em;font-style:italic;}
.fluid .line { border-bottom:1px dotted #5A899B; margin:0 220px 5px auto;}
.fluid b {color:#0C1C33;font-family:georgia}
.fluid .header {color:#CFDB62;font-family:georgia;font-size:140%;font-style:italic;text-align:center;padding-bottom:10px}</style>

<div class="fluid">
<div class="box"> </div>
<div class="in">
<div class="header">header text</div>
<div class="line"><p class="ooc"> OOC text goes here!  </p></div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac enim eros. Praesent eget fringilla ante. Nulla risus purus, varius in ullamcorper sit amet, aliquet id arcu. Nullam mauris sem, tristique eu aliquet eget, vehicula quis massa. Praesent vel turpis odio, sit amet hendrerit lorem. Aliquam tincidunt lorem eu odio lobortis ut varius lorem convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquam odio id neque aliquet pretium. Vestibulum nec neque lacus, ac tristique lectus. </p>

<p>
Nam ac magna vel velit semper vehicula ut vel orci. Cras in quam et purus mattis vestibulum. Etiam euismod vehicula metus vitae varius. Integer ac posuere ipsum. In at felis nulla. Maecenas tortor lorem, faucibus eu cursus nec, pretium vitae est. Fusce eget pellentesque ipsum. Sed venenatis, dui in egestas condimentum, sapien risus viverra arcu, eu porttitor lectus eros in nisi. Praesent metus nunc, ornare ac faucibus ut, condimentum quis orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Integer ante ligula, tincidunt at tincidunt volutpat, fermentum eu mi. Aliquam erat volutpat. Donec eget enim justo. Curabitur turpis magna, rhoncus eu convallis eu, fringilla nec libero. Etiam pharetra interdum mauris. Nunc eu mi ipsum, a pellentesque massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat.

 </p>
</div></div>[/doHTML]

Modify this code as you need. Do not use the background image I use. Please use your own. Also, remember to use non-copyrighted images and credit properly because observing copyright is awesome!
#2
<3

This is good, really clearly written Big Grin

I have two questions about what you've written.

1) Exactly how do jpg Images blend with the background better? I've made some pngs that seem to blend well as long as i'm accurate with the colours when setting the background, how exactly do jpgs do this better?

2) How do you make the box with float:right work? I've tried to use stuff with that code before but it broke the table spectacularly, making parts of it below the div disappear and the solutions to the problem that I could find were all extremely complicated and, that I can see, not included in your code. :3
#3
Thanks! Smile

1) From what I've noticed, .png images are slightly different colours for different browsers. They'll show up just a bit differently on Firefox versus IE, so I always try to use a .jpg. I think it's because of colour profiles -- so as you can see in the example image, the image's colour you see is slightly different.

2) It's super simple! c:
CSS looks like this:
Code:
.fluid .box {width:240px;height:400px;float:right;}
And your HTML looks like this:
Code:
<div class="box"> </div>
All you do is tell it to float to the right and specify a height and a width. As far as I know, this works fine. c: I don't know how else to explain it except that since your box is floated right, your text goes around it.
#4
I didn't know that about jpg images, i'll keep that in mind :o

I must've coded my floating divs incorrectly since I've managed to work your box code into a few test tables without everything breaking horribly :3 Still don't exactly understand where I went wrong on my attempt, but what works works Big Grin

Thanks a lot Tammi <3
#5
Super! c:

And it was probably just something silly in your code like a missing semi-colon or missing bracket. It happens to me a lot, too! >__<


Forum Jump: