<td align=”center” valign=”middle” class=”nav”><div>
<ul id=”p7menubar“>
<li><a href=”index.asp” class=”nav” id=”home-active”>HOME</a></li>
<li><a href=”visie.asp” class=”nav” id=”visie-active”>VISIE</a></li>
<li><a href=”buro.asp” class=”nav” id=”buro-active”>BURO</a></li>
<li><a href=”activiteiten.asp” class=”nav” id=”activiteiten-active”>ACTIVITEITEN</a></li>
<li><a href=”nieuwbouw.asp” class=”nav” id=”realisaties-active”>REALISATIES</a>
<ul>
<li><a href=”nieuwbouw.asp”>Nieuwbouw</a></li>
<li><a href=”verbouwing.asp”>Verbouwing</a></li>
<li><a href=”interieur.asp”>Interieur</a></li>
</ul>
</li>
<li><a href=”contact.asp” class=”nav” id=”contact-active”>CONTACT</a></li>
<li><a href=”http://www.mappy.com/BtoB/Proximedia/map?map.id=3023663;map.provider=Proximedia;&amp;xml.state.wanted_lang=nl” target=”_blank” class=”nav”>STRATENPLAN</a></li>
</ul>
</div></td>

Stylesheet:

#home #home-active, #visie #visie-active, #buro #buro-active, #activiteiten #activiteiten-active, #realisaties #realisaties-active, #contact #contact-active {color:#666666; text-decoration: none;}

/* CSS for dropdown menu */

.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#p7menubar, #p7menubar ul {
padding: 0;
margin: 0;
margin-left:25px;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
#p7menubar a {
display: block;
padding-right:23px;
}
/*#p7menubar a.trigger {
padding: 5px 16px 5px 10px;
background-image: url(images/p7PM_dark_south.gif);
background-repeat: no-repeat;
background-position: right center;
}*/
#p7menubar li {
float: left;
width: auto;
}
#p7menubar li img { display:block;}
/*#p7menubar li ul, #p7menubar ul li  {
width: 12em;
}*/
#p7menubar ul li a  {
color: #565656;
font-family: Arial, Helvetica, sans-serif;
border-right: 0;
padding: 3px;
text-decoration:none;
float:left;
}
#p7menubar li ul {
position: absolute;
display: none;
background-color: none;
padding:0;
margin:0;
}
#p7menubar li ul li, #p7menubar li ul li{
float:left;
padding:0;
margin:0;
}
#p7menubar li:hover a, #p7menubar a:focus,
#p7menubar a:active, #p7menubar li.p7hvr a {
color: #666666;
}
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
padding:0;
margin:0;
}
#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {
color:#99CC00;
float:left;
background-color: transparent;
padding-right:10px;
}
#p7menubar ul a:hover {
background-color: #000!important;
color: #FFFFFF!important;
padding-right:10px;
}
/*#p7menubar li {width: auto;}*/

Javascript page:

function P7_ExpMenu(){ //v1.1.0.2 by PVII-www.projectseven.com
if(navigator.appVersion.indexOf(”MSIE”)==-1){return;}
var i,k,g,lg,r=/\s*p7hvr/,nn=”,c,cs=’p7hvr’,bv=’p7menubar‘;
for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){
lg=g.getElementsByTagName(”LI”);if(lg){for(k=0;k<lg.length;k++){
lg[k].onmouseover=function(){c=this.className;cl=(c)?c+’ ‘+cs:cs;
this.className=cl;};lg[k].onmouseout=function(){c=this.className;
this.className=(c)?c.replace(r,”):”;};}}}nn=i+1;}
}

A. To put in the header:

1. the javscript page

B. To put in the body:

The slideshow

<script src=”js/ja.header.js” type=”text/javascript”></script>
<script type=”text/javascript”>var fadetime = “3000″;</script>
<div id=”ja_header_jsfade” >
<img src=”images/img_1.jpg” alt=”Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />
<img src=”images/img_2.jpg” alt=”Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />
<img src=”images/img_3.jpg” alt=” Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />
<img src=”images/img_4.jpg” alt=”Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />

C. The JS page:

1. ja.header.js

/*
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
*/

window.addEventListener?window.addEventListener(’load’,so_init,false):window.attachEvent(’onload’,so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false, div;
var fadetime = 3000;
function so_init()
{
if(!d.getElementById || !d.createElement)return;

imgs = d.getElementById(’ja_header_jsfade’).getElementsByTagName(’img’);
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = ‘block’;
imgs[0].xOpacity = .99;

setTimeout(so_xfade,fadetime);
}

function so_xfade()
{
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgs[nIndex].style.display = ‘block’;
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);

if(cOpacity<=0)
{
imgs[current].style.display = ‘none’;
current = nIndex;
setTimeout(so_xfade,fadetime);
}
else
{
setTimeout(so_xfade,50);
}

function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}

obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = ‘alpha(opacity=’ + (obj.xOpacity*100) + ‘)’;
}
}

1. What to put in the <head>:
<script type=”text/javascript”>
var imgs1 = new Array(”images/banner1.jpg”,”images/banner2.jpg”,”images/banner3.jpg”); <!–images–>
var lnks1 = new Array(”index.asp”,”index.asp”,”index.asp”);
var alt1 = new Array(”MVS - BVBA”,”MVS - BVBA”,”MVS - BVBA”);
var currentAd1 = 0;
var imgCt1 = 3; <!– the total images that will be use–>
function cycle1() {
if (currentAd1 == imgCt1) {
currentAd1 = 0;
}
var banner1 = document.getElementById(’adBanner1′);
var link1 = document.getElementById(’adLink1′);
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById(’adLink1′).href=lnks1[currentAd1]
currentAd1++;
}
window.setInterval(”cycle1()”,3000); <!– the time interval = the time limit between the images–>

</script>

</head>

2. What to put in the <body>:

<tr>
<td align=”left” valign=”top”><a href=”"urllink1“” id=”adLink1” target=”_top”><img src=”images/banner1.jpg“  alt=”MVS - BVBA” width=”780″ height=”329″ “id=”adBanner1” border=”0″/></a></td>
</tr>

</body>

Well done - with this easy function you can rotate any banner or header images how many and how long you want to display on your website.

— Groeten, Rofaldez —

Keep the header page clean and simple like the example they provide us with from 1 of their projekt.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<%
if request(”DocID”) = “” then
CMSdocid = “43849″       <!– change to the index ID –>
else
CMSdocid = request(”DocID”)
end if

if request(”langue”) = “” then
CMSlangue = “NL”
else
CMSlangue = request(”langue”)
end if
%>
<!– #include virtual=”../modules/CMS.asp” –> <!–Otherwise it will not work with the CMS–>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>><%getMeta “33776″,”NL”,”Title”%></title>
<meta name=”Customer” content=”03023813“>
<META name=”Author” content=”Pro”>
<meta name=”geography” content=”Stad, land, postcode”>
<META name=”Description” content=”<%getMeta “33776″,”NL”,”Description”%>” lang=”nl”>
<META name=”Keywords” content=”<%getMeta “33776″,”NL”,”Keywords”%>” lang=”nl”>
<meta name=”language” content=”<% =”NL”  %>“>
<meta name=”Copyright” content=”Pro”>
<meta name=”publisher” content=”Pro”>
<META name=”Revisit-After” content=”15 days”>
<meta name=”robots” content=”ALL”>
<META http-equiv=”imagetoolbar” content=”no”>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
<script language=”JavaScript” src=”js/plan.js“></script>
</head>

Usually the header is split with some part of the body piece, mostly with the header image, banner, logo, etc…If changes are to be done in the header I will update immediately.

If you manage to contruct a simple if and els statement in asp this would not be a problem to construct the page.asp pages for “pro” clients.
Example:

• To receive the content from a activated ID in the CMS:    
  <% getBloc CMSdocid,CMSlangue,”Info” %>
• To display the contact form page:
  <% if CMSdocid = “43857″ then %>
  <% getBloc CMSdocid,CMSlangue,”" %>
  <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
  <tr>
  <td valign=”top”> <!– #include file=”ContactForm.asp” –> </td>
  </tr>
  </table> <% end if %>
• To display the photogallery in “pro”:
  <% if CMSdocid = “43856″ then %>
  <% getBloc CMSdocid,CMSlangue,”" %>
  <% getGallery “33776″,CMSlangue,”" %> <% end if %>

So for a complete list to display the content and modules in “pro”:

<% if CMSdocid = “43856″ then %>
<% getBloc CMSdocid,CMSlangue,”" %>
<% getGallery “33776″,CMSlangue,”" %>
<% elseif CMSdocid = “43857″ then %>
<% getBloc CMSdocid,CMSlangue,”" %>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td valign=”top”> <!– #include file=”ContactForm.asp” –> </td>
</tr>
</table>
<%  else  %>
<% getBloc CMSdocid,CMSlangue,”Info” %>
<% end if %>

As you can see for combining 3 requested content we use the if, then, ifelse, endif statement in ASP page.
Stay up to date for more content code for the upcoming devastating asp code for proximedia.

We are developing and designing websites for “pro”. “Pro” uses a CMS for all websites of the clients. This CMS uses asp code and where the website should be very strict under “pro” requirements. For example: “pro” logo (with hyperlink), huge banner (most website), etc…

For developing the ASP page the html page will be devided mostly in:

1. header.asp
2. navigation.asp
3. page.asp
4. footer.asp
5 adres.asp (sometimes)

For including asp pages we use:

<!–#include file=”header.asp”–>
<!–#include file=”navigation.asp”–>
<!–#include file=”footer.asp”–>

Example page: A cool portfolio for your website

Slimbox versus Lightbox:

Features:

From a functional point of view, Slimbox has the following added features compared to the original Lightbox:

* Slimbox is ready to launch as soon as the document is ready. This means that you don’t have to wait for all images of the page to be loaded before clicking on a link launching the Lightbox effect.
* The left and right arrow keys can be used to navigate through images, and the ESC key can be used to close Slimbox (Warning: in Mozilla browsers, the ESC key is also used to stop GIF images from animating).
* The dark background overlay can be clicked anywhere to close Slimbox, even on the parts located on the left and right of the image.
* The script is more robust; for example you can try to start-stop Slimbox very quickly to interrupt the animation then resume it and you won’t notice any bug like in the original Lightbox where sometimes the animation stops or the captions are wrongly sized.
* Slimbox temporary hides flash animations and other embedded videos while it is open to avoid display bugs in some browsers.
* Slimbox can be launched from the traditional image links inside the page like the original Lightbox, but also directly from a Javascript call using a special method.

Like they say it, my opinion the slimbox works exactly like the lightbox.

The differences from the lightbox:

* The code has been entirely rewritten with efficiency in mind for the mootools framework instead of the huge Prototype/Scriptaculous. The script itself is as tiny as 7kb (uncompressed).
* The Slimbox CSS are simpler and 100% valid (no more CSS hacks). Also, all images used by Slimbox are specified in the CSS instead of the Javascript so it is easier to style.
* Slimbox does not use the 1 pixel transparent gif image needed by Lightbox.

As you can read, its alot lighter then the lightbox - Can this be true? Slimbox is more lighter then THE LIGHT BOX? Why do they call it light box? Got it?

The tool required:

Slimbox 1.4 requires the mootools framework, version 1.1 or more recent. Because mootools is modular, you can make your download smaller by only downloading the modules your scripts are actually using. Here are the modules required by Slimbox:

* Class: all
* Native: all
* Element: Element.Event
* Window: Window.DomReady, Window.Size
* Effects: Fx.Style, Fx.Styles (optionally Fx.Transitions)

1 - place this in the header tag:

2 - inlude the script in the header tag aswell:

3 - Customize your stylesheet with the slimbox.css:

4 - activate the plugin:

Example:

<a title=”my caption” rel=”lightbox” href=”image-1.jpg”>image #1</a>

Mutiple:

<a rel=”lightbox[atomium]” href=”image-1.jpg”>image #1</a>
<a rel=”lightbox[atomium]” href=”mage-2.jpg”>image #2</a>
<a rel=”lightbox[atomium]” href=”image-3.jpg”>image #3</a>

Display 1 image:

Alternatively, you can also launch the Lightbox effect using Javascript to display a single image. Just call the following method, passing the URL of the image as first parameter and optionally a title as second parameter:

Lightbox.show(’images/image-1.jpg’, ‘Spheres in construction’);

http://www.rofaldez.com/media/transparent-html

1. The only thing you need is a wallpaper
2. A transparent white background with a png extension. I cut it up using photoshop. Give the white background a tranparency of 32%. Export it as a PNG extension and enable the transparent option.
3. Source code in your stylesheet:

html {
overflow: -moz-scrollbars-vertical;
height:100%;
}
body{
height:100%;
margin-left: 0px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
}
.maintable {
width: 600px;
height: 300px;
background-image:url(images/cubic-background.jpg);
background-repeat:repeat-x;
vertical-align:middle;

}

.trans_box2 {
font-family:verdana;
font-weight:bold;
padding:40px;
margin:30px;
border:solid 1px #555;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’images/35-transparent.png’);
}
/* IE ignores styles with [attributes], so it will skip the following. */
.trans_box2[class] {
background-image:url(images/35-transparent.png);
vertical-align:top;
color:#ffffff;
}

4. Enjoy your lovely background as it is with a transparent background in front of it with your text.

Here are some Godaddy coupons that you can use, it will save you some buck or so. Some coupons are already expired - some do still work after the expired date. I will mention the date of expiration also along with the code. Enjoy!