2016-11-11 46 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