Solved

How to bypass global CSS

Posted on 2006-06-26
12
1,837 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
  • 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
 

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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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 500 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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
API Soap Calls 4 58
HTML 5 video and audio or Flash 1 29
USE HTML to redirect a webpage to a local Xcel file. 2 22
HTML CSS 7 17
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now