Ik ben bezig met me nieuwe website: www.sergiomaessen.nl
Nou heb ik een contactformulier gedownload (model popup).
Hierbij zit een stylesheet, waar in de index naar verwezen word.
Ook zit er in de index een stylesheet, die voor de pagina zelf dient.
Als ik nu naar me site ga en op contact druk, dan zie ik dat dit een conflict veroorzaakt. Het ontwerp is namelijk een beetje in de war.
Hoe kan ik dit het beste oplossen? Heb al veel dingen geprobeerd, maar kom er niet uit.
Alvast bedankt.
Me index.php:
<?PHP
/*
Contact Form from HTML Form Guide
This program is free software published under the
terms of the GNU Lesser General Public License.
See this page for more info:
Here is a simple popup contact form (modal popup)
*/
//1. First, include the file popup-contactform.php
require_once('popup-contactform.php');
//2. link to the style file contact.css
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="XHTML namespace" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<link rel="STYLESHEET" type="text/css" href="style.css">
<link rel="STYLESHEET" type="text/css" href="popup-contact.css">
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<title>Sergio Maessen | Dutch trance DJ and producer</title></head>
<body onload="MM_preloadImages('images/facebookZW.png','images/facebook.png','images/soundcloud.png','images/twitter.png','images/made2dance.png','images/main.jpg','images/main2.jpg','images/biography2.jpg','images/releases2.jpg','images/events2.jpg','images/contacts2.jpg')">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td width="718" height="71" align="left" valign="top"><img src="http://www.pc-helpforum.be/images/spacer.gif" width="1" height="71"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td width="718" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="top">
<td width="425"><table width="425" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="342" align="left" valign="top"><img src="http://www.pc-helpforum.be/images/top_2b.jpg" width="425" height="342"></td>
</tr>
<tr>
<td align="right" valign="top"><table width="354" height="170" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','images/main2.jpg',1)"><img src="http://www.pc-helpforum.be/images/main.jpg" name="Image27" width="121" height="31" border="0"></a><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','images/main.jpg',1)"></a><a href="index.html"></a></td>
<td width="233" rowspan="6"><img src="http://www.pc-helpforum.be/images/right_1.jpg" width="233" height="170"></td>
</tr>
<tr>
<td><a href="index-1.html" onmouseover="MM_swapImage('Image28','','images/biography2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="http://www.pc-helpforum.be/images/biography.jpg" name="Image28" width="121" height="31" border="0"></a><a href="index-1.html"></a></td>
</tr>
<tr>
<td><a href="index-2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image29','','images/releases2.jpg',1)"><img src="http://www.pc-helpforum.be/images/releases.jpg" name="Image29" width="121" height="31" border="0"></a><a href="index-2.html"></a></td>
</tr>
<tr>
<td><a href="index-3.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image30','','images/events2.jpg',1)"><img src="http://www.pc-helpforum.be/images/events.jpg" name="Image30" width="121" height="31" border="0"></a><a href="index-3.html"></a></td>
</tr>
<tr>
<td><a href="index-4.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image31','','images/contacts2.jpg',1)"><img src="http://www.pc-helpforum.be/images/contacts.jpg" name="Image31" width="121" height="31" border="0"></a><a href="index-4.html"></a></td>
</tr>
<tr>
<td height="16"><img src="http://www.pc-helpforum.be/images/spacer.gif" width="1" height="16"></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><div style="padding-left:98px; padding-top:12px"></div></td>
</tr>
</table>
<div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','images/facebookZW.png',1)"></a><a href="Sergio Maessen | Facebook" target="_blank" onmouseover="MM_swapImage('Image22','','images/facebook.png',1)" onmouseout="MM_swapImgRestore()"></a><a href="Sergio Maessen's sounds on SoundCloud - Create, record and share your sounds for free" target="_blank" onmouseover="MM_swapImage('Image23','','images/soundcloud.png',1)" onmouseout="MM_swapImgRestore()"></a><a href="Sergio Maessen (@sergiomaessen) op Twitter" target="_blank" onmouseover="MM_swapImage('Image24','','images/twitter.png',1)" onmouseout="MM_swapImgRestore()"></a><a href="Made2Dance | Home" target="_blank" onmouseover="MM_swapImage('Image25','','images/made2dance.png',1)" onmouseout="MM_swapImgRestore()"></a></div>
<div align="center"><a href="Sergio Maessen | Facebook" target="_blank" onmouseover="MM_swapImage('Image22','','images/facebook.png',1)" onmouseout="MM_swapImgRestore()"><img src="http://www.pc-helpforum.be/images/facebookZW.png" alt="Facebook" name="Image22" width="45" height="45" border="0"></a><a href="Sergio Maessen (@sergiomaessen) op Twitter" target="_blank" onmouseover="MM_swapImage('Image23','','images/twitter.png',1)" onmouseout="MM_swapImgRestore()"><img src="http://www.pc-helpforum.be/images/twitterZW.png" alt="Twitter" name="Image23" width="45" height="45" border="0"></a><a href="Sergio Maessen's sounds on SoundCloud - Create, record and share your sounds for free" target="_blank"></a><a href="Made2Dance | Home" target="_blank" onmouseover="MM_swapImage('Image25','','images/made2dance.png',1)" onmouseout="MM_swapImgRestore()"><img src="http://www.pc-helpforum.be/images/made2danceZW.png" alt="Made2Dance Records" name="Image25" width="45" height="45" border="0"></a><a href="Sergio Maessen's sounds on SoundCloud - Create, record and share your sounds for free" target="_blank" onmouseover="MM_swapImage('Image26','','images/soundcloud.png',1)" onmouseout="MM_swapImgRestore()"><img src="http://www.pc-helpforum.be/images/soundcloudZW.png" alt="Soundcloud" name="Image26" width="45" height="45" border="0"></a></div></td>
<td height="100%" background="http://www.pc-helpforum.be/images/rep_1.jpg"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" background="http://www.pc-helpforum.be/images/bottom_1.jpg" style="background-position:bottom left; background-repeat:no-repeat ">
<tr>
<td height="94" align="left" valign="top"><img src="http://www.pc-helpforum.be/images/top_1.jpg" width="293" height="94"></td>
</tr>
<tr>
<td height="100%" align="left" valign="top" background="http://www.pc-helpforum.be/images/back_1.jpg" style="background-position:top left; background-repeat:no-repeat "><table width="100%" height="465%" border="0" cellpadding="0" cellspacing="0" id="table">
<tr>
<td width="0" height="466" align="left" valign="top" background="http://www.pc-helpforum.be/images/line_1.jpg" style="background-position:bottom right; background-repeat:no-repeat "><table width="80%" height="18%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><p><span class="style2 style3"><span class="style4"><br>
contact </span> <span class="style6">sergiomaessen<br>
</span></span><span class="style2">
<body onload="javascript:fg_hideform('fg_formContainer','fg_backgroundpopup');">
</span><span class="style2"><p><a href='javascript:fg_popup_form("fg_formContainer","fg_form_InnerContainer","fg_backgroundpopup");'
><img border='0' src='contact-us-button.png' width='213' height='39' /></a></p>
</span>
<p><span class="style2">
<?PHP
//3. php include contactform-code.php at the end of the page
require_once('contactform-code.php');
?>
<br>
</span></p>
</td>
</tr>
</table>
<p> </p>
<p> </p>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td> </td>
</tr>
</table>
</body>
</html>
Style.css:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
}
.style1 {
color: #afafaf;
font-size: 11px;
font-family: tahoma;
}
.style2 {
color: #8c8c8c;
font-size: 11px;
font-family: tahoma;
}
.style3 {
color: #000000;
}
.style4 {
font-size: 12px;
font-weight: bold;
}
.style6 {
font-size: 12px;
font-weight: bold;
color: #8C8C8C;
}
Popup-contact.css
/*
Popup Contact Form by html-form-guide.com
You can customize all the aspects of the form in this style sheet
All the style elements use form id selector(notice the #contactus). So, including this
stylesheet does not affect the other elements at all!
*/
#contactus fieldset
{
width:320px;
padding:20px;
border:1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#contactus legend, h2
{
font-family : Arial, sans-serif;
font-size: 1.3em;
font-weight:bold;
color:#333;
}
#contactus label
{
font-family : Arial, sans-serif;
font-size:0.8em;
font-weight: bold;
}
#contactus input[type="text"],textarea
{
font-family : Arial, Verdana, sans-serif;
font-size: 0.8em;
line-height:140%;
color : #000;
padding : 3px;
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#contactus input[type="text"]
{
height:18px;
width:220px;
}
#contactus #scaptcha
{
width:60px;
height:18px;
}
#contactus input[type="submit"]
{
width:100px;
height:30px;
padding-left:0px;
}
#contactus textarea
{
height:120px;
width:310px;
}
#contactus input[type="text"]:focus,textarea:focus
{
color : #009;
border : 1px solid #990000;
background-color : #ffff99;
font-weight:bold;
}
#contactus .container
{
margin-top:8px;
margin-bottom: 10px;
}
#contactus .error
{
font-family: Verdana, Arial, sans-serif;
font-size: 0.7em;
color: #900;
background-color : #ffff00;
}
#contactus fieldset#antispam
{
padding:2px;
border-top:1px solid #EEE;
border-left:0;
border-right:0;
border-bottom:0;
width:350px;
}
#contactus fieldset#antispam legend
{
font-family : Arial, sans-serif;
font-size: 0.8em;
font-weight:bold;
color:#333;
}
#contactus .short_explanation
{
font-family : Arial, sans-serif;
font-size: 0.6em;
color:#333;
}
#fg_formContainer
{
height:500px;
width:390px;
background:#FFFFFF;
border:1px solid #000;
padding:0;
position:absolute;
z-index:999;
cursor:default;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
display:none;
}
#fg_container_header
{
height:30px;
background:#000066;
border-top-right-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-khtml-border-top-right-radius: 10px;
border-top-left-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-khtml-border-top-left-radius: 10px;
}
#fg_container_header a
{
color:#fff;
font-family:Verdana,Arial;
font-size:10pt;
font-weight:bold;
}
#fg_box_Title
{
float:left;
width:180px;
margin:5px;
color:#fff;
font-family:Verdana,Arial;
font-size:12pt;
font-weight:bold;
}
#fg_box_Close
{
float:right;
width:80px;
margin:5px;
}
#fg_form_InnerContainer
{
margin:15px;
}
#fg_form_InnerContainer h2
{
font-family : Arial, sans-serif;
font-size: 14pt;
font-weight:bold;
color:#333;
}
#fg_form_InnerContainer p
{
font-family : Arial, sans-serif;
font-size: 12pt;
color:#333;
}
#fg_backgroundpopup
{
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
background:#000000;
opacity: .3;
-moz-opacity: .3;
filter: alpha(opacity=30);
border:1px solid #cecece;
z-index:1;
display:none;
}
#fg_submit_success_message
{
display:none;
padding:15px;
}
/* spam_trap: This input is hidden. This is here to trick the spam bots*/
#contactus .spmhidip
{
display:none;
width:10px;
height:3px;
}
#fg_crdiv
{
font-family : Arial, sans-serif;
font-size: 0.3em;
opacity: .2;
-moz-opacity: .2;
filter: alpha(opacity=20);
}
#fg_crdiv p
{
display:none;
}
