Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old March 7th, 2007, 06:24 PM
Authorized User
 
Join Date: Mar 2007
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to dearmisskat
Default layers in table cell

hey everybody.

i am trying to build a gallery with dynamic layers and some rollover business, but have trouble getting the layer INSIDE my table cell.

anybody has ideas?

You can see the code at

http://www.luxdesign.com/blvd/gallery.html

The big picture is the BG pic of the layer and is supposed to line up with all of the little squares that are in a table and they will be the navigation.

thank you.

Reply With Quote
  #2 (permalink)  
Old March 8th, 2007, 02:57 AM
Imar's Avatar
Wrox Author
Points: 66,996, Level: 100
Points: 66,996, Level: 100 Points: 66,996, Level: 100 Points: 66,996, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,184
Thanks: 65
Thanked 1,401 Times in 1,381 Posts
Default

Hi there,

You position the image here:

left:495px; top:314px; width:222px; height:239px;

which is exactly where it ends up. However, it's the starting point that may be confusing you. The 0,0 coordinate is the top left pixel of the browser's window, not the other content in the site.

Why are you trying to solve this with layers? If you already have so many tables, you might as well add another cell for this image. Or am I overlooking something?

Imar
---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.
Reply With Quote
  #3 (permalink)  
Old March 8th, 2007, 01:01 PM
Authorized User
 
Join Date: Mar 2007
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to dearmisskat
Default

hey imar,

i tried specifying the position like that, but unfortunately they don't align in Firefox and Safari -if it lines up in one of them it's a few pixels of in the other and vice versa.

Also I want to make these dynamic layers, the small images will be rollovers and if you click them the corresponding big image will appear. The only way I found for this to work in html is dynamic layers.

So I am trying to put the layer in the table cell for everything to line up. Can you think of a better sollution?


Thank you,
Katharina


Reply With Quote
  #4 (permalink)  
Old March 8th, 2007, 01:15 PM
Imar's Avatar
Wrox Author
Points: 66,996, Level: 100
Points: 66,996, Level: 100 Points: 66,996, Level: 100 Points: 66,996, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,184
Thanks: 65
Thanked 1,401 Times in 1,381 Posts
Default

Hi Katharina,

You should start by adding a proper doc type to your page. Without a doc type, you'll find the differences between all browsers much bigger.

With a doctype like transitional XHTML 1.0, IE and FireFox will render much closer to each other.

For more details, see this article:

http://www.alistapart.com/articles/doctype/

Once you have a doctype, you can start writing valid code that will render the same in all major browsers.

You may also want to take a look at a book like Beginning CSS as it'll help you understand how to build site using XHTML and CSS.

Cheers,

Imar


---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.
Reply With Quote
  #5 (permalink)  
Old March 8th, 2007, 01:26 PM
Authorized User
 
Join Date: Mar 2007
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to dearmisskat
Default

Thanks Imar,

I will look into that.

Kat

Reply With Quote
  #6 (permalink)  
Old March 8th, 2007, 01:41 PM
Authorized User
 
Join Date: Mar 2007
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to dearmisskat
Default

The doctype makes everything a bit more regular, but my problem still isn't solved.

Even is the image lines up with the table, if i resize the browser window (or if somebody has a smaller bigger screen than me) it's in the wrong spot.



Reply With Quote
  #7 (permalink)  
Old March 8th, 2007, 03:06 PM
Imar's Avatar
Wrox Author
Points: 66,996, Level: 100
Points: 66,996, Level: 100 Points: 66,996, Level: 100 Points: 66,996, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,184
Thanks: 65
Thanked 1,401 Times in 1,381 Posts
Default

Correct. Like I said earlier, you positioned the image in a fixed location, with the browser window's (0, 0) coordinate (the upper left hand corner) being the anchor point.

So, when you resize the browser, the image will stay put, but the rest of the content will move.

Instead, you could embed the image directly inside another table cell (I didn't really understand your explanation why you couldn't; you don't need a positioned image to create a roll-over) or look into other positioning options: http://www.w3schools.com/css/pr_class_position.asp

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.
Reply With Quote
  #8 (permalink)  
Old March 8th, 2007, 06:14 PM
Authorized User
 
Join Date: Mar 2007
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to dearmisskat
Default

Hey Imar,

I figured it out. I just put the image in the table and create a rollover through swaping the image. I will re-upload the site as soon as I am done so that you can see.

I had to take out the doctype because it disabled my swap image command.

Maybe i just had the wrong doctype?

Is there anything else in my site that you see that needs changing? I am self-taught and i just pretty much figure things out as i go along so i have no idea if what i am doing is right. I appreciate any input.

Thank you.

Reply With Quote
  #9 (permalink)  
Old March 9th, 2007, 03:05 PM
Imar's Avatar
Wrox Author
Points: 66,996, Level: 100
Points: 66,996, Level: 100 Points: 66,996, Level: 100 Points: 66,996, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,184
Thanks: 65
Thanked 1,401 Times in 1,381 Posts
Default

Quote:
quote:Is there anything else in my site that you see that needs changing?
That largely depends on whether you want to change it or not, and have the time to learn what to change.

Currently, your site looks good (although I do get a JavaScript error popping up on every page). However, it uses a lot of code, and also a bit out-dated code, and way too much JavaScript. Depending on your intentions with the site, this is not a problem. It looks good, works fine, so why bother changing it.

However, if you want to build a site that remains easy to maintain now, and two years from now, you may want to a look at XHTML, CSS and DocTypes a little more. Those are important concepts to create fast rendering, easy to maintain and cross browser web sites. I haven't tried it, but I think I can rewrite your frontpage to only 30% of the current code, dropping 70% of the code, and thus wasted bandwidth....

But again, you have to consider for yourself if that's what you want. If it ain't broken, don't fix it.... ;)

Imar
---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.
Reply With Quote
  #10 (permalink)  
Old March 9th, 2007, 04:39 PM
Authorized User
 
Join Date: Mar 2007
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to dearmisskat
Default

hey imar,

you get an error message?
that's not good. i would definately like to get rid of that. i honestly didn't know i was using a whole lot of java script. where is it?

i also don't want to chane a lot, leave alone start over or anything crazy like that, but i would like to work on making it more efficient and faster to load.

what are some easy things i can do to slim it down a bit?

thank you.

Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Table: width setting for a cell Venki XSLT 2 July 14th, 2008 09:05 AM
How to force table cell to a certain width? TheMajor HTML Code Clinic 1 April 17th, 2007 01:57 PM
reading from a table cell? Atomsk Access VBA 2 September 28th, 2006 07:46 AM
Hyperlink in a cell table amc Dreamweaver (all versions) 33 August 5th, 2004 12:11 PM



All times are GMT -4. The time now is 06:13 AM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.