Feedback and advice needed <span class="votesInfo" data-xf-init="tooltip" title="2 members like this thread!" >2

http://www.angelfire.com/art/studiozuzu/gsPhotos.jpg"

src=
"

border="0" alt="Pictures from a Life"></a><br>
<br>
<a href="

http://www.angelfire.com/art/studiozuzu/gsNews.jpg"

src=
"

border="0" alt="What's doing..."></a><br>
<br>
<a href="

http://www.angelfire.com/art/studiozuzu/gsLinks.jpg"

src=
"

border="0" alt="Connections"></a><br>
<br>
<a href="

http://www.angelfire.com/art/studiozuzu/gsEmail.jpg"

src=
"

border="0" alt="Mail me"></a>
</td>
<td>
<p class="intro">
Ramblings of a teenaged mind...<br>
as if you can't get enough of that.
</p>
<p class="intro">
This site is here because I'm not near<br>
my friends right now and we want to know
</p>
<img alt="" src=
"

http://www.angelfire.com/art/studiozuzu/gsPicture.jpg">

</td>
</tr>
</table>

<p class="copyright">
photo: <a href=
"

http://www.intuitivmedia.com">intuitivmedia</a>

</p>
<p class="copyright">
all © 2002<br>
<a href=
"

http://www.studiozuzu.com"><b>www.studiozuzu.com</b></a>

</p>
<p class="copyright">
Nothing here may be resold in any form<br>
Credit for this set must be given on same page
</p>
</td>
</tr>
</table>

</center>
</body>
</html>

I removed the font tags and changes to CSS. its easier and cleaner. I also corrected mistakes in table syntax etc etc

The gap was because you had set a table padding of 5, it is now 0.

To over lap the image there are a number of ways. You could set the photo as a back ground image and then put the image you want to overlap into the <td></td> tags.

It can also be done with CSS. I'll try it and let you know.

É
::

::

tysu · Oct 31, 2002

Oh my, gosh, cian, I never expected this!
Thank you. I'll go try it now and tell you how it works tomorrow.
Again - bless you!!

tysu

cian · Oct 31, 2002

Hi,

Ok, this is not perfect but the idea works:

I have taken the title image and placed it over the main picture:

<div id="overlap">
<img alt="alternate text" src="gsTitle.jpg">
</div>

Then defined the styles for that:
#overlap {position:relative;left:-20;top:100px;z-index:5;}
you can change thw -20 and 100 to change the position of the image.

full code::

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
:: studiozuzu :: It's My Grey web set ::
</title>
<style type="text/css">

</style>
</head>
<body bgcolor="white" link="navy" vlink="maroon" alink="white">
<center>

<table summary="">
<tr>
<td>

<table width="600" cellspacing="0" cellpadding="0"
border="0" summary="">
<tr>
<td bgcolor="#CCCCCC">
<br>
<br>
<a href="

http://www.angelfire.com/art/studiozuzu/gsPhotos.jpg"

src=
"

border="0" alt="Pictures from a Life"></a><br>
<br>
<a href="

http://www.angelfire.com/art/studiozuzu/gsNews.jpg"

src=
"

border="0" alt="What's doing..."></a><br>
<br>
<a href="

http://www.angelfire.com/art/studiozuzu/gsLinks.jpg"

src=
"

border="0" alt="Connections"></a><br>
<br>
<a href="

http://www.angelfire.com/art/studiozuzu/gsEmail.jpg"

src=
"

border="0" alt="Mail me"></a>
</td>
<td>
<p class="intro">
Ramblings of a teenaged mind...<br>
as if you can't get enough of that.
</p>
<p class="intro">
This site is here because I'm not near<br>
my friends right now and we want to know
</p>
<div id="overlap">
<img alt="" src=
"

http://www.angelfire.com/art/studiozuzu/gsTitle.jpg">

</div>
<div>
<img alt="" src=
"

http://www.angelfire.com/art/studiozuzu/gsPicture.jpg">

</div>
</td>
</tr>
</table>

<p class="copyright">
photo: <a href=
"

http://www.intuitivmedia.com">intuitivmedia</a>

</p>
<p class="copyright">
all © 2002<br>
<a href=
"

http://www.studiozuzu.com"><b>www.studiozuzu.com</b></a>

</p>
<p class="copyright">
Nothing here may be resold in any form<br>
Credit for this set must be given on same page
</p>
</td>
</tr>
</table>

</center>
</body>
</html>

É
::

::

cian · Oct 31, 2002

Anytime,

one thing I forgot to do:
change
<body bgcolor="white" link="navy" vlink="maroon" alink="white">

to simply <body> because these are already defined in the styles

a:link { color: navy }
a:visited { color: maroon }
a:active { color: white }
a:hover { color: maroon }

É
::

::

tysu · Oct 31, 2002

Thanks, again. Going to try the new one now.
I kept the original page-in-question up in case anyone wants to see it, with a link to the coding you did at the bottom of that original page. OK with you? This page is not active yet.
(I changed some tiny things - dropping some extraneous ";", changing the font size and adding a little space in the "Ramblings..." portion.)

Here's a new dilemma : If I do use your modifications (corrections!)can I still claim this as "my" work? I dunno...?

tysu

cian · Oct 31, 2002

Hi,

Tek tips inserts these annoying ; for some reason.

Yes it's still your work! If you pay me! LOL

::

::

http://www.freshlookdesign.com

tysu · Oct 31, 2002

Well I guess I'll have to e-mail you,then.
Ha-ha. (don't even know where to get the smileys here!)

I tried the over-lay version and it changed the set-up considerably, so I'm sticking with the first. I'll re-touch the photo to get rid of what shouldn't be there on the left and make another title graphic.
Tomorrow.

You're great, cian.
Erin go braless, and all that...

tysu

Wullie · Oct 31, 2002

Hi mate,

If you want to use absolute positioning for all the images then you could simply slice the page up in ImageReady and then export it using CSS.

I was actually suprised just how well that worked.

Hope this helps Wullie

sales@freshlookdesign.co.uk

http://www.searchit-now.co.uk

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell

cian · Oct 31, 2002

I've never seen Erin braless, wouldn't mind though!

The layout changes cos your widest image was the title one, you could specify the width of that column or put in a transparent image to keep the shape.

For your information, under the textbox where you make type your message you'll find a link Emoticons/smileys!

slán
::

::

http://www.studiozuzu.com

tysu · Oct 31, 2002

When I said I cut the pieces I meant that I made this in Photoshop, then selected and extracted each image to its own new file for reassembling on the Web Set page.
I'm a bleeping coward around real slicing, Image Ready and even CSS!!
My skills are so basic it's not funny sometimes. Know I've got a lot of catching up to do.

tysu

tysu · Oct 31, 2002

Anyway, thanks guys. This has all been very helpful.

What I figure is my final page is viewable at

http://www.angelfire.com/art/studiozuzu/001SetGS.html

(Will delete the Tek-Tips message before putting it up for real.)

tysu

http://www.studiozuzu.com

cian · Nov 1, 2002

Hi tysu,

It looks nice and neat but unfortunatly you still have a number of errors. It would be important to correct this if you want the page to look the same in all browsers.

1. missing doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

2. two body tags.

3. incorrect table. your first table is simply <table> you need to give this table rows and cells! the minimun table should be
<table summary="" title="">
<tr>
<td>
</td>
</tr>
</table>

4. The <center> and <font> tags are basically obselete. Although still used by some it would be best to get rid of these and upgrade to CSS.

5. missing alt="" from some images. It is very important to have alternate text for every image.

6. attribute quotes. width="" alt="" cellspacing="" cellpadding="" border=""

7. there is no valign="" in <table> put it in the cells.

CSS is easy to learn and will, in the end, save you a truck load of work on your sites.

An editor such as

http://www.chami.com/html.kit/

will help you write clean code fast and also spot mistakes.

Hope that helps!

::

::