CSS Menu

W

WMRKameleon

New Member
Goodevening!

I am building on my website and I want to make a part CSS for the inactive buttons in my menu and for the active button, when a user clicked on it and is on the corresponding part of the site.

It won't seem to work out for me, I'm looking for help. I will post the CSS belonging to the menubar here.

Code: 
#menubalk
{
height:30px;
width:700px;
background-color:white;
font-family:"Segoe UI", sans-serif;
clear:both;
margin-left:auto;
margin-right:auto;
text-align:center;
border-bottom:solid;
}

.menuknop1
{
height:30px;
width:144px;
background-color:white;
font-family:"Segoe UI", sans-serif;
float:left;
}

.menuknop2
{
height:30px;
width:97px;
background-color:white;
font-family:"Segoe UI", sans-serif;
float:left;
}

.menuknop3
{
height:30px;
width:85px;
background-color:white;
font-family:"Segoe UI", sans-serif;
float:left;
}

.menuknop4
{
height:30px;
width:131px;
background-color:white;
font-family:"Segoe UI", sans-serif;
float:left;
}

.menuknop5
{
height:30px;
width:80px;
background-color:white;
font-family:"Segoe UI", sans-serif;
float:left;
}

.menuknop6
{
height:30px;
width:159px;
background-color:white;
font-family:"Segoe UI", sans-serif;
float:left;
}

.menuknop1:active
{
height:30px;
background-color:white;
font-family:"Segoe UI", sans-serif;
float:left;
}

.menuknop2:active
{
height:30px;
background-color:white;
font-family:"Segoe UI", sans-serif;
float:left;
}

.menuknop3:active
{
height:30px;
background-color:white;
font-family:"Segoe UI", sans-serif;
float:left;
}

.menuknop4:active
{
height:30px;
background-color:white;
font-family:"Segoe UI", sans-serif;
float:left;
}

.menuknop5:active
{
height:30px;
background-color:white;
font-family:"Segoe UI", sans-serif;
float:left;
}

.menuknop6:active
{
height:30px;
background-color:white;
font-family:"Segoe UI", sans-serif;
float:left;
}

Now, my question is, what should I do now in my HTML so that the other image is loaded when the page is open?
 
notarypublic

notarypublic

New Member
There isn't a a: current property, and I really wish that there was.

If I remember right, this is the easiest known work-around. Give each link in your list an id, and the wrapper or content element they're inside of an id as well:
HTML: 
<div class = "container" id = "homePage">
<ul id = "nav">
   <li [B]id = "linkHome"[/B]><a href = "home.html">Home</a></li>
   <li [B]id = "linkContact"[/B]><a href = "contact.html>Contact</a></li>
...
</ul>
</div>

In your css document, set up the following rules in either of these two ways:

HTML: 
#homePage #linkHome {
<!-- different formatting rules for when this link is active here -->
}

#contactPage #linkContact {
<!-- this will only change the format of the contact link when the page ID is 'contactPage' -->
}

<!-- or -->
#homePage #homeLink, #contactPage #contactLink, ... #page #pageLink {
<!-- A rule here will affect all of these unique situations with less code, but harder to organize -->
}
 
W

WMRKameleon

New Member
Indeed! Would be SO much easier!

What do you mean with the in the HTML-code?

Besides that, do I need extra coding for the ordered lists and stuff you use in the code you gave?

Thank you for answering, by the way!

notarypublic said:
There isn't a a: current property, and I really wish that there was.

If I remember right, this is the easiest known work-around. Give each link in your list an id, and the wrapper or content element they're inside of an id as well:
HTML: 
<div class = "container" id = "homePage">
<ul id = "nav">
   <li [B]id = "linkHome"[/B]><a href = "home.html">Home</a></li>
   <li [B]id = "linkContact"[/B]><a href = "contact.html>Contact</a></li>
...
</ul>
</div>

In your css document, set up the following rules in either of these two ways:

HTML: 
#homePage #linkHome {
<!-- different formatting rules for when this link is active here -->
}

#contactPage #linkContact {
<!-- this will only change the format of the contact link when the page ID is 'contactPage' -->
}

<!-- or -->
#homePage #homeLink, #contactPage #contactLink, ... #page #pageLink {
<!-- A rule here will affect all of these unique situations with less code, but harder to organize -->
}
Click to expand...
 
notarypublic

notarypublic

New Member
Oh, the was to bold that part, for emphasis. I guess in html syntax, that is ignored.

Not sure I'm understanding your question correctly, though -- If you can post the html for your CSS sheet and your navigation bar, I think I can explain this a little easier.
 
W

WMRKameleon

New Member
notarypublic said:
Oh, the was to bold that part, for emphasis. I guess in html syntax, that is ignored.

Not sure I'm understanding your question correctly, though -- If you can post the html for your CSS sheet and your navigation bar, I think I can explain this a little easier.
Click to expand...


What I want to do is this: if I click on "Weblog", I want all pages corresponding to the Weblog to have another button in the menu, let's say "The active button". ;)

Code: 
/* Version Pro365 */
/* Design body */
html, body, p, h1, h2, h3, h4, h5, h6
{
background-color: transparent;
color:rgb(25,25,25);
font-family:"Segoe UI", sans-serif;
}
/* End design body */

/* Start design text */

/* Paragraph */
p
{
text-align: left;
}

/* Head 1 */
h1
{
font-size:180%;
text-align: center;
}

/* Head 2 */
h2
{
font-size:170%;
text-align: center;
}

/* Head 3 */
h3
{
font-size:160%;
text-align: center;
}

/* Head 4 */
h4
{
font-size:150%;
text-align: center;
}

/* Head 5 */
h5
{
font-size:140%;
text-align: center;
}

/* Head 6 */
h6
{
font-size:130%;
text-align: center;
}

/* End design text */

/* Start design links */

/* Normal link */
a:link
{
font-family:"Segoe UI", sans-serif;
text-decoration:underline;
color:blue;
font-size:100%;
}

/* Visited link */
a:visited
{
font-family:"Segoe UI", sans-serif;
text-decoration:underline;
color: purple;
font-size:100%;
}

/* Hover link */
a:hover
{
font-family:"Segoe UI", sans-serif;
text-decoration:underline;
color: green;
font-size:100%;
}

/* Active link */
a:active
{
font-family:"Segoe UI", sans-serif;
text-decoration:underline;
color:rgb(45,45,45);
font-size:100%;
}

/* End design links */

/* OL/UL/LI */

/* Set LI */
li
{
background-image: url(sqgrey.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

/* Set UL */
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

/* Set OL */
ol
{
list-style-type:lower-roman;
}

/* End OL/UL/LI */

/* Start design */

#container
{
width:100%;
}

#header
{
clear:both;
margin-left:auto;
margin-right:auto;
font-family:"Segoe UI", sans-serif;
color:rgb(25,25,25);
border-top:solid;
border-bottom:solid;
width:700px;
height:100px;
background-image:url(header.jpg);
background-position:center;
background-repeat:no-repeat;
}

#footer
{
clear:both;
font-family:"Segoe UI", sans-serif;
background-color:white;
color:rgb(25,25,25);
width:700px;
margin-left:auto;
margin-right:auto;
border-top:solid;
border-bottom:solid;
height:20px;
text-align:center;
}

#leftsidebar
{
width:200px;
float:left;
font-family:"Segoe UI", sans-serif;
}

#rightsidebar
{
width:200px;
float:right;
font-family:"Segoe UI", sans-serif;
}

#content
{
width:700px;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
color:rgb(25,25,25);
}

#postfooter
{
font-family:"Segoe UI", sans-serif;
background-color:white;
color:rgb(25,25,25);
width:700px;
margin-left:auto;
margin-right:auto;
height:20px;
text-align:center;
}

#navbar
{
height:30px;
width:700px;
background-color:white;
font-family:"Segoe UI", sans-serif;
clear:both;
margin-left:auto;
margin-right:auto;
text-align:center;
border-bottom:solid;
}

.menubutton1
{
width:144px;
}

.menubutton2
{
width:97px;
}

.menubutton3
{
width:85px;
}

.menubutton4
{
width:131px;
}

.menubutton5
{
width:80px;
}

.menubutton6
{
width:159px;
}

.menubutton1, .menubutton2, .menubutton3, .menubutton4, .menubutton5, .menubutton6
{
height:30px;
background-color:white;
font-family:"Segoe UI", sans-serif;
float:left;
}

HTML: 
<!-- Deze html/phpcode is geschreven voor Design 2.0! Gemaakt door Johann Behrens © 2011 -->
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Project 365</title>
<link href="design/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="navbar">
<div class="menubutton1">
<img src="design/home_button.jpg" alt="Home!" />
</div>
<div class="menubutton2">
<img src="design/weblog_button.jpg" alt="Weblog" />
</div>
<div class="menubutton3">
<img src="design/forum_button.jpg" alt="Forum" />
</div>
<div class="menubutton4">
<img src="design/project_button.jpg" alt="Project" />
</div>
<div class="menubutton5">
<img src="design/FAQ_button.jpg" alt="F.A.Q." />
</div>
<div class="menubutton6">
<img src="design/contact_button.jpg" alt="Contact" />
</div>
</div>

<div id="leftsidebar">
Left
</div>

<div id="rightsidebar">
Right
</div>

<div id="content">
<p><?php $datum = date("d-m-Y"); $tijd = date("H:i:s");
echo "<div align=center>Het is nu $datum en $tijd.</div>"; ?></p>
</div>

<div id="footer">
&copy; Johann Behrens // <?php $jaar = date('Y'); echo "$jaar"; ?>
</div>
<div id="postfooter">
<p>Deze website wordt het beste bekeken met <a href="http://www.mozilla.com/nl/firefox/">FireFox!</a></p>
</div>
</div>
</body>
</html>

That's all of my code so far :)
 
You must log in or register to reply here.
Top