View Single Post
Old 09-25-2008, 03:54 AM   #1
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default div with scrollbar and iframe

This is the same page but I have added two divisions parent and child to produce a scroll bar ( just one way to achieve this)
in the tex,t is the code to add in code view to show another site within the div
Code:
<!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 type="text/css">
<!--
body{
font-family:Georgia, "Times New Roman", Times, serif;
color:#000000; font-size:12pt;}

a {
color:#09c; font-size:10pt; font-family:book antiqua,Trebuchet MS;
font-weight:normal;}

#wrapper {
    position:relative;    width:80%;    height:auto; margin-left:10%; margin-right:10%;}

#header {    position:relative;    width:100%;    height:50px; float:left; position:relative; clear:right    ; background-color:#00FF00;} 
      
#sidebar {  
  position:relative;    width:20%;    height:auto;    float:left;    background-color:#CCCCCC;}
    
#footer{
width:100%; height:50px; background-color:#0000FF; float:left; clear:left;}

#footer a:link {
color:#FFF; font-size:16px;}
#footer a:visited {
color:#FFF;font-size:16px; }
#footer a:hover{
color:#FFF;font-size:16px;font-size:150%;}

 .two {font-family:book antiqua,Trebuchet MS;}

.two a:link {
color:#000;font-size:14pt;
font-family:book antiqua,Trebuchet MS;font-weight:normal;text-decoration:none;}

.two a:visited {
color:#ff0000;font-size:14pt;
font-family:book antiqua,Trebuchet MS; font-weight:normal;text-decoration:none;}

.two a: hover{
color:#FF0000;font-size:14pt;
font-family:book antiqua,Trebuchet MS;font-weight:normal;text-decoration:none;}

.content{
width:80%; float:left; position:relative; border:#999999 solid 1px:}
#holder {
    float:left;    margin-left: 40px;    position:relative;    width:300px;    height:200px;    border:#666666 1px solid;    overflow:scroll;}
#info {
float:left;    position:relative;    width: 275px;    height:400px;}
-->
</style>
</head>

<body>
<div id="wrapper"> <div id="header"> This is the header</div> <!--end header-->
  
<div id="sidebar">
  <a href="a_page.html">this is a standard link</a>
       <br />
   <div class="two" >
     <p><a href="a_page.html" >this is two class link    </a><br />
     </p>
     <p><br />
       <br />
       <br />
     </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
   </div> 
</div> <!--end sidebar-->
<div class"content">
  <p>Content division<br />
  Below are 2 divisions, parent and child holder and info. adding overflow: scroll to the parent and making the child longer than the parent gives a scroll bar</p>
  

  <div id="holder">
    <div id="info">   
 <p>This is div info<br />
     
 <a href="a_page.html">this is a standard link</a></p>

 <p> If you want to show content from a different site, add this in code view</p>
 <p>&lt;iframe
   src =&quot;http://www.domain.com/index.html&quot;<br />
   width=&quot;100%&quot; height=&quot;100%&quot;&gt; &lt;/iframe&gt;</p>
 <p>consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
 Content for  id "info" Goes Here</div>
  </div>
</div>
<div id="footer">
  <p><a href="a_page.html">this is any link in the footer div</a></div><!-- end footer-->
</div><!-- end wrapper-->
</body>
</html>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is online now