|
Subject:
|
layers in table cell
|
|
Posted By:
|
dearmisskat
|
Post Date:
|
3/7/2007 6:24:11 PM
|
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 By:
|
Imar
|
Reply Date:
|
3/8/2007 2:57:16 AM
|
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 By:
|
dearmisskat
|
Reply Date:
|
3/8/2007 1:01:30 PM
|
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 By:
|
Imar
|
Reply Date:
|
3/8/2007 1:15:32 PM
|
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 By:
|
dearmisskat
|
Reply Date:
|
3/8/2007 1:26:40 PM
|
Thanks Imar,
I will look into that.
Kat
|
|
Reply By:
|
dearmisskat
|
Reply Date:
|
3/8/2007 1:41:52 PM
|
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 By:
|
Imar
|
Reply Date:
|
3/8/2007 3:06:31 PM
|
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 By:
|
dearmisskat
|
Reply Date:
|
3/8/2007 6:14:27 PM
|
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 By:
|
Imar
|
Reply Date:
|
3/9/2007 3:05:07 PM
|
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 By:
|
dearmisskat
|
Reply Date:
|
3/9/2007 4:39:26 PM
|
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 By:
|
Imar
|
Reply Date:
|
3/9/2007 5:15:24 PM
|
It seems to error on the call to resizeIt() in the onload event. I can't find a reference to that function, so that may explain the error.
If you look in the final HTML, you'll see the JavaScript I am talking about. Calls like MM_preloadImages to preload the images and so on.
One way to optimize a little is to move all the JavaScript functions to a separate file so they only need to be downloaded once. Search Google for "javascript external file" to get some ideas.
Other than that, I see a lot of HTML markup (e.g. a background attribute) that can be moved to external CSS files for easier (and faster) reuse across pages.
But again: if you don't want to do all of this then don't bother. It's not the most important thing in the world.... ;-)
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 By:
|
dearmisskat
|
Reply Date:
|
3/9/2007 7:01:57 PM
|
Well, I guess I need the resize command only in the index page, and then all the other pages will be loaded in the correctly sized browser window, right?
|
|
Reply By:
|
Imar
|
Reply Date:
|
3/10/2007 3:46:40 AM
|
Personally, I don't like sites that resize my browser window. If you have a large screen with a high resolution, you can easily have two windows side by side. Then all of a sudden, you, the developer, determine that your site should be displayed full screen on my monitor. Hmmmm....
Resizing the window on the first page should be enough. That gives your user a chance to re-resize the window to something they like. If you keep resizing it on every page, you frustrate them even more.... ;-)
Your call to resizeIt may not be necessary as you already have "self.resizeTo" in your code.
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.
|
