Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to bypass global CSS

Posted on 2006-06-26
12
Medium Priority
?
1,859 Views
Last Modified: 2013-11-19
Hi guys, I have a web site with a fair bit of CSS for all sorts of layout needs. The problem is that for one particular section I would like to bypass all the CSS tags specified in our CSS file. Is it possible and how?

Thanks.
0
Comment
Question by:mpaert
[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
  • 4
  • 3
  • 2
  • +1
12 Comments
 
LVL 5

Expert Comment

by:NAORC
ID: 16984008
Yes it is...

You can either create extra styles for this section, or you can just over ride it in the html

If you have a CSS file which is supposed to change the background color of a web page to black, but in the body tag of the actual html page you put <body bgcolor="#ffffff"> then the local html would automatically over ride the css.

Alternatly, you can just not include the css in that single page and recreate parts of the style using the html methods.

Alternatly, create a second css page thats specific for that section.

You could even create local styles using the <style> tag in the html of the page.
0
 

Author Comment

by:mpaert
ID: 16984040
Thanks Naorc for your help.

In fact, it's not just one page, but an entire site. The section is a menu section, that we're considering to buy, but currently, our own CSS is making it look a bit ugly

See here:  http://194.144.68.94/test/

Any specific ideas you could give us on how to make it appear normally?

Thanks
0
 
LVL 5

Expert Comment

by:NAORC
ID: 16984093
you are refering to the menu at the top with Hosting, Domain ANmes, support etc i assume  (and your right.. it is ugly, the rest of the site is nice though)

Is it a seperate frame from the rest of the page, or is it a chunk of code that appears on every page?
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.

 

Author Comment

by:mpaert
ID: 16984170
this code will appear on all  pages.
0
 
LVL 5

Expert Comment

by:NAORC
ID: 16984204
ooohhh......

Maybe you should consider creating a few frames then..

Cut your page into 2 frames, a banner page across the top and then a main body pane taking up the bottom 90% of the page.

Create 2 X CSS files, one for the top page, one for the bottom and do the 2 designs seperate.

Its just a suggestion...
0
 
LVL 7

Expert Comment

by:pradeepsudharsan
ID: 16984307
<HEAD>
            <title></title>
            <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
            <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
            <meta content="JavaScript" name="vs_defaultClientScript">
            <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
            <meta http-equiv="imagetoolbar" content="no">

            <LINK href="../Css/Controls1.css" type="text/css" rel="stylesheet">
            <LINK href="../Css/Controls2.css" type="text/css" rel="stylesheet">
</HEAD>
0
 
LVL 10

Accepted Solution

by:
Havin_it earned 2000 total points
ID: 16985070
There's no earthly need to start chucking frames into the situation.  All you need to do is extend your existing global stylesheet with rules that suit the menu better.

Let's say your menu is contained in a <div> element (just f'rinstance, it really doesn't matter, could be a <ul> or whatever).  You give it either an id or class attribute; here I'll choose id.

<div id="menu">
....
</div>

In your stylesheet, you make rules that target this single element, like so:

div#menu { ... }
(to style the div itself)

div#menu ul { ... }
(to style <ul> elements that are children of the div)

div#menu ul li { ... }
(you get the drift?)

If this menu is on every page, then there's no inefficiency in doing this.  It would take just as much code (more in most cases) to do it any other way.

Hope this helps ;)
0
 

Author Comment

by:mpaert
ID: 16985121
Havin_it, i like your idea. I'll try and make sense of it tomorrow when I go through our site. I'll let yo know. Thanks.
0
 

Author Comment

by:mpaert
ID: 17000675
Hi Havin_it, I think I understand the principle, but how would I go about if I want to bypass all CSS tags that are mentioned in the CSS sheet? e.g., <ul> may be defined in the CSS sheet, but my menu has it as well, that should be blank...
0
 
LVL 10

Expert Comment

by:Havin_it
ID: 17000883
The example rules above are all about targeting specific elements on the page.  No two elements on a page should have the same id, so the existing global rule like

ul {
  background-color: #ccc;
}

will be overridden *only* for <ul> elements that are inside the div with id="menu", by a rule like this:

div#menu ul {
  background-color: #fff;
}

All other <ul> elements elsewhere on the page will still obey the global rule.  If there's no container around the <ul>, then give that an id or class attribute so you can create unique style rules for it, like

<ul id="menu">
  <li>...</li>
</ul>

You use the same basic method as before to make the rules, e.g.

ul#menu {...}
ul#menu li {...}

Unfortunately there's no 'shorthand' approach to dispel every rule you've already declared; you have to replace each attribute with your preferred value for the target element.  Even if you did wave a wand and kill every style in the target (there's possibly a way with javascript), you'd still have to replace them or the target would have *no style*, and who wants that??
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

704 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