Highlighting Current Page with CSS

This morning I post my first Dreamweaver/CSS site. It is for
a DVD I produced about infant massage. www.BabyBabyOhBaby.com.
What I'd like to do is highlight the current page in the
navigation bar using either a border or color change. I've found
some sites like
http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
but, sorry to say, I'm a beginner at both Dreamweaver & CSS and
I can't quite follow the code.
Is there some way within Dreamweaver to accomplish the
highlighting in design view without writing the code? Or perhaps
someone has some very basic elementary CSS guidance?
Thanks for your time,
David

Oh, yeah. 8)
Get that....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"E Michael Brandt" <[email protected]> wrote
in message
news:[email protected]...
> <informative but also self-serving>
>
> Really we have made this much much easier. divaGPS
creates you-are-here"
> menu highlighting and is easy to add to any number of
pages at once - even
> Templates' Child pages. It is a commercial DW Extension
that will save
> you lots of time and effort.
>
>
http://divahtml.com/products/divaGPS/current_menu_location.php
>
> <informative but also self-serving />
>
> --
>
> E. Michael Brandt
>
> www.divaHTML.com
> divaGPS : you-are-here menu highlighting
> divaFAQ : FAQ pages with pizazz
>
> www.valleywebdesigns.com
> JustSo PictureWindow
> JustSo PhotoAlbum
>
> --
>
>
> Murray *ACE* wrote:
>> You need to know the downside to using layers as a
primary layout
>> device - open your page in Firefox (or any non-IE
browser) and bump the
>> text size up a tick or two. Ugh....
>>
>> Here's your navbar -
>>
>> <div id="navbar"><a
href="index.html">Home</a> | <a
>> href="about_dvd.html"> the DVD</a> | <a
href="preview.html">Preview</a> |
>> <a href="reviews.html">Reviews</a> |
<a href="infant_massge.html">Infant
>> Massage</a> | <a
href="contact_us.html">Contact Us</a> | <a
>>
href="shopping.html">Shopping</a></div>
>>
>> Change it to this -
>>
>> <div id="navbar"><a href="index.html"
id="button1">Home</a> | <a
>> href="about_dvd.html" id="button2"> the
DVD</a> | <a href="preview.html"
>> id="button3">Preview</a> | <a
href="reviews.html"
>> id="button4">Reviews</a> | <a
href="infant_massge.html"
>> id="button5">Infant Massage</a> | <a
href="contact_us.html"
>> id="button6">Contact Us</a> | <a
href="shopping.html"
>> id="button7">Shopping</a></div>
>>
>> Then on each page, embed a little stylesheet in the
head by changing
>> this -
>>
>> </head>
>>
>> to this -
>>
>> <style type="text/css">
>> a#buttonX { your highlight styles }
>> </style>
>>
>> and just change the "X" to whatever number button
you want to highlight.
>>
>> You can do this in Design view, but it's too
tedious.
>>

Similar Messages

Highlight "current" page in CSS Dreamweaver TEMPLATE

I have created 2 navigation bars (in my header) using an unordered list styled with CSS in a Dreamweaver Template that I created. Here is that template (in the template- the "Beads" link is styled as the current page): http://www.bfranklincrafts.com/Templates/MainTemplateM.dwt
I don't want the navbars to be editable in the pages that will be created from this template, so I was NOT planning on putting the navbars in editable regions. But now I'm realizing that if I don't put the navbars in editable regions, I won't be able to go in each link in my navbars to put the "current" style for each page.
The idea of the template is wonderful because it allows us to create one template and from that template we can make changes that would be past down to all the pages that were created using this template. But if I have to put the navbars in editable regions, it means that if I have to make changes to the navbars, I'll have to go to each individual page to make those changes.
I really want to show the "current" page that visitors are on, can anyone help!!!
Liolee

Hi,
sorry to bring up an old post but I am having issues with this myself and hope you can help?
I have coded my site as per your example but still no luck.
It is an .asp site. and my menu looks like this:
<ul id="nav">
    <li><a id="home" href="http://www.ampso.co.uk/index.asp"><img src="/images/nav1_gray.jpg" width="84" data-srcover="/images/nav1_full.jpg"></a></li>
    <li><a id="tech" href="http://www.ampso.co.uk/page/88/Technical.asp#.USOIoqWduS0"><img src="/images/nav4_gray.jpg" width="102" data-srcover="/images/nav4_full.jpg" class="wrap_right"></a></li>
    <li><a id="construction" href="http://www.ampso.co.uk/page/89/Construction.asp#.USOQLqWduS0"><img src="/images/nav5_gray.jpg" width="170" data-srcover="/images/nav5_full.jpg" class="wrap_right"></a></li>
    <li><a id="medical" href="http://www.ampso.co.uk/page/87/Medical.asp#.USOUeaWduS0"><img src="/images/nav3_gray.jpg" width="88" data-srcover="/images/nav3_full.jpg" class="wrap_right"></a></li>
    <li><a id="media" href="http://www.ampso.co.uk/page/90/Media.asp#.USOWQKWduS0"><img src="/images/nav6_gray.jpg" width="88" data-srcover="/images/nav6_full.jpg" class="wrap_right"></a></li>
    <li><a id="logistics" href="http://www.ampso.co.uk/page/91/Logistics.asp#.USOXdqWduS0"><img src="/images/nav7_gray.jpg" width="100" data-srcover="/images/nav7_full.jpg" class="wrap_right"></a></li>
    <li><a id="allsectors" href="http://www.paycoservices.co.uk/page/86/All-Sectors.htm"><img src="/images/nav2_gray.jpg" width="120" data-srcover="/images/nav2_full.jpg" class="wrap_right"></li>
    <li><a id="contact" href="http://www.ampso.co.uk/page/205/Welcome-to-Payco.asp#.USObtaWduS0"><img src="/images/nav9_gray.jpg" width="120" data-srcover="/images/nav9_full.jpg" class="wrap_right"></a></li>
</ul>
Now the issue arises with adding the code to the pages themselves. For example, if I go to the 'tech' page. I have no editable regions like I would with a html template (even though my main menu is in a top menu template which applies to each page) so I'm not sure exactly where to put the css code.
Currently the top section of my 'tech' page looks like this:
<%
Bodystyle = "style='background:url(/images/bg-further-technical.jpg) center 0px no-repeat;'"
%>

<div id="further-banner" style="background:url(/images/technical-icon.png) 811px 9px no-repeat; ">
<h1>Payco Technical <span>It's your industry so why not do it your way?</span></h1>
<p><b>You are here:</b>
<a href="/index.asp">Home</a> /
<a href='Payco-Technical.asp'>Payco Technical</a> /
</p>
</div>
Now do I paste the css code into here? Or would it help if you saw my whole 'tech' page so you can see the rest?
Any help would be greatly appreciated.
Thanks

CSS - manually highlight current page link?

In the sidebar navigation on this page I want to highlight the current page link with a CSS class. I wrote a class called "current" and applied it to the link. But nothing changes. I've used this on other sites, but something is tripping me up this time. I'm obviously missing something simple.
Here's the page: http://www.jesseyoung.com/gill/practice_areas/small_business/exceptions_to_limited_liabili ty.html
Suggestions?
-Jesse

function(){return A.apply(null,[this].concat($A(arguments)))}
In the sidebar navigation on this page I want to highlight the current page link with a CSS class. I wrote a class called "current" and applied it to the link.
Are you creating this Current Page marker manually?
You're using Pop Menu Magic 2 from Project Seven which already has an excellent in-built feature for Automatic and Advanced Current Page "you are here" marking.
Click the two boxes adjacent "Current Marking" in the PMM2 interface and the job is done. The PMM2 PDF User Guide explains the feature in detail.
You'll also get excellent support on questions related to Project Seven products at their newsgroup forums
http://www.projectseven.com/support/index.htm

Using body id= to highlight current page on nav bar

Hi all, using the method of giving the body tag an id to set
the current page on the nav bar, works all very well. however, this
is no good if you are working from a template as it would mean the
<body> being editable on each page (so most of the content
then)....am I right? or am I missing something blindingly obvious
here which will allow me to change the <body>...
many thanks - didn't really want to use the javascript method
you see!

> Hi all, using the method of giving the body tag an id to
set the current
> page
> on the nav bar, works all very well. however, this is no
good if you are
> working from a template as it would mean the
<body> being editable on each
> page
> (so most of the content then)....am I right? or am I
missing something
> blindingly obvious here which will allow me to change
the <body>...
ideally, you wouldn't actually link the item on the menu of
the page you are
currently on. This is a usability/accessibility thing. If you
do that, then
you can simply style non-linked items on the menu differently
to highlight
that page.
That said, it's often not a practical solution if you are
using SSIs to load
the menu.
In that case, you could just add the Class to a wrapper DIV,
or to the menu
itself:
<div id="myMenu" class="contactPage">
<div id="myMenu" class="aboutPage">
<div id="myMenu" class="productsPage">
etc.
OR, alternatively, give each meny item it's own class and
then over-ride
that one particular class style in the HEAD of each
individual page. That
said, I'm not sure how well the latter would work with DW
templates.
-Darrel

Generate the current URL with css file

Hello everybody,
I just added a QRCode App on my Custom List page and I'm trying to create a css file that
it can generate the current URL where the QRCode App is opening. The QRCode App allows to add css file which Indicates
if I want to specify a custom CSS file URL. The QRCode opens with each List item.
Below is the code that I've been trying to use:
<ul >
<a href="">Link </a>
</ul>
*This code shows the current URL. However instead showing the the URL, it shows a Link to the current page. Can someone help me with that?
Link for the QRCode App:
http://office.microsoft.com/en-us/store/qrcode-app-for-sharepoint-WA103699711.aspx
Thanks!
App Part properties
When you're editing the app part properties, you can change the following custom properties:
Name
Category
Type
Description
QR Code Text
QRCode Settings
String
QR code
associated text or url. By default, this value is the host web url.
QR Code Width
QRCode
Settings
Integer
QR
code width. Default value is 200 px.
QR Code Height
QRCode
Settings
Integer
QR
code height. Default value is 200 px.
Render Mode
QRCode
Settings
Enum
QR
code render html method. The value could be canvas or html table. Default value is Cancas.
Custom CSS File Url
QRCode Settings
String
Indicates
if you want to specify a custom CSS file URL.
flavio

hi
what do you mean by current url? If url of current page is not what you are looking for, then is it url of current site?
As you use app, I guess you are working with Sharepoint Online and can't use server side code? If this is the case, then check the following post:
How to get URL of current site collection and other server side properties on client site in Sharepoint. Briefly you need to use OTB _spPageContextInfo object and set href attribute of your link in javascript:
<ul>
<a id="foo">Link</a>
</ul>
<script type="text/javascript">
document.getElementById("foo").setAttribute("href", _spPageContextInfo.siteAbsoluteUrl);
</script>
Blog - http://sadomovalex.blogspot.com
Dynamic CAML queries via C# - http://camlex.codeplex.com

Spry Menu - highlight current page in menu

If the current page is "aboutus.html" for example, can I configure Spry Menu to apply a different color or css class to the "About Us" link in the menu?
Thank you.

I added a new class with different color in CSS and refer that class in my html. I don't think the function is build in. Something like:
<a class="selectadded" href="/contactus.html">Contact Us</a>

Is there any way to to have the "Home" icon open a new tab instead of replacing the current page with the home page?

I would prefer that the "Home" icon on the Navigation Toolbar open a new tab instead of replacing the current tab with the home page. Is there any way to accomplish this?
Thank you.

If you middle-click on the home icon it will open a new tab containing the home page.

Highlighting current page on Tab control

Hi!,
I am using tab control with 7 pages. The page names are all in the same colour. Is there any way in which the colour for the name of the current page can be made different from the rest?
If your answer involves property nodes (or more advanced techniques) please be descriptive as I am beginner.
Also, which is the best book for inside stuff on property nodes?
I am using LV-PDS 6.1
Best wishes and thanks,
Gurdas
[email protected]
Gurdas Singh
PhD. Candidate | Civil Engineering | NCSU.edu

> Is it possible to assign the same keyboard key (to all buttons) such
> that pressing it will do the job of clicking the current active
> button? I would prefer this key to be the 'space bar'.
>
> The application allows only one hand to be free. The other hand will
> be used to place test component and rotate it manually below the
> sensor. Thus, such a feature makes the user's task very easy. He just
> keeps clicking the space bar until the vi ends.
>
It isn't possible to assign a key to more than one control, since then
it would be pretty unclear which control should out-of-the-blue receive
the key. It is possible to catch key events and perform and action
based upon the key press. Another option is to set
the key focus to the
next logical button in your progression. If the focus is set to a
button, then the space bar, enter key, etc all work.
Since you are asking for comments, the UI you describe sounds a bit odd
to me. A sequence of buttons that the user is required to click in a
given order? You might want to compare this to an indicator showing the
stage and current results, and one more button that says Next. Tie the
key navigation shortcut to the single button, and each button press
moves to the next stage. You might want to add a Cancel or Stop button
if there is ever any need to break out of the sequence. Finally, this
is pretty close to a wizard that allows the user to go both directions.
If it makes sense to reverse and redo a step, add that button too and
you have a very standard UI.
To build a wizard, use a tab control with a page for each stage. Hide
the tabs, and modify the pages by adding or subtracting on the value.
Greg McKaskle

Can't change the background of table cells on a page with CSS

New CSS guy here, so excuse me if I sound stupid! I built up
a site with DW8 using CSS for basic page formatting. The site is a
new version of an old one I did in GoLive. I copied/pasted a fairly
large table onto the new site in DW, and the table came in fine,
the text was now the font and style of the main style sheet. But, I
can't format the table itself now. The header rows were filled blue
with white text, as an example.
I can change the bg color down in the toolbar like old times,
but nothing actually changes on the screen. I'm assuming it's being
overridden somehow by my CSS style sheet?
What would I have to do to get back this formatting
functionality?
here is an example page:
http://www.curtlo.com/prototype/pricing.html

> The header rows were
> filled blue with white text, as an example.
There is no such style on this page.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"synterx" <[email protected]> wrote in
message
news:eig96t$oir$[email protected]..
> New CSS guy here, so excuse me if I sound stupid! I
built up a site with
> DW8
> using CSS for basic page formatting. The site is a new
version of an old
> one I
> did in GoLive. I copied/pasted a fairly large table onto
the new site in
> DW,
> and the table came in fine, the text was now the font
and style of the
> main
> style sheet. But, I can't format the table itself now.
The header rows
> were
> filled blue with white text, as an example.
>
> I can change the bg color down in the toolbar like old
times, but nothing
> actually changes on the screen. I'm assuming it's being
overridden somehow
> by
> my CSS style sheet?
>
> What would I have to do to get back this formatting
functionality?
>
> here is an example page:
>
>
http://www.curtlo.com/prototype/pricing.html
>

Changing the body image on each page with CSS

Hi,
I need to have a different background image for each page of this site (body)
1) I have one template currently
2) I have one css file currently (linked)
I've done a lot of research as to how best to do this including;
a) Using different body id's for each page
b) Using another css rule for body (inserted into th file AFTER the main linked ccs file)
Because I am using templates I can't see an easy way to do this (Header is largely locked) and have little control over position of b) and the same for a) as the body tag is also locked. I have also looked at "specify editable tag attibutes in a template" but couldn't get this to work.
There is something simple to do here but I cannot see it.
Any sample / advice would be appreciated.
Rick

John and DWILCOX01,
OK I tried it - it seems to be working ok although I have to test a few things.
However the one thing I did was remove the body style from the linked CSS file as the linked file is BELOW the new body style...
Although am I correct in assuming that if the new body style you suggested is added AFTER the linked CSS file then I don't have to worry?
Thansk,
R

Code highlighting for page with .master extension

Hi,
How do I get Dreamweaver to highlight the code of .master
pages just the same as it does with .aspx?
I've looked through the help docs.
Please advise, thanks.

The dreamweaver support page has a technote section.
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16410
Adding file extensions to dreamweaver
note- pay attention to the part about which set of files to
modify- not the
ones in program files, the ones for You as a User get
changed.

URL page with css

Hi all, I want to access to:
http://wwwa.accuweather.com/world-forecast-current-conditions.asp?partner=accuweather&myadc=0&traveler=0&zipcode=BUTA%20RANQUIL,ARGENTINA&metric=1
and Capture a little part of it.
The capture work fine, but lose the css.
the question is: how can I do to preserve it ?
<b>Sorry, It was posted to Development forum</b>
Message was edited by: Ignacio Villalba

If you do a Right Click->View Source you'll see that the webpage is using the following CSS sheets
http://wwwa.accuweather.com/adc2004/pub/css/adc_staticStyles.css
http://wwwa.accuweather.com/adc2004/pub/css/adc_worldStyles.css
http://wwwa.accuweather.com/adc2004/pub/css/adc_forecast.css
Just cut and paste the address of the stylesheet into IE, and it will download the CSS code for in an editor. Save a local copy of the Stylesheet to the same directory as your website and make use of whatever classes from the CSS you want...
Hope this helps...Points are appreciated!!

Disabling the current page link?

I have a nav bar. I want the current link (whatever page you
are on) to be disabled and to be "pushed in" (my active link
color). Is there anyway to do this with ONE css page or template? I
could manually change each page but I would have to edit all the
pages if I change it again.

> THat didn't bother me, but it
> wouldn't let me change it in other pages.
Are you using MODIFY | Template Properties to change it?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"firmana" <[email protected]> wrote in
message
news:egnvsd$j8e$[email protected]..
>
http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
>
> Read #7 and see what the guy says. I tried making the
body tag editable
> (by
> Modify --> Templates --> make attribute ediatble),
but it makes me insert
> a new
> tag inside. WHen I tried it with the ID tag, it came out
with
> id="(@@Template@@)" or something like that. THat didn't
bother me, but it
> wouldn't let me change it in other pages.
>

Word Stopped Printing the correct current page, prints page #1 instead

Word 2013 will no longer print the correct current page when asked to do so--it prints page 1 instead. There is no problem with the document(s) involved as they will print the correct current page with another user. If you highlight a selection,
it will print that correctly, except without the headers and footers. If you specify the section and page numbers, that also works (and the headers and footers come out OK). The print drivers are not the issue as the printer drivers
in question are on the print server and work as expected for other users.
Creating a new profile for the user does fix the problem, but only temporarily, in a week to 2 weeks the problem comes back. I am looking for a simpler solution than creating a new profile every week or 2 for the user.
I have tried the following steps without any success.
Deleted all the normal.dotm files from the computer and have
Deleted the Word Data key in the HKEY_CURRENT_USER|SOFTWARE\Microsoft\Office\15.0\Word.

Hi,
I first suggest you check the printer setting, since the problem may by caused by the incorrect printer mode. We can also try updating the printer driver to the latest to check the result.
Is the source file is openning in the Compatibility Mode? Whatever it is, please copy all of content from your current document to a new creating docx to check the result.
If the issue still persists, please try to repair Office from Control Panel -> Programs -> Programs and Features -> Office 2013 -> Change -> Repair.
Feel free to let me know if you have any other concern.
Regards,
Melon Chen
TechNet Community Support
It's recommended to download and install
Configuration Analyzer Tool (OffCAT), which is developed by Microsoft Support teams. Once the tool is installed, you can run it at any time to scan for hundreds of known issues in Office
programs.

Reload page with additional parameter?

Hi!
I'm writing a site with the following simple structure: JSP using taglibs is for page structure, and taglibs are for applying XSLT to XML. Model uses XPath to extract needed XML , and there is no controller. Typical JSP is like that news.jsp:
<my:page>
<my:header title="News" />
<my:news show="10">
<my:rangeSelector />
</my:news>
</my:page>This displays a page with 10 news list and a range selector string like that:
1..10 | 11..20 | 21..25
Tag my:rangeSelector asks its parent tag my:news (which implements IHasRange, so as my:photos for photogallery thumbnails grid, etc.) about the total number of news to form that range selection string. The idea is the following: after the user clicks for example on 11..20, there goes a request, the same as the previous one, but with additional parameter, something like rangeStart=11. The question is HOW TO ACHIEVE THIS keeping in mind that my:rangeSelector knows nothing about its parent, but that it should implement IHasRange. In other words, how to reload the current page with the same set of parameters, and one more additional parameter, without explicit specifying the page, i. e. without that:
<my:rangeSelector target="news.jsp" />Maybe Struts as a controller can help? I have no idea about it...
Thanks a lot! :)
Constantine Kulak
FAMI BSU, IBA BY

I have the same problem: I had used F5 to make text smaller (zoom out). F6 to Zoom In still works, but F5 doesn't. It worked under Safari 4 BETA, but not the release version. I've tried this on several machines.

Highlighting Current Page with CSS

Similar Messages

Maybe you are looking for