Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How Prevent CSS from being applied (scope)

    Hi
    I downloaded and installed a php application that generates nice output.
    The only thing left to do is add a navigation menu at the top of the page.
    I searched around and found several examples of navigation menus and they all involve a CSS stylesheet.
    The problem is that the CSS from the navigation header messes-up the output from the application.

    How can I prevent the CSS from the header from being applied to the output of the app?

    I really cannot modify the app (I mean I downloaded an app so that I would not have to write one or re-engineer it).

    I assume there must be a way to do this as every programming language with which I am familiar (with the exception of BASIC) has a "scope" for things like variables and code.

    Thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,793
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    CSS is not a programming language but you can still apply kind of a “scope”. All you have to do is address a specific HTML class or ID that the navigation has and your app doesn’t have.
    For example, if your navigation HTML looks like this:

    Code:
    <ul>
      <li><a>link</a></li>
      <li><a>link</a></li>
      <li><a>link</a></li>
      …
    </ul>
    You just need to add a class or ID to the outermost element of the navigation and use that as primary CSS selector for all styling (of course, if the nav already has some specific class or ID you can just use that, you don’t have to add another):

    Code:
    <ul class="nav">
      <li><a>link</a></li>
      <li><a>link</a></li>
      <li><a>link</a></li>
      …
    </ul>
    Code:
    .nav {…}
    .nav li {…}
    .nav a {…}

  • #3
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    For example, if your navigation HTML looks like this:
    Thanks that worked great. I had been bashing at it like a caveman for a week.

    At the risk of pushing it....

    I made the modifications you recommended to a small CSS file (it had about 20 lines and 6 or 7 line changes).
    I was hoping to make a fancier menu using metroui (Metro UI CSS : Metro Bootstrap CSS Library).
    If I take just one of their CSS files (the main file called metro-bootstrap.css) and include it in the header, it messes up the application output below.
    So I'm just including the CSS file and not using anything from it at this point.
    As metroui is (for me) a complicated app with several CSS files, I don't think it would be practical for me to go into the CSS files and try to modify things.
    Is there anything I can do so that I can use metroui so that its CSS doesn't mess up the following app output (am I doing something wrong)?

  • #4
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can provide some more information.

    Here is a snip from the application output as grabbed from my browser.
    Basically the height of these input fields has shrunk so that the text inside the field is chopped off.
    Code:
    <div class='form-input-box' id="description_input_box">
    					<input id='field-description' name='description' type='text' value="some text" maxlength='60' />				</div>
    So when I include the metroui CSS file in the web page it is shrinking the height of the input boxes for some reason.
    So far that is the only distortion that I can see (there may be others).
    I don;t know if that helps.

  • #5
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I "think" I found it.

    Again, bashing around like a caveman, I found that if I remove this section from the metro-bootstrap.css file, it stopped the mess-up if the subsequent app output:
    Code:
    html,
    body,
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box;
    }
    I have no clue if removing it is bad or will affect other things. And have no clue if there are other conflicts that I haven't seen yet.

    I wonder if I'm missing some hard-n-fast rule about how to combine sections of an HTML page without having them destroy each other.
    I've only tried to put together one simple-pimple app that adds a header to the main page output and I have run problems.
    There must be millions of people downloading millions of pre-made sections, and do all of these people have to go in a re-engineer the already working code so that they play nice together?
    It kinda defeats the purpose of downloading working code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •