Making my twitterticker adjust

HTML & CSS
1

Hi. :slight_smile:

So I have this div called “tweets” wich is a twitterticker, so everytime I write a tweet it updates on my site, and some tweets are long and some are not, so the div size changes, anyways. This div will be the div that is the longest to the bottom, and it would be great so everytime the “tweets” div become smaller, the website gets smaller in height.

I hope you understand.

HTML:

<!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"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css"rel="stylesheet" type="text/css">
<link href="css/style for jquery.css"rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>



<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.js" type="text/javascript"></script>


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


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


<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>

 <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>



<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#outer {height:100%;display:table;}
</style>
<![endif]-->

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload="MM_preloadImages('images/social/facebook rollover.png','images/social/youtube rollover.png','images/social/twitter rollover.png','images/social/vimeo rollover.png','images/social/flick rollover.png','images/social/rss rollover.png')">


<div id="unwrapper">
<div id="wrapper">


<div id="uppercontainer">
<div id="meny1">



<ul class="meny1">

<li class="menytext"><a href="index.html">START</a></li>
<li class="menytext"><a href="distrikt.html">DISTRIKT</a></li>
<li class="menytext"><a href="media.html">MEDIA</a></li>
<li class="menytext"><a href="JAM.html">JAM</a></li>

</ul>








</div>

<div id="logodiv"><a href="index.html"><img src="images/Logo.png" width="122" height="31" border="0" id="logotyp" /></a>
</div>

<div id="meny2">




<ul class="meny2">

<li class="menytext"><a href="gästbok.html">GÄSTBOK</a></li>
<li class="menytext"><a href="medlem.html">MEDLEM</a></li>
<li class="menytext"><a href="om oss.html">OM OSS</a></li>
<li class="menytext"><a href="kfum.html">KFUM</a></li>

</ul>









</div>
</div>

<div id="banner">


<div id="wrapper1">
	<div id="slider_wrapper1">
		<div id="slider">
        <img src="images/Banner1.png" title="" />

         <img src="images/Banner2.png" title="" />

             <img src="images/Banner3.png" title="" />


</div>

<div id="htmlcaption" class="nivo-html-caption"></div>
	</div>
</div>









</div>



<div id="icr">
<div id="cleft">

<div id="one"></div>

<div id="two">

<iframe id="mai" src="http://player.vimeo.com/video/30695260?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;" width="320" height="180" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>



</div>



</div>
<div id="cright">










  <ul class="social">

<li><a href="https://www.facebook.com/airwipp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/social/facebook rollover.png',1)"><img src="images/social/facebook.png" name="Image3" width="43" height="43" border="0" id="Image3" /></a></li>
<li><a href="http://www.youtube.com/user/AirWipp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/social/youtube rollover.png',1)"><img src="images/social/youtube.png" name="Image4" width="43" height="43" border="0" id="Image4" /></a></li>
<li><a href="https://twitter.com/#!/airwipp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/social/twitter rollover.png',1)"><img src="images/social/twitter.png" name="Image5" width="43" height="43" border="0" id="Image5" /></a></li>

<li><a href="http://vimeo.com/airwipp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/social/vimeo rollover.png',1)"><img src="images/social/vimeo.png" name="Image6" width="43" height="43" border="0" id="Image6" /></a></li>

<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/social/flick rollover.png',1)"><img src="images/social/flickr.png" name="Image7" width="43" height="43" border="0" id="Image7" /></a></li>

<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/social/rss rollover.png',1)"><img src="images/social/rss.png" name="Image8" width="43" height="43" border="0" id="Image8" /></a></li>

</ul>


<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/airwipp&amp;width=200&amp;colorscheme=dark&amp;show_faces=false&amp;stream=false&amp;header=false&amp;height:255px" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:270px; height:70px;" allowtransparency="true"></iframe>



        	<div id="friends"></div>



        <div id="tweets">


	
</div>


       	<h1></h1>
	

	<div class="some-fixed-width-container" style="width:242px">
	
		<div id="friends"></div>
	
	</div>
	
	
	
	

	<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{	var pageTracker = _gat._getTracker("UA-5465067-6"); pageTracker._trackPageview();} catch(err){}</script>






<script type="text/javascript" src="twitter.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#friends').twitterFriends({
			debug:1
			,username:'airwipp'
		});
	});
</script>








</div>

</div>






</div>

<div id="footer"></div>



</div>



</body>
</html>

CSS:

body {background-image:url(../images/BG.jpg); }

#unwrapper {width:1300px; background-image:url(../images/Texture.png); height:auto; margin-left:auto; margin-right:auto; padding-bottom:35px;  }

#wrapper {width:900px;  height:auto; padding-bottom:1px; margin-left:auto; margin-right:auto; padding-top:1px;}

.rubrik {
	width:280px;
	height:30px;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
}

.han {; margin-bottom:30px; }

.onetext {color:#FFFFFF; font-family:Oswald; font-size:18px; letter-spacing:0.3px; }

#meny1 {width:375px; height:50px; float:left;  }
#meny2 {width:375px; height:50px; float:left;  }
#logodiv {width:150px; height:50px; float:left;  }
#uppercontainer {width:900px; height:50px; margin-top:35px; background-image:url(../images/UpperBG.png) }

#banner {width:900px; height:370px;  margin-top:30px; }

#logotyp {margin-top:8px; margin-left:15PX; }
#mainfilm {margin-top:3px; }



.meny1  { margin-top:20px; }
.meny1 li  { float:left; padding-left:50px;   }

#one {width:285px; height:710px; ; float:left; }

#two {width:315px; height:710px;  float:left;}


.meny2 { margin-top:20px; }
.meny2 li { float:left; padding-left:40px;   }

#cleft    {
	float:left;
	height:710px;
	width:630px;
	margin-top:30px;

	

}
#cright   {
	float:left;
	height:710px;
	width:320px;
	margin-top:30px;
}

.menytext {color:#CCCCCC; font-family:oswald; font-size:12px;  letter-spacing:0.3px; }
.menytext1 {color:#CCCCCC; font-family:Oswald; font-size:19px; letter-spacing:0.3px; }

#icr {height:800px; width:1000px; padding:1px; }

.menytext a:link {color:white; text-decoration:none;}
.menytext a:visited {color:white;}
.menytext a:hover   {color:#FF0}
.menytext a:active  {color:white;}


.social li {float:left; }

.social {float:left;  }

#facebook {margin-top:20px; margin-left:5px; }

.linje {width:275px; float:left; margin-left:23px; background-color:#000 }

#minibilder { height:220px; width:280px; margin-top:10px; }

.minibilder li {float:left; padding-left:6px; padding-right:6px; padding-bottom:10px;  }



.infotext {color:#999;  margin-top:60px;  font-family:PT Sans narrow; font-size:13px;  }

#twitterticker {width:260px; height:100px; }
















html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

#footer {
	height:250px;
	width:900px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(../images/footer.png);
	margin-top: 40px;
}



























/*---- Users ----*/
div.tf-users{
	/* fixed height so container will not flicker within transitions */
	height:192px;
	margin-left:10px;
	width:280px;
	overflow:hidden;
}
/* user img link*/
div.tf-users a{
	display:block;
	float:left;
}
/* user img */
div.tf-users img{ }

/*---- Tweets ----*/
div.tf-tweet{
	/* fixed height so container will not flicker with different length tweets  */
	height:300px;
	padding-bottom:1px;
	overflow:hidden;
}
/* tweet li */
div.tf-tweet li{
	border:silver 1px solid;
	position:relative;
	padding:2px;
	list-style-type:none;
	margin:1px 0;
	overflow:hidden;
}

/* tweet author avatar */
div.tf-tweet span.tf-avatar{
	display:block;
	width:48px;
	height:48px;
	margin:0 2px 0 2px;
	left:0;
	position:absolute;
	overflow:hidden;
}
/* author name */
div.tf-tweet strong a{
	margin-right:5px;
}
/* tweet body */
div.tf-tweet span.tf-body {
	display:block;
	margin-left:55px;
}
/* tweet content */
div.tf-tweet span.tf-content{
}
/* tweet date and source */
div.tf-tweet span.tf-meta {
	color:#999999;
	display:block;
	font-size:0.764em;
	margin:3px 0 0;
}
div.tf-tweet span.tf-meta a{
	color:#999999;
	text-decoration:none;
}
div.tf-tweet span.tf-meta a:hover{
	text-decoration:underline;
}
/* customize date link */
div.tf-tweet a.tf-date { }
/* customize source link */
div.tf-tweet a.tf-source { }
/* customize links */
div.tf-tweet a.tf-link { }
/* customize @user links */
div.tf-tweet a.tf-at { }
/* customize #hashtags links */
div.tf-tweet a.tf-hashtag { }

/* ---- Info Link ----- */
div.tf-info{
	text-align:right;
}
div.tf-info a{
	text-decoration:none;
	font-size:9px;
	font-weight:bolder;
	color:gray;
	font-family:tahoma;
}
/* TWEETS */
#tweets {
	left: 186px;
	top: 105px;
	width: 260px;
	height:auto;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14px;
	margin-top:30px;
}
#tweets p { font-size: 14px; margin-bottom: 10px; padding: 10px; color: #fff; background-image:url(../images/twitter/transpBlue.png)  }
#tweets p a { padding-left:2px; }
#tweets p a img { border:none; }

#ltweets {width:280px; height:57px; background-image:url(../images/LTweets.png); margin-top:20px;  }


/* INFORMATION */
#info {  left: 620px; top: 105px; width: 376px; height:300px; color: #96997a; font-size:14px; }
#info h1 { font: bold 18px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }
#info h1 small { font-size: 13px; text-transform:uppercase; display: block; color: #ccc; margin-top:10px; }
#info h2 a { display: block; text-decoration: none; margin: 10px 0; font: italic 13px Georgia, Times, Serif;  text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }
#info h2 a:hover { color: #90bcd0; }
#info p { margin:15px 0; }
#info p a { color: #96997a; }

.big { font-size:20px; }
.big span { color: #bfe1f1; font-size:24px; }

/* OVERLAY */
#overlay { left: 168px; top: 87px; width: 408px; height:386px; background-image:url(../images/twitter/transpBlue_overlay.png) }
#overlay img { position:relative; left:200px; top:189px; }
2

Hello :). I do like your attempt to give code, however upon saving that code into a text file to see it ourselves, the only thing we actually see is a white screen, a video player, and a facebook like thingymajigg.

I do notice, however, you set heights on a lot of your containing divs. Why do you have so many heights set in the first place?

If we could get the link to the live page, that would be great, and it seems like this fix could be relatively simple :).

3

Live webpage: http://www.kwpwebdesign.se/

I dont know, wich things shouldnt be “heighted” in my page?

Thanks.

// Kevin :slight_smile:

4

Stilll confused :). You do realize you have a footer element (blank) which is taking up over 200 pixels of height, at the bottom of hte page? I remove some tweets locally and the page doesn’t shrink (due to hte middle content still being the tallest)

5

I want the footer there, but as soon, lets say i write 5 long tweets, then the twitterbox will go over the footer, i want it to push the footer instead of going over it.

Got it? :slight_smile:

6

Ah, well remove the height on “#icr” and you now need a clearing mechanism on it, so set overflow:hidden; on it.

I do believe I’ve linked you to my article about containing floats before, tisk tisk ;).

Edit-Sec, you need some other stuff, that should have worked copmletely but other parts of your page are interfering.

7

Edit-If you don’t want to take time to use the clearfix (untested but it should work) on #icr, you could just set clear:both; on the footer and not worry about overflow:hidden; on it.

I don’t know why the tweets are being cut off. Well, the parent height isn’t expanding and I don’t see a height set anywhere (the overflow:hidden; being the cause of hte cutting off) which would MAKE it be cut off :p.

8

Noone of these work the way I wanted them to.

I want the footer to be pushed down when the ticker gets longer, and when the ticker gets longer it’s basically the #icr that should be doing something, what? I don’t know.Just not hidden.

Could you tell me what’s not correctly done, since I hate doing things the way it shouldnt be. Thanks :slight_smile:

// Kevin

9

Ryan, what was done wrong in my webpage?