Question

我正在为我正在工作的网站设计一个自定义Joomla模板，并且设计非常独特。到目前为止，该项目一直进展顺利，但现在我的导航栏出现了css问题，我不能为我的生活弄清楚为什么我无法修复它。这是使用HTML和CSS正确定位导航栏的页面，没有与Joomla集成的Bootstrap框架。

正如我所说，这是完美的。然而，一旦我添加了bootstrap css，我最终会看到如下所示的导航栏，我所做的一切都无法修复它。

请参阅下面的index.html和custom.css文件。

的index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-extended.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
</head>

<body>
<header role="banner" class="row-fluid">
    <div class="span8">
        <a href="/"><img src="images/site_logo.png" alt="Shamrock Tours, click for home." id="headerimage"></a>
    </div>
    <div class="span4">
    User menu goes here.
    </div>
</header>

<nav class="row-fluid">
    <div class="span12">
    Nav menu goes here.
    </div>
</nav>

<div id="innerbody">
<aside class="row-fluid">
    <div class="span4">
    Sidebar goes here.
    </div>
</aside>

</body>
</html>

custom.css

@charset "utf-8";
/* Main Styles for Shamrock Tours Website */

/* CSS Reset */

a,
article,
aside,
body,
h1,
h2,
h3,
h4,
h5,
h6,
html,
img {
    margin: 0;
    padding: 0;
}


/* General Element Styling */

html {
    background: #0D8330;
}

body {
    border: 5px double #000;
    border-radius: 10px;
    box-sizing:border-box;
    font-family: "IM Fell French Canon";
    background: transparent;
    font-size: 1em;

}

h1,
h2,
h3 {
    font-weight: bold;
}

h1 {
    font-size: 2.25em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.125em;
}


/* Header */

header {
    margin: 25px 25px 0;
}

#headerimage {
    float: left;
    width: 41%;
    margin-left: 10px;
    line-height: 2;
}

header h1 {
    position: relative;
    top: -10px;
    left: 150px;
    width: 500px;
    text-shadow: 1px -1px #fff;
    text-align: center;
}

/* Navigation */

nav {
    position: relative;
    top: -70px;
    left: 345px;
    height: 75px;
    border-radius: 10px;
    box-shadow: 0 4px #666;
    background: rgba(8,138,43,0.9);
    line-height: 2;
}

/* Content */

#innerbody {
    position: relative;
    top: -103px;
    width: 95%;
    min-height: 450px;
    margin: 0 auto;
    padding: 75px 15px;
    border-radius: 10px;
    background: #fff;
    z-index: -1;
}

article {
    float: right;
    width: 70%;

}

article h2 {
    margin: 1.05em 0;
    text-shadow: 1px 1px #666;
}

article h3 {
    line-height: 1.2;
}

aside {
    float: left;
    width: 20%;
}

/* Footer */

#footercontainer {
    position: relative;
}

footer {
    position: absolute;
    bottom: 0;
    font-size: 0.875em;
}

您可以提供有关问题和解决方案的任何建议，我们将不胜感激。非常感谢！

Answer 1

如果不看现场网站，为您精确定位会有点棘手。看起来你的HTML中的某些东西被引导程序CSS作为目标，而选择器比你的选择器更强，因此它会杀死你的菜单。您可以在CSS选择器上花费更精确，或者您可以添加“重要”＆＃39;到每个CSS规则的末尾与你的菜单（但大多数人说这是不好的做法）。如果你用铬合金拉出来并做一个检查元素，你就可以精确定位一个区域，看看影响它的每一个CSS以及它的位置。

这就是我不使用Bootstrap的原因，一半的时间都浪费了！＃/ p>

自定义Joomla模板导航栏格式问题

1 个答案: