2

I am writing a Joomla template from scratch to use on my website. For some reason, I get white space above and below my header. My website, which you can check and inspect:

http://vaterlinija.lt/

Inspecting it on Firefox reveals that while Html element is using all the available space, the Body is not, even though I set the Body to height: 100vh (also tried min-height: 100vh) in the CSS. If i set Body element with position: absolute; top:0; bottom:0; right:0; left:0; then it takes up all the space, but the Header still has these white spaces. I also set margin and padding to 0px on Body and Header... Which didn't change anything. What am I missing?

My index.php:

<?php defined('_JEXEC') or die('Restricted access'); 
$doc = JFactory::getDocument();
$doc->addStyleSheet('templates/' . $this->template . '/css/template.css'); 
?>
<!DOCTYPE html PUBLIC>
<head> 
 <title>Vaterlinija</title> 
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head> 
<body> 
 <div class="header">
    <header>
        <jdoc:include type="modules" name="header" style="none"/>
    </header>
 </div>
 <div class="nav">
    <nav>
        <jdoc:include type="modules" name="navigation" style="none"/>
    </nav>
 </div>        
  <div class="main">         
    <div class="column left" style="background-color:#aaa;">
       <h2>Column 1</h2>
      <p>Some text..</p>
    </div>
    <div class="column middle" style="background-color:#bbb;">
      <jdoc:include type="modules" name="main" style="none"/>
      <jdoc:include type="component" />
    </div>           
    <div class="column right" style="background-color:#bbb;">
      <jdoc:include type="modules" name="right_column1" style="none"/>
    </div>      
  </div>               
 <div class="footer">
    <footer>
        <jdoc:include type="modules" name="footer" style="none"/>
    </footer>
 </div>  
</body> 
</html>

And my template.css:

html {
  margin: 0px;
  height: 100vh;
  width: 100%;
}

body{
  font-size:1.0em;
  background-color:#e5edd1;
  margin: 0px;
  padding: 0px;
  height: 100%;
  min-height: 100vh;
  width: 100%;
  //position: absolute; top:0; bottom:0; right:0; left:0;
  overflow: auto;  
}


h1{font-size:2.3em;}
h2{font-size:1.8em;}
h3{font-size:1.4em;}
h4{font-size:1.2em;}
p{font-size:1.0em;}

.column {
  float: left;
  padding: 10px;
}

.left, .right {
  width: 15%;
}

.middle {
  width: 70%;
}

.main:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

div{
  box-sizing:border-box;
  margin: 0px 0px;
  padding:0px;
  border:0px solid #FFF555;
}

.header, .nav, .footer{
  width:100%;
  clear:both;
}

.main{
  margin:auto;
  width:80%;
  clear:both;
}

.main > * {
  all:reset;
} 

.header {
  margin: 0px;
  padding: 0px;
  background-color:brown;
  color:#FFFFFF;
}

.nav {
  height:51.2px;
  background-color:#FFA500;
  position: sticky;
  top: 0;
  /*display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;*/
}

ul.nav { //this element needs centering
  margin:auto;
  width:80%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #FFA500;
  /*flex-basis:0;
  flex: 1 1 0;
  width: 0;*/
}

ul.nav li {
  float:left;
  display:block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-right: 3px solid #bbb;
}

ul.nav li:hover {
  background-color: #e09100;
}

ul.nav li:last-child, ul.nav-child li {
  border-right: none;
}

ul.nav li a, ul.nav-child { 
  font-size: 20px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.nav-child {
  display: none;
  position: absolute;
  background-color:#FFA500;
  padding: 0px 0px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

ul.nav-child li a {
  padding: 0px 0px;
}

ul.nav li:hover > ul.nav-child {
  display: block;
}

ul.nav-child li {
  float:none;
}

ul.nav-child a:hover {
  background-color: #e09100;
}

.active {
  background-color: #4CAF50;
}

.footer{
background-color:red;
color:#FFFFFF;
}

.footer > * {
font-size:0.8em;
}

.footer a{
color:#FFFFFF;
border-bottom: 1px dotted #FFFFFF;

  */

}

Can someone please advise?

Improve this question

1 Answer 1

Reset to default
1

The p element in the module content in the header seems to have a top margin and bottom margin associated with it.

You could fix the spacing issue by changing the content of the module from this:

<div class="custom">
    <p><img style="display: block; border-width: 0px; margin: 0px auto 0px auto;" src="/images/logo.png" width="800" height="290" />
    </p>
</div>

to this:

<div class="custom">
    <img style="display: block; border-width: 0px; margin: 0px auto 0px auto;" src="/images/logo.png" width="800" height="290" />
</div>

Alternatively, you could add this to your CSS:

.header p {
  margin: 0;
}
Improve this answer
3
  • Thank you very much, that fixed it! The header module was defined through Joomla configuration (as an article), so I couldn't remove that <p>, but the CSS solution worked perfectly.
    – Justin8051
    Commented Aug 20, 2019 at 11:22
  • 2
    I'd like to add that this is coming from default browser styling. In some browsers browser styles are not shown when inspecting styles. Look for "Show Browser Styles" or similar option in your browser's developer tools to enable browser styles in inspector.
    – Sharky
    Commented Aug 20, 2019 at 11:27
  • @Justinas if this answer has resolved the issue, please award it the green tick to signify that this page is resolved.
    – mickmackusa
    Commented Sep 25, 2019 at 21:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.