Please help,big problem with css layout

MerlinA

No stars yet

Posts: 10

From: U.K

I've got a problem and I just dont know what to do,i've been searching for hours for a solution and I'am desperate.

I tried the website into two different screen resolutions, everything looks fine,all the content is centered perfectly but when I press the restore button to minimize the browser all the layout moves out of place,or background I really don't know,all I can say that I think is the layout that moves out of place.

What could be causing this problem? Here is the code of how my website ,I would appreciate a lot if someone can tell me exactly what's causing this to shift the layout on the right when I resize the browser with restore button.

<?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:
http://www.html-form-guide.com/contact-form/simple-modal-popup-contact-form.html
*/
//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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><style type="text/css">

</style>
<head>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>

<script type="text/javascript">

//<![CDATA[

$(document).ready(function () {

//Append a div with hover class to all the LI
$('#navMenu li').append('<div class="hover"><\/div>');

$('#navMenu li').hover(

//Mouseover, fadeIn the hidden hover class
function() {

$(this).children('div').stop(true, true).fadeIn('1000');

},

//Mouseout, fadeOut the hover class
function() {

$(this).children('div').stop(true, true).fadeOut('1000');

}).click (function () {

//Add selected class if user clicked on it
$(this).addClass('selected');

});

});

//]]>

</script>
<link rel="stylesheet" href="css/thumbnailviewer.css" type="text/css" />

<script src="js/thumbnailviewer.js" type="text/javascript">

<script type="text/javascript" src="js/prototype.js" type="text/javascript"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="simpleTicker.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

<script type='text/javascript' src='scripts/gen_validatorv31.js' type="text/javascript"></script>
<script type='text/javascript' src='scripts/fg_ajax.js'type="text/javascript"></script>
<script type='text/javascript' src='scripts/fg_captcha_validator.js' type="text/javascript"></script>
<script type='text/javascript' src='scripts/fg_moveable_popup.js' type="text/javascript"></script>
<script type='text/javascript' src='scripts/fg_form_submitter.js' type="text/javascript"></script>

<link rel="STYLESHEET" type="text/css" href="popup-contact.css">


<script type="text/javascript" src="jquery.thumbnailScroller.js"></script>

<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>

</head>

<body class="bg">

<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="165"> <div valign="top">
<table width="638" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="626" height="165" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="628" height="147" hspace="2" align="top" id="FlashID" title="hd">
<param name="movie" value="Header retry/headerr.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />

<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="SCALE" value="exactfit" />


<object data="Header retry/headerr.swf" type="application/x-shockwave-flash" width="628" height="147" hspace="2" align="top">

<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="SCALE" value="exactfit" />


<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>

</object>

</object></td>
</tr>
</table>
</div></td>
</tr>
</table>
<table width="960" height="1141" border="0" align="center" cellpadding="0" cellspacing="10">
<tr>
<td width="960" height="1119"><table width="939" height="800" border="0" cellpadding="4" cellspacing="0">
<tr align="center" valign="top">
<th width="301" height="950" scope="row"><table width="300" height="896" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="307" height="894" scope="col"><div class="menu" id="b" align="left">
<ul id="navMenu">
<li><a href="#"><b>HOME</b></a></li>
<li><a href="#"><b></b></a></li>
<li><a href="#"><b>ART</b></a></li>
<li><a href="#"><b></b></a></li>
<li><a href="#"><b>EVENTS</b></a></li>
<li><a href="#"><b></b></a></li>
</ul>
</div>
</div>
<p> </p>
<p align="left">  </p>
<div id="img"></div>
<p align="left"> </p>
<div class="news" id="nws"> <dl id="ticker" align="left">
<dt class="heading">dt><dd class="text">All updates on events.</dd>
<dt class="heading"></dt><dd class="text">Coming Soon...</dd>
<dt class="heading"> - Feb 2012</dt><dd class="text">Like Art? A new forum dedicated to all the Artists of our Time,coming near our screens</dd>
<dt class="heading">3D Animation Short Movie</dt><dd class="text"> SPRING 2012...</dd>
<dt class="heading"></dt><dd class="text">New Theme: "Mind's Spheres".</dd>
<dt class="heading"></dt><dd class="text">More info on the movie and story coming soon...</dd>
<dt class="heading"></dt><dd class="text">new updates..</dd>
<dt class="heading"> Events 2012</dt><dd class="text">Further info coming soon..</dd>
</dl><div id="tickerContainer" align="left">

</div>

<script type="text/javascript">
$(function() {

//cache the ticker
var ticker = $("#ticker");

//wrap dt:dd pairs in divs
ticker.children().filter("dt").each(function() {

var dt = $(this),
container = $("<div>");

dt.next().appendTo(container);
dt.prependTo(container);

container.appendTo(ticker);
});

//hide the scrollbar
ticker.css("overflow", "hidden");

//animator function
function animator(currentItem) {

//work out new anim duration
var distance = currentItem.height();
duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;

//animate the first child of the ticker
currentItem.animate({ marginTop: -distance }, duration, "linear", function() {

//move current item to the bottom
currentItem.appendTo(currentItem.parent()).css("marginTop", 0);

//recurse
animator(currentItem.parent().children(":first"));
});
};

//start the ticker
animator(ticker.children(":first"));

//set mouseenter
ticker.mouseenter(function() {

//stop current animation
ticker.children().stop();

});

//set mouseleave
ticker.mouseleave(function() {

//resume animation
animator(ticker.children(":first"));

});
});
</script></div>
</div>
</td>
</tr>
</table></th>
<th width="550" valign="top" scope="row"><table width="500" height="741" border="0" align="right" cellpadding="0" cellspacing="10">
<tr>
<td width="344" height="719"><div id="pics">;
<p> paintings
</p>

</p>
<p align="center"> </p></div></td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="extr">content here

</div>
<p> </p></th>
<th width="64" valign="top" scope="row"><div id="cbtn"><a href='javascript:fg_popup_form("fg_formContainer","fg_form_InnerContainer","fg_backgroundpopup");'
><img src='buttonC.png' name="cn" width='50' height='125' border='0' id="cn" alt="" /></a></div></th>
</tr>
</table>
<table width="935" height="167" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="931" height="113"><div id="thmbscr"><div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href="askevents.html"><img src="thumbs/img1.jpg" alt=""/></a>
<a href="#"><img src="thumbs/img2.jpg" alt=""/></a>
<a href="#"><img src="thumbs/img3.jpg" alt=""/></a>
<a href="#"><img src="thumbs/img4.jpg" alt=""/></a>
<a href="#"><img src="thumbs/img6a.jpg" alt=""/></a>
<a href="#"><img src="thumbs/img6.jpg" alt=""/></a>
<a href="#"><img src="thumbs/img7.jpg" alt="" /></a>
<a href="#"><img src="thumbs/img8.jpg" alt=""/></a>
<a href="#"><img src="thumbs/img9.jpg" alt=""/></a>
<a href="#"><img src="thumbs/img10.jpg" alt=""/></a>
<a href="#"></a>

</div>
</div>
<a href="#" class="jTscrollerPrevButton"></a>
<a href="#" class="jTscrollerNextButton"></a>
</div>
</div></div></td>

</tr>

</table></td>
</tr>
<script src="jquery.thumbnailScroller.js" type="text/javascript"></script>

<SCRIPT TYPE="text/javascript">

</SCRIPT>

<script>
jQuery.noConflict();
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"hoverPrecise",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
//-->
</script>
</table>
<table width="963" height="163" border="0" align="center" cellpadding="0" cellspacing="20">
<tr>
<td width="960" height="21" align="left" valign="top"><div id="p1">
<div id="a">
<div id="adv">
<div id="bup"><a href="#top" position="right"><img src="top.png" width="72" height="90" /></a></div>
</div>
</div></td>
</tr>
</table>
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="960" height="74" align="right" valign="middle"><div id="bottom"><img src="tui.png" alt="" width="960" border="1" align="middle" />
<div id="bottom"><a href="" target="_blank"><img src="FB.png" width="21" height="24" /></a><a href=""></a> <a href="" target="_blank"><img src="myspace.png" alt="" width="22" height="24" /></a> <a href" target="_blank"><img src="youtube.png" width="22" height="24" /></a><a href="/" target="_blank"><img src="blog.png" width="22" height="24" /></a><a href="" target="_blank"><img src="twitter.png" width="22" height="24" /></a></div>
</div></td>
</tr>
</table>

<div id='bar'>
<style type="text/css">
#bottom {
width: 76%;
position: fixed;
bottom: 30px;
border-top: 2px solid #000000;
border-left: ;
border-right: ;

-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
margin-bottom:-30px;
}

</style>
</div>

<div id='fg_formContainer'>
<div id="fg_container_header">
<div id="fg_box_Title">Contact us</div>
<div id="fg_box_Close"><a href="javascript:fg_hideform('fg_formContainer','fg_backgroundpopup');">Close(X)</a></div>
</div>

<div id="fg_form_InnerContainer">
<form id='contactus' action='javascript:fg_submit_form()' method='post' accept-charset='UTF-8'>

<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
<input type='text' class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />
<div class='short_explanation'>* required fields</div>
<div id='fg_server_errors' class='error'></div>
<div class='container'>
<label for='name' >Your Full Name*: </label><br/>
<input type='text' name='name' id='name' value='' maxlength="50" /><br/>
<span id='contactus_name_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='email' >Email Address*:</label><br/>
<input type='text' name='email' id='email' value='' maxlength="50" /><br/>
<span id='contactus_email_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='message' >Message:</label><br/>
<span id='contactus_message_errorloc' class='error'></span>
<textarea rows="10" cols="50" name='message' id='message'></textarea>
</div>
<div class='container'>
<div><img alt='Captcha image' src='show-captcha.php?rand=1' id='scaptcha_img' /></div>
<label for='scaptcha' >Enter the code above here:</label>
<input type='text' name='scaptcha' id='scaptcha' maxlength="10" /><br/>
<span id='contactus_scaptcha_errorloc' class='error'></span>
<div class='short_explanation'>Can't read the image?
<a href='javascript: refresh_captcha_img();'>Click here to refresh</a>.</div>
</div>

<div class='container'>
<input type='submit' name='Submit' value='Submit' />
</div>
</form>
</div>
</div>


<script type='text/javascript'>
// <![CDATA[

var frmvalidator = new Validator("contactus");
frmvalidator.EnableOnPageErrorDisplay();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("name","req","Please provide your name");

frmvalidator.addValidation("email","req","Please provide your email address");

frmvalidator.addValidation("email","email","Please provide a valid email address");

frmvalidator.addValidation("message","maxlen=2048","The message is too long!(more than 2KB!)");

frmvalidator.addValidation("scaptcha","req","Please enter the code in the image above");

document.forms['contactus'].scaptcha.validator
= new FG_CaptchaValidator(document.forms['contactus'].scaptcha,
document.images['scaptcha_img']);

function SCaptcha_Validate()
{
return document.forms['contactus'].scaptcha.validator.validate();
}

frmvalidator.setAddnlValidationFunction("SCaptcha_Validate");

function refresh_captcha_img()
{
var img = document.images['scaptcha_img'];
img.src = img.src.substring(0,img.src.lastIndexOf("?")) + "?rand="+Math.random()*1000;
}

document.forms['contactus'].refresh_container=function()
{
var formpopup = document.getElementById('fg_formContainer');
var innerdiv = document.getElementById('fg_form_InnerContainer');
var b = innerdiv.offsetHeight+40+30;

formpopup.style.height = b+"px";
}

document.forms['contactus'].form_val_onsubmit = document.forms['contactus'].onsubmit;

document.forms['contactus'].onsubmit=function()
{
if(!this.form_val_onsubmit())
{
this.refresh_container();
return false;
}

return true;
}
function fg_submit_form()
{
//alert('submiting form');
var containerobj = document.getElementById('fg_form_InnerContainer');
var sourceobj = document.getElementById('fg_submit_success_message');
var error_div = document.getElementById('fg_server_errors');
var formobj = document.forms['contactus']

var submitter = new FG_FormSubmitter("popup-contactform.php",containerobj,sourceobj,error_div,formobj);
var frm = document.forms['contactus'];

submitter.submit_form(frm);
}

// ]]>
</script>

<div id='fg_backgroundpopup'></div>

<div id='fg_submit_success_message'>
<h2>Thanks!</h2>
<p>
Thanks for contacting us. We will get in touch with you soon!
<p>
<a href="javascript:fg_hideform('fg_formContainer','fg_backgroundpopup');">Close this window</a>
<p>
</p>
</div>

<script type="text/javascript">

</script>

</body>
</html>

[Edited by MerlinA on 05-Apr-12 20:22]

chrishirst

Gold

Posts: 833

From: Blackpool, Lancashire, England

Provide a URL for YOUR page with the problem, NOT the fully working tutorial/example please.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/

jj

No stars yet

Posts: 17

From: Sweden

Hi MerlinA,

I scrolled trough the code and just taught "too many tables".
Try to use <div>s as much as possible, and close the divs after tables, if the table do not contain any divs like:


<div class="x">
<table>
<tr></tr>
</table>
</div>

And wassup with all the empty paragraphs and  ?
A wise thing to do is to clean up your code as mush as possible!

And for best support, give us the concrete example. Upload your site in a temporary folder and post a link here

Do not forget to use the code (<>)-button if posting code.

Peaaacccee!

MerlinA

No stars yet

Posts: 10

From: U.K

i try to change like you said about cleaning up the css with tables and closing divs but the moment I do that everything in the content moves out of place,I'am so confused about the css, plus I noticed when I restore the browser I think that background image moves on the left can anyone please help me, I really want to finish this website.

Plus how can I make only divs without tables, I tried before but it doesent stay in place like with tables it does, I tried in two resolutions and with the table it stays in place.

Please help me,

* I need to know also how to stop the background image from moving on the left everytime I restore the browser.

* stop the background from stretching vertically in a smaller resolution.

*Also to stop the text from coming out of div when I change screen resolution it sticks out of the page and forms an horizontal scroll bar.

* also if anyone knows any pop up contact form that actually works with captcha in it and is compatible with other scrips (java and jquery and prototype.js)

Please help me, Iam desperate

[Edited by MerlinA on 11-Apr-12 10:08]

MerlinA

No stars yet

Posts: 10

From: U.K

please helppppp meeeeeeeeeeeeeeeeeeee

chrishirst

Gold

Posts: 833

From: Blackpool, Lancashire, England

Provide a URI to the problem document and we may be able to!

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/

Elated: Helping People Make Websites Since 1997

Please help,big problem with css layout

Follow Elated

Current forum topics

Popular articles

Elated: Helping People Make Websites Since 1997

Please help,big problem with css layout

Share This Page

Link to this page

Follow Elated

Subscribe to the Elated Newsletter

Current forum topics

Popular articles