Please help in aligning the layout

**Dormilich** · Jan 7 '10, 11:08 AM

you mean something like float: left; ?

**neovantage** · Jan 7 '10, 11:19 AM

yes that's what i mean. I am attaching an images which tells you what layout i have currently and what required layout i want actually.

Attached Files

**Dormilich** · Jan 7 '10, 11:25 AM

yea, instead of absolute positioning, try to float it.

**neovantage** · Jan 7 '10, 12:08 PM

But using float property now it is giving jerks. Because when we take mouse over the link button it loads image towards down and then take it up and also banner section is not align top. It comes just down to some place. Here is my code
HTML files
[CODE][
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitl ed Document</title>
<link rel="stylesheet " href="includes/slideshow.css" type="text/css" media="screen" />
<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript" src="includes/jquery.easing.1 .3.js"></script>
<script type="text/javascript" src="includes/slideshow.js"></script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" align="center" width="1100">
<tr>
<td align="center" valign="top" width="1100">

<div id="features">

<ul id="feature-nav">
<li id="button1">< a href="#." rel="#feature-1">Lorem Ipsum</a></li>
<li id="button2">< a href="#." rel="#feature-2">Lorem Ipsum</a></li>
<li id="button3">< a href="#." rel="#feature-3">Lorem Ipsum</a></li>
<li id="button4">< a href="#." rel="#feature-4">Lorem Ipsum</a></li>
</ul>

<div class="feature" id="feature-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eleifend urna. Aenean felis est, dignissim nec dapibus sit amet, aliquet sit amet velit.<br /><br />
<a href="#.">Read More</a></p>
</div>
<div class="feature" id="feature-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eleifend urna. Aenean felis est, dignissim nec dapibus sit amet, aliquet sit amet velit.<br /><br />
<a href="#.">Read More</a></p>
</div>
<div class="feature" id="feature-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eleifend urna. Aenean felis est, dignissim nec dapibus sit amet, aliquet sit amet velit.<br /><br />
<a href="#.">Read More</a></p>
</div>
<div class="feature" id="feature-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eleifend urna. Aenean felis est, dignissim nec dapibus sit amet, aliquet sit amet velit.<br /><br />
<a href="#.">Read More</a></p>
</div>
</div>

</td>
</tr>
</table>
</body>
</html>
/CODE]

CSS file

Code:

body{
	margin:0px;
	padding:0px;
}
/*
Slideshow Addition
*/
#features {
	background: #2c3f4d;
	height: 400px;
	position: relative;
	width: 1100px;
}
#features .feature {
	height: 340px;
	left: 0;
	float:right;
	/*position: absolute;*/
	top: 0;
	width: 880px;
}
#features #feature-2,
#features #feature-3,
#features #feature-4 {
	display: none;
}
#features #feature-1 h2, #features #feature-2 h2, #features #feature-3 h2, #features #feature-4 h2 {
	color: #ffffff;
	font-size: 26px;
	font-family: Times, "Times New Roman", serif;
	font-weight: 500;
	text-shadow: 1px 1px #000;
	padding-top: 185px;
	padding-left: 30px;
}
#features h2 span.yellow {
	color: #f9edc3;
}
#features #feature-1 p, #features #feature-2 p, #features #feature-3 p, #features #feature-4 p {
	color: #ececec;
	font-size: 12px;
	line-height: 16px;
	padding-left: 30px;
	width: 390px;
}
#features p a {
	background: url(../images/arrow.jpg) 0px 2px no-repeat;
	color: #f9edc3;
	padding-left: 15px;
}
#features #feature-1 {
	background: url(../images/slide1.jpg) top left no-repeat;
}
#features #feature-2 {
	background: url(../images/slide2.jpg) top left no-repeat;
}
#features #feature-3 {
	background: url(../images/slide3.jpg) top left no-repeat;
}
#features #feature-4 {
	background: url(../images/slide4.jpg) top left no-repeat;
}
#features #feature-nav {
	bottom: 0px;
	height: 93px;
	float:left;
	/*position: absolute;*/
	left: 0;
	width: 880px;
	list-style:none;
	padding:0px;
}
#feature-nav li {
	float: left;
	height: 92px;
	text-align: center;
	width: 220px;
	clear:left;
}
#feature-nav li a {
	display: block;
	height: 92px;
	width: 220px;
	text-indent: -9000px;
}
#feature-nav li a:hover {
	cursor: pointer;
}
#feature-nav li#button1 {
	background: url(../images/button1.jpg) top left no-repeat;
}
#feature-nav li#button2 {
	background: url(../images/button2.jpg) top left no-repeat;
}
#feature-nav li#button3 {
	background: url(../images/button3.jpg) top left no-repeat;
}
#feature-nav li#button4 {
	background: url(../images/button4.jpg) top left no-repeat;
}		
#feature-nav li#button1 a.active {
	background: url(../images/button1-active.jpg) top left no-repeat;
}
#feature-nav li#button2 a.active {
	background: url(../images/button2-active.jpg) top left no-repeat;
}
#feature-nav li#button3 a.active {
	background: url(../images/button3-active.jpg) top left no-repeat;
}
#feature-nav li#button4 a.active {
	background: url(../images/button4-active.jpg) top left no-repeat;
}

javascript file

Code:

/*	| Homepage Slideshow
	----------------------------------------	*/
var slideshow = {
	timer : null,
	delay : 5500,
	t : 0,

	init : function()
	{
		slideshow.triggers = $('#feature-nav a');
		slideshow.trigger_first = $('#feature-nav a:first');
		slideshow.trigger_last = $('#feature-nav a:last');
		
		slideshow.items = $('#features .feature');

		slideshow.triggers.mouseover( function(){ slideshow._slide(this); slideshow._stop(); return false; });
		slideshow._automate();
	},
	
	_automate : function()
	{
		var most = slideshow.triggers.length;
		target = $('#feature-nav a:eq('+ slideshow.t +')');
		slideshow._slide(target);
		slideshow.t++;
		if ( slideshow.t == most )
			slideshow.t = 0;
		slideshow.timer = setTimeout( function(){ slideshow._automate() }, slideshow.delay );
	},
	
	_stop : function()
	{
		slideshow.timer = clearTimeout(slideshow.timer);
	},

	_slide : function(el)
	{
		var target = $(el).attr('rel');
		slideshow.triggers.not(el).removeClass('active');
      //alert(el);
		$(el).addClass('active');
		$(target).fadeIn('fast');
		$(slideshow.items).not(target).fadeOut('fast');
	}
}
$(document).ready(slideshow.init);

**Dormilich** · Jan 7 '10, 01:19 PM

on the other hand side, you can also position both elements absolutely …

**neovantage** · Jan 7 '10, 01:27 PM

Previously both these were positions absolutely. Check my CSS posted code

In id #features .feature and #features #feature-nav . In both cases these were Positioned absolutely.

**Dormilich** · Jan 7 '10, 01:30 PM

In both cases these were Positioned absolutely.

I remember the list not having a top value of 0.

EDIT: wouldn’t it be easier to change the div's background image than switching divs?

**neovantage** · Jan 7 '10, 02:06 PM

Thank you very much sir. it is fixed now.
One thing along with top property i also need to set the right property for banner area and left property for navigation area. If i don't do this then they overlap with each other.

Well thanks again for this great help.
Take Care

Please help in aligning the layout

Please help in aligning the layout

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment