CSS, z-index and linking

Groundhog1248 · January 6th, 2005, 05:32 PM

I'm trying to figure out how to make this web page work.
http://64.78.73.102:999/mypcs.html
I'm using Beginning Web Programming with HTML, XHTML and CSS by Jon Duckett. He explains on pages 413-416 how to setup the page which wasn't to difficult but didn't really go over how to make the links on the left change which page was on top. I would like to click on any of the links to the left to bring the particular page to the top. He actually used a next button at the bottom of the page but didn't go into how it was setup. The only way I can think of doing it is to create 3 seperate pages with the z-index changed so the the page I want to display is the highest value but that seems like more work than it should be. I read where Mr. York's book goes over similar setup in chp 14 pg 405 but unfortunatley I didn't buy that book so I can't read what he suggested. Any suggestions?

Thanks

Groundhog1248 · January 6th, 2005, 05:34 PM

Here is my style sheet.

http://64.78.73.102:999/css/name.css

richard.york · January 6th, 2005, 05:48 PM

I don't have Jon's book, so I'd just be guessing at what he was doing in his examples.

Assuming I understand your question, this is pretty easy to do.

Considering you have different content in each of the following divs:

div.intel {position: absolute; left: 15%; top:20%; width: 400px; height: 400px; background-color: #E0EDC5; border-style: solid; border-width: 1px; border-color: #000000; z-index: 5;}

div.amd {position: absolute; left: 16%; top:21%; width: 400px; height: 400px; background-color: #E0EDC5; border-style: solid; border-width: 1px; border-color: #000000; z-index: 2;}

div.amd64 {position: absolute; left: 17%; top:22%; width: 400px; height: 400px; background-color: #E0EDC5; border-style: solid; border-width: 1px; border-color: #000000; z-index: 1;}

...and assuming that you have three separate pages, which isn't efficient, but more on that in a moment.

Add an id name to the <body> or <html> element of each of those three pages. Such as 'intel-page', 'amd-page' and 'amd64-page'.

Then add a new rule to your stylesheet.

body#intel-page div.intel,
body#amd-page div.amd,
body#amd64-page div.amd64 {
z-index: 10;
}

This new rule defeats the previous three via the cascade and results in the <div> for that page being the one on top.

You don't actually need to create three different pages to do this, but in order to do it with a single page you'd need some javascript or a server-side lanaguage to dynamically change the id name of the <body> or <html> elements (whichever you happen to use), or dynamically set the z-index (I'd probably do the latter).

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

richard.york · January 6th, 2005, 06:27 PM

Ah, I just figured out what I *think* he must have done for his example.

Here is the updated code, explaination to follow:

Code:

<!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>pc system specs</title>
       <link rel="stylesheet" type="text/css" href="mypcs_files/name.css">
    </head>
    <body bgcolor="D5EAE9">
        <div class="header">
            <h1 class="header1">pc system specs</h1>
        </div>
        <div class="nav">
            <p class="navp">
                <a href="#intel">intel</a><br>
                <a href="#amd">amd</a><br>
                <a href="#amd64">amd64</a><br>
            </p>
        </div>
        <div class="pagesummary">
            <h4></h4>
        </div>
        <div id="intel">
            <h3 class="header3">Intel P4</h3>   
            <p class="layout">
            Gaming Machine<br>
            Windows XP Professional<br>  
            Intel Pentium 4 3.4ghz 800mhz FSB Processor<br>
            ASUS P4P800 Deluxe motherboard<br>
            2-512mb Crucial Ballistic DDR400 memory dual channel<br>
            Sony 19" CRT<br>
            Nvidia BFG 6800 Ultra 256mb video card<br>
            Creative Labs Audigy 2 sound card<br>
            &gt;Logitech USB x310 optical mouse<br>
            Logitech USB keyboard<br>
            Bungy mouse cord<br>
            Everglide mouse pad<br>
            TDK CDROM burner<br>
            Liteon DVD burner<br>
            Antec True Blue 550w Power Supply<br>
            Case
            </p>
        </div>      
        <div id="amd">
            <h3 class="header3">amd</h3>
            <p class="layout">
            Linux Server<br>
            Redhat Fedora 3.0<br>
            AMD XP 1700 266FSB<br>
            ASUS motherboard<br>
            1-512mb Crucial DDR400 memory<br>
            19" Samsung CRT<br>
            ATI 9800 Pro 128mb video card<br>
            Onboard sound<br>
            case<br>
            </p>      
        </div> 
        <div id="amd64">
            <h3 class="header3">amd 64-bit</h3> 
            <p class="layout">
            AMD 64 PC<br>
            Windows XP Professional<br>
            AMD Athlon 64 3000+ 64 bit Processor<br>
            ASUS K8V SE Deluxe motherboard<br>
            2-512mb Crucial DDR400 memory<br>
            CTX 19" CRT<br>
            Sapphire ATI 9800 Pro 128mb video card<br>
            Creative Labs Audigy sound card<br>
            TDK burner<br>
            case<br>
            </p>
        </div>  
    </body>
</html>

And the style sheet:

Code:

h1,h4{font-family: Arial; color: #004B18;}
p{margin: 1px; font-size: 12px;}
h4{margin: 5px; line-height: 5px; font-size: 14px;}

#title h1{color: #004B18; line-height:105%; position: absolute; top: 1px; left: 44%;}
#title_daisy h1{color: #004B18; position: absolute; top: 1px; left: 35%;} 

#linksleft a{display: block; left: 12px; font-size: 10px}
#linksleft {position: absolute; top: 135px; left: 1%;}

#linksright a{display: block; left: 12px; font-size: 10px}
#linksright {position: absolute; top: 15%; right: 5%;}

#bodytext {text-align: justify; display:block; position: absolute; top: 100px; left: 30%;}

#weather a{display: block;}
#weather {border-style: groove; border-width: 5px; padding: 1px ; position: absolute; top: 10px; left: 12px;}

#disclaimer p{display: block;}
#disclaimer {position: absolute; bottom: 3%; left: 30%;}

div.header {position:absolute; top: 5%; left: 5%; width: 627px; height: 75px; background-color: #49BAB6; border-style: solid; border-width: 1px; border-color: #000000; }

div.nav {position: absolute; top: 20%; left: 5%; width: 75px; height: 100px; background-color: #DEBDD6; border-style: solid; border-width: 1px; border-color: #00000;}

div#intel {position: absolute; left: 15%; top:20%; width: 400px; height: 400px; background-color: #E0EDC5; border-style: solid; border-width: 1px; border-color: #000000; z-index: 5;}

div#amd {position: absolute; left: 16%; top:21%; width: 400px; height: 400px; background-color: #E0EDC5; border-style: solid; border-width: 1px; border-color: #000000; z-index: 2;}

div#amd64 {position: absolute; left: 17%; top:22%; width: 400px; height: 400px; background-color: #E0EDC5; border-style: solid; border-width: 1px; border-color: #000000; z-index: 1;}

div#intel:target,
div#amd:target,
div#amd64:target {
    z-index: 10;    
}

p.layout {position: relative; top: 5px; left: 10px; padding: 2px;}

h3.header3 {position: relative; top: 2px; left: 25px;}

p.navp {position: relative; top: 10px; left:15px; font-size: 18px; font-weight: bold;}

h1.header1 {position: relative; left:25px; line-height: 20px;}

It's really quite brilliant.

First, create a link using the id name of each <div>.

Code:

                <a href="#intel">intel</a><br>
                <a href="#amd">amd</a><br>
                <a href="#amd64">amd64</a><br>

Then rename each div with the same id name, instead of class names.

Finally, use the :target pseudo-class to reset the z-index of each of those <div> elements.

Code:

div#intel:target,
div#amd:target,
div#amd64:target {
    z-index: 10;    
}

And whaalah, you have a dynamic webpage that contains three pages in one without javascript or server-side scripting.

Of course, this is another fantastic CSS feature that doesn't work in Internet Explorer, so you'll have to use Mozilla to view the example.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

Groundhog1248 · January 6th, 2005, 09:21 PM

Wow, that worked exactly how I wanted. I was kinda thinking this is how he wanted it to work but just wasn't sure how to go about doing it. That was a great deal easier and not very much code for what it does.

Thanks

P.S. I guess I will have to go out this weekend and buy your book. ;)

Groundhog1248 · January 6th, 2005, 09:36 PM

I'm curious now. What part of that code doesn't IE understand?

target class?

richard.york · January 7th, 2005, 06:39 AM

Yes, IE doesn't support the :target pseudo-class.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

rsassine · January 25th, 2005, 02:30 AM

Wow! Great code.
Any way around for IE?

Raymond

Snib · January 25th, 2005, 04:58 PM

http://www.htmldog.com/articles/suckerfish/target/

Haven't tried it, but it looks promising :-)

hth,

-Snib - http://www.snibworks.com
Where will you be in 100 years?