|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
Ajax Application Generator Generate database and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!
|
|
#1
July 24th, 2005, 06:38 PM
|
|||
|
|||
|
confused about templates & non-editable regions
Hi all,
ok, i feel that this may be a real dumb question, but i can't find the answer to it so here goes. to date I have been mostly using dreamweaver, but am slowly weening myself of it and using validated code and css. anyway, when i design a site, i use the dreamweaver templates .dwt to make changing things such as menus easier in the future. i have recently been learning about suing css for roll-over images in menus, and in particular want to have a different colour image for the area of the site which is currently selected. Now, unless i'm being real dumb, i can't have this if i use a template, as on each page the id="selected" needs to be next to a different link. Now does this mean that I have to build a fresh page each time, and if I want to add a new category, alter all the pages in the site? It would seem to me that when a site uses different images for link, hover & active (selected) that there must be a way of still having a template style system set up, in case a new category is added. As i said, probably a basic and dumb question, but if anyone knows what i;m going on about and can enlighten me, that would be appreciated, as I haven't a clue. Many thanks, Jules
|
|
#2
July 25th, 2005, 08:00 AM
|
||||
|
||||
|
I'm not sure of a Dreamweaver-friendly solution... However I saw an interesting [web standard] way of doing this before.
Let's say your page is a grocery store, and your main navigation is Meat, Vegetables, Fruit, Seafood, and Dairy. Your code may look like this: Code:
<ul id="mainNav"> <li id="navDairy">Dairy</li> <li id="navFruit">Fruit</li> <li id="navVegetables">Vegetables</li> <li id="navMeat">Meat</li> <li id="navSeafood">Seafood</li> </ul> For each section, put an ID on the BODY tag. <body id="fruit"> Your CSS could then be: Code:
#dairy #navDairy, #fruit #navFruit,
#vegetables #navVegetables,#meat #navMeat,
#seafood #navSeafood, #mainNav li:hover {
... properites ...
}
The overall effect could be as follows: Code:
<html>
<head>
<style>
#mainNav {
width: 200px;
padding: 0;
margin: 0;
list-style: none;
}
#mainNav li {
background-color: #ccc;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
text-size: large;
font-weight: bold;
font-family: courier;
}
#dairy #navDairy, #fruit #navFruit,
#vegetables #navVegetables,#meat #navMeat,
#seafood #navSeafood, #mainNav li:hover {
background-color: #666;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
border-top: 3px solid #000;
border-left: 3px solid #000;
}
</style>
</head>
<body id="fruit">
<ul id="mainNav">
<li id="navDairy">Dairy</li>
<li id="navFruit">Fruit</li>
<li id="navVegetables">Vegetables</li>
<li id="navMeat">Meat</li>
<li id="navSeafood">Seafood</li>
</ul>
</body>
</html>
|
|
| Viewing: Dev Articles Community Forums > Web Design > Web Development > confused about templates & non-editable regions |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
