June 14, 2010
Fix position of image
Question by andrei
I have this list
http://pastebin.me/dde64f8c185de9dd5e429f84701a01ce
Anytime you click on an image extra content appears . I have tryed several css methods but i cant get the images to remain in their position and get the text to go underneath . Anyone has a solution ?
Answer by Starx
Ok, Solved Here is your html
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test Page</title>
<style type="text/css">
* { margin: 0; padding: 0;}
.holder { width:105px;float:left; }
img { width: 105px;
float:left;
}
.content {
display:none;
float:left;
}
#container { width:350px;margin:auto; }
</style>
<script type="text/javascript" src="http://www.feetjeans.com/new_fj/nou/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').click(function(){
var clasa = $(this).attr("class");
var divul = '#' + clasa;
var cssul = $(divul).css('display');
if(cssul == 'none') { $(divul).fadeIn(500); }
else $(divul).hide(500);
console.log('test');
});
});
</script>
</head>
<body>
<div id="container">
<div class="holder">
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="0" align="left" />
<span class="content" id="0">This is content</span>
</div>
<div class="holder">
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="1" />
<span class="content" id="1">This is content</span>
</div>
</div>
</body>
</html>
UPDATE
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test Page</title>
<style type="text/css">
* { margin: 0; padding: 0;}
.holder { width:350px;float:left; }
img { width: 105px;
float:left;
}
.content {
display:none;
border: 1px #09f solid;
}
#container { width:350px;margin:auto; }
</style>
<script type="text/javascript" src="http://www.feetjeans.com/new_fj/nou/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').click(function(){
$(".content").hide("fast");
var clasa = $(this).attr("class");
var divul = '#' + clasa;
var cssul = $(divul).css('display');
if(cssul == 'none') { $(divul).fadeIn(500); }
else $(divul).hide(500);
console.log('test');
});
});
</script>
</head>
<body>
<div id="container">
<div class="holder">
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="0" />
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="1" />
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="2" />
<div style="clear:both;"></div>
<div class="content" id="0">This is content</div>
<div class="content" id="1">This is content</div>
<div class="content" id="2">This is content</div>
</div>
<div class="holder">
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="3" />
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="4" />
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="5" />
<div style="clear:both;"></div>
<div class="content" id="3">This is content</div>
<div class="content" id="4">This is content</div>
<div class="content" id="5">This is content</div>
</div>
</div>
</body>
</html>
