Solved

How to bypass global CSS

Posted on 2006-06-26
12
1,843 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
login jsp example 24 65
tiny glitch in my main slider 3 39
Make Session back to empty 9 30
Output to HTML in powershell 3 25
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

856 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