/* \t Suburban Dogma Main Stylesheet
\t v1.0 10/19/2014
\t Author: Bob
*/
/*------------------------------------------------------------------------------Header Section--------------------------------------------------------------------------------*/
#social-icons {
\t float: right;
\t position: relative;
\t top: 0.6em;
\t right: 3em;
}
.soc-icon {
\t margin-right: 0.3em;
}
.header {
\t width: 100%;
\t position: fixed;
\t background-color: #2C2C2C;
\t width: 100%;
\t height: 3em;
}
#menu-logo {
\t max-width: 100%;
\t max-height: 100%;
\t position: relative;
\t top: 0.7em;
\t left: 0.3em;
}
#menu-square {
\t max-width: 100%;
\t max-height: 100%;
\t position: relative;
\t top: 0.6em;
\t left: 0.3em;
}
#menu-title {
\t text-decoration: none;
\t position: relative;
\t top: 0.3em;
\t right: 0.6em;
\t font-family: Verdana;
\t font-weight: 700;
\t font-size: 12px;
\t color: #DDD;
}
#menu-logo-semi {
\t display: none;
}
#menu-logo-small {
\t display: none;
}
#icon-tw-dark {
\t height: 30px;
\t width: 30px;
}
/*---------------------------------------------------------------------------Menu Section-------------------------------------------------------------------------------------*/
.list-menu {
\t padding: 0.9em 0em 0.9em 0.5em;
}
.list-header {
\t background-color: #232323;
}
.list-header p {
\t padding: 0.5em 0em 0.5em 1.5em;
\t color: #606060;
\t font-family: Verdana;
\t font-weight: 700;
\t font-size: 80%;
}
#section-two a:hover {
\t color: #18bf13
} \t
#section-three a:hover {
\t color: #e2e21b;
}
#section-four a:hover {
\t color: #ac1db7;
}
#section-home {
\t position: relative;
\t left: 0.1em;
\t background-image: url('../images/menu-icons/image-home.png');
\t background-position: left center;
\t background-repeat: no-repeat;
\t padding-left: 1.5em;
}
#section-one {
\t position: relative;
\t left: 0.1em;
\t background-image: url('../images/menu-icons/image-before-blue.png');
\t background-position: left center;
\t background-repeat: no-repeat;
\t padding-left: 1.5em;
}
#section-two {
\t position: relative;
\t left: 0.1em;
\t background-image: url('../images/menu-icons/image-before-green.png');
\t background-position: left center;
\t background-repeat: no-repeat;
\t padding-left: 1.5em;
}
#section-three {
\t position: relative;
\t left: 0.1em;
\t background-image: url('../images/menu-icons/image-before-yellow.png');
\t background-position: left center;
\t background-repeat: no-repeat;
\t padding-left: 1.5em;
}
#section-four {
\t position: relative;
\t left: 0.1em;
\t background-image: url('../images/menu-icons/image-before-purple.png');
\t background-position: left center;
\t background-repeat: no-repeat;
\t padding-left: 1.5em;
}
.other-section {
\t padding-left: 1.5em;
}
<!DOCTYPE html>
<html>
<head>
\t <title>Suburban Dogma | Magazine</title>
\t \t
\t <!--Metas-------------------------------------------------------------------------------------------------------------------->
\t <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
\t
\t <!--Fonts----------------------------------------------------------------------------------------->
\t <link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
\t
\t <!--Stylesheets/Scripts------------------------>
\t <link rel="stylesheet" href="reset.css">
\t <link rel="stylesheet" href="slidebars.min.css">
\t <link rel="stylesheet" href="style.css">
\t <link rel="stylesheet" href="responsive-style.css">
</head>
<body> \t
\t
<!--All content-->
<div id="sb-site">
\t <!--Top navigation bar--------->
\t <div id="header" class="header">
\t \t \t <!--Logo Image---------------------------------------------------------------------------->
\t \t \t <a href="/index.html"><img id="menu-logo" src="../images/logo.svg"/></a>
\t \t \t <a href="/index.html"><img id="menu-logo-semi" src="../images/logo-semi.svg"/></a>
\t \t \t <a href="/index.html"><img id="menu-logo-small" src="../images/logo-short.svg"/></a>
\t \t \t <!--Toggle sidebar menu----------------------------------------------------------------------------------------->
\t \t \t <a href="#" class="sb-toggle-left button left-align"><img src="../images/menu48.svg" id="menu-square" class="icon"/></a>
\t \t \t <!--Menu title-------------------------------------------------------------->
\t \t \t <a href="#" id="menu-title" class="sb-toggle-left button left-align">MENU</a>
\t \t \t <!--Row of social media icons/links------------------------------------------------------------------------------------------------------------------->
\t \t \t <div id="social-icons">
\t \t \t \t <a href="#"><img id="icon-fb" class="soc-icon" src="../images/menu-icons/icon-fb-dark.png" onmouseover="this.src='../images/menu-icons/icon-fb-color.png'" onmouseout="this.src='../images/menu-icons/icon-fb-dark.png'"/></a>
\t \t \t \t <a href="#"><img id="icon-tw" class="soc-icon" src="../images/menu-icons/icon-tw-dark.png" onmouseover="this.src='../images/menu-icons/icon-tw-color.png'" onmouseout="this.src='../images/menu-icons/icon-tw-dark.png'"/></a>
\t \t \t \t <a href="#"><img id="icon-ig" class="soc-icon" src="../images/menu-icons/icon-ig-dark.png" onmouseover="this.src='../images/menu-icons/icon-ig-color.png'" onmouseout="this.src='../images/menu-icons/icon-ig-dark.png'"/></a>
\t \t \t \t <a href="#"><img id="icon-tu" class="soc-icon" src="../images/menu-icons/icon-tu-dark.png" onmouseover="this.src='../images/menu-icons/icon-tu-color.png'" onmouseout="this.src='../images/menu-icons/icon-tu-dark.png'"/></a> \t
\t \t \t </div>
\t </div>
</div>
<!--Add left sidebar with push control-------->
<div class="sb-slidebar sb-left sb-style-push">
\t <nav>
\t \t <ul>
\t \t \t <li id="section-home" class="list-menu"><a href="#">HOME</a></li>
\t \t \t <li class="list-header"><p id="sections">SECTIONS</a></li>
\t \t \t <li id="section-one" class="list-menu"><a href="#">Music</a></li>
\t \t \t <li id="section-two" class="list-menu"><a href="#">Style</a></li>
\t \t \t <li id="section-three" class="list-menu"><a href="#">Pop Culture</a></li>
\t \t \t <li id="section-four" class="list-menu"><a href="#">Tech</a></li>
\t \t \t <li class="list-header"><p id="other">OTHER</a></li>
\t \t \t <li class="list-menu other-section"><a href="#">About Us</a></li>
\t \t \t <li class="list-menu other-section"><a href="#">Contact</a></li>
\t \t </ul>
\t </nav>
</div>
<!--Link to jQuery and other scripts------------------------------------------------------->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery.min.js"><\/script>')</script>
<!--Script to run slidebar-------------------> \t
<script src="slidebars.min.js"></script>
<script>
\t (function($) {
\t \t $(document).ready(function() {
\t \t \t $.slidebars();
\t \t });
\t }) (jQuery);
</script>
</body>
</html>
我終於創造我的頭,一切都在我的網站,但現在當我嘗試添加內容到它卡住在頁面最底部的身體像一個頁腳。
任何人都可以給我一些見解嗎?
另外,當我嘗試添加內容後我的標題div和我的網站div之前,它不顯示任何內容。
我使用了第三方jQuery插件,但我遵循正確的使用情況,以便不應該被影響,但這裏是一個refrence:
My website in progress with the html and css
My menu usage guide in case you want to check the syntax on it
任何幫助,將不勝感激因爲我現在堅持這一點,我只是無法得到任何HTML顯示正確後,導航菜單
如果你自己嘗試的代碼,你可以跳過通過reset.css和responsive.css作爲這些都是不言自明的。
請張貼您的代碼。一旦問題解決,這個問題就會過時。 – BenM 2014-10-20 15:24:44
是啊郵政編碼或至少在您當前的網站正文發佈內容,所以我們可以確定問題,空白頁上的標題不會幫助 – jmore009 2014-10-20 15:25:10
嗯,有很多代碼,我認爲人們只是檢查源代碼。 – Bob 2014-10-20 15:33:13