asked on

trouble centering script on website

Please see a website I am constructing at www.mdbimmedia.com. The embedded Twitter feed is not centered in the div. After I placed the Twitter feed in the div, I could no longer pull the iFrame content from 'home.html' - it is in the directory.

Please help! Again, the page is www.mdbimmedia.com

Here is the code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
body {
      background-image: url(_images/mdbbackground_repeat.jpg);
      background-repeat: repeat-x;
      margin-top: 25px;
      background-color: #010010;
      text-align: left;
}
html, body {
      margin: 0px;
      padding: 0px;
}
#wrapper {
      background-image: url(_images/mdbbackground.jpg);
      background-repeat: no-repeat;
      background-position: 0px 0px;
      height: 1200px;
      width: 1600px;
      position: relative;
}
#header {
      height: 205px;
      width: 1100px;
      background-image: url(_images/headerimage.jpg);
      background-repeat: no-repeat;
}
.menuType {
      font-family: Stencil, "Verdana Bold", sans-serif;
      font-size: 17pt;
      color: #F3E7C4;
      line-height: 24px;
}
#mdbvideointro {
      height: 240px;
      width: 800px;
      background-image: url(_images/mdbvideointrobkgnd.jpg);
      background-repeat: no-repeat;
}

#main {
      height: 460px;
      width: 710px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 90px;
      float: left;
      background-image: url(_images/mainbkgnd.jpg);
      background-repeat: no-repeat;
}
#footer {
      height: 50px;
      width: 1010px;
      margin-left: 90px;
      float: left;
}
a:link {
      color: #F3E7C4;
      text-decoration: none;
}
a:visited {
      text-decoration: none;
      color: #F3E7C4;
}
a:hover {
      text-decoration: underline;
      color: #36B5D8;
}
a:active {
      text-decoration: none;
      color: #F3E7C4;
}

#apDiv1 {
      position: absolute;
      width: 638px;
      height: 66px;
      z-index: 1;
      left: 453px;
      top: 108px;
}
#sidebar {
      position:absolute;
      width:274px;
      height:698px;
      z-index:2;
      left: 826px;
      top: 206px;
      background-image: url(_images/sidebarbkgnd.jpg);
      background-repeat: no-repeat;
      font-family: Stencil, "Verdana Bold", sans-serif;
      font-size: 1em;
      text-align: center;
      color: #a50002;
}
</style>
</head>

<body>

<div class="menuType" id="apDiv1">
<p class="menuType">
<a id="home_link" href="home.html" target="mainsource">HOME</a> |
<a id="album_link" href="http://www.interstellar9.com" target="mainsource">ALBUM</a> |
<a id="incarnations_link" href="http://www.interstellar9.com" target="mainsource">INCARNATIONS</a> |
<a id="band_link" href="http://www.interstellar9.com" target="mainsource">BAND</a> |
<a id="video_link" href="http://www.interstellar9.com" target="mainsource">VIDEO</a> |
<a id="gallery_link" href="http://www.interstellar9.com" target="mainsource">GALLERY</a>
<a id="media_link" href="http://www.interstellar9.com" target="mainsource">MEDIA/PROPAGANDA</a> |
<a id="shop_link" href="http://www.interstellar9.com" target="mainsource">CARNABY STREET SHOPPES</a></p>
</div>
<div id="sidebar">
<h1>LET'S GET CONNECTED
<br>
<img src="_images/socialmedia.png" width="270" height="40" alt="Social Media Icons"><img src="_images/sidebar_rule.png" width="258" height="40" alt="sidebar rule"></h1>

<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: 250,
height: 300,
theme: {
shell: {
background: '#a60306',
color: '#ffffff'
},
tweets: {
background: '#f0ebda',
color: '#59451d',
links: '#1d7899'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('MDesbarres').start();
</script>
</div>
<div id="wrapper">
<div id="header">
</div>
<div id="mdbvideointro"></div>

<div id="main">


<iframe id="mainsource" width="710" height="460" frameborder="0" scrolling="yes" src="mdb.html"></iframe>

</div>

<div id="footer">

</div>
</div>
</body>
</html>

Dave Baldwin

Are you sure you don't have the files named wrong? You are getting what you are asking for in the code.

Revolution9

ASKER

What about centering the Twitter feed?

Kyle Hamilton

add margin: 0 auto;

.twtr-doc {
overflow: hidden;
width: 100%;
text-align: left;
font-weight: normal;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
}

Open in new window

Gary

Add to your css
.twtr-widget {
text-align: center;
}
.twtr-doc {
text-align: left;
margin: auto;
}

stephenbliss

Give .twtr-doc -

margin-left: 12px;

Look at line 1 in widget.css.

Revolution9

ASKER

I'm not getting you guys. I'm adding code and I get the warning that my code is messed up. Can you take it from <script> to </script> and paste the correct code for me?

Thanks!

Richard

ASKER CERTIFIED SOLUTION

Gary

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Kyle Hamilton

it's not a script.

it's in the widget.css file.

You have to find the

 .twtr-doc

Open in new window

rule, and add the

margin:0 auto;

Open in new window

property to it.

Revolution9

ASKER

There is no widget.css file -

Kyle Hamilton

Unfortunately the widget.css file is all on one line - very annoying.

So just open it in a decent text editor and do a "find" for .twtr-doc

Revolution9

ASKER

I was just testing you to see if you knew what you were talking about. Of course, it belongs in the css block.

Looks great now, thanks!

Gary

There is but its pulled from the javascript, so you don't have direct access to it, but you can override it.

Kyle Hamilton

yes there is. It's where your css is coming from:

http://widgets.twimg.com/j/2/widget.css

If you do not have access to that file, then put

.twtr-doc {
margin: 0 auto;
}

into your own style declarations.

Gary

The css is pulled directly from Twitter, and you've now given the same answer I gave 90 mins ago

Revolution9

ASKER

Props bro, props