2016-11-11 57 views
1

我試圖做一些事情,我已經搜索論壇,並瀏覽了4個多小時的網頁。我也用很多不同的方式做了很多嘗試和錯誤,但他們沒有按照我所做的來做。我刪除了所有的試驗和錯誤,並將代碼保留爲最小。HTML-中心頁面上的圖像,並有div浮動左出標誌中心徽標

我希望徽標位於頁面中心不居中的區域,只有在左浮動後才應用。

這裏是一個網站的現場演示: http://rissew.com/

這就是我要做的: WireFrame - What i want to look like

也許浮動不這樣做的正確方法。這就是爲什麼我轉向這裏的人。

@charset "UTF-8"; 
 

 

 
html { 
 
    font-family: sans-serif; 
 
} 
 

 
body { 
 
    margin: 0 
 
} 
 

 
a { 
 
    color: #B90000; 
 
    text-decoration: none; 
 
} 
 
a:focus, 
 
a:hover { 
 
    color: #15c; 
 
    outline: 0 
 
} 
 
a:hover { 
 
    color: #15c 
 
} 
 

 
*, 
 
:after, 
 
:before { 
 
    box-sizing: border-box 
 
} 
 

 
body { 
 
    font-family: "Titillium Web Regular", Helvetica, Arial, sans-serif; 
 
    line-height: 1.42857143; 
 
    color: #4d4d4d; 
 
    background-color: #f1f1f1; 
 
    overflow-x: hidden 
 
} 
 

 
.header { 
 
    background: #fff; 
 
    position: relative; 
 
    box-shadow: 0 10px 10px -6px rgba(0, 0, 0, .1) 
 
} 
 

 
.header .container { 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
    width: 100% 
 
} 
 

 
.nav { 
 
    background-color: #fff; 
 
    border-top: 2px solid #f6f6f6; 
 
    position: relative; 
 
    z-index: 2 
 
} 
 

 
.nav:after, 
 
.nav:before { 
 
    content: ""; 
 
    display: table 
 
} 
 

 
.nav:after { 
 
    clear: both 
 
} 
 

 
.navlist { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    text-align: center 
 
} 
 

 
@media screen and (min-width:767px) { 
 
    .page-nav__list { 
 
     width: 767px 
 
    } 
 
} 
 

 
@media screen and (min-width:989px) { 
 
    .navlist { 
 
     width: 989px 
 
    } 
 
} 
 
@media screen and (min-width:1199px) { 
 
    .navlist { 
 
     width: 1200px 
 
    } 
 
} 
 

 
.page-nav__item { 
 
    margin: 0; 
 
    padding: 0 5px; 
 
    display: block; 
 
    width: 16.666666667%; 
 
    line-height: 1; 
 
    float: left 
 
} 
 

 
.navlink { 
 
    font-size: .75rem; 
 
    font-family: "Titillium Web Semibold", "Open Sans Bold", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
    letter-spacing: .05em; 
 
    color: #666; 
 
    padding: 10px 0; 
 
    display: block; 
 
    border-bottom: 3px solid #ccc 
 
} 
 

 
.navlink:focus, 
 
.navlink:hover { 
 
    color: #B90000; 
 
    border-color: #B90000 
 
} 
 

 
.navlink.active { 
 
    color: #B90000; 
 
    border-bottom: 3px solid #B90000 
 
} 
 

 
.sociallink{ 
 
    display: block; 
 
} 
 

 
.sociallist { 
 
    list-style: none; 
 
    padding: 0; 
 
    max-width: 1450px; 
 
    margin-top: 0; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.sociallist li { 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
    display: inline-block 
 
} 
 

 
.youtube{ 
 
    display: block; 
 
    height: 26px; 
 
    width: 26px; 
 
    background-image: url('http://www.rissew.com/assets/images/youtube.png'); 
 
    background-size: contain; 
 
    text-indent:-9999px; 
 
} 
 

 
.youtube:hover { 
 
    background-image: url('http://www.rissew.com/assets/images/youtubehover.png'); 
 
} 
 

 
.facebook{ 
 
    display: block; 
 
    height: 26px; 
 
    width: 26px; 
 
    background-image: url('http://www.rissew.com/assets/images/facebook.png'); 
 
    background-size: contain; 
 
    text-indent:-9999px; 
 
} 
 

 
.facebook:hover { 
 
    background-image: url('http://www.rissew.com/assets/images/facebookhover.png'); 
 
} 
 

 
.twitch{ 
 
    display: block; 
 
    height: 26px; 
 
    width: 26px; 
 
    background-image: url('http://www.rissew.com/assets/images/twitch.png'); 
 
    background-size: contain; 
 
    text-indent:-9999px; 
 
} 
 

 
.twitch:hover { 
 
    background-image: url('http://www.rissew.com/assets/images/twitchhover.png'); 
 
} 
 

 
.twitter{ 
 
    display: block; 
 
    height: 26px; 
 
    width: 26px; 
 
    background-image: url('http://www.rissew.com/assets/images/twitter.png'); 
 
    background-size: contain; 
 
    text-indent:-9999px; 
 
} 
 

 
.twitter:hover { 
 
    background-image: url('http://www.rissew.com/assets/images/twitterhover.png'); 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
\t <head> 
 
\t \t <meta charset="utf-8" /> 
 
     <title>Rissew Gaming - Where the Frag Happens</title> 
 
     <link rel="stylesheet" type="text/css" href="assets/css/style.css" /> 
 
     <link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png"> 
 
\t </head> 
 
    <body> 
 
    <header id="header" class="header"> 
 
      <ul class="sociallist"> 
 
       <li class="youtube"><a href="https://www.youtube.com/channel/UCyNi8D-XcpZnZAQVlzQj2RQ" class="sociallink">youtube</a></li> 
 
       <li class="facebook"><a href="http://www.facebook.com/RissewGaming" class="sociallink">facebook</a></li> 
 
       <li class="twitter"><a href="http://www.twitter.com/RissewGaming" class="sociallink">twitter</a></li> 
 
       <li class="twitch"><a href="http://www.twitch.tv/Rissew" class="sociallink">twitch</a></li> 
 
      </ul>   
 
      <img class ="headerbig" source="assets/images/headerbig.png"alt="Rissew Gaming"> 
 
      <nav class="nav"> 
 
      <ul class="navlist"> 
 
       <li class="page-nav__item"><a href="index.html" title="" class="navlink active">Home</a></li> 
 
       <li class="page-nav__item"><a href="about.html" title="" class="navlink">About</a></li> 
 
       <li class="page-nav__item"><a href="guides.html" title="" class="navlink">Guides</a></li> 
 
       <li class="page-nav__item"><a href="forum.html" title="" class="navlink">Forum</a></li> 
 
       <li class="page-nav__item"><a href="shop.html" title="" class="navlink">Shop</a></li> 
 
       <li class="page-nav__item"><a href="watch.html" title="" class="navlink">Watch</a></li> 
 
      </ul> 
 
      </nav> 
 
    </header> 
 
     
 
     <main> 
 
     </main> 
 
     <footer> 
 
      <p> 
 
      </p> 
 
     </footer> 
 
    </body>

+0

當鏈接不符合標誌的左側應該發生什麼? – LGSon

+0

不知道你在這裏試圖達到什麼 –

+0

問題被刪除,因爲評論被輸入:你不知道如何傳遞「整個JComboBox」的問題尚不清楚。它是一個對象,就像任何其他對象一樣,它的引用可以從一個類傳遞到另一個類,就像您對其他引用類型的引用一樣,例如通過方法或構造函數參數。 –

回答

2

可能這是你在找什麼,我希望。

.sociallist{ 
    float: left; 
} 

和風格.headerbig添加float:left.sociallist作爲

.headerbig { 
    display: block; 
    max-width: 120px; 
    float: none; 
    margin-right: auto; 
    margin-left: auto; 
} 
+1

我建議在你的答案中包含'clear'的使用,如果你要建議'float',但是我個人認爲這對於'float'不是一個很好的用例。 – Santi

+0

我嘗試過,但是它基於可用空間而居中它比頁面中間的位置更靠右。我希望徽標中心位於頁面中間,社會主義者位於左側。我上傳了網站rissew.com,你可以看到我的意思。 – Ken

+0

我認爲你已經實現了它ryt – Manjunath

0

我的建議是改變你的.sociallistposition: absolute; left: 0;,使其附着在左側不管其他元素。然後,您可以將寬度放在您的.headerbig上,並將其設置爲margin: 0 auto;,以使其居中。

.headerbig { 
    display: block; 
    width: 120px; /* YOUR IMAGE WIDTH HERE */ 
    margin: 0 auto; 
} 

.sociallist { 
    position: absolute; 
    left: 0; 
} 

@charset "UTF-8"; 
 

 

 
html { 
 
    font-family: sans-serif; 
 
} 
 

 
body { 
 
    margin: 0 
 
} 
 

 
a { 
 
    color: #B90000; 
 
    text-decoration: none; 
 
} 
 
a:focus, 
 
a:hover { 
 
    color: #15c; 
 
    outline: 0 
 
} 
 
a:hover { 
 
    color: #15c 
 
} 
 

 
*, 
 
:after, 
 
:before { 
 
    box-sizing: border-box 
 
} 
 

 
body { 
 
    font-family: "Titillium Web Regular", Helvetica, Arial, sans-serif; 
 
    line-height: 1.42857143; 
 
    color: #4d4d4d; 
 
    background-color: #f1f1f1; 
 
    overflow-x: hidden 
 
} 
 

 
.header { 
 
    background: #fff; 
 
    position: relative; 
 
    box-shadow: 0 10px 10px -6px rgba(0, 0, 0, .1) 
 
} 
 

 
.header .container { 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
    width: 100% 
 
} 
 

 
.headerbig { 
 
    display: block; 
 
    width: 120px; 
 
    margin: 0 auto; 
 
} 
 

 
.nav { 
 
    background-color: #fff; 
 
    border-top: 2px solid #f6f6f6; 
 
    position: relative; 
 
    z-index: 2 
 
} 
 

 
.nav:after, 
 
.nav:before { 
 
    content: ""; 
 
    display: table 
 
} 
 

 
.nav:after { 
 
    clear: both 
 
} 
 

 
.navlist { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    text-align: center 
 
} 
 

 
@media screen and (min-width:767px) { 
 
    .page-nav__list { 
 
     width: 767px 
 
    } 
 
} 
 

 
@media screen and (min-width:989px) { 
 
    .navlist { 
 
     width: 989px 
 
    } 
 
} 
 
@media screen and (min-width:1199px) { 
 
    .navlist { 
 
     width: 1200px 
 
    } 
 
} 
 

 
.page-nav__item { 
 
    margin: 0; 
 
    padding: 0 5px; 
 
    display: block; 
 
    width: 16.666666667%; 
 
    line-height: 1; 
 
    float: left 
 
} 
 

 
.navlink { 
 
    font-size: .75rem; 
 
    font-family: "Titillium Web Semibold", "Open Sans Bold", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
    letter-spacing: .05em; 
 
    color: #666; 
 
    padding: 10px 0; 
 
    display: block; 
 
    border-bottom: 3px solid #ccc 
 
} 
 

 
.navlink:focus, 
 
.navlink:hover { 
 
    color: #B90000; 
 
    border-color: #B90000 
 
} 
 

 
.navlink.active { 
 
    color: #B90000; 
 
    border-bottom: 3px solid #B90000 
 
} 
 

 
.sociallink{ 
 
    display: block; 
 
} 
 

 
.sociallist { 
 
    list-style: none; 
 
    padding: 0; 
 
    max-width: 1450px; 
 
    margin-top: 0; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    position: absolute; 
 
    left: 0; 
 
} 
 

 
.sociallist li { 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
    display: inline-block 
 
} 
 

 
.youtube{ 
 
    display: block; 
 
    height: 26px; 
 
    width: 26px; 
 
    background-image: url('http://www.rissew.com/assets/images/youtube.png'); 
 
    background-size: contain; 
 
    text-indent:-9999px; 
 
} 
 

 
.youtube:hover { 
 
    background-image: url('http://www.rissew.com/assets/images/youtubehover.png'); 
 
} 
 

 
.facebook{ 
 
    display: block; 
 
    height: 26px; 
 
    width: 26px; 
 
    background-image: url('http://www.rissew.com/assets/images/facebook.png'); 
 
    background-size: contain; 
 
    text-indent:-9999px; 
 
} 
 

 
.facebook:hover { 
 
    background-image: url('http://www.rissew.com/assets/images/facebookhover.png'); 
 
} 
 

 
.twitch{ 
 
    display: block; 
 
    height: 26px; 
 
    width: 26px; 
 
    background-image: url('http://www.rissew.com/assets/images/twitch.png'); 
 
    background-size: contain; 
 
    text-indent:-9999px; 
 
} 
 

 
.twitch:hover { 
 
    background-image: url('http://www.rissew.com/assets/images/twitchhover.png'); 
 
} 
 

 
.twitter{ 
 
    display: block; 
 
    height: 26px; 
 
    width: 26px; 
 
    background-image: url('http://www.rissew.com/assets/images/twitter.png'); 
 
    background-size: contain; 
 
    text-indent:-9999px; 
 
} 
 

 
.twitter:hover { 
 
    background-image: url('http://www.rissew.com/assets/images/twitterhover.png'); 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
\t <head> 
 
\t \t <meta charset="utf-8" /> 
 
     <title>Rissew Gaming - Where the Frag Happens</title> 
 
     <link rel="stylesheet" type="text/css" href="assets/css/style.css" /> 
 
     <link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png"> 
 
\t </head> 
 
    <body> 
 
    <header id="header" class="header"> 
 
      <ul class="sociallist"> 
 
       <li class="youtube"><a href="https://www.youtube.com/channel/UCyNi8D-XcpZnZAQVlzQj2RQ" class="sociallink">youtube</a></li> 
 
       <li class="facebook"><a href="http://www.facebook.com/RissewGaming" class="sociallink">facebook</a></li> 
 
       <li class="twitter"><a href="http://www.twitter.com/RissewGaming" class="sociallink">twitter</a></li> 
 
       <li class="twitch"><a href="http://www.twitch.tv/Rissew" class="sociallink">twitch</a></li> 
 
      </ul>   
 
      <img class ="headerbig" source="assets/images/headerbig.png"alt="Rissew Gaming"> 
 
      <nav class="nav"> 
 
      <ul class="navlist"> 
 
       <li class="page-nav__item"><a href="index.html" title="" class="navlink active">Home</a></li> 
 
       <li class="page-nav__item"><a href="about.html" title="" class="navlink">About</a></li> 
 
       <li class="page-nav__item"><a href="guides.html" title="" class="navlink">Guides</a></li> 
 
       <li class="page-nav__item"><a href="forum.html" title="" class="navlink">Forum</a></li> 
 
       <li class="page-nav__item"><a href="shop.html" title="" class="navlink">Shop</a></li> 
 
       <li class="page-nav__item"><a href="watch.html" title="" class="navlink">Watch</a></li> 
 
      </ul> 
 
      </nav> 
 
    </header> 
 
     
 
     <main> 
 
     </main> 
 
     <footer> 
 
      <p> 
 
      </p> 
 
     </footer> 
 
    </body>

+0

這樣做使得它像我想要的那樣居中,但是它使社交名單總是在左邊,即使頁面打開的時候也非常大。它不會讓寬度與我設置的1450像素保持一致。 – Ken

+0

@Ken如果您在'sociallist'的父級上放置了'position:relative;',它將保持鎖定在該容器的左邊緣,而不會影響其他元素。我會建議使用這種技術。 – Santi