0

Hi, guys!

I started prototyping this site a little while ago. Some of the code may be a little bit ugly, but I'm cleaning it up as I go along.

I spent a very long time doing flash sites and I am trying to brush up on my css.

So, I have a blog inside of an iframe & I would like to create a div that extends to the length of the content. I need a little bit of guidance.

The blog content HTML:

<div id='outerdiv'>
<iframe src="http://www.blog.puppetheap.com" id='inneriframe' scrolling="no"></iframe>
</div>

The blog content CSS:

#outerdiv
{
width:1200px;
height:1800px;
overflow:hidden;
position:absolute;
margin:0 0 0 175px;
top: 505px; 
display: block;
float: left;
z-index:6;
border:none;

}


#inneriframe
{
position:absolute;
top:-215px;
left:-25px;
width:680px;
height:1800px;
border:none;
}

The site layout CSS:

body  {
overflow : scroll;
background-attachment : fixed;
background-color : #ffffff;
background-image : url("http://www.puppetheap.com/test/Background_tiling.jpg");
background-position : 0% 0%;
background-repeat : repeat;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
}
div.clearFloat {
clear : both;
font-size : 0;
height : 0;
line-height : 0;
}
li.clearFloat {
clear : both;
}
ul.symbolList {
display : inline;
float : left;
list-style-type : none;
margin : 0;
padding : 0;
}
.AbsWrap {
position : relative;
width : 100%;
}
.rowWrap {
width : 100%;
}
#main {
margin : 0 auto;
width : 1045px;
}
#pagebody_r2_c1 {
margin-left : 3px;
margin-top : 30px;
display : inline;
float : left;
height : 488px;
margin-bottom : 0;
width : 517px;
}
#pagebody_r2_c2 {
margin-left : 0;
margin-top : 84px;
display : inline;
float : left;
height : 434px;
margin-bottom : 0;
width : 520px;
}
#pagebody_r3_c1 {
margin-left : 72px;
margin-top : 0;
display : inline;
float : left;
height : 209px;
margin-bottom : 0;
width : 893px;
}
#pagebody_r4_c1 {
margin-left : 132px;
margin-top : 0;
display : inline;
float : left;
height : 222px;
margin-bottom : 0;
width : 765px;
}
#pagebody_r5_c1 {
margin-left : 126px;
margin-top : 0;
display : inline;
float : left;
height : 200px;
margin-bottom : 0;
width : 781px;
}
#pagebody_r6_c1 {
margin-left : 131px;
margin-top : 0;
display : inline;
float : left;
height : 158px;
margin-bottom : 0;
width : 775px;
}

Any advice/tips would be greatly appreciated. :)

Thanks!

1
Contributor
1
Reply
2
Views
6 Years
Discussion Span
Last Post by ari$av3s
0

I ultimately cleaned the code up and found a faaar more elegant solution to what I was trying to accomplish by adding a repeating background to a div.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.