PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sat Feb 24, 2018 3:14 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 5 posts ] 
Author Message
 Post subject: CSS 2 Child Selector
PostPosted: Fri Feb 06, 2004 9:40 pm 
Offline
Forum Contributor
User avatar

Joined: Sun Feb 01, 2004 8:12 pm
Posts: 145
Location: New York City
After messing around with CSS 2 child selectors, this came about. Unfortunately, it only works in Mozilla 0.9.4 and higher and Opera 7 and higher.

working example: http://www.thexvector.us/css2childss.php

Syntax: [ Download ] [ Hide ]
<?php echo("<?xml version="1.0" encoding="iso-8859-1"?>\n"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">

<head>

<title>The ´X´ Vector :: CSS 2 Child Selector Example ::</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css" media="screen">

body {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
margin: 0px;
padding: 0px;
color: rgb(51,51,51);
background: rgb(255,255,255);
}

div {
padding: 10px;
border: 1px rgb(255,255,255) solid;
text-align: justify;
}

/* Block 1 */

#short1 {
position: relative;
top: 10px;
left: 10px;
width: 400px;
height: 150px;
z-index: 1;
background: url( http://www.thexvector.us/images/mousehand.gif ) no-repeat 95% 94%;
}

div:hover#short1>div:first-child {
display: block;
}

div:hover#short1 {
color: rgb(0,0,51);
background: rgb(255,255,255);
border: 1px rgb(204,204,204) solid;
background: none;
}

/* Block 2 */

#short2 {
position: relative;
top: 100px;
left: 10px;
width: 400px;
height: 150px;
z-index: 1;
background: url( http://www.thexvector.us/images/mousehand.gif ) no-repeat 95% 94%;
}

div:hover#short2>div:first-child {
display: block;
}

div:hover#short2 {
color: rgb(51,0,0);
background: rgb(255,255,255);
border: 1px rgb(204,204,204) solid;
background: none;
}

/* Block 3 */

#short3 {
position: relative;
top: 200px;
left: 10px;
width: 400px;
height: 150px;
z-index: 1;
background: url( http://www.thexvector.us/images/mousehand.gif ) no-repeat 95% 94%;
}

div:hover#short3>div:first-child {
display: block;
}

div:hover#short3 {
color: rgb(0,51,0);
background: rgb(255,255,255);
border: 1px rgb(204,204,204) solid;
background: none;
}

/* Block Common */

.a {
position: relative;
top: 0px;
left: 300px;
border:none;
display: none;
z-index: 2;
}

/* Psuedo */

a {
text-decoration: none;
}

/* Red */
a.r:link {
color: rgb(102,0,0);
background: transparent;
}

a.r:visited {
color: rgb(102,0,0);
background: transparent;
}

a.r:hover {
color: rgb(255,0,0);
background: transparent;
}

/* Green */
a.g:link {
color: rgb(0,102,0);
background: transparent;
}

a.g:visited {
color: rgb(0,102,0);
background: transparent;
}

a.g:hover {
color: rgb(0,153,51);
background: transparent;
}

/* Blue */
a.b:link {
color: rgb(0,0,102);
background: transparent;
}

a.b:visited {
color: rgb(0,0,102);
background: transparent;
}

a.b:hover {
color: rgb(0,0,255);
background: transparent;
}

</style>

</head>

<body onload="window.defaultStatus='The ´X´ Vector :: CSS 2 Child Selector Example ::'">

<div id="short1" title="Article Summary">
Graphical user interfaces may use outlines around elements to tell the user which element on the page has the focus.
These outlines are in addition to any borders, and switching outlines on and off should not cause the document to reflow.
The focus is the subject of user interaction in a document (e.g., for entering text, selecting a button, etc.).
User agents supporting the interactive media group must keep track of where the focus lies and must also represent the focus.
This may be done by using dynamic outlines in conjunction with the :focus pseudo-class.
<div class="a"><a href="/" class="b" title="Complete Story">Complete Story</a></div>
</div>

<div id="short2" title="Article Summary">
Graphical user interfaces may use outlines around elements to tell the user which element on the page has the focus.
These outlines are in addition to any borders, and switching outlines on and off should not cause the document to reflow.
The focus is the subject of user interaction in a document (e.g., for entering text, selecting a button, etc.).
User agents supporting the interactive media group must keep track of where the focus lies and must also represent the focus.
This may be done by using dynamic outlines in conjunction with the :focus pseudo-class.
<div class="a"><a href="/" class="r" title="Complete Story">Complete Story</a></div>
</div>

<div id="short3" title="Article Summary">
Graphical user interfaces may use outlines around elements to tell the user which element on the page has the focus.
These outlines are in addition to any borders, and switching outlines on and off should not cause the document to reflow.
The focus is the subject of user interaction in a document (e.g., for entering text, selecting a button, etc.).
User agents supporting the interactive media group must keep track of where the focus lies and must also represent the focus.
This may be done by using dynamic outlines in conjunction with the :focus pseudo-class.
<div class="a"><a href="/" class="g" title="Complete Story">Complete Story</a></div>
</div>

</body>

</html>

?>


Top
 Profile  
 
 Post subject:
PostPosted: Sat Feb 07, 2004 3:40 pm 
Offline
DevNet Resident
User avatar

Joined: Sat Jan 25, 2003 2:49 am
Posts: 1094
very nice!


Top
 Profile  
 
 Post subject:
PostPosted: Sun Feb 08, 2004 3:48 am 
Offline
Forum Contributor
User avatar

Joined: Sun Feb 01, 2004 8:12 pm
Posts: 145
Location: New York City
Hey,

I checked out your website; one word - sweet.

Thanks for the compliment.


Last edited by no_memories on Tue Feb 24, 2004 4:41 pm, edited 1 time in total.

Top
 Profile  
 
 Post subject:
PostPosted: Sun Feb 08, 2004 4:04 am 
Offline
Forum Contributor
User avatar

Joined: Sun Feb 01, 2004 8:12 pm
Posts: 145
Location: New York City
nigma,

Could I ask you a question in regards to PhP? I'm rather new to PhP but I grasp its fundamentals.

I noticed a feature of you website that I would like to inquire about? It's a bit different, but it's the same general principle.

I could really use some good help on this one.

again, awesome website.


Top
 Profile  
 
 Post subject:
PostPosted: Sun Feb 08, 2004 1:17 pm 
Offline
DevNet Resident
User avatar

Joined: Sat Jan 25, 2003 2:49 am
Posts: 1094
Absolutely! You can email me or PM me, either works.

Mail: nigma A T nigmanet D O T net


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group