For example, this is how I was retrieving database from mysql table:
five four three two one
So as you can see, it was displaying five first, but i wanted to display this list in the reverse order, what i wanted to display like was like this:
one two three four five
I guess i could write a php / mysql script where the code will go through some loop and a function and make the whole script more complicated, but i wanted to be simple, because the more complicated a script gets, the more processor and memory is used by the server.
I contacted the folks at www.webune.com for their support, and they gave a cool little tip and trick on how i can display my list in the order that i wanted. so this is the code you would use.
So lets say on my example, I have this: five four three two one but i want it to show in the reverse order like this: one two three four five this is the HTML CSS code i would use to achieve what i want to do on my webpage for my menu.
first put this code beteen the <head> and </head> tags on your html web pages:
Code:
<style type="text/css">
<!--
.left {
float: right;
clear: left;
}
.left-div {
float: left;
width: 200px;
}
-->
</style>
<!--
.left {
float: right;
clear: left;
}
.left-div {
float: left;
width: 200px;
}
-->
</style>
and put this code in your body of your html page: (after the <body> tag)
Code:
<div class="left-div">
<div class="left"> five </div><div class="left"> four </div><div class="left"> three </div><div class="left"> two </div><div class="left"> one </div>
</div>
<div class="left"> five </div><div class="left"> four </div><div class="left"> three </div><div class="left"> two </div><div class="left"> one </div>
</div>
Putting it all together. The next HTML code is an example webpage i create so you can see a full html webpage sample. Just copy and paste into a blank notepad and save it as reverse.html and then open it with your browser.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Display My list in resverse by wallpaperama.com</title>
<style type="text/css">
<!--
.left {
float: right;
clear: left;
font-weight: bold;
}
.left-div {
float: left;
width: 200px;
}
-->
</style>
</head>
<body>
<h1>Show Menu In Reverse Order by <a href="http://www.wallpaperama.com">Wallpaperama.com</a></h1>
<hr>
<p>My Original Menu Order: </p>
<p><strong><br>
Five Four Three Two One</strong></p>
<p>My Menu In Reverse Order After My CSS Style: </p>
<div class="left-div">
<div class="left"> Five </div>
<div class="left"> Four </div>
<div class="left"> Three </div>
<div class="left"> Two </div>
<div class="left"> One </div>
</div>
<p> </p>
<p align="center"><a href="http://www.webune.com"> Web Hosting Provided By Webune.com </a></p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Display My list in resverse by wallpaperama.com</title>
<style type="text/css">
<!--
.left {
float: right;
clear: left;
font-weight: bold;
}
.left-div {
float: left;
width: 200px;
}
-->
</style>
</head>
<body>
<h1>Show Menu In Reverse Order by <a href="http://www.wallpaperama.com">Wallpaperama.com</a></h1>
<hr>
<p>My Original Menu Order: </p>
<p><strong><br>
Five Four Three Two One</strong></p>
<p>My Menu In Reverse Order After My CSS Style: </p>
<div class="left-div">
<div class="left"> Five </div>
<div class="left"> Four </div>
<div class="left"> Three </div>
<div class="left"> Two </div>
<div class="left"> One </div>
</div>
<p> </p>
<p align="center"><a href="http://www.webune.com"> Web Hosting Provided By Webune.com </a></p>
</body>
</html>