PDA

View Full Version : Need CSS assistance, please.



Deanna475
Jan 20th, 2003, 09:26 PM
The best way for me to describe what I am trying to do is show you the actual page I'm designing (still a work-in-progress). Please go to

http://www.theinspirationgallery.com/neo/neoclassic_border_test.htm

When a visitor mouses over the various thumbnails contained in the iframe, every element on the main page becomes interactive -- text, background, and all graphics on the page, including the border.

I want the border to look like this in relation to the two columns:

http://www.theinspirationgallery.com/neo/border_example.jpg

See how I made the border "underlap" the columns to create a seamless effect? (Just a graphic, I wish it were that simple to do). It's important to keep the tops of the 2 columns and the border three separate table cells because they are all interactive on an onMouseOver command.

On the advice of someone who knows more about CSS than I do, I applied this CSS code to the <STYLE>

.clsHeaderStyle{
z-order:-1;
position:absolute;
top:10;
left:217;
width:520;
height:130;
}

I added this <DIV> just after my <BODY> tag:

<div id="HeaderDiv" background="column3_default_bord.gif" class="clsHeaderStyle"></div>

And the actual border cell itself looks like this:

<TD ID=border ROWSPAN=1 VALIGN=TOP BACKGROUND="column3_default_bord.gif" HEIGHT=130 WIDTH=520><IMG SRC="spacer.gif" BORDER=0 HEIGHT=130 WIDTH=520></TD>

The "ID=border" part is for the purposes of the onMouseOver image swap; when a visitor mouses over a border thumbnail graphic in the iFrame, the border on the main page changes.

I was told this would do the trick to make the border cell in the table "underlap" the two column tops and create the effect I illustrated in my graphic example. Only it doesn't. My CSS source has dried up and now I'm stuck with this CSS code on my page that does nothing and I don't know enough about CSS to fix whatever is wrong. Can someone please help me out? Please and thank you. *S*

Mr J
Jan 21st, 2003, 12:26 AM
Hi

I have had a look at your examples and realise what you are wanting to do.

You have to give the border a lower z-index than the columns.

I am not sure if you can do this with having an image as a table cell background, you might have to re-write your tables to include the images using the img tag.

Below is an example for you to experiment with, change pic1.jpg and pic2.jpg to your own images then reverse the z-index numbers and you will see that the top image is reversed.



<div style="position:absolute;left:300;top:250;z-index:2"><img src="pic1.jpg"></div>
<div style="position:absolute;left:300;top:300;z-index:1"><img src="pic2.jpg"></div>


If you need more info let me know

Deanna475
Jan 21st, 2003, 01:07 AM
Hi J, and thanks for the input. I'm "playing" around with your suggestion but I'm afraid I do need more info. My CSS knowledge is at the spoonfed level (meaning I'm great at following step-by-step instructions but no good at coding CSS on my own).

You mention that you're not sure if the image swap on mouseover *and* the image I want swapped be *behind or under* another graphic can be done through a table cell method. The reason I chose the table cell method is because it automatically and seamlessly repeats the image the length of the cell and I can use this simple JavaScript code to achieve the image swap:

<a href="javascript:void(null)" onMouseOver="top.border.background='border1.gif'"><IMG SRC="border1_tn.gif" BORDER=0 HEIGHT=60 WIDTH=90></a>

... *and* do it from within the contents of an iFrame. I was kinda hoping that a table cell could be positioned under other cells .... or maybe position a table under another table .... <sigh>

I've been sitting here staring at the screen trying to figure out how this can be done: get the image to repeat across the distance between the two columns, underlap the two columns *and* get the darn thing to swap on mouseover.

Also, does the code I was previously given (all that clsHeaderStyle and <DIV ID="HeaderDiv" BACKGROUND="column3_default_bord.gif" CLASS="clsHeaderStyle"></DIV> even need to be in there? Is it a help or a hindrance?

Using your line of code right after the <BODY> tag, <div style="position:absolute;left:300;top:250;z-index:2"><img src="pic1.jpg"></div> , I can position the border exactly where I want but it doesn't repeat nor do I know how to make it swap?

I've attached a screen shot of what the top part of the page currently looks like in my HTML/CSS editor. Any further advice is tremendously appreciated. I've been trying to figure this out with and without help for 3 days now and I'm running out of ideas! My latest idea is: Is it possible to position a table under another table using CSS because I could put the border in it's own table, give it a unique ID and still use the JavaScript to swap the image. Sounds good in theory huh?

http://theinspirationgallery.com/neo/j_border_suggestion.jpg

Deanna475
Jan 21st, 2003, 01:35 AM
J !!!! I did it!!! It works !!!! You inspired me with your suggestion and then I followed through on the "table behind a table" idea I had. I basically combined what you suggested with my idea and it works. Check it out:

http://www.theinspirationgallery.com/neo/neoclassic_border_test.htm

This is what I did:

1. Got rid of all that "clsHeaderStyle and <DIV>" stuff that someone else suggested I try.
2. Created a table with the exact dimensions I wanted just above the "master table" which contains all of the page elements that can be swapped.
3. Inserted this <DIV> around the table:

<div style="position:absolute;left:190;top:15;z-index:-2">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=620>
<TR>
<TD ID=border WIDTH=620 BACKGROUND="column3_default_bord.gif"><IMG SRC="spacer.gif" BORDER=0 HEIGHT=130 WIDTH=620></TD>
</TR>
</TABLE></DIV>

And it works. I don't know if this would pass W3C muster, but it works. *S*

Thank you for giving me the spark I needed.

Mr J
Jan 21st, 2003, 08:06 PM
Hi Deanna475

Glad to be of help.

I have been to have a look and you are almost there as the top border needs to be positioned more to the left.

I am using IE5.5

I had still been working on a solution so I will still post it for you to see in case you want another option



In your main page change

<DIV ID="HeaderDiv" BACKGROUND="column3_default_bord.gif" CLASS="clsHeaderStyle"></DIV>

To

<DIV id="HeaderDiv" style="position:absolute; left:100px; top:15px; width:570px; height:130px; background-image:url(neoclassic_border_test_files/column3_default_bord.gif); z-index:-1"></DIV>

Position using left:100px; top:15px

In the Iframe page add the following script

<SCRIPT language=JavaScript type=text/javascript>
<!--
function Change_header(pic){
parent.HeaderDiv.outerHTML="<DIV class=clsHeaderStyles id='HeaderDiv' style='position:absolute; left:100px; top:15px; width:570px; height:130px; background-image:url("+pic+"); z-index:-1'></DIV>"

}
//-->
</SCRIPT>

and change the links from

<a href="javascript:void(null)" onMouseOver="top.border.background='border1.gif'">
<IMG SRC="border1_tn.gif" BORDER=0 HEIGHT=60 WIDTH=90>
</a>

To

<A href="#null" onmouseover="Change_header('border1.gif')">
<IMG SRC="border1_tn.gif" BORDER=0 HEIGHT=60 WIDTH=90>
</a>


Change pic accordingly

Deanna475
Jan 22nd, 2003, 04:47 AM
Hi again J. I implemented your method and it works, too! A bit more involved *S* but hey, that's why you're answering the questions and I'm asking them! When I began this project a week ago, I didn't even know if this table / table cell swap thing could be accomplished. Now I have two ways of doing it. *S* Thank you so much for your perseverance, patience and input.

The positioning of the border issue is going to be a sticky one for me. I'm using IE6 with screen res of 1024x768. The X and Y co-ordinates I used positioned the border perfectly. When I used your co-ordinates, the border is too far left. I'm sure the border will also position itself differently on visitor's screens, depending on browser version and screen res. I haven't even checked this page in anything other than IE6. I already know that if a visitor is using 800x600 res, the border will go too far to the right. But I figured I'd get it working first in the browser and screen res that I'm most comfortable with before I worried about browser compatibility and 800 x 600 screen res.

I know forcing a visitor to change their screen res to 1024x768 to appease the webmaster is a no-no, but I'm tempted to add a disclaimer on the main page -- something to the effect of "The border will only position itself correctly with the screen resoution set to 1024x768. If you wish to view the intended effect, please adjust your screen resolution accordingly." It's that or start looking for a solution for X-Y co-ordinates adjustment on browser resize -- and I don't think I've got it in me to go the extra mile! LOL

Hey J., while we're discussing my web coding woes, would you have a look at this thread I started yesterday?

Iframes and "Top of Page" (http://www.codingforums.com/showthread.php?s=&postid=65915#post65915)

It appears I've created another coding conundrum and maybe another set of eyes will see the errors of my ways?

Deanna475
Jan 22nd, 2003, 12:02 PM
Hi J. Me again. Well, while you were sleeping *S*, I took another stab at this. The screen resolution thing was starting to bug me. And someone named "Meow" in my "iframe and top of page" thread said it looked like sh*t in anything other than IE. So I had to do something.

Someone else I know who is more knowledgeable in CSS than I am came up with this plan: Ditch the tables and do the whole page in CSS, not just the border, but every single page element. I was told that visitors using IE5+, NS6+, Opera 7 and Moz will be able to view the page with no displacement of the graphics. After being given some instructions on how to go about doing this, I actually managed to pull it off! The page is more off to the left to accommodate those visitors with 800x600 res.

Now, here's where you came in ..... I took your JavaScript snippet from two messages above, modified it to suit the new CSS layout and guess what? Those border images swap on mouseover from the iframe every time! Pure genius on your part. *S*

Check it out for yourself: http://www.theinspirationgallery.com/neo/neoclassic_border_css.htm

Now, here's the kicker. I've got to make it so that the 6 graphics that make up the two columns swap on mouseover. Applying your JavaScript again, I was able to change one column graphic (the top left pillar). Go back to the page and click on the "columns" tab in the iframe menu. Scroll a little bit until you get to the thumbnails and then mouseover the "L" under "Set 2". See? The image swapped, just like the borders. Now ......... how do we do it with your JavaScript code so that we can have 6 functions in the script, each calling a different part of the columns?

I tried messing around on my own but I only know enough JS to be dangerous! I kept getting "expected" and "syntax" error messages and finally decided I had to bug you again. Sorry 'bout that. ;)

So this is how your JS code looks like now after I mucked around with it:

<SCRIPT language=JavaScript type=text/javascript>
<!--
function Change_header(pic){
parent.columnlefttop.outerHTML="<DIV ID='columnlefttop' style='position:absolute; left:40px; top:20px; width:120px; height:140px; background-image:url("+pic+"); z-index:0'></DIV>"
}
//-->
</SCRIPT>

and the part under the thumbnail looks like this now:

<a href="#null" onmouseover="Change_header('columns/column2_top.gif')"><B>L</B></a>

How'm I doin' so far? Now we just have to get this to work 5 more times on the same page and we're laffin' !!! :thumbsup:

You up for the challenge? *S*

Mr J
Jan 22nd, 2003, 08:47 PM
Hi Deanna


The X and Y co-ordinates were not specific you were expected to change them to suit. LOL

Try the following for your Iframe problem.

Place the script in the HEAD section of the page loaded into the Iframe


<script language="javascript">
<!--
function Top() {
window.scrollTo(0,0)
}
// -->
</script>



Place the link at the bottom of the page loaded into the Iframe.

<a href="#null" onclick="Top()">Back to the top</a>

For your positioning problem please download the zip file for possible solution.

I am giving your 6 image problem some thought

Deanna475
Jan 22nd, 2003, 10:34 PM
Hi J. Are we having fun yet? *S* Thank you for the positioning file. I am going to look it over in detail after I post this message.

Naturally your "return to top" script works like a charm! Many thanks for that little Javascript gem. I'll be applying it to more than just this project, that's for sure. *S*

As for the 6 image problem, if you find a solution for this, I think we're there. BTW, do you have a site of your own? I'm a firm believer in giving credit where credit is due and I'd like to add a text blurb at the bottom of the main page telling the web world of your coding assistance above and beyond the call of duty and a link back to your site. If you don't have a site, then I'm still going to add the "blurb of thanks." Shall I just call you "Mr J for CodingForums.com" or do you have a first name? *S*

Mr J
Jan 22nd, 2003, 10:56 PM
Site address.

www.huntingground.freeserve.co.uk


My site is designed for the bog standard 600 X 800. IE5.5

Nothing flashy in the way of graphics but full of useful information...... well I think so.

Talking about graphics I have drafted a script for your image changes but I really could do with some of your images to work with.

Could you let me have a couple of complete sets.

If you do not want to post them here send them through my site.

Ta

Deanna475
Jan 22nd, 2003, 11:11 PM
No prob, J. Some complete sets are on the way through your site address. Hey, BTW, I studied your positioning file and I'm confusing myself now! Am I applying this positioning theory to the latest CSS layout or the table layout?

A moment later .......

OK, is it me or do you not want people to access your site? LOL When I click on "Enter", I get a popup window that says "Initiating shutdown sequence". I'm racking up the mileage on your site counter in the meantime! Your "Enter" button is identified as "null." *S*

http://www.huntingground.freeserve.co.uk/#null

D.

Deanna475
Jan 23rd, 2003, 12:25 AM
J, still unable to get past the "enter" button on your site. So instead, I've attached some of the column images to this message. Due to file size limitations and to give you more than one set of graphics to work with, I'm attaching two more sets in separate messages.

D.

Deanna475
Jan 23rd, 2003, 12:26 AM
Can't post without a message, so here's another set to play with.

D.

Deanna475
Jan 23rd, 2003, 12:27 AM
Last set. Is 3 different sets enough for your purposes?

D.

Mr J
Jan 23rd, 2003, 05:57 PM
It's strange about my home page I have just come from there and had no problems.

This will bypass my home page.


www.huntingground.freeserve.co.uk/main/mainfram.htm

Thanks for the pics I will work on the script now