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

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>

Centering a horizontal bullet list

Horizontal bullet lists are often used to create a horizontal menu. This is how to make the horizontal bullet list centered.

  1. Create a <div> container and set the text-align: center style on it.
  2. Create a <ul> <li> inside the div and set display: inline-block style on it.

This is an example of how it is done:

<html>
<head>
  <style type="text/css">
   div#container {
     text-align: center; /* center the horisontal list */
   }
   ul.list {
     list-style: none; /* no bullets */
     display: inline-block; /* this will cause the list to be centered */
   }
   ul.list li {
     float: left; /* horizontal list */
     margin-left: 10px; /* some space between items */
     margin-right: 10px;
   }
  </style>
</head>
<body>
<div id="container">
 <ul class="list">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
 </ul>
</div>
</body>
</html>

Start embedded Youtube video at specific time

When you share a video on Youtube you can select to start the shared video at a certain point of time in the video. Like this (selected to start at 0:40).

Youtube share with start at

This option however is not availible when embedding a video. It can be solved manually though. The embed code from Youtube looks something like this:

<iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/6bHSP9Ddw5w” frameborder=”0″ allowfullscreen></iframe>

To start the video from a specific time, you add the ?start=XXX where XXX is the point counted in seconds. So if the start time includes minutes you have to convert into seconds. If I want the embedded video to start at 0:40 I add ?start=40 like this:

<iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/6bHSP9Ddw5w?start=40” frameborder=”0″ allowfullscreen></iframe>

This is the embedded video starting at 0:40 (and yes, that is me reverse driving an articulated 18 meter bus – sometimes, when I’m not busy ruling Nerdia or working as an IT consultant I walk out into the real world where I sometimes work as a bus driver and it is great fun! :)):

Vertical and horizontal center img in div

This example shows how an image (img) can be vertically and horizontally centered inside a div. At the same time it illustrates how to resize the image to fit inside the div.

A live view of this code can be seen here. 

<html>
  <head>
    <title>Vertically aligned img in div</title>
    <style type="text/css">
      #container {
        position: absolute;
        width: 600px;
        height: 600px;
        background-color: lightyellow;
        vertical align: middle;
      }  

      #container img {
        max-width: 80%;
        max-height: 80%;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }


      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <img src="sl-buss-6050.jpg" alt="SL-buss 6050" title="SL-buss 6050">
      <p>The yellow box is here to show the div</p>
    </div>
  </body>
</html>

Div with width 100% and margins or padding gets wider than 100% [solved]

If a div is set to width (or height) 100% and margins or padding are added, it will be wider than 100% causing the scrollbars to appear in the browser. 

For example like this (click here to view live sample):

<html>
<head>
  <style type="text/css">
    body, html {
      width: 100%;
      border: 0;
      margin: 0;
      padding: 0;
    }
    #wrapper {
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
    }
    #container {
      width: 100%;
      margin: 10px;
      padding: 0;
      border: 0;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="container">
      <h1>Div taking more than 100% space</h1>
      <p>It demonstrates a div that is taking up more than 100%. Notice the horizontal scroll bar below.</p>
    </div>
  </div>
</body>
</html>

The solution is to set the inner container width to auto instead of 100%, like this (click here to view live sample):

<html>
<head>
  <style type="text/css">
    body, html {
      width: 100%;
      border: 0;
      margin: 0;
      padding: 0;
    }
    #wrapper {
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
    }
    #container {
      width: auto;
      margin: 10px;
      padding: 0;
      border: 0;
      background-color: lightblue;
    }
</style>
</head>
<body>
  <div id="wrapper">
    <div id="container">
       <h1>Div NOT taking more than 100% space</h1>
       <p>It demonstrates a div that is NOT taking up more than 100%. Notice the absence of the horizontal scroll bar below.</p>
       <p>The difference/solution is to set the inner div with width: auto.</p>
    </div>
  </div>
</body>
</html>

How to display list items inline and remove the bullet

When using list items in HTML to create a horizontal list (for example in a horizontal menu) you need to display the list items not vertically which is standard, but horizontally. You will probably also want to remove the bullet. This is how you do it.

To display the list horizontally, use CSS display: inline

To remove the list item bullet, use CSS list-style: none

Example:

<ul>
  <li style="display: inline; list-style: none;">Menu item 1</li>
  <li style="display: inline; list-style: none;">Menu item 2</li>
  <li style="display: inline; list-style: none;">Menu item 3</li>
</ul>

Of course, the above is just to illustrate the technique. In a real world scenario this would be applied through a CSS class or id.

 

Make a weblink (a href) not clickable

Sometimes you have a need to prohibit a visitor from clicking on a link on your site. For example if you are including content from another soruce via Atom or RSS and they contain links.

The best way is of course to remove the link tag (<a href="" >) from the content. But if this is not possible an alternate solution can be to cover it with a transparent div placed on top of the content using the z-index.

WordPress Media crop button greyed out

In WordPress Media it is possible to edit the images in some basic ways including cropping. To use the tool you must fist make a selection in the image by clicking and dragging across the image. The selection must be wider than the smallest image setting in WordPress. Otherwise the crop tool will stay greyed out. Once a large enough selection has been made the crop button becomes clickable. This is not always logical to the user who often try to click the crop button first.

Cropping images in WordPress

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

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>