负边距不起作用
我正试图获得负余量以允许我的徽标溢出标题。
预期结果的图像：
显示当前错误结果的图片：
我对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 & Poetry</a></li>
<li><a href="#">Blog & Other</a></li>
<li><a href="#">Music & 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 © 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/
3 个答案:
答案 0 :(得分：4)
.hhheader高度没有变化，因为#logo上的边距不影响标题大小（取决于徽标的大小），你只是移动{{1 ，仅此而已。
有没有理由不设置#logo元素的高度。像
.hheaderhttps://jsfiddle.net/7hb9bd58/4/
或，如果由于某种原因您不允许这样做，也许您只需缩放徽标，它就会溢出标题容器
height: 190px;
答案 1 :(得分：1)
将徽标的位置设置为绝对
#logo {
display:inline-block;
position:absolute;
margin: -30px 0px -100px 10px;
}
这将从流中移除图像，因此它将不再强制.hheader的高度来容纳它。要进行补偿，请指定hheader的高度。 （我用190px，你可以微调）
.hheader {
height:190px;
/* rest of css */
}
答案 2 :(得分：0)
在css中进行更改，根据需要更改高度
.hheader {
height:265px;
}
#logo {
display: block;
margin: 2px 0px -100px 10px;
float: left;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？