Jump to content

Div not appearing appropriately


lostprophetpunk

Recommended Posts

Hello there,

 

I have come across a problem whilst making a jquery slider.

 

Now, I have tested this code on a test page, and it seems to work perfectly...

<!DOCTYPE html>
<html>
<head>

<script src="js/jquery.js" type="text/javascript" language="javascript"></script>  
<script src="http://jqueryui.com/latest/ui/effects.core.js"></script>
<script src="http://jqueryui.com/latest/ui/effects.slide.js"></script>

<style type="text/css">
#wrap { width: 400px; height: 450px; overflow: hidden; }
#meh { width: 800px; height: 450px; background: #333333; position: relative; float: left; }
#meh2 { width: 400px; height: 450px; background: #888888; position: relative; margin-left: 400px; float: left; clear: both; }
#meh3 { width: 400px; height: 450px; background: #888888; position: relative; margin-left: 400px; float: left; clear: both; }
</style>

<script type="text/javascript">
$(document).ready(function(){
  $("a.test").click(function(){
    $("#meh").animate({"right": "+=400px"}, "slow");
  });
});
</script>

</head>
<body>

<div id='wrap'>
<div id='meh'><div id='meh2'>srlkjdngklngrkegkoenoeho<br /><br />lsdknsdlfhnkldhn</div><div id='meh2'>srsd;lmg;smgsmglkjdngklngrkegkosdfl;mnds;klld;n;enoeho</div></div>
</div>
<br /><br />
<a href='#' class='test'>click</a>

</body>
</html>

 

But when I try to implement it into my actual page...the divs do not show properly (no backgrounds or height/width set even though they are) and all is shown is the text from both divs...

 

Here is the code for the actual page...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Minihobbs</title>
<script src="js/jquery.js" type="text/javascript" language="javascript"></script>
<script src="http://jqueryui.com/latest/ui/effects.core.js"></script>
<script src="http://jqueryui.com/latest/ui/effects.slide.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("a.about").click(function(){
    $("#container").animate({"right": "+=400px"}, "slow");
  });
});
</script>

<style type='text/css' ref='stylesheet' media='screen'>
html, body { margin: 0; padding: 0; }
body { background: transparent url(images/bg.png) center center; }
#wrapper { width: 940px; margin: auto; }
#top { width: 940px; height: 100px; }
#logo { width: 236px; height: 60px; background: transparent url(images/logo.png) no-repeat center center; margin-top: 20px; float: left; }
#logo a:link { display: block; width: 236px; height: 60px; text-decoration: none; }
#logo a:visited { display: block; width: 236px; height: 60px; text-decoration: none; }
#logo a:active { display: block; width: 236px; height: 60px; text-decoration: none; }
#logo a:hover { display: block; width: 236px; height: 60px; text-decoration: none; }

#title { width: 394px; height: 36px; background: transparent url(images/name.png) no-repeat center center; float: right; margin-top: 30px; }

#main { width: 940px; height: 600px; background: transparent url(images/mainbg.png) no-repeat center center;

#mainwrap { width: 400px; height: 450px; overflow: hidden; }
#container { width: 800px; height: 450px; background: #333333; position: relative; float: left; }
#home { width: 400px; height: 450px; background: #888888; position: relative; margin-left: 400px; float: left; clear: both; }
#about { width: 400px; height: 450px; background: #888888; position: relative; margin-left: 400px; float: left; clear: both; }
</style>

</head>
<body>

<div id='wrapper'>
  <div id='top'>
    <div id='logo'><a href='#' title='Minihobbs Home'></a></div>
    <div id='title'></div>
  </div>
  <div id='main'>
    <div id='mainwrap'>
      <div id='container'>
      <div id='home'>srlkjdngklngrkegkoenoeho<br /><br />lsdknsdlfhnkldhn</div>
      <div id='about'>srsd;lmg;smgsmglkjdngklngrkegkosdfl;mnds;klld;n;enoeho</div></div>
    </div>
  <br />
  <a class='about' href='#'>click</a>
  </div>
</div>

</body>
</html>

 

If anyone could help me out that would be awesome.

Link to comment
https://forums.phpfreaks.com/topic/186282-div-not-appearing-appropriately/
Share on other sites

First, I'll tell you about a few problems unrelated to your issue:

 

1) You shouldn't use single quotes around HTML attributes. Some browsers don't play friendly with that.

2) You haven't put the required 'type' in your script tags. Script tags should look like this:

 

<script src="path/to/file.js" type="text/javascript"></script>

 

The type attribute is required.

3) You have used the deprecated 'language' attribute in one of your script tags. This tag should not be used, and the 'type' attribute should be used instead, as I have explained above.

 

As to your problem - well you didn't close one of your CSS declarations with a closing parenthesis }. This means that the CSS attributes below it are not being read. The attributes below it are the ones that are for the divs in question, so they are not being read.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.