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>

QNAP TS-420 web interface not accessible over SSL

After a reboot the web interface on a QNAP TS-420 NAS was not accessible over SSL. A nmap showed the NAS was not listening on the SSL port and it was configured to force SSL connections over the standard 443 SSL-port. So trying to access it over the non-SSL port just directed me to https://<ip-address of the nas> where there was no response.

To be able to access the web interface over the non-SSL port 8080 i had to ssh into the NAS using the admin account, then I issued the following commands:

/sbin/setcfg SYSTEM "Force SSL" 0
/etc/init.d/thttpd.sh restart

After this it was possible to access the NAS web interface over the non-SSL port, i. e. http://<ip-address of the nas>:8080

 

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! :)):

Error 404 when trying to password protect administrator folder in Joomla using Apache htaccess

When protecting the administrator folder in Joomla using Apache htaccess to increase the security of the website (which by the way is a good thing to do to prevent too interested individuals to peek where they shouldn’t), you might get an error 404 message when trying to access administrator and the expected password prompt never appears.

The cause can be that the server is configured to allow user defined error pages stored in for example the error folder. If some of the error files are missing the above mentioned problem can occur. Make sure you have the correct folder name and file names for your error files.

This particular problem occured for me when I moved a Joomla site from one hosting provider to another and by mistake also replaced the error folder with the one from the old hosting provider which had a completely different file name structure for the error message files.

Ubuntu 12.04 hangs in different stages of the boot sequence

A server I am maintaining stopped during boot on the "Stopping userspace bootsplash" or "Configuring network interfaces". If Ctrl-Alt-Del was pressed the machine rebooted so it was not completely stuck. I tried booting in rescue mode and checked the /etc/network/interfaces syntax but no problem visible there.

The solution was quite simple. Boot in rescue mode and select package repair. After repairing my packages the machine was rebooted, then fsck was ran automatically (which took quite a while). After that the machine booted normally.

 

Copy of PrestaShop default-bootstrap theme from 1.6.0.6 doesn’t display submenus after upgrade to 1.6.0.9

I made a customized theme by copying the PrestaShop default-bootstrap theme in version 1.6.0.6. After an upgrade to 1.6.0.9 the theme will no longer show the dropdown submenus.

The reason is that after the upgrade, the default-bootstrap has been updated but my customized copy hasn’t causing some needed JS files not being loaded.

The quickest solution is to go into Advanced Parameters -> Performance and enable Move JavaScript to the end

 

I found information about the problem here.

 

Multiple attributes / combinations in PrestaShop

Here is the documentation on how to add attributes / combinations to a product in PrestaShop -> http://doc.prestashop.com/display/PS16/Managing+Product+Attributes

If you plan on using multiple attributes for a product, like size and colour, do use the combinations generator and select both the possible sizes and colours at the same time. If you add them by hand one by one you risk ending up with a scenario where only the first attribute is visible in the shopping cart and on the resulting order (like the size but not the colour), i.e. you will have to contact the customer to ask about the other attribute(s).

By using the generator PretaShop will create the all the necessary combinations for you, i.e. size 1 + colour 1, size 2 + colour 1, size 1 + colour 2, size 2+ colour 2 and so on.

 

Improving wifi in a crowded wifi environment

This is a litle trick I use when I travel and hook up to a wifi network in a crowded wifi environment. Sometimes the network performance over wifi is really bad and the problem is that it can be caused by heavy traffic (like file sharing) on another wifi network sharing the same channel as yours. I have experienced this especially when travelling to big cities like Paris, Amsterdam and so on. First of all, it is recommended that you disable 802.11n wifi mode which works terribly bad in crowded environments. See this article for Windows and this for Linux (Ubuntu).

 

Crowded wifi environment (Wifi Analyzer for Android)

Crowded wifi environment (Wifi Analyzer for Android)

The problem with the wifi technology is that networks in the neighbourhood is sharing the same channels. In the 2,4 GHz band there are only 11-14 channels availible (depending on your region) and those channels overlap. That means if your network is on channel 1 you will get interference with traffic on channels 1, 2 and 3. Another problem with wifi is that is has no means of evenly dividing the capacity (like timeslots), so it is kind “the one shouting highest gets the most bandwidth”. And when someone already is using a lot of bandwidth (like file sharing) it is very hard for other users to obtain a part of the bandwidth. Even if it is the neighbours wifi which you can’t access but it shares the wifi channel.

A countermeasure to improve the situation is to constantly use some bandwidth forcing the heavy users to pull back a bit. Before transmitting, each node in the network listens in the air if the channel is free, so by using a little bit of bandwidth even if idle you don’t give the other node the same possibilty to hog the entire capacity.

First of all, find out the IP address of your local network default gateway. In WIndows you run a command prompt (cmd) and type the command ipconfig. In Linux you can use netstat -rn.

To constantly use up a small portion of the bandwidth I use the ping comand. Ping normally sends very small packets (56 bytes), but to get this to work we need a bit larger packets (but not to large, then we will hog the entire capacity). 1024 bytes is good.

In Windows you run the command (replace 192.168.0.1 with the IP-address of your local network which you found out above):

ping -t -l 1024 192.168.0.1

and in Linux you run:

ping -s 1024 192.168.0.1

 

ping with 1024 bytes

ping with 1024 bytes

Voila! Now my wifi connection gets a lot more stable because I force the other wifi nodes to pull pack a bit since I constantly make them aware of my presence.

 

Install Ubuntu 14.04 on Samsung Ultrabook Ativ Book 9

To install Ubuntu 14.04 on a Samung Ultrabook Ativ Book 9, this is how to do it.

I decided to keep the factory installed Windows 8.1 beside my Ubuntu install using dual boot. Thanks to enrish for the basic info. I found out there is no need to shrink the Windows 8.1 partition as long there is space enough for Ubuntu. The Ubuntu installation will do this for you. Before you do anything – make sure you have a backup as usual. If you decide not to keep the Windows 8.1 install, do keep the recovery partitions. No need to install any screen drivers, Ubuntu worked out of the box.

  1. In WIndows, run the Samsung Update Utility and update everything including BIOS/firmware.
  2. In Window Control Panel go to Power options and click on Choose what the power button does. Click on Change settings that are currently unavailable then scroll down and deselect Turn on fast startup (source http://askubuntu.com/questions/221835/installing-ubuntu-on-a-pre-installed-windows-8-64-bit-system-uefi-supported). Restart your system.
  3. When booting, press F2 to enter the setup.
  4. In the Boot section, disable Fastboot
  5. Insert the USB flash drive with Ubuntu ISO (prepared with create startup disk on another computer). 
  6. Configure boot device order, setting the flash drive to be the first option.
  7. Save and reboot. Now the system should be booting on the flash drive.
  8. Select to Install Ubuntu. During installation Ubuntu will recognize that you have Windows 8.1 installed and you have the option to install Ubuntu beside the Windows 8.1. The Ubuntu install will shrink the Windows 8.1 partition to make room for Ubuntu. By dragging the vertical bar you can decide how large the partitions for Windows vs Ubuntu should be. Continue installing Ubuntu as usual.
  9. After installing Ubuntu, unplug the flashdrive and when booting, press F2 and enable Fastboot again.