Posts

Stefan Helander

How to vertically center text in a div

/0 Comments/in /by

This is a neat way of centering text in a div. Live demo here.

 

<html>
<head>
 <title>Vertical text center demo</title>
</head>
<body>
<style>
.textbox {
 height: 200px;
 width: 300px;
 text-align: center;
 font-size: 14px;
 font-weight: bold;
 background-color: blue;
}
.textbox p {
 height: 100%;
 display: flex; /* vertically center text */
 justify-content: center;
 align-content: center;
 flex-direction: column;
 margin: 0 50px;
 color: white;
}
</style>
<h1>Vertical text center demo</h1>
<div class="textbox">
 <p>This text is vertically centered in the box</p>
</div>
</body>
</html>
Stefan Helander

Extend a wrapped div to full screen width outside it’s wrapper

/0 Comments/in /by

A very common design model for websites in fluid/reponsive design is to make a centered container taking up for example 80% of the screen width. It is not very unusual that the designer then wants the background on a header, footer, horizontal menu or any other similar object to have it’s background extended to the fulls screen width.

 

Website with wrapper container

Website with wrapper container

The problem with this quickly becomes pretty obvious as all objects are contained in a 80% wrapper. One solution is of course to close the wrapping container, then create a full width object with the background and the begin a new wrapper.

However, there is a neat trick that can be used to make an object “break out” outside the containing wrapper. It is done by using negative margins. To not get a horizontal scrollbar in the browser we add overflow-x: hidden to the body.

This is an example how to do it (click here to view the example live):

<html>
<head>
<style>
 body {
   overflow-x: hidden; /* to prevent horizontal scroll bars */
 }
 .container {
   width: 80%;
   height: 100%;
   margin-left: auto; /* center the container */
   margin-right: auto;
   padding: 10px; /* some padding inside the container */
   background-color: yellow;
 }
 .divider {
   line-height: 30px;
   background-color: grey;
   color: white;
   margin-left: -1000%;
   margin-right: -1000%;
   padding-left: 1000%; /* push content back in on the screen */
   padding-right: 1000%;
 }
</style>
</head>
<body>
<div class="container">
 <p>Some text inside the container</p>
 <div class="divider">Here is a section divider in full width</div>
</div>
</body>
</html>
Stefan Helander

Create a start page without a corresponding menu item in Joomla!

/0 Comments/in , /by

In most cases when creating a site in Joomla!, the first choise on the menu is something like "Start" or "Home" that brings the user back to the landing page of the site. Normally you will also link the website logo to the start page.

But sometimes when creating a site in Joomla, it is not desirable to have a specific menu item with the sole purpose to bring up the start page. Just linking the logo to the start page may be sufficient and you don’t want to clutter up your menu with an additional item (or you are running out of menu space).

The solution to not having a menu item corresponding to the start page is to simply create a hidden menu, for example "hiddenmenu". Do not publish a module for it. Place the menu item that brings up the start page in this hidden menu. Done!

By the way, linking your logo to the start page can be done in the template html-file by something like this: 

<a href="<?php echo $this->baseurl; ?>"><div id="logo"></div></a>