2014-10-20 95 views
-2

HTML粘頁底部

/* \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作爲這些都是不言自明的。

+1

請張貼您的代碼。一旦問題解決,這個問題就會過時。 – BenM 2014-10-20 15:24:44

+1

是啊郵政編碼或至少在您當前的網站正文發佈內容,所以我們可以確定問題,空白頁上的標題不會幫助 – jmore009 2014-10-20 15:25:10

+0

嗯,有很多代碼,我認爲人們只是檢查源代碼。 – Bob 2014-10-20 15:33:13

回答

0

這很簡單。您的標題設置爲position: fixed,因此當您在標題下添加內容時,它實際上位於標題後面,因爲fixed會將元素從文檔流中分離出來。至於底部的文字。 #sb-site上有min-height: 518px。因此,如果您將內容放置在#sb-site以下(而不是其中),那麼它將在518px之下。

+0

謝謝你的回答。你如何建議我保持標題堅持頂部呢? – Bob 2014-10-20 15:56:27

+0

你做的是正確的事情,'position:fixed'是正確的,你希望它永遠在那裏。你需要做的是把你的內容放在標題下面。你可以使用'padding'。你的標題是'48px'高,所以你可以添加一個'div'容器並將頂部填充設置爲'48px'。基本上,如果有意義的話,你需要讓你的內容在標題高度以下開始。 – jmore009 2014-10-20 15:58:24

+0

是的,這是完美的感謝你 – Bob 2014-10-20 16:04:56