0
私は働いているウェブサイト用のカスタムJoomlaテンプレートをデザインしています。デザインは非常にユニークです。この時点までは、プロジェクトはうまくいっていますが、現在はナビゲーションバーでCSSの問題が発生しています。なぜ私がそれを修正できないのか理解できていないのです。これは、Joomlaと統合されたBootstrapフレームワークなしで、HTMLとCSSを使ってナビゲーションバーが正しく配置されたページです。私が言ったようにカスタムJoomlaテンプレートナビゲーションバー書式設定
は、それは完璧です。しかし、私がブートストラップ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>
@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;
}