Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1867
  • Last Modified:

How to bypass global CSS

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
mpaert
Asked:
mpaert
  • 4
  • 3
  • 2
  • +1
1 Solution
 
NAORCCommented:
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
 
mpaertAuthor Commented:
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
 
NAORCCommented:
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 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.

 
mpaertAuthor Commented:
this code will appear on all  pages.
0
 
NAORCCommented:
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
 
pradeepsudharsanCommented:
<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
 
Havin_itCommented:
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
 
mpaertAuthor Commented:
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
 
mpaertAuthor Commented:
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
 
Havin_itCommented:
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'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.

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now