Hi!
I am currently working on a stylesheet for a webpage:
<!-- m --><a class="postlink" href="http://www.control.auc.dk/~kthe00/test/index.php">http://www.control.auc.dk/~kthe00/test/index.php</a><!-- m -->
I however have two problems:
1) I would like the first link (Forside) p?be marked when entering the page. It should be marked until a another link is pressed. Can this be accomplished in a simple way?
2) When a link is pressed it gets marked as it should. But when you press the mouse button outside the menu to the left, all marks disappear. Then you have lost track of which link you are at. It happens due to the "active" property. How do you avoid this to happen?
The code can be found at:
<!-- m --><a class="postlink" href="http://www.control.auc.dk/~kthe00/test/kt.css">http://www.control.auc.dk/~kthe00/test/kt.css</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.control.auc.dk/~kthe00/test/top.html">http://www.control.auc.dk/~kthe00/test/top.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.control.auc.dk/~kthe00/test/bottom.html">http://www.control.auc.dk/~kthe00/test/bottom.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.control.auc.dk/~kthe00/test/index.php">http://www.control.auc.dk/~kthe00/test/index.php</a><!-- m -->
Thank you for your time!
Best regards
KimBasically you can't do what you want using CSS only. You probably could using DHTML. Try posting this question in the DHTML forum and see what they can help you with.
Another tip, try using a full doctype in your HTML document. Using a doctype tag that does not have a complete web address to the DTD file on the W3C servers forces browsers into quirks mode. Internet Explorer becomes somewhat more unpredictable in its support for CSS in quirks mode.
See <!-- m --><a class="postlink" href="http://www.w3schools.com/tags/tag_doctype.asp">http://www.w3schools.com/tags/tag_doctype.asp</a><!-- m --> for more information on correct doctypes.
This probably won't solve your problem, but it may help prevent future problems when adding CSS styles to your page.
Using a correct doctype tag forces browsers into standards compliance mode. Browser support for CSS is much more predictable then. And always test your CSS layouts first in Opera 7.x and the latest stable build of Mozilla and Firebird. Those browsers have the best support for CSS and are at least one or two generations ahead of IE6/PC and IE5/Mac for standards support. Once you get your page looking the way you want it to in Mozilla, Firebird and Opera, then hack the style sheets to get the page to display in IE, which has many bugs and quirks to it.
Of course the IE-only filters and javascript affects won't work on the aforementioned browsers (Mozilla, Firebird, and Opera) because the affects you are using on your page are not standard. But you can still use them.
Mozilla and Firebird:
<!-- m --><a class="postlink" href="http://www.mozilla.org/">http://www.mozilla.org/</a><!-- m -->
Opera web browser
<!-- m --><a class="postlink" href="http://www.opera.com/I">http://www.opera.com/I</a><!-- m --> take that back. There may be a way to use CSS, but only if your web page does not use Frames or it uses PHP.
Above the HTML for each page, insert the following PHP:
<?php $page = "somePageID"; ?>
<DOCTYPE ... >
.
.
.
<body <?php echo "id=\"$page\""; ?>>
Then in your CSS:
#somePageID mainMenu a {
/* INSERT THE STYLES NEEDED TO CREATE THE "active" AFFECT THAT TELLS
USERS WHICH PAGE THEY ARE ON */
}
#somePageID mainMenu a:hover {
/* THE STYLES YOU WANT FOR WHEN THE MOUSE HOVERS OVER THE LINK */
}
If you are using static HTML pages, give the body tag in each page a unique id and apply the same CSS technique as above.
Also, check out <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/keepingcurrent/">http://www.alistapart.com/articles/keepingcurrent/</a><!-- m -->
It does the same thing I explained above but it is a bit more complex and flexible.Thank you!
It was just what I needed! Now it works. I have also followed your advice about checking it on different browsers and having a full doctype in the HTML documents.Also, check out this web site on how to install multiple versions of Internet Explorer on one computer without partitioning the hard drive and installing mulitple copies of Windows:
<!-- m --><a class="postlink" href="http://www.skyzyx.com/archives/000094.php">http://www.skyzyx.com/archives/000094.php</a><!-- m -->
I have IE 3.0 for Win 95/NT; 4.0 for Win9x/Nt 4; 5.0 for Win9x and NT/2000; 5.5 for Win 9x and NT/2000. And of course IE 6.0 on WinXP Pro. So all told, I've got 9 versions of Internet Explorer installed on my computer under one operating system. Man it makes developing style sheet layouts easier.
Anyway, just a tidbit of info I thought I'd share 'cause it helped me out so much.
Enjoy
Thanks.
That will help solve some of my compatibility problems in the future
I am currently working on a stylesheet for a webpage:
<!-- m --><a class="postlink" href="http://www.control.auc.dk/~kthe00/test/index.php">http://www.control.auc.dk/~kthe00/test/index.php</a><!-- m -->
I however have two problems:
1) I would like the first link (Forside) p?be marked when entering the page. It should be marked until a another link is pressed. Can this be accomplished in a simple way?
2) When a link is pressed it gets marked as it should. But when you press the mouse button outside the menu to the left, all marks disappear. Then you have lost track of which link you are at. It happens due to the "active" property. How do you avoid this to happen?
The code can be found at:
<!-- m --><a class="postlink" href="http://www.control.auc.dk/~kthe00/test/kt.css">http://www.control.auc.dk/~kthe00/test/kt.css</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.control.auc.dk/~kthe00/test/top.html">http://www.control.auc.dk/~kthe00/test/top.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.control.auc.dk/~kthe00/test/bottom.html">http://www.control.auc.dk/~kthe00/test/bottom.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.control.auc.dk/~kthe00/test/index.php">http://www.control.auc.dk/~kthe00/test/index.php</a><!-- m -->
Thank you for your time!
Best regards
KimBasically you can't do what you want using CSS only. You probably could using DHTML. Try posting this question in the DHTML forum and see what they can help you with.
Another tip, try using a full doctype in your HTML document. Using a doctype tag that does not have a complete web address to the DTD file on the W3C servers forces browsers into quirks mode. Internet Explorer becomes somewhat more unpredictable in its support for CSS in quirks mode.
See <!-- m --><a class="postlink" href="http://www.w3schools.com/tags/tag_doctype.asp">http://www.w3schools.com/tags/tag_doctype.asp</a><!-- m --> for more information on correct doctypes.
This probably won't solve your problem, but it may help prevent future problems when adding CSS styles to your page.
Using a correct doctype tag forces browsers into standards compliance mode. Browser support for CSS is much more predictable then. And always test your CSS layouts first in Opera 7.x and the latest stable build of Mozilla and Firebird. Those browsers have the best support for CSS and are at least one or two generations ahead of IE6/PC and IE5/Mac for standards support. Once you get your page looking the way you want it to in Mozilla, Firebird and Opera, then hack the style sheets to get the page to display in IE, which has many bugs and quirks to it.
Of course the IE-only filters and javascript affects won't work on the aforementioned browsers (Mozilla, Firebird, and Opera) because the affects you are using on your page are not standard. But you can still use them.
Mozilla and Firebird:
<!-- m --><a class="postlink" href="http://www.mozilla.org/">http://www.mozilla.org/</a><!-- m -->
Opera web browser
<!-- m --><a class="postlink" href="http://www.opera.com/I">http://www.opera.com/I</a><!-- m --> take that back. There may be a way to use CSS, but only if your web page does not use Frames or it uses PHP.
Above the HTML for each page, insert the following PHP:
<?php $page = "somePageID"; ?>
<DOCTYPE ... >
.
.
.
<body <?php echo "id=\"$page\""; ?>>
Then in your CSS:
#somePageID mainMenu a {
/* INSERT THE STYLES NEEDED TO CREATE THE "active" AFFECT THAT TELLS
USERS WHICH PAGE THEY ARE ON */
}
#somePageID mainMenu a:hover {
/* THE STYLES YOU WANT FOR WHEN THE MOUSE HOVERS OVER THE LINK */
}
If you are using static HTML pages, give the body tag in each page a unique id and apply the same CSS technique as above.
Also, check out <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/keepingcurrent/">http://www.alistapart.com/articles/keepingcurrent/</a><!-- m -->
It does the same thing I explained above but it is a bit more complex and flexible.Thank you!
It was just what I needed! Now it works. I have also followed your advice about checking it on different browsers and having a full doctype in the HTML documents.Also, check out this web site on how to install multiple versions of Internet Explorer on one computer without partitioning the hard drive and installing mulitple copies of Windows:
<!-- m --><a class="postlink" href="http://www.skyzyx.com/archives/000094.php">http://www.skyzyx.com/archives/000094.php</a><!-- m -->
I have IE 3.0 for Win 95/NT; 4.0 for Win9x/Nt 4; 5.0 for Win9x and NT/2000; 5.5 for Win 9x and NT/2000. And of course IE 6.0 on WinXP Pro. So all told, I've got 9 versions of Internet Explorer installed on my computer under one operating system. Man it makes developing style sheet layouts easier.
Anyway, just a tidbit of info I thought I'd share 'cause it helped me out so much.
Enjoy
Thanks. That will help solve some of my compatibility problems in the future