PDA

View Full Version : CSS/HTML/Scrollbar



StormFury
Feb 28th, 2012, 10:36 PM
I have 2 divs. one is set to a set width but a variable height. The second is much smaller. Now when the content is displayed in Div 1, it goes below the page and is unviewable. I can set overflow:auto; on that div, however want to scroll the whole page, not just the one div. What should i do? I've tried nesting both divs in a mainbody div, however that doesn't work. I'd appreciate any help offered.

Thanks

Storm

ARCLite Studio
Feb 28th, 2012, 11:01 PM
StormFury,

Your post doesn't have a lot of information we look for such as a link to the page or copy of the code. That having been said, it sounds like DIV1 is a variable height but the containing DIV around it or the site container is fixed height, i could be wrong but best guess with what you described.

You can either remove the fixed height of the container DIV or:

Set DIV1 to a fixed height, make css code:


DIV1 { height:800px; width:500px; overflow-x: hidden; overflow-y: scroll;}


adjust the width and heigth as needed. THis should make both the containing DIV as well as the web page scrollable in so far as fitting content.

ARCLite Studio

Let me know if this is what works for you, or provide link to page and will look at it again.

StormFury
Feb 28th, 2012, 11:07 PM
Here is my code. When i set the height to say 700 it doesn't even make the scrollbar appear so it cannot scroll.

Thanks



<head>
<title>Welcome …</title>
<meta name="description" content="…" />
<meta name="keywords" content="…" />
<meta name="author" content="…" />
<style type="text/css">
body
{
background:#000000;
}
div.content
{
border:1px dotted gray;
color:#ffffff;
text-align:justify;
font-size:12pt;
width:530px;
height:750px;
position:fixed;top:40px;left:40px;
text-indent:25px;
padding-right:10px;
padding-left:10px;
overflow:auto;
}
div.tweet
{
color:#ffffff;
border:1px dotted gray;
text-align:justify;
font-size:12pt;
width:300px;
position:fixed;top:40px;left:600px;
text-indent:25px;
}
div.media
{
color:#ffffff;
border:1px dotted gray;
text-align:justify;
font-size:12pt;
width:300px;
position:fixed;top:440px;left:600px;
text-indent:25px;
}
h1
{
text-align:center;
font-size:23px;
text-indent:0px;
}
</style>

</head>
<body>
<div class="content">

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nunc mauris, lobortis ultrices lacinia ut, molestie ut neque. Nullam vehicula hendrerit velit vitae accumsan. Phasellus eu risus a massa sodales iaculis. Morbi ac fermentum nisi. In molestie ornare libero at elementum. In eu elit eu enim cursus venenatis id ut nisi. Quisque gravida, orci ac facilisis ultrices, lorem sapien ultricies elit, a gravida nulla nunc eget justo. In sapien libero, sagittis sed interdum eget, molestie tincidunt mauris. Integer consequat tempus ipsum non dictum. Mauris ipsum metus, rutrum eget cursus sit amet, sollicitudin at risus. Integer ultricies rhoncus aliquet. Sed dolor turpis, fermentum id congue et, varius id magna. Integer vel dapibus eros. Donec pharetra hendrerit sem, et egestas ipsum malesuada sit amet.
</p>
<p>
Nam purus ligula, luctus et dictum a, scelerisque ut eros. Aenean pellentesque auctor elit, et ullamcorper ligula porttitor vel. Phasellus fringilla adipiscing est, sit amet eleifend tortor viverra ut. Phasellus quis nisl euismod odio sagittis porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam consectetur ultrices mi, vitae vulputate felis aliquet scelerisque. Ut hendrerit metus sed nisl convallis eget dapibus magna tristique. Integer quis dictum purus.
</p>
<p>
Fusce viverra, leo laoreet feugiat congue, quam lacus facilisis nibh, in sagittis metus enim ut erat. Nam suscipit lorem ac sem laoreet lacinia. Pellentesque turpis ligula, luctus aliquet tristique vitae, fringilla vitae ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dictum ultrices nibh, non aliquam erat porta eget. Aenean et gravida nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel diam ac lectus faucibus ultrices eu non velit. Sed tempor molestie quam ut vulputate. Sed sodales orci nunc, ut dictum magna.
</p>
<p>
Morbi elit quam, vestibulum quis fringilla at, cursus in urna. Curabitur lobortis, erat vel scelerisque hendrerit, tellus augue ornare purus, a accumsan neque nisl quis nibh. Aliquam hendrerit eros erat. Fusce ultrices tortor id diam sollicitudin dapibus. Vivamus placerat, erat a congue pulvinar, justo sapien gravida ante, nec egestas quam lorem a nisi. Nam facilisis nibh in risus commodo commodo. Praesent vulputate lobortis felis in dictum. Nullam consequat congue nunc at molestie. Phasellus sed mauris massa. Quisque egestas pellentesque quam. Ut iaculis semper tortor, vel lobortis diam ultricies nec. Suspendisse orci purus, accumsan ut luctus a, mattis sit amet tortor. Pellentesque turpis nisi, vehicula in interdum ac, egestas eget arcu. Nulla facilisi. Donec vulputate arcu vel felis adipiscing sagittis.
</p>
<p>
Aenean vitae augue tortor, ac gravida eros. Morbi in mi erat. Quisque ipsum tortor, accumsan non cursus non, vulputate id nulla. Phasellus in elit tellus. Proin nec nisl vitae libero bibendum venenatis nec nec neque. Mauris ac felis risus. Duis interdum tempus feugiat.
</p>
<p>
Fusce quis ligula libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vitae facilisis diam. Morbi vel leo metus, ut commodo quam. Curabitur fringilla elit viverra sem bibendum quis feugiat ipsum cursus. Vestibulum purus enim, porta vehicula vulputate eu, scelerisque auctor odio. Aliquam aliquet imperdiet mi id vestibulum. In hac habitasse platea dictumst. Donec eu dolor eget neque vehicula rhoncus nec id justo. Sed viverra eros nec metus rhoncus pretium.
</p>
<br />
<H1>...Welcome to …</H1>
<br />
</div>
<div class="tweet">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 30000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#000000',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#ffffff'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('tviernion').start();
</script>
</div>
<div class="media">
<a href="http://www.facebook.com/profile.php?id=…" target="_blank"><img src="http://example.com/contest/images/facebook.png" alt="Like Us on Facebook" /></a>
</body>

StormFury
Feb 28th, 2012, 11:17 PM
Just tried to post my code for you but i guess it didn't take. I have set my height to 750 on the div that encases the taller div however it shows it at the very top. Where can i post the code for you to look at it?

S

Lerura
Feb 28th, 2012, 11:41 PM
Just tried to post my code for you but i guess it didn't take. I have set my height to 750 on the div that encases the taller div however it shows it at the very top. Where can i post the code for you to look at it?

S
You can see a "#" in the top line of the reply box.
when you click it
appears in the reply box.
Paste your code between
and

VIPStephan
Feb 29th, 2012, 01:18 AM
Just tried to post my code for you but i guess it didn't take.

Your post was in the moderation queue. You have probably used a word or character combination that has triggered the spam filter. Iíve approved the post and itís visible now.

ARCLite Studio
Feb 29th, 2012, 01:07 PM
StormFury,

1.) Bottom DIV with class=media was not closed

2.) in front of your CLASS declarations remove "div" so div.content would be .content

3.) if you want both the div as well as the page to be scrollable you need to change POSITION in the class .content to RELATIVE, otherwise with position as FIXED the div will be scrollabel but the screen will not

here is corrected code, try it and see if it works like you intended:


<head>
<title>Welcome –</title>
<meta name="description" content="…" />
<meta name="keywords" content="…" />
<meta name="author" content="…" />
<style type="text/css">
body
{
background:#000000;
}
.content
{
border:1px dotted gray;
color:#ffffff;
text-align:justify;
font-size:12pt;
width:530px;
height:750px;
position:relative;top:40px;left:40px;
text-indent:25px;
padding-right:10px;
padding-left:10px;
overflow:auto;
}
.tweet
{
color:#ffffff;
border:1px dotted gray;
text-align:justify;
font-size:12pt;
width:300px;
position:fixed;top:40px;left:600px;
text-indent:25px;
}
.media
{
color:#ffffff;
border:1px dotted gray;
text-align:justify;
font-size:12pt;
width:300px;
position:fixed;top:440px;left:600px;
text-indent:25px;
}
h1
{
text-align:center;
font-size:23px;
text-indent:0px;
}
</style>

</head>
<body>
<div class="content">

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nunc mauris, lobortis ultrices lacinia ut, molestie ut neque. Nullam vehicula hendrerit velit vitae accumsan. Phasellus eu risus a massa sodales iaculis. Morbi ac fermentum nisi. In molestie ornare libero at elementum. In eu elit eu enim cursus venenatis id ut nisi. Quisque gravida, orci ac facilisis ultrices, lorem sapien ultricies elit, a gravida nulla nunc eget justo. In sapien libero, sagittis sed interdum eget, molestie tincidunt mauris. Integer consequat tempus ipsum non dictum. Mauris ipsum metus, rutrum eget cursus sit amet, sollicitudin at risus. Integer ultricies rhoncus aliquet. Sed dolor turpis, fermentum id congue et, varius id magna. Integer vel dapibus eros. Donec pharetra hendrerit sem, et egestas ipsum malesuada sit amet.
</p>
<p>
Nam purus ligula, luctus et dictum a, scelerisque ut eros. Aenean pellentesque auctor elit, et ullamcorper ligula porttitor vel. Phasellus fringilla adipiscing est, sit amet eleifend tortor viverra ut. Phasellus quis nisl euismod odio sagittis porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam consectetur ultrices mi, vitae vulputate felis aliquet scelerisque. Ut hendrerit metus sed nisl convallis eget dapibus magna tristique. Integer quis dictum purus.
</p>
<p>
Fusce viverra, leo laoreet feugiat congue, quam lacus facilisis nibh, in sagittis metus enim ut erat. Nam suscipit lorem ac sem laoreet lacinia. Pellentesque turpis ligula, luctus aliquet tristique vitae, fringilla vitae ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dictum ultrices nibh, non aliquam erat porta eget. Aenean et gravida nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel diam ac lectus faucibus ultrices eu non velit. Sed tempor molestie quam ut vulputate. Sed sodales orci nunc, ut dictum magna.
</p>
<p>
Morbi elit quam, vestibulum quis fringilla at, cursus in urna. Curabitur lobortis, erat vel scelerisque hendrerit, tellus augue ornare purus, a accumsan neque nisl quis nibh. Aliquam hendrerit eros erat. Fusce ultrices tortor id diam sollicitudin dapibus. Vivamus placerat, erat a congue pulvinar, justo sapien gravida ante, nec egestas quam lorem a nisi. Nam facilisis nibh in risus commodo commodo. Praesent vulputate lobortis felis in dictum. Nullam consequat congue nunc at molestie. Phasellus sed mauris massa. Quisque egestas pellentesque quam. Ut iaculis semper tortor, vel lobortis diam ultricies nec. Suspendisse orci purus, accumsan ut luctus a, mattis sit amet tortor. Pellentesque turpis nisi, vehicula in interdum ac, egestas eget arcu. Nulla facilisi. Donec vulputate arcu vel felis adipiscing sagittis.
</p>
<p>
Aenean vitae augue tortor, ac gravida eros. Morbi in mi erat. Quisque ipsum tortor, accumsan non cursus non, vulputate id nulla. Phasellus in elit tellus. Proin nec nisl vitae libero bibendum venenatis nec nec neque. Mauris ac felis risus. Duis interdum tempus feugiat.
</p>
<p>
Fusce quis ligula libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vitae facilisis diam. Morbi vel leo metus, ut commodo quam. Curabitur fringilla elit viverra sem bibendum quis feugiat ipsum cursus. Vestibulum purus enim, porta vehicula vulputate eu, scelerisque auctor odio. Aliquam aliquet imperdiet mi id vestibulum. In hac habitasse platea dictumst. Donec eu dolor eget neque vehicula rhoncus nec id justo. Sed viverra eros nec metus rhoncus pretium.
</p>
<br />
<h1>...Welcome …</h1>
<br />
</div>
<div class="tweet">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 30000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#000000',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#ffffff'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('tviernion').start();
</script>
</div>
<div class="media">
<a href="http://www.facebook.com/profile.php?id=…" target="_blank"><img src="http://example.com/contest/images/facebook.png" alt="Like Us on Facebook" /></a></div>
</body>
</html>

StormFury
Feb 29th, 2012, 04:55 PM
I see where i went wrong with the relative and the fixed code. Now, when i change the .media and the .tweet to relative they appear at the bottom of the code. what would be the appropriate way for me to code that?

S

ARCLite Studio
Feb 29th, 2012, 06:24 PM
Set their position to "absolute" and then move or adjust the TOP and LEFT of each back to the appropriate position, after that you should be fun.


The general rule for basic page layouts is as follows:

make a CONTAINER div, position it relative, give it a width and height, set margin-left:auto; and margin-right:auto;


This basically creates a box to contain the website that is centered on the viewers screen regardless of screen dimensions.

Next, put all other DIV's inside of the CONTAINER div and set there position as ABSOLUTE, position each with TOP and LEFT as needed. This keeps ALL divs of the website in relation to eachother and not in erlation to the top left corner of the browser window.

Now this is not a "Golden Rule" of all web page design as there are lots of ways to do things, but it is easy to understand and manuever DIV's as needed.

StormFury
Feb 29th, 2012, 10:52 PM
I do appreciate this. Container is relative, all the div's inside it are absolute. I do appreciate this. now the footer, rather the border around it keeps trailing into the abyss. How would i do this? Pad the bottom less?

S

ARCLite Studio
Mar 1st, 2012, 02:57 AM
Stormfury,

I don't remeber seeing a div with id "footer" or anything like that, did you add to/revise code with a new div? If so provide full code again and i'll try to answer.

StormFury
Mar 1st, 2012, 07:27 PM
I'm sure i am missing something. here is the updated code:


<head>
<title>Welcome …</title>
<meta name="description" content="…" />
<meta name="keywords" content="…" />
<meta name="author" content="…" />
<style type="text/css">
body
{
background:#000000;
}
.container
{
position:relative;
width:auto;
height:auto;
margin-left:auto;
margin-right:auto;
}
.content
{
border:1px dotted gray;
color:#ffffff;
text-align:justify;
font-size:12pt;
width:530px;
height:auto;
position:absolute;top:40px;left:40px;
text-indent:25px;
padding-right:10px;
padding-left:10px;
//overflow:auto;
}
.tweet
{
color:#ffffff;
border:1px dotted gray;
text-align:justify;
font-size:12pt;
width:300px;
position:absolute;top:40px;left:610px;
text-indent:25px;
}
.footer
{
color:#ffffff;
border:1px dotted gray;
position:relative
}
.media
{
color:#ffffff;
border:1px dotted gray;
text-align:justify;
font-size:12pt;
width:300px;
position:absolute;top:450px;left:610px;
text-indent:25px;
}
h1
{
text-align:center;
font-size:23px;
text-indent:0px;
}
</style>

</head>
<body>
<div class="container">
<div class="content">

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nunc mauris, lobortis ultrices lacinia ut, molestie ut neque. Nullam vehicula hendrerit velit vitae accumsan. Phasellus eu risus a massa sodales iaculis. Morbi ac fermentum nisi. In molestie ornare libero at elementum. In eu elit eu enim cursus venenatis id ut nisi. Quisque gravida, orci ac facilisis ultrices, lorem sapien ultricies elit, a gravida nulla nunc eget justo. In sapien libero, sagittis sed interdum eget, molestie tincidunt mauris. Integer consequat tempus ipsum non dictum. Mauris ipsum metus, rutrum eget cursus sit amet, sollicitudin at risus. Integer ultricies rhoncus aliquet. Sed dolor turpis, fermentum id congue et, varius id magna. Integer vel dapibus eros. Donec pharetra hendrerit sem, et egestas ipsum malesuada sit amet.
</p>
<p>
Nam purus ligula, luctus et dictum a, scelerisque ut eros. Aenean pellentesque auctor elit, et ullamcorper ligula porttitor vel. Phasellus fringilla adipiscing est, sit amet eleifend tortor viverra ut. Phasellus quis nisl euismod odio sagittis porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam consectetur ultrices mi, vitae vulputate felis aliquet scelerisque. Ut hendrerit metus sed nisl convallis eget dapibus magna tristique. Integer quis dictum purus.
</p>
<p>
Fusce viverra, leo laoreet feugiat congue, quam lacus facilisis nibh, in sagittis metus enim ut erat. Nam suscipit lorem ac sem laoreet lacinia. Pellentesque turpis ligula, luctus aliquet tristique vitae, fringilla vitae ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dictum ultrices nibh, non aliquam erat porta eget. Aenean et gravida nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel diam ac lectus faucibus ultrices eu non velit. Sed tempor molestie quam ut vulputate. Sed sodales orci nunc, ut dictum magna.
</p>
<p>
Morbi elit quam, vestibulum quis fringilla at, cursus in urna. Curabitur lobortis, erat vel scelerisque hendrerit, tellus augue ornare purus, a accumsan neque nisl quis nibh. Aliquam hendrerit eros erat. Fusce ultrices tortor id diam sollicitudin dapibus. Vivamus placerat, erat a congue pulvinar, justo sapien gravida ante, nec egestas quam lorem a nisi. Nam facilisis nibh in risus commodo commodo. Praesent vulputate lobortis felis in dictum. Nullam consequat congue nunc at molestie. Phasellus sed mauris massa. Quisque egestas pellentesque quam. Ut iaculis semper tortor, vel lobortis diam ultricies nec. Suspendisse orci purus, accumsan ut luctus a, mattis sit amet tortor. Pellentesque turpis nisi, vehicula in interdum ac, egestas eget arcu. Nulla facilisi. Donec vulputate arcu vel felis adipiscing sagittis.
</p>
<p>
Aenean vitae augue tortor, ac gravida eros. Morbi in mi erat. Quisque ipsum tortor, accumsan non cursus non, vulputate id nulla. Phasellus in elit tellus. Proin nec nisl vitae libero bibendum venenatis nec nec neque. Mauris ac felis risus. Duis interdum tempus feugiat.
</p>
<p>
Fusce quis ligula libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vitae facilisis diam. Morbi vel leo metus, ut commodo quam. Curabitur fringilla elit viverra sem bibendum quis feugiat ipsum cursus. Vestibulum purus enim, porta vehicula vulputate eu, scelerisque auctor odio. Aliquam aliquet imperdiet mi id vestibulum. In hac habitasse platea dictumst. Donec eu dolor eget neque vehicula rhoncus nec id justo. Sed viverra eros nec metus rhoncus pretium.
</p>
<br />
<h1>...Welcome …</h1>
<br />
</div>
<div class="tweet">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 30000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#000000',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#ffffff'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('tviernion').start();
</script>
</div>
<div class="media">
<a href="http://www.facebook.com/profile.php?id=…" target="_blank"><img

src="http://example.com/contest/images/facebook.png" alt="Like Us on Facebook" /></a>
</div>
</div>
<div class="footer">
Copyright 2010 - 2012 … All Rights Reserved
</div>
</body>
</html>

StormFury
Mar 2nd, 2012, 09:09 PM
Been playing with it, but still cannot get the footer at the bottom. I know it is something simple that i'm missing. Any pointers?

ARCLite Studio
Mar 2nd, 2012, 09:48 PM
You can delete the DIV's and CSS for (side-block2) and (side-block2-footer) if you want, they were put there to support any future content you might want/need.



<!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>
<style>
body
{
background:#000000;
}

#container {
position:relative;
width:930px;
height:1240px;
margin-left:auto;
margin-right:auto;
}
#content
{
border:1px dotted gray;
color:#ffffff;
text-align:justify;
font-size:12pt;
width:530px;
height:1115px;
position:absolute;
top:40px;
left:25px;
text-indent:25px;
padding-right:10px;
padding-left:10px;
//overflow:auto;
}
#tweet
{
color:#ffffff;
border:1px dotted gray;
text-align:justify;
font-size:12pt;
width:300px;
position:absolute;
top:40px;
left:607px;
text-indent:25px;
height: 388px;
}
#footer
{
color:#ffffff;
border:1px dotted gray;

}

h1
{
text-align:center;
font-size:23px;
text-indent:0px;
}
#side-block2 {
position:absolute;
width:303px;
height:719px;
z-index:1;
left: 607px;
top: 439px;
background-color:#009;
}
#copyright {
position:absolute;
width:550px;
height:69px;
z-index:1;
left: 25px;
top: 1165px;
color:#FF0;
border:1px dotted gray;
text-align: center;
font-weight:bold;
}
#side-block2-footer {
position:absolute;
width:303px;
height:72px;
z-index:1;
left: 608px;
top: 1165px;
background-color:#06F;
}
</style>
</head>

<body>
<div id="container">
<div id="content">

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nunc mauris, lobortis ultrices lacinia ut, molestie ut neque. Nullam vehicula hendrerit velit vitae accumsan. Phasellus eu risus a massa sodales iaculis. Morbi ac fermentum nisi. In molestie ornare libero at elementum. In eu elit eu enim cursus venenatis id ut nisi. Quisque gravida, orci ac facilisis ultrices, lorem sapien ultricies elit, a gravida nulla nunc eget justo. In sapien libero, sagittis sed interdum eget, molestie tincidunt mauris. Integer consequat tempus ipsum non dictum. Mauris ipsum metus, rutrum eget cursus sit amet, sollicitudin at risus. Integer ultricies rhoncus aliquet. Sed dolor turpis, fermentum id congue et, varius id magna. Integer vel dapibus eros. Donec pharetra hendrerit sem, et egestas ipsum malesuada sit amet.
</p>
<p>
Nam purus ligula, luctus et dictum a, scelerisque ut eros. Aenean pellentesque auctor elit, et ullamcorper ligula porttitor vel. Phasellus fringilla adipiscing est, sit amet eleifend tortor viverra ut. Phasellus quis nisl euismod odio sagittis porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam consectetur ultrices mi, vitae vulputate felis aliquet scelerisque. Ut hendrerit metus sed nisl convallis eget dapibus magna tristique. Integer quis dictum purus.
</p>
<p>
Fusce viverra, leo laoreet feugiat congue, quam lacus facilisis nibh, in sagittis metus enim ut erat. Nam suscipit lorem ac sem laoreet lacinia. Pellentesque turpis ligula, luctus aliquet tristique vitae, fringilla vitae ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dictum ultrices nibh, non aliquam erat porta eget. Aenean et gravida nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel diam ac lectus faucibus ultrices eu non velit. Sed tempor molestie quam ut vulputate. Sed sodales orci nunc, ut dictum magna.
</p>
<p>
Morbi elit quam, vestibulum quis fringilla at, cursus in urna. Curabitur lobortis, erat vel scelerisque hendrerit, tellus augue ornare purus, a accumsan neque nisl quis nibh. Aliquam hendrerit eros erat. Fusce ultrices tortor id diam sollicitudin dapibus. Vivamus placerat, erat a congue pulvinar, justo sapien gravida ante, nec egestas quam lorem a nisi. Nam facilisis nibh in risus commodo commodo. Praesent vulputate lobortis felis in dictum. Nullam consequat congue nunc at molestie. Phasellus sed mauris massa. Quisque egestas pellentesque quam. Ut iaculis semper tortor, vel lobortis diam ultricies nec. Suspendisse orci purus, accumsan ut luctus a, mattis sit amet tortor. Pellentesque turpis nisi, vehicula in interdum ac, egestas eget arcu. Nulla facilisi. Donec vulputate arcu vel felis adipiscing sagittis.
</p>
<p>
Aenean vitae augue tortor, ac gravida eros. Morbi in mi erat. Quisque ipsum tortor, accumsan non cursus non, vulputate id nulla. Phasellus in elit tellus. Proin nec nisl vitae libero bibendum venenatis nec nec neque. Mauris ac felis risus. Duis interdum tempus feugiat.
</p>
<p>
Fusce quis ligula libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vitae facilisis diam. Morbi vel leo metus, ut commodo quam. Curabitur fringilla elit viverra sem bibendum quis feugiat ipsum cursus. Vestibulum purus enim, porta vehicula vulputate eu, scelerisque auctor odio. Aliquam aliquet imperdiet mi id vestibulum. In hac habitasse platea dictumst. Donec eu dolor eget neque vehicula rhoncus nec id justo. Sed viverra eros nec metus rhoncus pretium.
</p>

<br />
<h1>...Welcome …</h1>
<br />
</div><!-- End content div -->
<div id="tweet">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 30000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#000000',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#ffffff'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('tviernion').start();
</script>
</div><!-- End Tweet Div -->
<div id="side-block2"></div>
<div id="copyright">Copyright 2010 - 2012 … All Rights Reserved</div><!-- end copyright div -->
<div id="side-block2-footer"></div>
</div><!-- end container div -->
</body>
</html>

StormFury
Mar 7th, 2012, 09:42 PM
That did it.. I see where i went wrong. I appreciate all you're help! Smashing job.