Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS style

Posted on 2013-01-14
13
Medium Priority
?
364 Views
Last Modified: 2013-01-16
Dear Experts,
I have a left vertical menu. What I want is that when I'm at the related page, the assosiated box should have diffrent background color and the font color should be also diffrent than others. How can I do that? thank you

My code is here.
#menusol {
	margin:0;
	padding:0;
}

#menusol ul{
	width: 198px;
	margin:0;
	padding:1px;
	border:1px solid #d7e3e5;
}
#menusol li{
	display:marker;
	list-style:none;
	padding-bottom:1px;
}
#menusol li a{
	display:block;
	font:.75em Arial, Geneva, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align:left;
	color:#FFF;
	text-decoration:none;
	background-color:#0D4B64;
	padding:5px;
	border-left:0px solid #F1AEB6;
}
#menusol li a:hover{
	color:#0D4B64;
	border-left:0px solid #F1AEB6;
	background-color:#FFF;
	font-weight:normal;
}

Open in new window

0
Comment
Question by:Braveheartli
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 3
13 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38776335
there are lots of different ways of doing that. Depending on how your site is built some may be better than others. you can do it server side, with javascript, or with css alone. which is better for your site depends on how your site is built.
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 38776900
A simple (none php solution) might be to give the body tag of each page its own id, then allocate a style according to each specific page.
For example if a page has a body id called <body id="somePage">
its style might look something like this:
#somePage #menusol li a{
      color:red;
}
Essentially, each page would have its own style.
This way would work however php has some much more efficient solutions for applying current page styles to links.
Cheers,
N
0
 
LVL 1

Author Comment

by:Braveheartli
ID: 38777308
I think I haven't explain it clearly.
what I want is to give different background and font color to one of the box of my menu.
There will be no link on this box. Because the user will be already on this page. Thank you
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 1500 total points
ID: 38777746
You can apply what Neil is suggesting to any element. It doesn't have to be a link.

But then, if you're hard-coding your pages, you can always just give your box an 'active' class, and define that.

.active{

background-color:blue;
color:white;

}

Open in new window

0
 
LVL 1

Author Comment

by:Braveheartli
ID: 38777821
dear kozaiwaniec
that is the anwser that I'm looking for.
However, I don't want to use .active
can I do that like this? copy the complete code, give a different name to css and apply the box that I want to be seen in different color.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38777940
im not sure i understand your question.

you dont want to have duplicate css files - you'll give yourself a nightmare trying to maintain that.

why dont you want to use 'active'? Do you want different colors for different boxes? if so, just give them different classes.

can you provide a link to your page?
0
 
LVL 1

Author Comment

by:Braveheartli
ID: 38780104
dear kozaiwaniec

please check this page
http://www.real.com.tr/Oto_Cocuk_Koltugu.html 
as you can see on the left menu, one of the link has red color which shows that they are on the related page.
that is what I'd like to do with the above code. I will modify every page on the menu whic is ok for me.
thank you
0
 
LVL 5

Assisted Solution

by:Neil_Bradley
Neil_Bradley earned 500 total points
ID: 38780153
My answer still stands. If you add a unique id to each page, you can target whatever you want to change on each page easy as pie.
EG

#somePage .red{
      color:red;
}


Good luck.
Cheers,
N
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38780246
you have been provided a number of options. it's not clear at this point what you are asking for if you cant use those options.

you need to provide a link to YOUR page if you want a 'copy and paste' solution.
0
 
LVL 1

Author Comment

by:Braveheartli
ID: 38780355
Dear kozaiwaniec
my menu is here
http://www.alaramalaz.com/Untitled-1.html
I want one of the menu link color be diffrent than the others. That will show the users that they are on that page. thank you
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 1500 total points
ID: 38780899
If you are hard-coding all the pages, then all you have to do is add an "active" class to the li that is the active page. I applied it to the "Franchise Modeli" li:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Franchise Modeli</title>
<link rel="stylesheet" href="css/menusol.css" type="text/css" />
</head>

<body>
<div class="leftContentsol">

			<div class="leftContentINsol">
                        <div class="leftContentininsol">
                        <div id="menusol">
  
<ul>
<li><a href="etkili-anne-baba-egitimi.html">Ücretsiz Etkili Anne Baba Egitimi</a></li>
<li><a href="metin-cinaroglu-holistic-workshop.html">Ücretsiz Holistic Egitim Takvimi</a></li>
<li><a href="bireysel-programlar.html">Bireysel Sertifika Programlari </a></li>
<li><a href="bireysel-diploma-programlari.html">Bireysel Diploma Programlari </a></li>
<li><a href="business-programlar.html">Business Programlar</a></li>
<li class="active">Franchise Modeli</li>
<li><a href="kampanyalar.html">Ayin Egitim Kampanyasi</a></li>
<li><a href="hayati-degisenler.html">LIVCON ile Hayati Degisenler</a></li>
<li><a href="uyelik.html">Ofis & Sertifikasyon Üyeligi</a></li>
<li><a href="karma-egitim.html">Karma Egitim Modeli</a></li>
<li><a href="uygulama-workshop-takvimi.html">Uygulama Workshop Takvimi</a></li>
<li><a href="butunsel-workshop-takvimi.html">Bütünsel Workshop Takvimi</a></li>
<li><a href="open-frame.html">OpenFrame Workshop Takvimi</a></li>
<li><a href="master-class.html">MasterClass Workshop </a></li>
<li><a href="lem-takvimi.html">LEM Egitim Takvimi</a></li>
<li><a href="karma-egitim.html">Bütünsel Yaklasimimiz </a></li>
<li><a href="makaleler.html">Makaleler</a></li>
<li><a href="videolar.html">Videolar ve Fotograflar   </a></li>               
                        
</ul>	</div>
                        
                        <!-- leftContentinin starts leftContentinin -->
              </div><!-- Ends leftContentinin -->
                        
          
          
          </div>

		
<!-- Ends leftContentinin -->
          <div>

         
        </div>
          </div>
</body>
</html>

Open in new window


in your css file, define the active class:

.active{
  background-color:white;
  color:grey;
  font: .75em Arial, Geneva, sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-align: left;
  padding: 5px;
}

Open in new window

This is the simplest, most basic way of doing it. Modify the html accordingly on every page.
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 38780983
I completely agree with kozaiwaniec.
N
0
 
LVL 1

Author Closing Comment

by:Braveheartli
ID: 38781710
thank you
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question