Baligena.com: html

Showing posts with label html. Show all posts

Wednesday, April 4, 2012

Downloading files using PHP

Put the file you wish to download in your website directory. Example:
/file.rar

Now when you want to download it just go http://mysite.com/file.rar

It's that simple, don't over complicated it and you don't need PHP. Yesterday I tried to figure out how to download files but ran across all kinds of complicated methods. Using HTTP heaters, download helper; force_download in codeigniter, and PEAR. Maybe the reason I had such a hard time finding the solution was because its too obvious. Shot! I personally missed it.

Monday, September 26, 2011

Resizing <Table> with CSS. Staying within the wrapper

Having issues with keeping the table as the same size of the wrapper or parent? See code below.


<style>
    /*Center the content*/
    #wrapper {
        margin: 0px auto;
        width: 230px;
        height: 100px;
        background: grey; /*this is only to show how the table is within the wrapper*/
    }
    table {
        table-layout:fixed; /*makes the table to be a specific size*/
        width: inherit; /*need to be include to make the table specific size*/
    }
    input {
        width: 100%;/*size of the input box, keeps the table inside the wrapper*/
    }
    th{
       overflow: hidden; /* hides text overflowing the field*/
    }
</style>     

   
<div id="wrapper">
<table border="1">
    <tr>
        <th id="livesearch">Date</th>
        <th id="livesearch2">First_Name</th>
        <th id="livesearch3">Last_Name</th>
    </tr>
    <tr>
        <!--the onfocus and onblur what makes the <th> resize when selected, this is not necessary to make the table a fixed size-->
        <td ><input onfocus="document.getElementById('livesearch').style.width='100px';" onblur="document.getElementById('livesearch').style.width='auto';"class="date" type="text" /></td>
        <td> <input onfocus="document.getElementById('livesearch2').style.width='100px';" onblur="document.getElementById('livesearch2').style.width='auto';" class="type" type="text" /></td>
        <td> <input onfocus="document.getElementById('livesearch3').style.width='100px';" onblur="document.getElementById('livesearch3').style.width='auto';" class="type" type="text" /></td>
    </tr>
</table>
</div>

Notes: Overflow in table, wrap text in table, table width

Monday, August 29, 2011

Center HTML/Webpage

To center your webpage its simple. By setting the width and margin you can achieve this. However, depending on the browser (Internet Explorer) you must include the doctype or it will not work. See the code below


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<body>

<html>

<style>

#main { 

  width: 900px; 

  margin: 0 auto; 

}

</style>

</head>

<body>

<div id="main">



    



</div>

</body>

</html>

Wednesday, August 24, 2011

Frameworks

Don't reinvent the wheel. Below are frameworks that allow you to code without having to start from scratch.

HTML - Boilerplate

PHP - CodeIgniter

CSS - Twitter Bootsrap

CSS structure - 960

Javascript - jQuery

Monday, July 25, 2011

How to redirect

Below are examples on how you can redirect your website. When someone visits your site and you want the traffic to go somewhere else. Choose your language, modify url and copy and paste.

Javascript:


<script>
location.replace("http://baligena.com") //or
location = "http://baligena.com";
</script>

PHP:


<?php
header( 'Location: http://www.baligena.com' ) ;
?>

HTML:


<meta HTTP-EQUIV='REFRESH' content='0'; url='http://www.baligena.com'>

Saturday, July 16, 2011

Creating columns in website

This tutorial shows how to create columns in website and prevents the div from wrapping when the browser is minimized

Syntax Source:

<html>
<head>
<style>
#main {
   width: 600px;
}

.col {
   float: left;
   border: 1px solid red;
   padding: 10px;
   margin: 0px 20px 0px 0px;
}
</style>
</head>
<body>

<h1>Columns</h1>
<div id="main">
   <div class="col">
        <h3>Title</h3>
        <p>asdfasdfxiv</p>
        <p>asdfasdfxiv</p>
        <p>asdfasdfxiv</p>
    </div>
   <div class="col">
        <h3>Title</h3>
        <p>asdfasdfxiv</p>
        <p>asdfasdfxiv</p>
        <p>asdfasdfxiv</p>
    </div>    <div class="col">
        <h3>Title</h3>
        <p>asdfasdfxiv</p>
        <p>asdfasdfxiv</p>
        <p>asdfasdfxiv</p>
    </div>
</div>
</body>
</html>