stackoom
  简体   繁体   中英

Multiple CSS styles disrupting eachother

 原文  2016-01-27 15:11:26  8   1    html/ css/ styles/ overlap

Question

I've been trying to have my website's navigation bar markup in a seperate file, and then include it on the head of all the website's pages. However, I use a css style named navstyles.css for my toolbar and in my other page i use a css style named mainstyle.css and they seem to mess up when used in the same file (even tho im using them at different times)

toolbarkmarkup.php 

<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/navstyles.css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="./scripts/navscript.js"></script>

    <div class = "container">
        <div id='cssmenu'>
            <ul id = "ulyo">
                <li class = "logoSpace" id = "logoSpace"><a href = '#'></a></li>
                <li><a href='#'>Home</a></li>
                <li><a href='#'>Search</a></li>
                <li><a href='#'>Trends</a></li>
                <li class = "emptySpace" id = "emptySpace"><a href='#'></a></li>
                <li class = "profileSpace" id = "profileSpace"><a href='#'>Profile</a>
                    <ul>
                        <li><a href='#'>Settings</a></li>
                        <li><a href='#'>Log Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <script>
        pos();
    </script>
</head>
<body>
</body>

showpage.php 

<head>
    <?php
    include 'toolbarmarkup.php';
    ?>
    <link rel="stylesheet" type="text/css" href="./css/mainstyle.css"/>
</head>
<body></body>

mainstyle.css 

 body { white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ background: #f9f9f9; font-family: 'Helvetica'; line-height: 20px; } .header{ width: 100%; height: auto; background-color: blue; } .image{ margin: auto; width :100%; height: auto; max-height : 500px; padding-bottom: 70px; } .infoText{ padding-top: 20px; vertical-align:middle; margin: auto; max-width: 900px; width: 90%; color: #262626; font-family: Arial, Helvetica, sans-serif; font-size: 16; } .titleText{ margin: auto; font-size: 30; font-family: Century Gothic, sans-serif; text-align: center; color: black; } .buttons{ margin: auto; text-align: center; padding: 10px; height: 45px; width : 120px; } .buttons img{ margin-left:auto; margin-right:auto; } img:hover{ opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ }

navstyles.css 

 @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } body{ line-height: 0px; } .content{ background: red; } .logoSpace{ width: 200px; text-align: center; background-image: url("./img/logo.png");/ background-repeat: no-repeat; background-position: center center; top: 6px; } .form{ display:inline; } .profileSpace{ content: "efuh"; } .container{ width: 100%; background: grey; height: 47px; position: fixed; top: 0px; left: 0px; background: #333333; } #cssmenu #menu-button { display: none; } #cssmenu { height: inherit; position: fixed; top: 0px; left: 0px; font-family: Helvetica, sans-serif; background: #333333; } #cssmenu > ul > li { float: left; } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-center ul ul { text-align: left; } #cssmenu.align-right > ul > li { float: right; } #cssmenu > ul > li > a { padding: 15px; padding-top: 19px; font-size: 12px; letter-spacing: 1px; text-decoration: none; color: #dddddd; font-weight: 700; text-transform: uppercase; } #cssmenu > ul > li:hover > a { color: #ffffff; } #cssmenu > ul > li.has-sub > a { padding-right: 30px; } #cssmenu > ul > li.has-sub > a:affrter { position: absolute; top: 22px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; } #cssmenu > ul > li.has-sub > a:before { position: absolute; top: 19px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } #cssmenu > ul > li.has-sub:hover > a:before { top: 23px; height: 0; } #cssmenu ul ul { position: absolute; left: -9999px; } #cssmenu.align-right ul ul { text-align: right; } #cssmenu ul ul li { height: 0; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } #cssmenu li:hover > ul { left: auto; } #cssmenu.align-right li:hover > ul { left: auto; right: 0; } #cssmenu li:hover > ul > li { height: 35px; } #cssmenu ul ul ul { margin-left: 100%; top: 0; } #cssmenu.align-right ul ul ul { margin-left: 0; margin-right: 100%; } #cssmenu ul ul li a { border-bottom: 1px solid rgba(150, 150, 150, 0.15); padding: 11px 15px; width: 170px; font-size: 12px; text-decoration: none; color: #dddddd; font-weight: 400; background: #333333; background: #525252; } #cssmenu ul ul li:last-child > a, #cssmenu ul ul li.last-item > a { border-bottom: 0; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover { color: #ffffff; background: #333333; } #cssmenu ul ul li.has-sub > a:after { position: absolute; top: 16px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; } #cssmenu.align-right ul ul li.has-sub > a:after { right: auto; left: 11px; } #cssmenu ul ul li.has-sub > a:before { position: absolute; top: 13px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } #cssmenu.align-right ul ul li.has-sub > a:before { right: auto; left: 14px; } #cssmenu ul ul > li.has-sub:hover > a:before { top: 17px; height: 0; } @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { body{ line-height: 0px; font-size: 0px; } #emptySpace{ width: 0px; height: 0px; background: green; display:none; visibility: hidden; } .logoSpace{ width: 0px; height: 0px; background: grey; content: ''; visibility: hidden; } #cssmenu { width: 100%; } #cssmenu ul { width: 100%; display: none; } #cssmenu.align-center > ul { text-align: left; } #cssmenu ul li { width: 100%; border-top: 1px solid rgba(120, 120, 120, 0.2); background: #333333; } #cssmenu ul ul li, #cssmenu li:hover > ul > li { height: auto; } #cssmenu ul li a, #cssmenu ul ul li a { width: 100%; border-bottom: 0; } #cssmenu > ul > li { float: none; } #cssmenu ul ul li a { padding-left: 25px; } #cssmenu ul ul ul li a { padding-left: 35px; } #cssmenu ul ul li a { color: #dddddd; background: #525252; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > a { color: #ffffff; background: #333333; } #cssmenu ul ul, #cssmenu ul ul ul, #cssmenu.align-right ul ul { position: relative; left: 0; width: 100%; margin: 0; text-align: left; } #cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before { display: none; } #cssmenu #menu-button { display: block; padding: 17px; color: #dddddd; cursor: pointer; font-size: 12px; text-transform: uppercase; font-weight: 700; } #cssmenu #menu-button:after { position: absolute; top: 22px; right: 17px; display: block; height: 4px; width: 20px; border-top: 2px solid #dddddd; border-bottom: 2px solid #dddddd; content: ''; } #cssmenu #menu-button:before { position: absolute; top: 16px; right: 17px; display: block; height: 2px; width: 20px; background: #dddddd; content: ''; } #cssmenu #menu-button.menu-opened:after { top: 23px; border: 0; height: 2px; width: 15px; background: #ffffff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #cssmenu #menu-button.menu-opened:before { top: 23px; background: #ffffff; width: 15px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #cssmenu .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: 1px solid rgba(120, 120, 120, 0.2); height: 46px; width: 46px; cursor: pointer; } #cssmenu .submenu-button.submenu-opened { background: #262626; } #cssmenu ul ul .submenu-button { height: 34px; width: 34px; } #cssmenu .submenu-button:after { position: absolute; top: 22px; right: 19px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; } #cssmenu ul ul .submenu-button:after { top: 15px; right: 13px; } #cssmenu .submenu-button.submenu-opened:after { background: #ffffff; } #cssmenu .submenu-button:before { position: absolute; top: 19px; right: 22px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; } #cssmenu ul ul .submenu-button:before { top: 12px; right: 16px; } #cssmenu .submenu-button.submenu-opened:before { display: none; } }

Problem is, the body seems to take styles from the header style and vice versa, any advice? Appreciate it

1 answers

solution1
 1  2016-01-27 16:02:17

Since both CSS files will be sent to the browser for the page, both CSS files will be used by the browser for the whole page. Once that happens, you're at the mercy of CSS specificity rules. This is too much CSS to solve in a forum like this but here are some resources that might help you understand the problem:

Mozilla Developer Network

Quora post on CSS ordering

Smashing Magazine Article

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question CSS multiple div styles Multiple CSS Styles Multiple styles in tooltip? CSS Div Disrupting My CSS Menu Angular Tags disrupting CSS stylings Setting multiple paragraph styles in css Multiple CSS Styles on the same page Adding multiple styles to a div in css Multiple CSS styles on a html button How to add multiple CSS styles to an element with .css()
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM