darknightelor Posted September 6, 2008 Share Posted September 6, 2008 Hello all!I have a few questions:1.How do I make a table be present right next to another table? I mean, I want a table on the left side and next to it (tight to it) another table (right side). I want this to be 2 tables, not table cells.2.How do I adjust the background of the table? I want the background to be in the same size of the table, so when a background image is too big, it will be resized to the size of the table.Thank you! Link to comment Share on other sites More sharing options...
Ingolme Posted September 6, 2008 Share Posted September 6, 2008 You can't resize background images.About putting a table next to another, just use the CSS float property:HTML: <table class="left"><!-- some more code --></table><table class="right"><!-- some more code --></table> CSS: .left {float: left;width: 50%;}.right {width: 50%;} But stop right there for a moment!If you're just using tables to locate things on your website, you might just want to look at this:http://w3schools.com/css/tryit.asp?filename=trycss_float6 Link to comment Share on other sites More sharing options...
mandy Posted September 7, 2008 Share Posted September 7, 2008 Your post was useful to me too, Ingolme - thank you! How's the electronics doing??!Using the w3schools css you pointed us to, how would we put a background image in each of the 3 cells on the left? One in the top cell, repeating image in the centre and one fixed in the bottom?I am trying to get the effect of the page with shadow behind it as shown in: http://www.theenginerevolution.com/hotpress/Many thanks for your time... Link to comment Share on other sites More sharing options...
Ingolme Posted September 7, 2008 Share Posted September 7, 2008 That page isn't done with tables.To put a shadow around the object you would need 8 images: four corners and four edges.The edge images would repeat and the corner images wouldn't.Here's one way to make a box with a shadow around it:HTML: <div class="box"> <div class="topleft"> <div class="topright"> <div class="top"> <!-- top of box --> </div> </div> </div> <div class="left"> <div class="right"> <div class="main"> The content of the box goes inside here. </div> </div> </div> <div class="bottomleft"> <div class="bottomright"> <div class="bottom"> <!-- top of box --> </div> </div> </div></div> CSS: .topleft { background: url(topleft.png) top left no-repeat; }.topright { background: url(topleft.png) top right no-repeat; }.bottomleft { background: url(bottomleft.png) top left no-repeat; }.bottomright { background: url(bottomright.png) top right no-repeat; }.top { background: url(top.png) top repeat-x; height: 15px; /* Height of the border image goes here */ margin: 0 15px; /* The width of the corner images goes here */}.bottom { background: url(bottom.png) top repeat-x; height: 15px; /* Height of the border image goes here */ margin: 0 15px; /* The width of the corner images goes here */}.left { background: url(left.png) left repeat-y; }.right { background: url(right.png) right repeat-y; }.main { margin: 0 15px; /* Width of left and right border images goes here */} Link to comment Share on other sites More sharing options...
mandy Posted September 7, 2008 Share Posted September 7, 2008 Many thanks. Would ' div.box ' go just above the code you have given??and one more newbie question: can we use gif instead of png - actually, what sort of images can be used successfully for this sort of thing? Link to comment Share on other sites More sharing options...
Ingolme Posted September 7, 2008 Share Posted September 7, 2008 Any image format works. I use PNGs because their transparency would allow the shadow to be over any color background.div.box can go anywhere, you can give it a width, height, margins... Link to comment Share on other sites More sharing options...
mandy Posted September 8, 2008 Share Posted September 8, 2008 Hello - back again after implementing but not getting anything to show, except for: 'the content of the box goes inside here'.This is the code I have put, and all the images, with the correct names and file endings are in the images folder:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>The content of the box goes insi</title><style type="text/css">div.box.topleft { background: url(images/topleft.gif) top left no-repeat; }.topright { background: url(topright.gif) top right no-repeat; }.bottomleft { background: url(bottomleft.gif) top left no-repeat; }.bottomright { background: url(bottomright.gif) top right no-repeat; }.top { background: url(topbox.gif) top repeat-x; height: 15px; 30; /* Height of the border image goes here */ margin: 0 15px; 30; /* The width of the corner images goes here */}.bottom { background: url(bottombox.gif) top repeat-x; height: 15px; 30; /* Height of the border image goes here */ margin: 0 15px; 30; /* The width of the corner images goes here */}.left { background: url(leftbox.gif) left repeat-y; }.right { background: url(rightbox.gif) right repeat-y; }.main { margin: 0 15px; 30; /* Width of left and right border images goes here */}</style></head><body><div class="box"> <div class="topleft"> <div class="topright"> <div class="top"> <!-- top of box --> </div> </div> </div> <div class="left"> <div class="right"> <div class="main"> The content of the box goes inside here. </div> </div> </div> <div class="bottomleft"> <div class="bottomright"> <div class="bottom"> <!-- top of box --> </div> </div> </div></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.