Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > CSS
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 10-30-2009, 06:36 PM
  #1
breakdown
Chevalier (Level 6)
 
Join Date: Feb 2008
Posts: 51
iTrader: (0)
breakdown is an unknown quantity at this point
Weird div alignment

Heya people!

Just a small problem here.

I am trying to align some text in a div so that there is a main part to it, and it has a sub part attached to it within another div which is attached to a JS action that fades it in and out when a "X" is pressed.

The JS and everything works fine, but when I put the sub part within the div it aligns it a line down, not next to the main part. I would just like to know why it is doing this, as I see no line break tags around.

I fixed the alignment using the "display:inline;" style, but now the JS function has been disabled.

Any suggestions?

Cheers

html
Quote:
<body>
<div id="container">

<div id="cross">
<a href="#" onclick="fade('fadeBlock');" >X</a>

</div>

<div id="left">

<div class="line1">
Helvetica <div id="fadeBlock" class="size1" > at 60pt</div>
</div>


</div>
</div>


</body>
css
Quote:

*
{
margin:0;
padding:0;
background-color:#000000;
}

a
{
text-decoration:none;
color:#ffffff;
font-family: Helvetica, Arial, sans serif;
font-size: 30px;
}

#container
{
color:#ffffff;
font-family: Helvetica, Arial, sans serif;
font-weight:900;

}

#cross
{
text-align:right;
padding-right:10px;

}

#left
{
padding-left:50px;

}

.line1
{
font-size:60pt;
width:700px;
}

div#fadeBlock
{
display:inline;
}

.size1
{
width:500px;
height:100px;
}

js
Quote:
var TimeToFade = 1000.0;

function fade(eid)
{
var element = document.getElementById(eid);
if(element == null)
return;

if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = 2;
}
else
{
element.FadeState = -2;
}
}

if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}



function animateFade(lastTick, eid)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;

var element = document.getElementById(eid);

if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
return;
}

element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;

element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}
breakdown is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-06-2009, 05:22 AM
  #2
maneetpuri
Fighter (Level 4)
 
Join Date: Aug 2008
Posts: 38
iTrader: (0)
maneetpuri is an unknown quantity at this point
HI,

Please refer the below corrected code in bold for the solution.
----------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>

<style type="text/css">

*
{
margin:0;
padding:0;
background-color:#000000;
}

a
{
text-decoration:none;
color:#ffffff;
font-family: Helvetica, Arial, sans serif;
font-size: 30px;
}

#container
{
color:#ffffff;
font-family: Helvetica, Arial, sans serif;
font-weight:900;

}

#cross
{
text-align:right;
padding-right:10px;

}

#left
{
padding-left:50px;
}

.line1
{
font-size:60pt;
width:700px;
}

div#fadeBlock
{
float: left;
padding-left: 10px;
}
.col_1 {
float: left;
}


.size1
{
width:300px;
height:100px;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

var TimeToFade = 1000.0;

function fade(eid)
{
var element = document.getElementById(eid);
if(element == null)
return;

if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = 2;
}
else
{
element.FadeState = -2;
}
}

if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}



function animateFade(lastTick, eid)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;

var element = document.getElementById(eid);

if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
return;
}

element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;

element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}
//--><!]]></script>


</head>


<body>
<div id="container">

<div id="cross">
<a href="#" onclick="fade('fadeBlock');" >X</a>

</div>

<div id="left">

<div class="line1">
<div class="col_1">Helvetica </div><div id="fadeBlock" class="size1" > at 60pt</div>
</div>



</div>
</div>


</body>

</html>

------------------------------------------------------
Hope This helps,
Cheers
maneetpuri is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote

Reply
KEEP TABS
SPONSORS
 
Boxedart
 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 03:50 AM.

   

Mascot team created by Drawshop.com

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.