Having added a contact form websites css is messed up
i added contact form working of website content displaced , no longer in place should be.
any appreciated, thanks!
http://dkphotos.net/contact/contact.html
html:
<!doctype html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" type="image/gif" href="../../animated_favicon1.gif" >
<title>contact</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<!--latest jquery core library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<link href="assets/css/contact.css" rel="stylesheet" type="text/css" /> <!-- ajax contact form stylesheet -->
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.jigowatt.js"></script><!-- ajax form submit -->
<script src="js/jquery-1.7.2.min.js"></script>
<style type="text/css">
a {
font-size: 15px;
color: #777777;
}
body,td,th {
font-size: 15px;
color: #444444;
font-family: "josefin slab";
}
a:link {
text-decoration: none;
color: #444444;
}
a:visited {
text-decoration: none;
color: #444444;
}
a:hover {
text-decoration: none;
color: #60baec;
}
a:active {
text-decoration: none;
color: #444444;
}
</style>
<script type="text/javascript">
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_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_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]; (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>
<style>
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:right;
}
a{
display: block;
font-size: 15px;
color: #444444;
font-weight: 400;
}
li {
margin-right:30px;
}
body,td,th {
font-family: josefin-slab;
font-style: normal;
font-weight: 400;
font-size: 15px;
color: #444444;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #444444;
}
a:hover {
text-decoration: none;
color: #60baec;
}
a:active {
text-decoration: none;
color: #444444;
font-size: 15em;
font-family: josefin-slab;
font-style: normal;
font-weight: 400;
}
</style>
<!--the following script tag downloads font adobe edge web fonts server use within web page. recommend not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/josefin-slab:n1,n4:default.js" type="text/javascript"></script>
</head>
<div class="wrapoverall">
<body text="#444444" link="#444444" vlink="#60baec" alink="#444444">
<div class="container" id="header container">
<div class="header"><a href="../home/home.html"><img src="images/home-page_03.png" name="logo" width="448" height="69" class="logo" id="logo" onmouseover="mm_swapimage('logo','','images/home_03-roll-over.png',1)" onmouseout="mm_swapimgrestore()" border="0" /></a></div>
<div class="navmain">
<div class="navmain">
</li>
<ul class="navbar"
style="width: 530px; float: right; font-weight: 400; font-family: josefin-slab; font-style: normal;">
<li><a href="contact.html">contact</a></li>
<li><a href="">blog</a></li>
<li><a href="../about/about.html">about</a></li>
<li><a href="">pricing</a></li>
<li><a href="../portfolio/portfolio.html">portfolio</a></li>
<li><a href="../home/home.html">home</a></li>
</ul>
</div><!--end navmain-->
</div><!--end logo-->
</div><!--end header-->
<!--main content-->
<div id="container">
<div id="contentbox2">
<p><div id="rightcontact">
<section id="contact">
<header>
<h1><span style="font-size: 20px; font-family: josefin-slab; font-style: normal; font-weight: 400;">email:</span> <a href="mailto:dkaltanas@yahoo.co.uk?subject=dkphotos" target="_top" style="font-family: josefin-slab; font-style: normal; font-weight: 400; font-size: 18px; line-height: 1.80em">
dkaltanas@yahoo.co.uk</a></h1>
<p><span style="font-size: 20px; font-family: josefin-slab; font-style: normal; font-weight: 400;">mobile:</span> <a href="tel:+447988385697" style="font-family: josefin-slab; font-style: normal; font-weight: 400; font-size: 18px; line-height: 1.80em">+447988385697</a></p>
<p><span style="font-size: 20px; font-family: josefin-slab; font-style: normal; font-weight: 400;">follow me on: <a href="https://www.facebook.com/dkphotos.net" target="_top" style="font-family: josefin-slab; font-style: normal; font-weight: 400; font-size: 18px; line-height: 1.80em">
facebook</a></p>
</header>
<mark id="message"></mark>
<form method="post" action="/contact/classes/contact.php" name="contactform" id="contactform" autocomplete="on">
<fieldset>
<legend>contact details</legend>
<div>
<label for="name" accesskey="u">your name</label>
<input name="name" type="text" required id="name" placeholder="enter name" />
</div>
<div>
<label for="email" accesskey="e">email</label>
<input name="email" type="email" id="email" placeholder="enter email address" pattern="^[a-za-z0-9](([_\.\-]?[a-za-z0-9]+)*)@([a-za-z0-9]+)(([\.\-]?[a-za-z0-9]+)*)\.([ a-za-z]{2,})$" required />
</div>
<div>
<label for="phone" accesskey="p"><span style="font-size: 18px; font-family: josefin-slab; font-style: normal; font-weight: 400;">phone</span> <small>(optional)</small></label>
<input name="phone" type="tel" id="phone" placeholder="enter phone number" />
</div>
</fieldset>
<fieldset>
<legend>your comments</legend>
<div>
<label for="subject" accesskey="s">subject</label>
<select name="subject" id="subject" required>
<option value="booking">booking</option>
<option value="general enquiry">general enquiry</option>
<option value="website">website</option>
<option value="other">other</option>
</select>
</div>
<div>
<label for="comments" accesskey="c">comments</label>
<textarea name="comments" cols="40" rows="3" id="comments" placeholder="enter comments" spellcheck="true" required></textarea>
</div>
</fieldset>
<input type="submit" class="submit" id="submit" value="submit" />
</form>
</section>
</div> <!--end box2 -->
</div> <!--end container -->
<!-- end main content-->
<div id="containerfooter">
<div id="box1" style="font-family: 'josefin slab'">
<p>all content <span style="font-size: 20px">©</span> dkphotos 2013</p>
</div> <!--end box1 -->
<div id="box2">
<p><script type="text/javascript">
// beginoawidget_instance_2149022: #oawidget
var urltolike = 'http://www.facebook.com/dkphotos.net';
if (urltolike == '') {
urltolike = window.location.href;
}
urltolike = encodeuricomponent(urltolike);
var font = encodeuricomponent('arial');
document.write ('<iframe src="http://www.facebook.com/widgets/like.php?locale=en_us&href='+urltolike+'&layout=button_cou nt&show_faces=false&width=450&height=150&action=like&font='+font+'&colorscheme=light" scrolling="no" frameborder="0" allowtransparency="true" style="border:none; border-color:#ffffff; overflow:hidden; width:450; height:150"></iframe>')
// endoawidget_instance_2149022
</script>
</div><!--end fblike--></p>
</div> <!--end box2 -->
<!--float clearing-->
<hr class="clearing" />
</div> <!--end container -->
</div><!--end wrapoverall-->
</body>
</html>
css:
@charset "utf-8";
/* css document */
body {
background-image:url(images/bg_body.jpg);
background-color:#ffffff;
background-attachment:fixed;
background-position:top;
}
.wrapoverall {
width: 1920px;
display: inline;
}
ul.navbar {
margin: 18px 0px 0px 0px;
padding: 0;
white-space: nowrap;
width: 950px;
overflow-x: auto;
display:inline-block;
}
ul.navbar li {
display:inline;
}
.header img.logo{
float: left;
margin: 0px 15px 0px 15px;
}
.container {
min-width: 1050px;
}
#container {
font-family: verdana, arial, helvetica, sans-serif;
border: 0;
width: 900px;
margin:0 auto; /*centered*/
overflow:hidden; /*float containment*/
}
#container {
clear:both;
width: 100%;
min-width: 900px;
}
#contentbox2 {
width: 900px;
min-height: 550px;
margin-bottom: 200px;
border: 0;
/*to reduce float drop issues in ie*/
word-wrap: break-word;
margin-left: auto;
margin-right: auto;
}
/**clear floats after boxes**/
.clearing {
clear:both;
visibility:hidden;
line-height:0;
font-size:1px;
display:block;
}
#containerfooter {
width: 100%;
min-width: 650px;
max-width: 100%;
}
#containerfooter {
font-family: verdana, arial, helvetica, sans-serif;
border: 0;
margin:0 auto; /*centered*/
overflow:hidden; /*float containment*/
}
#box1, #box2 {
width: auto;
min-height: 10px;
border: 0;
/*to reduce float drop issues in ie*/
word-wrap: break-word;
}
#box1 {margin-left: 8px; float: left;}
#box2 {margin-left: 20px; float: left;}
/**clear floats after boxes**/
.clearing {
clear:both;
visibility:hidden;
line-height:0;
font-size:1px;
display:block;
}
#containerfooter {
width:100%;
float:left;
}
#containerfooter {
position: fixed;
bottom: -145px;
z-index: 500;
background-color: #fff;
}
starting on line # 131 in html code view, have this:
</head>
<div class="wrapoverall">
<body text="#444444" link="#444444" vlink="#60baec" alink="#444444">
which should changed this:
</head>
<body>
<div class="wrapoverall">
======================
on line #142, have this:
<div class="navmain">
</li>
<ul class="navbar"
change this:
<div class="navmain">
<ul class="navbar"
if problems arise in future, validate code & fix reported errors.
nancy o.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment