logo标签列表

负边距未生效

htmlcssmargin
3

我尝试使用负边距让我的标志超出页眉。

期望效果的图片： Psd - How it needs to look

当前错误结果的图片： Code - the error

我对HTML和CSS都很陌生，但我已经尽力在玩弄这段代码并在网上寻找答案（包括此网站），但都没有成功。因此，这是我与这些部分相关的代码：

#logo {
  display: inline-block;
  margin: -30px 0px -100px 10px;
}
.hheader {
  background-color: #005073;
  background-image: -webkit-linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* For Safari 5.1 to 6.0 */
  background-image: -o-linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* For Opera 11.1 to 12.0 */
  background-image: -moz-linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* For Firefox 3.6 to 15 */
  background-image: linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* Standard syntax */
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.4);
  /* Standard syntax */
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.4);
  border-style: solid;
  border-width: 1px;
  border-color: black;
  margin-bottom: 2em;
  margin-top: 30px;
}
<div class="container">
  <div class="hheader">
    <a id="logo" href="/" title="Return to home">
      <img src="images/logo.png" alt="Density Art Logo">
    </a>
  </div>

如果需要，以下是两个完整的代码：
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Density Art - Home</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
    <div class="container">
        <div class="hheader">
            <a id="logo" href="/" title="Return to home">
            <img src="images/logo.png" alt="Density Art Logo">
            </a>
        </div>

        <div class="nav_menu">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Website Design</a></li>           
                    <li><a href="#">Art &amp; Poetry</a></li>  
                    <li><a href="#">Blog &amp; Other</a></li>
                    <li><a href="#">Music &amp; More</a></li>
                    <li><a href="#">Shop</a></li>  
                </ul>
            </nav>
        </div> <!-- end of container-->
    </div> <!-- end of navigator menu bar--> 
</header>


    <div id="content">
        <section id="leftcolumn">

            <h1>Home</h1>

            <h3>Who are we?</h3>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

            <h3>What is our aim?</h3>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

        </section> <!-- end of left column content-->

        <aside id="rightcolumn">

            <h2>Get Connected!</h2>
            <h5>Join our evergrowing community and become a part of Density Art</h5>

            <a href="http://www.facebook.com/" target="_blank"><img src="images/btns/fb.png" alt="Facebook"></a>
            <h4>Facebook</h4>

            <a href="http://www.instagram.com/" target="_blank"><img src="images/btns/ig.png" alt="InstaGram"></a>
            <h4>Instagram</h4>

            <a href="http://www.soundcloud.com/" target="_blank"><img src="images/btns/sc.png" alt="SoundCloud"></a>
            <h4>SoundCloud</h4>


            <a href="http://www.facebook.com/" target="_blank"><img src="images/btns/em.png" alt="Email"></a>
            <h4>Email</h4>


            <a href="http://www.facebook.com/" target="_blank"><img src="images/btns/ph.png" alt="Phone Call"></a>
            <h4>Phone Call</h4>


        </aside> <!--end of right column content-->

    </div> <!-- end of content form-->

<footer>
    <div id="footerbar">

        <p>Copyright &copy; informatrion copyright 2001 etc bnlah blah Copyright informatrion copyright 2001 etc bnlah blah Copyright informatrion copyright 2001 etc bnlah blah</p>

        <hr>

        <h6>Contact us</h6>
        <h6>Legal Terms</h6>
        <h6>Shopping Cart</h6>
        <h6>Facebook</h6>
        <h6>Instagram</h6>



    </div>


</footer>

</body>
</html>

CSS

html {
-webkit-font-smoothing: antialiased;
text-rendering: optimiszelegibility;   
}


body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
color: ebe9e9; 
}

h1, h2 {
font-weight: 700;
margin:0;
line-height: 45px;    
}


h4, h6  {
font-weight: bold;
margin: 5px 0 5px 0;    
}

h1 {
font-size:48px;
}

h2 {
font-size:30px;
}

h3 {
font-size:24px;
font-weight: bold;
}

h4 {
font-size:20px;
line-height: 45px;
}

h5 {
font-size:16px;
font-weight: 600;
margin:0;
line-height: 45px; 
}

h6 {
font-size:12px;
line-height: 20px;
}

p {
margin: 0 0 10px 0;

}

nav ul li{
display: inline;
}

#logo {
display:inline-block;
margin: -30px 0px -100px 10px;
}

.hheader {
background-color: #005073;
background-image: -webkit-linear-gradient(rgba(0,60,80,.8) 0%,        rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8)  50%, rgba(0,60,80,.8) 100%); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* Standard syntax */
box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4);
border-style: solid;
border-width: 1px;
border-color: black;
margin-bottom: 2em;
margin-top: 30px;
}

.container {
width: 960px;
padding: 0 10px;
margin: 0 auto;
}

.nav_menu {
background-color: #005073;
background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */
-moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4);  /* For Firefox 3.6 to 15 */
box-shadow: inset 0px 0px 2px 1x rgba(0,0,0,0.4); /* Standard syntax */
border-style: solid;
border-width: 1px;
border-color: black;
max-height: 2em
}

如果有了解相关知识并且有能力帮助我的善良成员，请用简单易懂的语言回复我。
这是代码的JSFiddle链接：https://jsfiddle.net/7hb9bd58/2/
1
你能否在http://jsfiddle.net上创建一个代码片段，并将链接添加到问题中？ - blurfus
1
非常感谢您的编辑建议和评论，这是我在这里发表的第一篇文章，所以我仍在摸索网站。我已在底部添加了jsfiddle。 - Matt B
尝试设置位置 (top: -10px;)。 - Ben Aubin
1
非常感谢大家的帮助 - 最后一个问题是，我如何将这个问题标记为已解决？或者这个网站上没有这个选项？我在介绍和帮助部分都找不到答案。再次感谢所有友善的成员！今天展现出的速度、耐心和友好态度让我印象深刻。 - Matt B
1
我们很乐意提供帮助！这个小工具只是加快了事情的进展（帮助我们帮助您 :) ）- 欢迎来到StackOverflow!!! 请记得在未来阅读我们的[ask]页面，以获取有关如何提出好问题的提示... - blurfus
3个回答
5
.hhheader的高度没有改变，因为#logo的边距没有影响头部的大小（头部的大小取决于标志的大小），你只是在移动#logo，除此之外什么也没做。

你为什么不直接设置.hheader元素的高度呢？像这样：

height: 190px;

https://jsfiddle.net/7hb9bd58/4/

或者，如果由于某种原因您不能这样做，也可以缩放标志，这样它将显示为溢出标题容器。

#logo {
    display:inline-block;
    transform: scale(1.3);
    margin-left:50px;
}

https://jsfiddle.net/7hb9bd58/5/

不，我考虑过这个问题。但是我在学习时使用的教程中认为，在缩放方面可能存在某些原因，这是一个不好的想法。尽管您似乎非常懂行，所以我非常感谢您提供的两个答案。两个都很好，已经教会了我新的功能。 - Matt B
1
将您的标志位置设置为绝对位置。
#logo {
    display:inline-block;
    position:absolute;
    margin: -30px 0px -100px 10px;
}

这将从流中移除图像，因此它不再强制.hheader的高度包含它。为了补偿，需要为hheader指定一个高度。(我选择了190px，您可以微调)
.hheader {
    height:190px;
/* rest of css */
}

https://jsfiddle.net/7hb9bd58/6/

0

在 CSS 中进行更改，根据您的需要更改高度。

    .hheader {
      height:265px;
    }
 #logo {
    display: block;
    margin: 2px 0px -100px 10px;
    float: left;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接