Question

我坚持使用以下HTML链接的CSS，并希望扩展标题图片的height，以便我可以使用它进行更大调整，但是当我使用{{1}的CSS时}＆amp; .header类它也会扩展导航栏，我真的需要扩展标题图像的.logo以使其具有更大的高度标识。

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，你的logo 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;
}

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

2 个答案: