Forums

How to remove space between header graphic and navigation

Permalink
I would like to remove the space between my header graphic and the navigation bar on my websitehttp://www.larkenergy.co.uk I have tried making changes in the Main ccs but just can't seem to get rid of the space. Does anyone have any suggestions. Header code is as follows:

</head>
<body>
<div id="page">
<div id="header">
<p><a href="#"><img src="<?=$this->getThemePath()?>/Lark Energy static banner.jpg" /></a></p>


<div id="header-area">
<div id="navigation">
<div id="main-nav">
<ul class="tabbed">
<li><a href="http://www.larkenergy.co.uk/index.php?cID=1">Home</a></li>
<li><a href="http://www.larkenergy.co.uk/news">News</a></li>
<li><a href="http://www.larkenergy.co.uk/about-us">About Us</a></li>
<li><a href="http://www.larkenergy.co.uk/Projects">Projects</a></li>
<li><a href="http://www.larkenergy.co.uk/pv">PV</a></li>
<li><a href="http://www.larkenergy.co.uk/retrofit">Retrofit</a></li>
<li><a href="http://www.larkenergy.co.uk/contact-us">Contact Us</a></li>



</ul>
<div class="clearer"> </div>


<div class="clearer"> </div>
</div>
<div class="clearer"> </div>

<div class="divider"></div>
<div id="header-area-inside">
<?php
$ah = new Area('Header');
$ah->display($c);
?>
</div>
<?php if ($ah->getTotalBlocksInArea() > 0) { ?>

<div class="clearer"> </div>
<div class="clearer"> </div>

<?php } ?>
</div>
</div>
 
adajad replied on at Permalink Reply
adajad
In your typography.css you have defined a bottom margin for your p tag of 12px.

p {
  margin:0 0 12px;
  padding:0;
}


Instead you could use a top margin to still maintain the white space between your paragraphs but get rid of the space between header image and menu:

p {
  margin-top:12px;
  padding:0;
}


When you use a top margin you need to be aware the space between headings and paragraphs will be changed too. To overcome this you will have to sett bottom margins for your headings too:

h1, h2, h3, h4, h5{
  margin-bottom:5px;  /* or whatever suits you */
}
jonsel replied on at Permalink Reply
Thank you for the very quick response. I have followed your recommendations. It has reduced although not eliminated the space between graphic and nav bar. However, it has also removed space between paragraphs. I know I should understand how to resolve this but I am still a bit of an amateur I am afraid! Any further help gratefully received.
adajad replied on at Permalink Reply
adajad
As I pointed out above, you need to add a top margin to you paragraphs to overcome the spacing issues between paragraphs (and not having margin:0 as you do now).

The small 5px gap you still have left between header image and navigation comes from a top margin setting in your main.css:

#page #header #header-area {
  margin-bottom:5px;
  margin-top:5px;  /* <-- remove this or comment it out */
}
jonsel replied on at Permalink Reply
sorry - I have done this and it now seems to have reverted to original spacing. have I done something wrong in how I have changed coding?
ConcreteOwl replied on at Permalink Best Answer Reply
ConcreteOwl
Your problem is that you have hard coded the header like this
<p><a href="#"><img src="/concrete/themes/default/Lark Energy static banner v2.jpg" /></a></p>

You could deal with this by changing the code to this
<a href="#"><img src="/concrete/themes/default/Lark Energy static banner v2.jpg" /></a>


Or you could add a reset.css to prevent the browser from using its default css styling, if you add a reset css file make sure it is included in your header BEFORE your theme css files..

EDIT
You could also add some inline styling to the <p> tag like this 
<p style="margin:0pt"><a href="#"><img src="/concrete/themes/default/Lark Energy static banner v2.jpg" /></a></p>
jonsel replied on at Permalink Reply
Many thanks - both options worked a treat :-)