CSS 标题图像（调整大小问题）

Question

我被以下 HTML 链接的 CSS 卡住了，想扩展标题图像的 height，这样我就可以用它来调整更大的值，但是当我使用 .header 和 .logo 类的 CSS 时它还扩展了导航栏，我只需要扩展标题图像的height 以使其具有更大的高度徽标。

Answer 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;
}

编辑：我刚刚用 firebug 进行了检查，您正在使用多个类并且您已经嵌套了 div，您的徽标 div 就在这里

five columns left

我猜你已经选择了这个模板并且你正在尝试编辑它吗？

Answer 2

查看您的 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">&nbsp;</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;
}