Can I put an image outside my table on top of the background? [Archive]

View Full Version : Can I put an image outside my table on top of the background?

Bantymom

10-06-2009, 11:14 PM

I'm sure that question might not even make sense, but it was the best I could do for a title other than "I Have A Question"

Below is the link to a forum I'm working on. It's one of those forums where everything is pretty much done for you as far as the database, the hosting, and most of the code. However, I can get into the CSS, the images, and I can add things to the html (and with Javascript, it's even possible to manipulate the existing code, though I don't know how.)

My Forum (http://s6.invisionfree.com/BantyTest3/)

The green-gray lace you see is the background-image for the BODY. I've moved the TABLE over to the right because I would like to add an image of a fairy to the left of it. If there were no background image, I could use that and then just position it. However, since there is already a background image, I can't do it that way, and I really don't want to make a giant image that would include the the lace and the fairy.

I was able to add a div (?) before the body (?), and so, in theory, I could set an image in that (if I set the div to a specific size I think), but I don't know how to make it float down beside the rest of the forum instead of insisting on being above it. ("float" being used in a descriptive, not a technical sense)

This is from the source code. I didn't think you would want all of it. Part of the CSS is after that.

Thank you very much for lending a hand. Even if you can't help me, thank you for taking the time to try.

Cheers,
Bantymom

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Bantytest3</title>

<base href="http://127.0.0.1/" /><script type="text/javascript">
window.google_analytics_uacct = "UA-6782185-1";
</script></head><div class="titlemedium" align=left>
I want to put a picture here and make<br>
run to the left of the forum<br>
but as you can see, while the text<br>
to the left<br>, the whole div sits above the forum</div>

<table class="backgroundtable" align="right">
<tr><td>

<table width="750" align="center">
<tr><td valign="top">
<script language='JavaScript' type="text/javascript">

</script>


<div id='logostrip'>
<a href='http://z6.invisionfree.com/BantyTest3/index.php?' title='Board Home'>
Glass Slippers<br>and<br>Fairy Godmothers
</a>
</div>

<style type='text/css'>
form {display : inline;}
img {vertical-align : middle;border : 0;}

BODY {
font-family : Verdana, Tahoma, Arial, sans-serif;
font-size : 11px;
color : #bcb886;
margin : 30px 10px 30px 10px;
background-color : #e4e1be;
background-image : url(http://209.85.48.9/14610/156/upload/p31974.jpg);
background-position : center top;
}
TABLE, TR, TD {font-family : Verdana, Tahoma, Arial, sans-serif;font-size : 11px; color : #bcb886;}
a:link, a:visited, a:active {text-decoration : none; color : #bcb886;}
a:hover {color : #9a9664;text-decoration : none;}

.backgroundtable {
width : 850px;
background : #e7e3bb;
background-image : url(http://209.85.48.9/14610/156/upload/p32151.jpg);
border : 3px dotted #fafbea;
}

fieldset.search {padding : 6px;line-height : 150%;border : 2px solid #fafbea;}
label {cursor : pointer;}
img.attach {border : 2px outset #ebebd1;padding : 2px;}

#logostrip {
font-family : CygnetRound, Cursive, Serif;
vertical-align : middle;
text-align : center;
font-size : 26px;
color : #fafbea;
letter-spacing : 1px;
padding : 3px 3px 3px 3px;
background-color : #d4d0a0;
background-image : url();
background-repeat : repeat-x;
background-position : bottom;
border-bottom : 2px dotted #fafbea;
border-top : 2px dotted #fafbea;
}
#logostrip a:link, #logostrip a:visited, #logostrip a:active {
text-decoration : none;
color : #fafbea;
}
#logostrip a:hover {
text-decoration : none;
color : #9a9664;
}

#submenu {
font-size : 10px;
margin : 3px 0 3px 0;
font-weight : bold;
}
#submenu a:link, #submenu a:visited, #submenu a:active {
font-weight : bold;
font-size : 10px;
text-decoration : none;
}
#submenu img {display : none;}

#userlinks {
border : 1px solid #ebebd1;
background-color : #f2f1df;
}
#navstrip {
text-align : center;
font-weight : bold;
padding : 6px 0 6px 0;
}
#navstrip img {display : none;}

.post1 {background-color : #f4f4e5;}
.post2 {background-color : #f4f4e5;}
.postlinksbar {color : #fafbea;background-color : #e4e1be;padding : 7px;margin-top : 1px;font-size : 10px;font-weight : bold;background-image : url();}

.row1 {background-color : #fafbea;}
.row2 {background-color : #ebebd1;}
.row3 {background-color : #ebebd1;}
.row4 {background-color : #ebebd1;}

.darkrow1 {background-color : #d4d0a0;color : #fafbea;}
.darkrow2 {background-color : #e4e1be;text-align : right;}
.darkrow3 {background-color : #ebebd1;color : #9a9664;}

.hlight {background-color : #e4e1be;}
.dlight {background-color : #ebebd1;}

.titlemedium {
font-weight : normal;
font-size : 10px;
text-transform : lowercase;
color : #d4d0a0;
padding : 2px;
margin : 0;
background-image : url();
background-color : #f2f1df;
}
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active {
text-decoration : underline;
color : #fafbea;
}
.maintitle {
font-family : CygnetRound, Cursive, Serif;
vertical-align : middle;
text-align : center;
font-size : 26px;
color : #fafbea;
letter-spacing : 1px;
padding : 3px 3px 3px 3px;
background-color : #d4d0a0;
background-image : url();
background-repeat : repeat-x;
background-position : bottom;
border-bottom : 2px dotted #fafbea;
border-top : 2px dotted #fafbea;
}
.maintitle a:link, .maintitle a:visited, .maintitle a:active, .maintitle a:hover {
text-decoration : none;
color : #fafbea;
}
.maintitle img {display : none;}
</style>

simcomedia

10-07-2009, 03:52 PM

First, anything you put before the <body> tag regarding HTML will be ignored.

Second, you can put anything you want 'over' a background image.

Third, by simply moving your table over to the right doesn't mean you can put something to the left. You need to create a container <div> so that the two items, your pic and your table, can coexist next to each other.

Fourth, if you place a huge picture next to your table you're in danger of the visitor having to scroll massively left to right to view the page. A big no-no in design.

To add your pic you could do it simply by adding another column to your already present container <table> instead of using the <div>. So, instead of this:

<table class="backgroundtable" align="right">
<tr><td>

You'd have this:

<table class="backgroundtable" align="right">
<tr><td><img src="yourhugepichere.jpg" alt="" height="" width=""/></td><tr><td>

Bantymom

10-07-2009, 10:35 PM

Thank you very much for your patience and for taking the time to answer such a poorly worded request.

On this forum, I am not able to get to the html directly, only interact with it through special windows in the admin control panel. It's a bit like building a ship in a bottle, but with parts of the bottle blacked out.

Anyway, here is what that part of the code looks like now (through the window in the control panel):

<tr><td>
<img src= "http://imagecache5.art.com/p/LRG/12/1288/ASDO000Z/edmund-dulac-fairy-godmother.jpg" height="350" width="280" alt="Fairy Godmother">
</td><tr><td>

<table class="backgroundtable" align="right">
<tr><td><img src="http://media.merchantcircle.com/2476280/fairy-with-wand_full.gif" height="43" width="64" alt="fairy with wand "></td><tr><td>

<table width="750" align="center">
<tr><td valign="top">
<% BOARD HEADER %>

<center><div class="credit">
To look its best, this forum needs the font "CygnetRound."<br>
CygnetRound is freeware and can be downloaded at <a href='http://www.fontco.com/font-info/cygnetround.php'>
FontCo.com</a></div></center>

<% NAVIGATION %>
<% BOARD %>
</td>
</tr>
</table>
<% STATS %>

<center><div class="credit">"Glass Slippers and Fairy Godmothers" skinned by Bantymom of <a href='http://forums.redcarpetrebellion.net/index.php?'> RC&R</a><br>thank you to antique acc!dent of <a href='http://forums.redcarpetrebellion.net/index.php?'> RC&R</a> for this box and for helping with the one below</div></center>

<center>
<p>
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
</center>

Again, the link: The Test Board (http://s6.invisionfree.com/BantyTest3/)

You can see I added the information as you told me to after <table class="backgroundtable" align="right">. The pic I put in to test the result is just a small one of a fairy with a wand. That picture ended up inside the table the forum sits on. To try to get the image outside the forum table, I then took the same bits and put them before <table class="backgroundtable" align="right">, this time using a larger picture of the fairy godmother in the pumpkin patch, and this time it ended up outside the table the forum sits on, and over to the left, which makes me feel somewhat successful. Oh, the pictures I chose were for the purposes of testing the code.

However, I would like to position it further down the page, about half way perhaps, and to have it slide behind the table and forum if the window is made more narrow. Currently, the table jumps below the image when that happens. Is it possible to make it slide under the table of the forum? Is html the right way to go about this? Would CSS work better? Or is it not even possible?

I understand what you are saying about a large picture contributing to poor webpage design. The plan is to use a narrow picture, probably something more in the way of a silhouette or just a glass slipper.

I greatly appreciate your kind help with this,
Bantymom