Jump to content
darknightelor

regarding tables and background

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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 */}

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...