I'm stuck with the CSS of following HTML link and want to expand the height of header image so I can adjust larger with it, but when I play with the CSS of the .header & .logo classes it expands the navigation bar also, I just really need to expand the height of the header image to have larger height logo into it.
Add a comment
|
2 Answers
Looking your html source seems you can have different solutions. Problem is with your html... You have
<div class="navigation">
inside
<div class="container">
Ans : get navigation div out of container div. Then changing the height of container div would be the best and not affect the height of your links.
Why you are getting problem : your header div is containing links inside it. That is why changing the height of header is not good (It simply changes the overall height of this div).
Update : Reply to your first comment on my answer
<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="[email protected]"
onfocus="if(this.value=='[email protected]') {this.value='';}"
onblur="if(this.value=='') {this.value='[email protected]';}" 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>
Then change your css and see the results
.container {
width:100%;
height:100px; /* I have changed it 50px to 100px*/
float:left;
margin-top:2px;
}
3 Comments
Alex
I did this but still no luck :( , can you please give me code hint so i can exactly get into it ?? Im newbie in website development , may be i'm doing wrong :(
Sami
@Alex. Check out now. Hope you would be able to fix
Alex
Thanks Mate , i've done it while playing with different classes after implementing your trick :) you are awesome :)
Change your header height here :
#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;
}
Edit: I just inspected with firebug, you are using multiple classes and you've nested div's, your logo div lies here
five columns left
I guess you've picked this template and you are trying to edit it right?
2 Comments
Alex
yes exactly i got this template & trying to edit it , well i've already changed that value of #header , but instead of expanding height of header.gif , it has increased height of the space below navigation :( , can you please help , i'm newbie in this :( , check the demo link again & see it has effected wrong
Mr. Alien
@Alex it's actually very complicated to tell because the designer has used multiple classes, and if you chane a class it effects other containers too, I would suggest you to make 1 yourself