Here's what i'm trying to create:
home | rates | about
I'm trying to create a simple text-only navigation menu. Indeed this isn't too difficult; I can create the styling, hover, etc just fine, but i'm wondering if i can use ONLY html/css to create the effect so that when someone clicks on the "rates" page, the text visually indicates that you're on this page (by changing to color to pink or changing the background to pink, whatever). I've achieved this effect using php and css, but it's really clunky and seemingly unnecessary.
Thanks guys,
heinzgive your body an id and code your menu as list like this:
<body id="rates">
<ul>
<li id="n-home"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">home</a></li>
<li id="n-rates"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">rates</a></li>
<li id="n-about"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">about</a></li>
</ul>
</body>
in your css write
body#home #n-home { highlight style of "home" here }
body#rates #n-rates { highlight style of "rates" here }
body#about #n-about { highlight style of "about" here }No, you either have to hardcode which link points to the current page on each page or use a server-side (PHP, ASP, etc.) or client-side (JavaScript) scripting language to do it. CSS2 does not have that capability.
Keep in mind that some Internet users use a browser that doesn't have JavaScript enabled. (<!-- m --><a class="postlink" href="http://www.thecounter.com/stats/2006/February/javas.php">http://www.thecounter.com/stats/2006/February/javas.php</a><!-- m -->)sure you can do it with html & css ONLY. click here (<!-- m --><a class="postlink" href="http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/">http://www.456bereastreet.com/archive/2 ... ation_bar/</a><!-- m -->) for a well-known page where it is practised and directly read a more detailed tutorial on how to achieve this.Heres my code bro. I use this code in my design so u hav to customize it.
It has the fix for IE as well and the css in it. U will hav to add your own images.
Kool
<style>
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
width: 151px;
text-align: center;
list-style-type: none;
}
li ul { /* second-level lists */
display: none;
position: absolute;
left: 0;
margin-top: 0px;
padding-top: 0px;
width: auto;
z-index: 1;
top: 30px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #B6B8BA;
border-right-color: #B6B8BA;
border-bottom-color: #B6B8BA;
border-left-color: #B6B8BA;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
top: 23px;
}
#nav {
margin-top: 0px;
margin-right: 0px;
}
#content {
clear: left;
}
#navHold {
height: 24px;
margin-top: 0px;
z-index: 1;
text-align: center;
padding-right: 0px;
background-image: url(images/PixelRepeat.jpg);
background-repeat: repeat-x;
width: 760px;
}
#nav li li a {
color: #236EA3;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
#nav li li a:hover {
display: block;
background-repeat: repeat-x;
height: 24px;
color: #FFFFFF;
}
#nav a {
text-decoration: none;
}
.DropStyle {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #B0B3B6;
height: 24px;
background-image: url(images/PixelRepeat.jpg);
background-repeat: repeat-x;
}
.List a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #236EA3;
font-weight: bold;
display: block;
background-image: url(images/insetLine.jpg);
background-repeat: no-repeat;
background-position: left;
}
.List a:hover {
display: block;
color: #236EA3;
background-image: url(images/hover.jpg);
background-repeat: no-repeat;
}
.left {
float: right;
}
.topBackground {
background-image: none;
height: 120px;
width: 955px;
}
.right {
float: right;
}
.cellBackGroundRepeat {
background-image: url(images/PixelRepeat.jpg);
background-repeat: repeat-x;
}
.left {
float: left;
margin-top: 2px;
border: 1px solid #666666;
margin-left: 2px;
}
#middle a {
color: #006699;
text-decoration: none;
font-weight: bold;
}
#topHold {
width: 100%;
}
.topLineNav {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-top-color: #D0B26A;
border-right-color: #D0B26A;
border-bottom-color: #D0B26A;
border-left-color: #D0B26A;
border-bottom-style: solid;
}
.logoBackground {
background-image: url(../images/Logo_Brown.jpg);
background-repeat: no-repeat;
background-position: center;
}
.List2 a:hover {
display: block;
background-image: url(images/hover2.jpg);
background-repeat: no-repeat;
color: #236EA3;
}
.List2 a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #236EA3;
font-weight: bold;
display: block;
background-image: none;
background-repeat: no-repeat;
background-position: left;
border: 1px none #236EA3;
}
.insetBottomMenu {
border-bottom-width: 1px;
border-bottom-style: none;
border-bottom-color: #D0B26A;
height: 24px;
background-image: url(images/InsetDropDownMenu.jpg);
background-repeat: no-repeat;
background-position: bottom;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"topNav.css" rel="stylesheet" type="text/css">
<div id="navHold">
<ul id="nav">
<li class="List2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"default.asp">Home</a></li>
<li class="List"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Destination Info</a></li>
<li class="List"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Lodges</a>
<ul>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
</ul>
</li>
<li class="List"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Tours</a> </li>
<li class="List"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact Us</a></li>
</ul>
</div>
home | rates | about
I'm trying to create a simple text-only navigation menu. Indeed this isn't too difficult; I can create the styling, hover, etc just fine, but i'm wondering if i can use ONLY html/css to create the effect so that when someone clicks on the "rates" page, the text visually indicates that you're on this page (by changing to color to pink or changing the background to pink, whatever). I've achieved this effect using php and css, but it's really clunky and seemingly unnecessary.
Thanks guys,
heinzgive your body an id and code your menu as list like this:
<body id="rates">
<ul>
<li id="n-home"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">home</a></li>
<li id="n-rates"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">rates</a></li>
<li id="n-about"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">about</a></li>
</ul>
</body>
in your css write
body#home #n-home { highlight style of "home" here }
body#rates #n-rates { highlight style of "rates" here }
body#about #n-about { highlight style of "about" here }No, you either have to hardcode which link points to the current page on each page or use a server-side (PHP, ASP, etc.) or client-side (JavaScript) scripting language to do it. CSS2 does not have that capability.
Keep in mind that some Internet users use a browser that doesn't have JavaScript enabled. (<!-- m --><a class="postlink" href="http://www.thecounter.com/stats/2006/February/javas.php">http://www.thecounter.com/stats/2006/February/javas.php</a><!-- m -->)sure you can do it with html & css ONLY. click here (<!-- m --><a class="postlink" href="http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/">http://www.456bereastreet.com/archive/2 ... ation_bar/</a><!-- m -->) for a well-known page where it is practised and directly read a more detailed tutorial on how to achieve this.Heres my code bro. I use this code in my design so u hav to customize it.
It has the fix for IE as well and the css in it. U will hav to add your own images.
Kool
<style>
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
width: 151px;
text-align: center;
list-style-type: none;
}
li ul { /* second-level lists */
display: none;
position: absolute;
left: 0;
margin-top: 0px;
padding-top: 0px;
width: auto;
z-index: 1;
top: 30px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #B6B8BA;
border-right-color: #B6B8BA;
border-bottom-color: #B6B8BA;
border-left-color: #B6B8BA;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
top: 23px;
}
#nav {
margin-top: 0px;
margin-right: 0px;
}
#content {
clear: left;
}
#navHold {
height: 24px;
margin-top: 0px;
z-index: 1;
text-align: center;
padding-right: 0px;
background-image: url(images/PixelRepeat.jpg);
background-repeat: repeat-x;
width: 760px;
}
#nav li li a {
color: #236EA3;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
#nav li li a:hover {
display: block;
background-repeat: repeat-x;
height: 24px;
color: #FFFFFF;
}
#nav a {
text-decoration: none;
}
.DropStyle {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #B0B3B6;
height: 24px;
background-image: url(images/PixelRepeat.jpg);
background-repeat: repeat-x;
}
.List a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #236EA3;
font-weight: bold;
display: block;
background-image: url(images/insetLine.jpg);
background-repeat: no-repeat;
background-position: left;
}
.List a:hover {
display: block;
color: #236EA3;
background-image: url(images/hover.jpg);
background-repeat: no-repeat;
}
.left {
float: right;
}
.topBackground {
background-image: none;
height: 120px;
width: 955px;
}
.right {
float: right;
}
.cellBackGroundRepeat {
background-image: url(images/PixelRepeat.jpg);
background-repeat: repeat-x;
}
.left {
float: left;
margin-top: 2px;
border: 1px solid #666666;
margin-left: 2px;
}
#middle a {
color: #006699;
text-decoration: none;
font-weight: bold;
}
#topHold {
width: 100%;
}
.topLineNav {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-top-color: #D0B26A;
border-right-color: #D0B26A;
border-bottom-color: #D0B26A;
border-left-color: #D0B26A;
border-bottom-style: solid;
}
.logoBackground {
background-image: url(../images/Logo_Brown.jpg);
background-repeat: no-repeat;
background-position: center;
}
.List2 a:hover {
display: block;
background-image: url(images/hover2.jpg);
background-repeat: no-repeat;
color: #236EA3;
}
.List2 a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #236EA3;
font-weight: bold;
display: block;
background-image: none;
background-repeat: no-repeat;
background-position: left;
border: 1px none #236EA3;
}
.insetBottomMenu {
border-bottom-width: 1px;
border-bottom-style: none;
border-bottom-color: #D0B26A;
height: 24px;
background-image: url(images/InsetDropDownMenu.jpg);
background-repeat: no-repeat;
background-position: bottom;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"topNav.css" rel="stylesheet" type="text/css">
<div id="navHold">
<ul id="nav">
<li class="List2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"default.asp">Home</a></li>
<li class="List"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Destination Info</a></li>
<li class="List"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Lodges</a>
<ul>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
<li class="DropStyle"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Insert Lodges</a></li>
</ul>
</li>
<li class="List"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Tours</a> </li>
<li class="List"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact Us</a></li>
</ul>
</div>