|
|
|
|
![]() ![]() |
Dec 18 2006, 06:33 AM
Post
#1
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Members Posts: 412 Joined: 4-October 06 From: Psychedelic Realms Member No.: 31,079 |
Ok, I've been playing with CSS for that IHB project of mine, and this is the result
My Webpage Now, when you hover those doors and left chair you can see how it changes. Ok, that is fine for me, but next thing i need to do is :active links. When you press on the left chair and hold mouse you can see that it is different color, beacouse image is different. Now when you click on it, index.html is reloaded and the chair looks the same as first time, which is normal. I could put <a href="index_left_chair.html"> to be loaded and then the same for the right chair, but that would make things way to much complex. Now since i already have that image which looks bit darker, can i use some piece of PHP code, that when i click on LEFT chair that it changes code so that it uses that picture :active as base picture so that it looks like you are sitting on a chair. Hope you understand this question... it can be done much much simpler, no iframes or such: CODE <?php echo "<div class=\"content\">"; $page=$_GET['page']; $page.="php"; include($page); echo "</div>"; ?> and your url`s will be like: index.php?page=about this will include in index.php, the about.php page (if this is found in the same directory as index.php). well, this piece of code has security problems, as the $_GET[] value is not sanitized...but that`s another story...just understand this and we`ll continue afterwards Now this code looks ok to me. Could i use it for the question up, and how? Here is another link i found that could be useful but i don't know how could i use it Change CSS color with PHP I wanted to add poll.. Hope i made it This post has been edited by matak: Dec 18 2006, 06:31 AM |
|
|
|
Dec 18 2006, 07:37 AM
Post
#2
|
|
|
Member [Level 3] ![]() ![]() ![]() ![]() ![]() ![]() Group: Members Posts: 96 Joined: 22-September 06 From: In Front of the Monitor Member No.: 30,404 |
I pretty much bugged. First of all you have no questions. Secondly, I didn't see an opening or problem that you would like to be solve in the situation.
|
|
|
|
Dec 18 2006, 07:50 AM
Post
#3
|
|
|
$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 6,308 Joined: 21-September 04 From: 9r33|\| 399$ 4|\|D 5P4/\/\ Member No.: 1,218 ![]() |
I think I Understand where going and I can say you don't need php whatsoever you just need a simple css code. What your asking is that you want the chair to look active in hte sense that the picture looks like the other well it is a simple css thing.
Here is an example of and active page link http://www.oswd.org/design/preview/id/2981 As you notice the about link is highlighted over the rest as you scroll through the links. Which means that link is currently active or the in the sense your looking at that page right now. So all you do is put in a small css code for a current link and then set that link style and your set. From the site I showed you the set up looks like so. HTML 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=iso-8859-1" /> <title>Welcome to webnia</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="colLeft"> <div id="divlogo"> <span class="web">web</span><span class="ain">ain</span></div> <div id="Navigation"> <ul> <li><a href="#"> home</a></li> [b]<li><a href="#" class="current"> about</a></li>[/b] <li><a href="#"> portfolio</a></li> <li><a href="#"> contact</a></li> </ul> </div> <div id="menuTab">navigation</div> </div> <div id="colRight"> <div id="divBanner"></div> <div id="divMainContent"> <h2> Welcome to webain..</h2> <p class="allpara">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <h2> About the author..</h2> <p class="allpara">I am a web designer and developer and have been creating bespoke contemporary web sites and web applications for three years. This is my first attempt at open source web design template. I hope you like it. </p> </div> </div> <div id="footer">©your copy right designed by <a href="http://www.webain.co.uk" target="_blank">M S Rahman</a> </div> </div> </body> </html> As you see that is the link style set up that you would place for that page. Now for the actual nav CSS CODE #Navigation { padding: 0px; margin-top: 40px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 175px; } #Navigation ul { list-style: none; margin: 0px; padding: 0px; } #Navigation li { display: block; } #Navigation ul li a { color: #FFFFFF; display: block; text-decoration: none; font-size: 14px; background-color: #32556B; border-left-width: 5px; border-left-style: solid; border-left-color: #32556B; height: 15px; padding-top: 3px; padding-bottom: 3px; padding-left: 25px; margin: 0px; border-right-width: 5px; border-right-style: solid; border-right-color: #32556B; padding-right: 10px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #3A5D73; background-image: url(images/icons/arrow.gif); background-repeat: no-repeat; background-position: left; } [b] #Navigation ul li a:hover, #Navigation ul li a.current { background-color: #365D7A; border-right-width: 5px; border-right-style: solid; border-right-color: #FFFFFF; border-left-width: 5px; border-left-style: solid; border-left-color: #365D7A; color: #B4FF05; }[/b] As you can see the nav menu is set up with a current code, so all you have to do is individual current css for your images and then when a user clicks on the page that image will remain highlighted, hopefully this isn't that to confusing if it is contact me at my yahoo or msn accounts and I can help you from there. |
|
|
|
Dec 18 2006, 12:50 PM
Post
#4
|
|
|
Member [Level 3] ![]() ![]() ![]() ![]() ![]() ![]() Group: Members Posts: 90 Joined: 8-October 04 From: vienna Member No.: 1,509 |
|
|
|
|
Dec 18 2006, 05:43 PM
Post
#5
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Members Posts: 412 Joined: 4-October 06 From: Psychedelic Realms Member No.: 31,079 |
well it's a joke i guess beacouse you probably know that dhtml doesn't work right in Firefox... to Saint_Michael is this ':current' property or a class. beacouse if i have like 5 links that i want to have current will it work for every one of them.. *edited not i don't want to change pages from index.html to about.html or like that, i want all of the user choices to stay in index.html. i know i'm asking to much, but hey you gotta ask somewhere.. hope u understand what i want.. so you see, this is something that could easily be done with some simple php code... you don't need to reply that. i'll try code and post back later. i was more intrested in php code beacouse later i wanted to add dynamical page, in which users could "see" somebody else sitting on that chair, and maybe when they try to sit on it it will be unavailable. i think that making something like that is just impossible in CSS. ok, i'm going to test this code of yours and post back soon... This post has been edited by matak: Dec 18 2006, 05:48 PM |
|
|
|
Dec 18 2006, 06:54 PM
Post
#6
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Members Posts: 412 Joined: 4-October 06 From: Psychedelic Realms Member No.: 31,079 |
sorry couldn't find a way to use that current.. but i found this
CODE <?php function myfunction(){ echo("<strong>I love PHP !</strong><br>"); } ?> <a href="<?php echo("$PHP_SELF?execute=myfunction")?>">click to execute myfunction ! </a> <p> <?php if ( isset($execute) ){ myfunction(); } ?> Could i use it to onclick change ID, or CLASS of div tag?! I was thinking about something like this CODE $idname=nonactive <?php function myfunction(){ echo($idname=current); } ?> <a id=$idname href="<?php echo("$PHP_SELF?execute=myfunction")?>">click to execute myfunction ! </a> <p> <?php if ( isset($execute) ){ myfunction(); } ?> but since i have no idea how to correctly type this code, can someone help?! This post has been edited by matak: Dec 18 2006, 06:57 PM |
|
|
|
Dec 18 2006, 09:10 PM
Post
#7
|
|
|
$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 6,308 Joined: 21-September 04 From: 9r33|\| 399$ 4|\|D 5P4/\/\ Member No.: 1,218 ![]() |
current is a class so it will work for all of them if you set the link style to that.
But what your asking in order to stay on the index page you would have to set up a iframe like include in which it looks like a frame but doesn't act like one. I seen it done but I haven't found the coding for it yet. |
|
|
|
Dec 18 2006, 09:30 PM
|