The Joomla! Forum ™



Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.



Post new topic Reply to topic  [ 4 posts ] 
Author Message
PostPosted: Sat Mar 24, 2012 3:59 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jan 08, 2012 1:04 pm
Posts: 17
http://www.smyls.co.uk OK my header image is 'fin.png' - I think it is showing under header-wrap. Why is it cut off and not showing at full height (which actually is 160px)? And why is the metatag showing? I set it under global config not to! Please help - Thanks!!

Code:
/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
   background: #333333;
   color: #CCCCCC;
   line-height: normal;
   height: 160px;
margin-top:0px;
   background: url(../images/fin.png)no-repeat;}

#ja-header { background: url(../images/fin.png)no-repeat;}; height: 160px; position: relative; z-index: 10; }

#ja-header .main {
   background-color: #333;
   background-position: top right;
   background-repeat: no-repeat;
   height: 160px;
}


 h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1; }

 h1.logo, div.logo-text { float: left; position: relative; z-index: 1; }


Top
 Profile  
 
PostPosted: Sat Mar 24, 2012 7:00 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Dec 22, 2011 11:17 pm
Posts: 130
Location: New Delhi, India
First up it is not the meta that is showing.. You might have added something else (seems more like a title for a module for it to show under H1). If you dont want it just disable it.
Secondly The Header - the image is not cut but apparently appended by the title below.
Their module position is static by default and hence they would be positioned one after the other depending on their hierarchical precedence over each other within the position. You may keep the position value as absolute to be able to fix it. Rest everything can be positioned using basic CSS.

.ja-headermask {
background: url("../images/fin.png") no-repeat scroll right top transparent;
display: block;
height: 160px;
left: -105px;
position: absolute;
width: 1306px;
z-index: 2;
}

This does the visual trick for me. So shouldn't be that complicated.

_________________
Thanks,
Nikky G


Top
 Profile  
 
PostPosted: Sat Mar 24, 2012 7:45 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jan 08, 2012 1:04 pm
Posts: 17
Thanks for replying Nikky - I'm not entirely sure what you mean but appreciate you helping. I have tried something else by now and it's ALMOST fixed - just slightly out of position:

Code:
#ja-header { background: black; height: 160px; position: relative; z-index: 10; }

#ja-header .main {
   background: url(../images/fin.png)
   background-position: top left;
   background-repeat: no-repeat;
   height: 160px;
width: 1307px;


What do I need to change here to get the header to move over slightly to the left to cover the black background? Thanks so much!


Top
 Profile  
 
PostPosted: Sat Mar 24, 2012 11:05 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jan 08, 2012 1:04 pm
Posts: 17
If anyone else is stuck with a similar issue, I have now fixed it with some help. There is extra styling under the LAYOUT CSS to alter as well as on the template CSS - in my case I had to change the margin padding.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 



Who is online

Users browsing this forum: costywiz and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group