Alternating Backgrounds

Alternating Backgrounds Allright, now lets say that you have a database full of information needed to be displayed on your site. One of the tables contains some short headlines needed on the front page. Now, you could just display them, but they would be hard to determine which is which, so, we'll alternate the background. Using a while loop we will be able to add and subtract from one variable that contains the number of which style to use.

Granted, you have connected to the database, and you have two seperate CSS Styles called "style1" and "style2", take look at this.

$sql = mysql_query("SELECT * FROM headlines ORDER BY date LIMIT 5"); //Will select the 5 latest entries from the table "Headlines"

$i = 0; //The Variable that will hold which will determine the style.
while ($row = mysql_fetch_array($sql, MYSQL_ASSOC) {

//The important if statement
if ($i == "0") {$style = "style1"; $i++ } else { $style = "style2"; $i--; }

$style = "style1"; //Since the number is "0", the style is "style1"

$i++ //Add one to the style selector.
$content = $row['content'];
echo '<div class="'.$style.'">$content</div>';
}

The variable "$i" at first, contains the integer 0. But each the time the while loops goes through the SQL query, it adds or subtracts the number. The if statement does the selecting for us. It in our language says:

If the variable $i is set to "0", set $style to "style1" then add one to $i.

If it is not set to "0", then set $style> to "style2" and then subtract one from $i.

Ok, thats it. Expand your skills in the PHP and webdeisgn using this tutorial.

Heres the full code for reference:

<?PHP
$cnx = mysql_connect("localhost", "root", ""0) or die("Error Connecting to Database"); // Connect to Database, saving it as a variable for later uses. If there is an error, it will end or, "die"
mysql_select_db("database", $cnx) or die("Error in selecting database"); //Select the Database. Error will make the script "die" and send an error message.

$sql = mysql_query("SELECT * FROM headlines ORDER BY date LIMIT 5"); //Will select the 5 latest entries from the table "Headlines"

$i = 0; //The Variable that will hold which will determine the style.
while ($row = mysql_fetch_array($sql, MYSQL_ASSOC) {

//The important if statement
if ($i == "0") {$style = "style1"; $i++ } else { $style = "style2"; $i--; }

$content = $row['content'];
echo '<div class="'.$style.'">$content</div>';
mysql_close($cnx);
?>

Alternating Row Colors
Learn how to alternate row colors from database output using ASP.
Alternating Rows: Arrays
The first thing we do here is echo out the html, again I wont go over this because theres really nothing to explain, except the css. We have two css classes, one for each of the alternating rows.
Alternating Rows: Mysql
The first thing we need to do is connect to the database. I always put my db connection in a universal file, that way I can just change the variables once if I need to; but for the sake of the tutorial, im putting it in this file.
Alternating Row Colors
Theres two different ways this can be done. The first is by getting results from a mysql query, the second is going through the values of an array. Ill go over both. First the full files (ill break it up into two files, one using mysql, and one using an array)
The Background-Table Combo
Ever wondered how some websites seem to have multiple layers of designs? Although some use frames and other design techniques to accomplish this look, Im going to show you a simple way to create the look without the headaches of complicated design techniques. Youll be glad to hear...
3 Top Ways to Web Site Design
When online users visit a website, they initially form an opinion based on its appearance. At first, it will not really matter if your contents are of high quality or if you are offering excellent products and services.
Using and Converting to Color-Safe Palettes
When you design web pages in HTML, as you probably know, you can use a tremendous range of colors (over 16 million) for fonts, tables, backgrounds and so forth using the COLOR attribute of the various HTML tags...
If Content is King who is Queen?
Its been said again and again, when it comes to getting people to visit your site (and stay there for more than 5 seconds), the quality of your content rules supreme. But once youve bowed to interest, who else must you pay homag......
Gray Text Revisited
In a previous article I argued that the reason why gray text is used more and more on the web is because it looks better than black text from a distance, and since designers do not really read the text on sites they design, they prefer the visually better looking alternative. I also offered a soluti...
Having Different Link Colors on one Page
Do you want to have a different color links on different sections of your website? If your answer is yes then you have come to the right tutorial. Often websites have different color backgrounds on different sections of their website...