Text over image help

Printable View

Aug 03rd, 2011, 12:04 PM
mitchstar

Hey guys. I'm new at web design, so please bare with my awful terminology and forgive me if I say something stupid. So I'm creating a simple wedding website from scratch (on Dreamweaver CS5) and I've run into a problem. In the past, I've only created websites using AP Divs on Dreamweaver. This time, I decided I would try tables for the heck of it. Here is a picture of what I have so far.
http://imgur.com/a/HgvaR
(Pardon the image blur. I don't know how my fiancee would feel about her image being posted on a message board)

Every block is a cell in a table. The main body text and picture underneath are currently in AP Divs so that I can see what it will look like, but the problem with that is that they move depending on how big your browser window is (where as everything else doesn't because the table is centered).

Main question: How can I put the text and picture on top of that tan body block and keep it from moving when the browser window changes sizes?

I've tried making the cell's background image the tan block, but the problem with that is that the text can only be centered (which I don't like the look of) or left justified (which starts right at the left edge (which also isn't what I want).

I can post the code if you need. Thanks for the help.
Aug 03rd, 2011, 03:29 PM
Webzarus

posting the code would be helpful... sounds like you're using relative positioning... and possibly percentages mixed in somewhere...

you will need to use absolute positioning and fixed sizes on your divs to keep them from moving on browser resize.

posting the code will give us a better look though
Aug 03rd, 2011, 03:35 PM
George Dolidze

You can left-align it, and then give it padding-left, so it moves away from the edge.
Aug 03rd, 2011, 03:52 PM
mitchstar

Thanks for the help so far. I'll look into those suggestions. Here's the code in pastebin:
http://pastebin.com/jvRN7h1i
Aug 03rd, 2011, 04:03 PM
Webzarus

sorry... security guy here... won't open anything on pastebin ... been problems there in the past and with the url hidden... you never know that you might find there...

will look at it... if you post it here...
Aug 03rd, 2011, 04:09 PM
Ronald Roe

I think the most substantive advice that is missing here is that tables aren't the way to go either. In fact, moving from AP divs to tables is a step backward. I'd encourage you to move on to divs (better yet, HTML5's various tags) that are positioned within the flow of the document.
Aug 03rd, 2011, 04:43 PM
mitchstar

Ah, sorry Webzarus. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Lauren and Mitch</title>
<style type="text/css">
body {
background-image: url(backdarker.gif);
background-repeat: repeat;
background-color: #380C4C;
}
body,td,th {
color: #000;
}
#apDiv1 {
position:absolute;
left:366px;
top:404px;
width:452px;
height:180px;
z-index:1;
font-family: Verdana, Geneva, sans-serif;
}
#apDiv2 {
position:absolute;
left:354px;
top:338px;
width:459px;
height:76px;
z-index:1;
}
#apDiv3 {
position:absolute;
left:467px;
top:398px;
width:532px;
height:178px;
z-index:1;
font-family: Verdana, Geneva, sans-serif;
}
#apDiv4 {
position:absolute;
left:465px;
top:546px;
width:574px;
height:297px;
z-index:2;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload="MM_preloadImages('links/1w.png','links/2w.png','links/3w.png','links/4w.png','links/5w.png','links/6w.png','links/0w.png')">
<div id="apDiv3"> Welcome to our wedding website and thank you for stopping by! The big day is fast approaching, now under a year left, and we can't wait to celebrate the first moments of our marriage with you all. This website will provide you with all the information you might need for the wedding day, as well as tell a bit about us as a couple. I hope you all enjoy!</div>
<div id="apDiv4"><img src="pic1.png" width="571" height="370" /></div>
<table width="200" border="0" align="center">
<tr>
<td colspan="3"><img src="bannerrt.png" width="918" height="279" /></td>
</tr>
<tr>
<td width="222" align="right" valign="top"><a href="http://www.laurenandmitchell.us" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','links/0w.png',1)"><img src="links/0b.png" alt="Home" name="home" width="230" height="46" border="0" id="home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ourstory','','links/1w.png',1)"><img src="links/1b.png" alt="Our Story" name="ourstory" width="230" height="48" border="0" id="ourstory" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aboutus','','links/2w.png',1)"><img src="links/2b.png" alt="About Us" name="aboutus" width="230" height="48" border="0" id="aboutus" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('photos','','links/3w.png',1)"><img src="links/3b.png" alt="Engagement Photos" name="photos" width="230" height="67" border="0" id="photos" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('registry','','links/4w.png',1)"><img src="links/4b.png" alt="Registry" name="registry" width="230" height="45" border="0" id="registry" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wedding','','links/5w.png',1)"><img src="links/5b.png" alt="Wedding Details" name="wedding" width="230" height="64" border="0" id="wedding" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','links/6w.png',1)"><img src="links/6b.png" alt="Contact" name="contact" width="230" height="46" border="0" id="contact" /><img src="links/bottomgreen.png" width="230" height="336" /></a></td>
<td width="660" align="left"><img src="bodyhome.png" width="683" height="700" /></td>
<td width="30"> </td>
</tr>
<tr>
<td colspan="3"><img src="bottom.png" width="918" height="50" /></td>
</tr>
</table>
</body>
</html>
Aug 03rd, 2011, 05:23 PM
George Dolidze

Quote:

Originally Posted by Ronald Roe, post: 215082

I think the most substantive advice that is missing here is that tables aren't the way to go either. In fact, moving from AP divs to tables is a step backward. I'd encourage you to move on to divs (better yet, HTML5's various tags) that are positioned within the flow of the document.

Browsers already support html5?
Aug 03rd, 2011, 06:22 PM
Ronald Roe

The up-to-date ones do. For webkit and mozilla browsers that aren't up-to-date (which is rare), you can just use the structural tags anyway just by defining the display attribute. for IE < 9, the HTML5 Shim takes care of it, by basically injecting the new tags into the DOM. Some of the other stuff, like <canvas>, <audio> and <video> are only available on the most up-to-date versions of non-IE browsers. I've used HTML5 for the last several sites I've designed.
Aug 03rd, 2011, 07:14 PM
George Dolidze

Quote:

Originally Posted by Ronald Roe, post: 215108

The up-to-date ones do. For webkit and mozilla browsers that aren't up-to-date (which is rare), you can just use the structural tags anyway just by defining the display attribute. for IE < 9, the HTML5 Shim takes care of it, by basically injecting the new tags into the DOM. Some of the other stuff, like <canvas>, <audio> and <video> are only available on the most up-to-date versions of non-IE browsers. I've used HTML5 for the last several sites I've designed.

Cool, I'll start learning it. Is it very different?
Aug 03rd, 2011, 07:36 PM
Ronald Roe

Quote:

Originally Posted by George Dolidze, post: 215111

Cool, I'll start learning it. Is it very different?

Nope. Writes just like XHTML, but with new, more semantic tags in addition to the ones you're used to.
Aug 03rd, 2011, 07:38 PM
George Dolidze

Quote:

Originally Posted by Ronald Roe, post: 215113

Nope. Writes just like XHTML, but with new, more semantic tags in addition to the ones you're used to.

Coolio.