Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old January 6th, 2005, 05:32 PM
Authorized User
 
Join Date: Jan 2005
Location: , PA, USA.
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
Default CSS, z-index and linking

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
Reply With Quote
  #2 (permalink)  
Old January 6th, 2005, 05:34 PM
Authorized User
 
Join Date: Jan 2005
Location: , PA, USA.
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Here is my style sheet.

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

Reply With Quote
  #3 (permalink)  
Old January 6th, 2005, 05:48 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
Reply With Quote
  #4 (permalink)  
Old January 6th, 2005, 06:27 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
Reply With Quote
  #5 (permalink)  
Old January 6th, 2005, 09:21 PM
Authorized User
 
Join Date: Jan 2005
Location: , PA, USA.
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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. ;)


Reply With Quote
  #6 (permalink)  
Old January 6th, 2005, 09:36 PM
Authorized User
 
Join Date: Jan 2005
Location: , PA, USA.
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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

target class?
Reply With Quote
  #7 (permalink)  
Old January 7th, 2005, 06:39 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
Reply With Quote
  #8 (permalink)  
Old January 25th, 2005, 02:30 AM
Registered User
 
Join Date: Jan 2005
Location: Palm Bay, FL, USA.
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Wow! Great code.
Any way around for IE?

Raymond

Reply With Quote
  #9 (permalink)  
Old January 25th, 2005, 04:58 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

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?
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
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
CSS HELP:! CSS EXPANDIBLE BACKGROUND FOR TITLE phpuser2000 CSS Cascading Style Sheets 2 December 19th, 2007 12:36 AM
Rich's new CSS book: Beginning CSS 2nd Edition jminatel BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 0 June 15th, 2007 11:55 AM
linking anukagni Access 1 March 28th, 2006 08:21 AM
CSS Graphic Linking Neo-MatrixX CSS Cascading Style Sheets 1 October 5th, 2005 07:50 AM
Linking sherr8 Access 2 July 30th, 2003 02:29 PM



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


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