PDA

View Full Version : templates


liquidmonkey
04-15-2008, 09:56 PM
i've created a mainTemplate which includes a banner, mainNav (created using CSS) a main body (empty space in the middle) and a footer. but now when i go to create a new page from it, i have realized that i can't change that mainNav bar which is SUPER frustrating, as i didn't want to have to do it manually on every page, aaaaaarggggghhhhh :(

or is there another way around this problem, there has to be, right?
is it how i set up the editable areas???
what do you pro's do :)

Rob_Che
04-15-2008, 10:04 PM
Why can't you change the mainNAV ?
Explain...

liquidmonkey
04-15-2008, 10:26 PM
sorry.
thinking was that the mainNav would be a non-editable region. but when i goto create a new page, it thinks that the 'home' tab is selected each time which was ok once, but now i want the 'adventure' tab to be selected.
i think the problem lies within how the id tag is referrenced to the css sheet.

Cary
04-16-2008, 12:24 AM
If you don't want to have to edit the menu for each page, but you want to change which tab is highlighted then you should use an id attribute with each page's body tag.

To keep this simple, imagine three pages with a menu with just three links: Home, About, and Contact.

The links might look something like this:

<ul id="mainNav">
<li><a id="a_home" href="#">Home</a></li>
<li><a id="a_about" href="#">About</a></li>
<li><a id="a_contact" href="#">Contact</a></li>
</ul>

The Home page could have a body tag like this: <body id="home">

For the About page... <body id="about">

And for the Contact page... <body id="contact">

Now, instead of "#mainNav a.current" and "#mainNav a.current:hover" you would use something like this to style the highlighted tab.


#home #a_home,
#about #a_about,
#contact #a_contact {
...
...
}

#home a#a_home:hover,
#about a#a_about:hover,
#contact a#a_contact:hover {
...
...
}


See how the styling will only apply to links when they appear with their associated pages?

liquidmonkey
04-17-2008, 04:58 PM
<ul id="mainNav">
<li><a id="a_home" href="#">Home</a></li>
<li><a id="a_about" href="#">About</a></li>
<li><a id="a_contact" href="#">Contact</a></li>
</ul>The Home page could have a body tag like this: <body id="home">

For the About page... <body id="about">

And for the Contact page... <body id="contact">
i get the HTML bit, at least the idea behind it. i'm not sure what <a id=""> means or why home is written as 'a_home'?

the body part is clear as this will tell which page is current, good solution!



Now, instead of "#mainNav a.current" and "#mainNav a.current:hover" you would use something like this to style the highlighted tab.


#home #a_home,
#about #a_about,
#contact #a_contact {
...
...
}

#home a#a_home:hover,
#about a#a_about:hover,
#contact a#a_contact:hover {
...
...
}
See how the styling will only apply to links when they appear with their associated pages?this is where i get lost a bit :(
why do i need to use '#home a_home"?? and this does not work in the css style sheet :(
adding the ':hover' at the end just defines the style when the mouse is over top of it, right.


here's my code...
HTML
<div id="navigation">
<ul id="mainNav">
<li><a id="a_home" href="index.html" title="Take me Home">Home</a></li>
<li><a id="a_adv" href="adventures2.html" title="Adventures Page">Adventures</a></li>
<li><a id="a_pano" a href="panoramics2.html" title="Panoramic Pictures">Panoramics</a></li>
</ul>
</div>

CSS
#home #a_home,
#about #a_adv,
#contact #a_pano {

}

#home a#a_home:hover,
#about a#a_adv:hover,
#contact a#a_pano:hover {


}

Cary
04-18-2008, 02:26 AM
i get the HTML bit, at least the idea behind it. i'm not sure what <a id=""> means or why home is written as 'a_home'?

Well, since you can only use each ID once per page, using "a_home" distinguishes this ID from the "home" ID. Using "a_" just helps to show that this ID is associated with a link. It has no special meaning as far as CSS or HTML is concerned. You could use whatever acceptable ID naming you desire.

this is where i get lost a bit :(
why do i need to use '#home a_home"?? and this does not work in the css style sheet :(

Oh no, more specificity related problems. Try the code below. Since only the home page has a body with the ID of "home", the following styles will only affect the home link when the home page is being viewed. There's no such styling associated with the home link when other pages are loaded because they will have another ID or no ID associated with their body tags.

body#home #mainNav a#a_home,
body#about #mainNav a#a_adv,
body#contact #mainNav a#a_pano {
color: #000000;
background: #666666;
}
body#home #mainNav a#a_home:hover,
body#about #mainNav a#a_adv:hover,
body#contact #mainNav a#a_pano:hover {
color: #FF0000;
background: #0000FF;
}

adding the ':hover' at the end just defines the style when the mouse is over top of it, right.

Yep.

liquidmonkey
04-20-2008, 08:28 AM
thanks for all your help cary, have taken a different approach but your tips learned me a lot, thanks again!!