我被以下 HTML 链接的 CSS 卡住了，想扩展height标题图像，这样我就可以用它调整得更大了，但是当我使用.header&.logo类的 CSS 时，它也会扩展导航栏，我真的需要展开height标题图像以在其中包含更大高度的徽标。
问问题
6990 次
2 回答
1
查看您的 html 源代码似乎可以有不同的解决方案。问题出在你的 html 上……你有
<div class="navigation">
里面
<div class="container">
Ans：从容器 div 中获取导航 div。然后更改的高度container div将是最好的，并且不会影响链接的高度。
为什么您会遇到问题：您的标题 div 包含其中的链接。这就是为什么改变标题的高度不好（它只是改变了这个div的整体高度）。
更新：回复您对我的回答的第一条评论
<div class="inner">
<div class="container">
<!-- Logo Start -->
<div class="five columns left">
<a href="index.html" class="logo"><img src="images/logo.png" alt="" /></a>
</div>
<!-- Logo End -->
<div class="eleven columns right">
<!-- Top Links Start -->
<ul class="top-links">
<li>
<h4 class="colr">Search Music</h4>
<div id="search-box">
<input name="" value="Enter any keyword"
onfocus="if(this.value=='Enter any keyword') {this.value='';}"
onblur="if(this.value=='') {this.value='Enter any keyword';}" type="text" class="bar" />
<button>Search</button>
</div>
</li>
<li>
<a href="javascript:animatedcollapse.toggle('login-box')" class="colr">LOG IN</a>
<div id="login-box">
<h4 class="white backcolr">User Login <a href="javascript:animatedcollapse.hide('login-box')" class="closeit"> </a></h4>
<ul>
<li>
<input name="" value="yourname@email.com"
onfocus="if(this.value=='yourname@email.com') {this.value='';}"
onblur="if(this.value=='') {this.value='yourname@email.com';}" type="text" class="bar" />
</li>
<li>
<input name="" value="password"
onfocus="if(this.value=='password') {this.value='';}"
onblur="if(this.value=='') {this.value='password';}" type="password" class="bar" />
</li>
<li>
<input type="checkbox" class="left" />
<p>Remember me</p>
<a href="#" class="right">Forget Password?</a>
</li>
<li>
<button class="backcolrhover">Login</button>
</li>
</ul>
<div class="clear"></div>
</div>
</li>
</ul>
<!-- Top Links End -->
</div>
<div class="clear"></div>
</div>
<!-- Container End -->
<!-- Navigation Start -->
<div class="navigation">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul id="nav">
<li class="current-menu-item"><a href="index.html">Home</a></li>
<li><a href="news.html">NEWS</a></li>
<li><a href="#">Albums</a>
<ul>
<li><a href="albums.html">Albums</a></li>
<li><a href="album-detail.html">Album Detail</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="blog.html">Blog</a></li>
<li><a href="blog-detail.html">Blog Detail</a></li>
</ul>
</li>
<li><a href="#">Gallery</a>
<ul>
<li><a href="gallery-two-column.html">Gallery - Two Column</a></li>
<li><a href="gallery-three-column.html">Gallery - Three Column</a></li>
<li><a href="gallery-four-column.html">Gallery - Four Column</a></li>
<li><a href="gallery-slideshow.html">Gallery - Slide Show</a></li>
</ul>
</li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
<li><a href="#">BUY THIS THEME</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
<!-- Navigation End -->
</div>
然后更改您的CSS并查看结果
.container {
width:100%;
height:100px; /* I have changed it 50px to 100px*/
float:left;
margin-top:2px;
}
于 2012-10-27T20:37:58.090 回答
1
在此处更改标题高度：
#header {
width:100%;
height:148px; <-----------Here
float:left;
position:relative;
z-index:2;
margin-bottom:15px;
box-shadow:0px 2px 2px #000;
background:url(../images/header.gif) repeat-x;
}
编辑：我刚刚检查了萤火虫，你正在使用多个类并且你已经嵌套了 div，你的徽标 div 就在这里
five columns left
我猜你已经选择了这个模板并且你正在尝试编辑它，对吗？
于 2012-10-27T19:41:04.100 回答