logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old 09-25-2008, 02:54 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
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  
 


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:19 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com