Website Tech

Category: HTML CSS PHP

  • Web site design, Keep Vertical Spacing Even, with Em-based layouts

    Keeping the vertical spacing even, especially when having text line up in multiple columns, is a way to make your web site look better.

    This article, “Keep vertical spacing even with Em based layouts – Vertical rhythm calculator” http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator/ makes it easier to make your CSS style sheet keep the vertical spacing even, and since it is based in ems, the spacing will stay even if the visitors to your site adjust the font size to their preference.

  • WordPress stores domain name, here's how to change it

    I had multiple domain names pointing to the same place (www.lernerconsult.com and www.lernerc.com were identical).  Then the DNS for lernerc.com got altered.

    WordPress was translating calls from www.lernerconsult.com/blog/ into www.lernerc.com/blog/ and that didn’t work…

    Here’s how to adjust it:

    You will need to access the MySQL database (I use phpMyAdmin) for the WordPress database (mine is named _wrdp1).

    In phpMyAdmin, in the database used by WordPress, there is a table wp_options.  Click on the table name, click on Browse and update the values for siteurl and mailserver_url. Save your changes.

    That is enough to be able to browse to the WordPress Admin page (http://yourdomain.com/blog/wp-admin/ ) and click on Options and change the Blog address field — the required field for fixing the problem.

  • Xampp directory mismatch

    If you unzip the Xampp files (e.g. into c:\xampp) the installer doesn’t know where the installed files went.  You will see in the Xampp Control Panel Application (xampp-control.exe) a message “directory mismatch”.

    This doesn’t matter for normal operation of Xampp, but if you try using the installer for Xampp add-ons (for example, Perl), you can’t proceed.  You can, however, simply use the .zip version of Perl, and manually install it in the c:\xampp folder (or whatever other folder you used).

    There isn’t a file that I could find that stores the installation location.  The xampp-control only checks the Windows Registry. If you prefer to have the installation file recorded, use the following steps:Open the Windows Registry Editor (Start, Run, regedit)

    Navigate to HKEY_LOCAL_MACHINE\SOFTWARE
    Right-click on SOFTWARE and select New Key. Type XAMPP then click OK.  Right-click the XAMPP Key you just created, and select New, String Value. Name it Install_Dir (probably case sensitive!) then hit Enter. Double click this value and in the appropriate box, type the path of your current XAMPP installation (C:\xampp usually). Close the Registry Editor.

    Restart the Xampp Control Panel and you’ll see the installation directory has been properly set.   You can now install your add-ons.

  • Xampp with Skype

    Make this change to Skype configuration to allow Skype and Xampp to work together (from http://www.apachefriends.org/en/faq-xampp-windows.html#startpage ):

    If Apache doesn’t start while Skype is running, change the settings on Skype to not use port 80.  Skype’s Tools, Options, Connection tab, uncheck “Use port 80 and 443 as alternatives for incoming connections”.

  • PHP Development on your laptop

    Setting up a PHP development environment

    Setting up my laptop to be a PHP/MySQL server was easier than I would have predicted. Download the XAMPP package from Apache Friends at http://www.apachefriends.org and unzip it to c:\xampp (keeping the folder hierarchy intact). There are Windows and Linux versions, with Mac OS X version being developed. I’m writing about the Windows version.

    Run c:\xampp\setup_xampp.bat and you have a functioning web server. Start it by loading c:\xampp\xampp_start.exe and you can load http://localhost/xampp/ in your web browser. The //localhost root is c:\xampp\htdocs

    To have Xampp run automatically, set it up as a Windows Service. Run c:\xampp\xampp-control.exe and put check marks next to Apache and MySQL.

    Xampp Control Panel

    Since any PHP developer is likely to develop multiple websites, make a subfolder of htdocs for each website. There are some simple changes to make so each subfolder works as a subdomain (i.e. html links to /images work as expected for the site). Edit your C:\xampp\apache\conf\extra\httpd-vhosts.conf adding lines like the following (substitute your folder name instead of lernerc):

    <VirtualHost local.lernerc.com:80>
    DocumentRoot “C:/xampp/htdocs/lernerc/”
    ServerName local.lernerc.com
    ServerAdmin youremail@yourserver.com
    <Directory “C:/xampp/htdocs/lernerc/”>
    Options Indexes FollowSymLinks
    AllowOverride FileInfo
    Order allow,deny
    Allow from all
    </Directory>
    </VirtualHost>

    If you have a site in c:\xampp\htdocs\ot, you would use lines like this:

    <VirtualHost local.ot.com:80>
    DocumentRoot “C:/xampp/htdocs/ot/”
    ServerName local.ot.com
    ServerAdmin youremail@yourserver.com
    <Directory “C:/xampp/htdocs/ot/”>
    Options Indexes FollowSymLinks
    AllowOverride FileInfo
    Order allow,deny
    Allow from all
    </Directory>
    </VirtualHost>

    Then you need to tell your operating system about new “domains”. In Windows, edit the C:\Windows\system32\drivers\etc\hosts file with lines like this:

    127.0.0.1 local.lernerc.com
    127.0.0.1 local.ot.com

  • 2-Column HTML using DIVs (no print problems)

    If you code your multi-column web page wrong, IE and Firefox won’t be able to page break properly for printing.

    Seems that if you use

    <p id=”asdf”>
    the pages won’t print right, if instead you use
    <p class=”asdf”>
    they will.

    Here is what I used for a two-column layout (specifically, in PHPList put this in the Configure section:

    <strong>CSS for HTML messages without a template</strong>

    <style>

    body { margin : 0; padding : 0; border-color : #ffffff; background-color : #ffffff; color : #000000; }

    p {text-align:left; font:\’Arial Narrow\’, Arial, Helvetica; font-size:18px; }

    div.leftcolumn { left : 0; width : 360px; float:left; margin-left : 10px; margin-top : 0px; color : #000000; padding : 3px; }

    div.rightcolumn { left : 380px; top : 40px; /* lower slightly to balance text opposite logo */ width : 300px; float:left; padding-left : 10px; color : #000000; padding : 3px; }

    div.content { top : 0px; margin : 0px 360px 0 165px; padding : 3px; color : #000000; }

    div.footer { left : 10px; top:auto; width: 98%; margin-left : 0px; margin-top : 20px; color : #000000; background:#FFFFFF; padding : 3px; }

    div.page { background-color:#FFF; border:1px solid #959596; text-align:left; width:690px; margin:0px auto; padding:0; }

    div.emailfooter { font-size : 11px; font-family: Verdana, Arial, Helvetica, sans-serif; left : 10px; width:680px;  /* Match width of div.page */ z-index: 1; padding: 2px; margin: 2px; }

    div.emaillinks a { font-size: 11px; color: #00; background: #FFFFFF; font-style: normal; font-family: verdana, sans-serif; text-decoration: none; } </style>

  • Picked Lunar Pages for new web host

    Lunar Pages, http://www.lunarpages.com/id/glerner had the best match of features for my needs.

    For $7.95/month paid annually, I get 350GB storage, 3500 GB/Month transfers, PHP 4 and 5, and developer tools such as Ruby. I have full control over scripts to run, there is a good selection of scripts available to install with minimal configuration (questions about my business name, contact name, etc, but no configuring MySQL or editing script files). Can host 10 separate web sites in the one account. By checking the ping times I could tell the server is responsive. They showed up on several review sites with consistently good ratings.

    When I installed PHPList, uploading a megabyte of data took about half the time, consistently, that it took on a site someone else hosted on Yahoo, so I switched their mailing list project to my site.

    If you are going to switch web hosting companies, or if you are setting up a new site, please click on http://www.lunarpages.com/id/glerner