|
HTML - Scrollable Divs
Hi Guys
How do I make scrollable divs ? Like the ones in hotmail contacts when writing a new email. Similar TutorialsHI: I have a very long table (with 5 columns). I wish to have this table (vertical size="350px") to have a scroll bar on the right-side, so that the user can scroll down thru the table, but yet still see the 'div' below it on the viewport. Suggestions please on a 'scrollable' table. Thanks, -Mel Smith I have a Table and I need to have it in some kind of scrollable panel. Is there such a scrollable component? Thanks... Hi all, I'm quite new to webpage development in HTML & using Dreamweaver 8.0. I am trying to put a small scrollable window within the main webpage, so that the text inside this scrollable window can be scrolled vertically without having to scroll the main window up & down. The webpage I'm building is an FAQs. An example of what I mean can be found on the following webpage : http://www.xe.com/ucc/ where the user can scroll vertically to see more currency options. Please refer to my two screen captures where I've shown the code I used & the screen capture from the browser window. I only want the scrollable window to scroll vertical. Much thanks in advance for your expert help. Andrew I'm not sure where this should be listed so I'm starting here - Here's the website I'm working on - www.drscopesnaturalhealthcare.com - I'd like to add a textbox under the image below the "news" lable that has a scroll bar on it so it can have quite a bit of content in it but remain a constant size. I know I could do this with frames, but I don't want to use frames. I think I can do this with CSS, but I'm not sure how. Is there an easier way or can some one point me to the element to use in CSS? Thanks. cybergrrl Hi, I have a div element, that will contain various debug/warning messages from Javascript. If I set it's height to 100%, so to fill the parent element, it overlaps the parent element. How can I automatically set the height, without manually setting the height in pixels? Many thanks for any suggestions. Regards Aaron HTML Code: <div style="border-style: solid; border-width: 3px; margin: 0px; padding: 0px; z-index: 1000; position: fixed; top: 252px; left: 582px; width: 494px; height: 202px; background-color: white; display: block;"> <h1 style="width: 100%; height: 20px; font-size: 12px; display: block; border-bottom-width: 2px; border-bottom-style: solid; vertical-align: middle;"><img src="https://127.0.0.1/beer2/i/clear.png" style="cursor: pointer;" alt="clear"/><img src="https://127.0.0.1/beer2/i/min.png" style="cursor: pointer;" alt="Minimise"/> Debug Window</h1> <div style="overflow: scroll; width: 100%; height: 100%; font-size: 12px; position: static;"> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> </div> </div> aaaaaaaaaaaaaaaaaaaaaaa Hi everyone, I'm new to this forum so please correct me if I'm doing anything wrong or if this post is in the wrong section. I have a custom template for my website which allows you to scroll down and view my photographs. I would like to keep it this way BUT I would like to implement Google Ads on either sides of my centered content. I want these ads to be stationary even if a viewer is scrolling to the bottom of my site. Is this possible, and even then, is it hard to do? I really appreciate your help. Here is the link to my website if that helps. http://floatingcity.tumblr.com Cheers, Kyle Not sure if this is possible or not, but I created a scroll box, which contains a title and then text underneath it. Is there a way to limit the scrollable area, so the title is always fixed at the top of the scroll box and the text scrolls up and disappears just below the title? If its not possible in HTML/CSS, then how else can I do this? Thanks for your help in advance. How i create a frame type space( which is scrollable ) similar to seperate window inside a webpage ? Despite reading multiple posts on "scrollable" table cells on the forums, I've not yet quite found the answer to my question, so hopefully I can get some feedback from all viewers out there! I and some friends run a small Catholic arts and crafts website (www.illuminatedink.com) through which we sell products that we create. I've based the page layout on a table instead of frames or iframes. The table has 3 cells in it. The entire top "banner area" of the screen is one cell. Below that on the left we have the naviagation menu cell. The main content that someone is trying to view appears in the remaining lower right cell (also the largest). This page works great on all the computers at my house (3 of them) and on most other computers as well. I have yet to test this in IE 7.0, but if someone else has that browser, please let me know what happens. So, what's the problem you ask? That lower right table cell where all the content appears does not work for everyone. I just got another complaint today that no scroll bar appears and the person can only see what's in the top of cell, there is no "scrollability". Here is a sample (with notes made by me in ** NOTE ** format). The notes are of course not in the actual code, I am showing only the code really matters here. Code: <BODY STYLE="margin-top: 0px; margin-left: 0px">
<TABLE CELLPADDING=0 CELLSPACING=0 HEIGHT=590 WIDTH=1000>
<TR HEIGHT=90>
<TD WIDTH=1000 COLSPAN=2 STYLE="background-image:url('http://www.illuminatedink.com/images/background/banner.jpg')">
 
</TD>
</TR>
<TR HEIGHT=500>
<TD VALIGN=top WIDTH=200 STYLE="background-image:url('http://www.illuminatedink.com/images/background/menu_bar.jpg');background-repeat:no-repeat">
<TABLE ALIGN="center" CELLSPACING=0 CELLPADDING=0>
**Navigation menu on the left side goes here**
</TABLE>
</TD>
<TD WIDTH=800 VALIGN="top">
<DIV STYLE="overflow:auto;height:490px;width:800px;position:absolute;left:200;padding-right:30px; padding-left:0px"><MAP NAME="page_links">
**All code for the scrollable cell in the lower right goes here**
</DIV>
</TD>
</TR>
</TABLE>
</BODY>
So, can anyone possibly tell me why this would have a scroll bar in some browers and not in others? Or does anyone have any code changes I could make that may guarantee that they will get a scroll bar in that lower right cell? The complaints that I have received mainly seem to be from Mac users using IE for Mac. But I just had someone who had a brand new Dell with Windows XP Prof. and the most recent IE 6, which is exactly the configuration I run, but didn't get a scroll bar when I did. Ideas? Thank you! Can anyone help me with this code to make the page fluid in all three browsers without showing spaces in between the sections? http://www.cpe.rutgers.edu/wetlands/certificate05.html Thanks in advance Could anyone explain to me how to put rounded corners on divs? Ive researched it a bit, but i want to be able to change the colours so i dont want to use image based if possible. found a way to do it but want more than one curved div but cant seem to be able t use different colours. I want to have one large rounded div on the webpage then some smaller ones within this one for nav menus and content etc, Have found some ideas but they dont work with IE. Okay, i have a problem with divs on my site i have 4 divs, the first one is the holder, he's around the other 3. Then there are 3 divs that have to be placed next to each other, but that isn't working! When i use float left or right it tottaly screwes up my page, does anyone know what i do wrong?? my code is: HTML Code: /********** Lay-out **********/
body{
margin:0;
padding:0;
background-color:black;
font-family:Tahoma;
}
.houder{
background-color:white;
width:982px;
height:500px;
margin-left:auto;
margin-right:auto;
}
.header{
height:120px;
width:980px;
margin:0;
padding:0;
background-image:url(Afbeeldingen/header.jpg);
}
.headers{
background-image:url(Afbeeldingen/headr.jpg);
background-repeat:repeat-x;
height:21px;
width:270px;
margin-top:1px;
font-family: Tahoma;
font-size:11px;
color:white;
padding-left:10px;
padding-top:7px;
}
a{
color:black;
text-decoration:underline;
font-size:11px;
font-family:Tahoma;
}
.Contenthouder{
height:340px;
width:980px;
}
.scheiding{
background-image:url(Afbeeldingen/scheiding.jpg);
background-repeat:repeat-y;
width:5px;
height:340px;
margin-left:280px;
}
/********** Menu **********/
.menu{
background-image:url(Afbeeldingen/menu.jpg);
background-repeat:repeat-x;
width:980px;
height:14px;
margin-top:1px;
font-family: Tahoma;
font-size:12px;
padding-top:9px;
padding-bottom:10px;
}
a.menu:link, a.menu:active, a.menu:visited{
color:white;
text-decoration:none;
padding-left:10px;
padding-right:10px;
}
a.menu:hover{
background-image:none;
color:red;
text-decoration:none;
background-color:white;
}
/********** inlog **********/
.inloghouder{
width:280px;
margin-right:700px;
font-size:12px;
float:left;
}
.inlogtxt{
padding-left:20px;
font-size:11px;
}
.inloginput{
border:0;
background-color:lightgrey;
font-size:12px;
width:250px;
height:18px;
padding-top:4px;
}
.inlogknop{
background-image:url(Afbeeldingen/knop.jpg);
font-size:11px;
font-family: Tahoma;
background-color:grey;
border:0;
color:white;
font-weight: bold;
height:20px;
}
/********** Text **********/
.texthouder{
width:500px;
background-color:yellow;
height:300px;
float:right;
}
HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ne" lang="en">
<head>
<title>Familie Voetbalspel</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div class="houder" align="center">
<div class="header" /></div>
<div class="menu" align="left" valign="middle">
<a href="#" class="menu"><b>Home</b></a>
<a href="#" class="menu"><b>Uitleg</b></a>
<a href="#" class="menu"><b>Punten</b></a>
<a href="#" class="menu"><b>Ronde scores</b></a>
<a href="#" class="menu"><b>Klassement</b></a>
<a href="#" class="menu"><b>Spelers</b></a>
<span class="menurechts" style="margin-left:389px;"><a href="http://www.coachvanhetjaar.nl" class="menu"><b>Coach van het Jaar</b></a></span>
</div>
<div class="Contenthouder" align="left">
<div class="inloghouder">
<div class="headers">
<b>Inloggen bij het Familie Voetbalspel</b>
</div>
<div class="inlogtxt">
<br />
<b>Gebruikersnaam<br /><br />
<input type="text" name="gebruikersnaam" class="inloginput" /><br /><br />
Wachtwoord<br /><br />
<input type="password" name="wachtwoord" class="inloginput" /><br /><br />
<input type="submit" value="Inloggen" class="inlogknop"/><br /><br />
<a href="#">Wachtwoord vergeten?</a><br /><br />
<a href="#">Geen account?? Hier aanmaken!!</a>
</div>
</div>
<div class="texthouder">
</div>
<div class="scheiding">
</div>
</div>
</div>
</body>
</html>
contenthouder is the holder, inloghouder de div on the left, scheiding the div in the middle and texthouder the div on the right Hello, I've been dealing with this problem and it seems fairly simple but has got me scratching my head. The page works fine in Firefox (of course) but internet explorer draws this problem. There are gaps between the DIVS and I have tried messing with the margins and padding a bit but have had no luck. here is the page in Firefox: Here is the code in page. HTML Code: <div id="container"> <div id="head"><a href=""><img src="hd_1.png" border="0" /></a></div> <div id="ev_top"><img src="ev_top.png" /> </div> <div class="float"><img src="ev_l1.png" /> </div> <div class="ev1"> <div class="ev2">Dallas</div> <div><a href=""><img src="ev_dallas_tba.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">May - TBA</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div><div class="float"><img src="ev_gap1.png" /></div> <div class="ev1"> <div class="ev2">New York</div> <div><a href=""><img src="ev_ny.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">04.29 - 87 Lounge</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div> <div class="float"><img src="ev_gap2.png" /></div> <div class="ev1"> <div class="ev2">Store</div> <div><img src="ev_str.png" /></div> <div class="ev3"> <div class="float"><img src="bullet_yellow.png" /></div> <div class="ev4">Coming Soon</div> <div class="ev5">| <a href="#"> Updates...</a></div> </div> </div> <div class="float"><img src="ev_right.png" /></div> </div> <div id="ev_bot"><img src="ev_bot.png" /></div> <div class="float"><img src="ev_botr.png" /> </div> </div> <div id="blog_right"><img src="blog_rt_gap.png" /></div> <div id="blog_contain"> Style sheet: Code: body{
font-family:Arial, Helvetica, sans-serif;
width:713px;
background:#cfeae7 url(bg.png);
margin:0 auto;
height:100%
}
#container{height:100%; width:750px;}
#head{text-align:center; padding-right:25px;}
.float{float:left;}
.ev1{float:left; width:211px; background:url(ev_box_bg.png); font-size:24px; text-align:center;}
.ev2{float:left;text-align:left; text-indent:6px;color:#9ce4e4;padding-top:5px;height:100%;}
.ev3{padding-left:5px;text-indent:3px; padding-top:10px; width:211px;}
.ev4{float:left; font-size:12px;color:#b1e7e7; height:100%;}
.ev5{text-align:right; font-size:12px; color:#a2e6e6; padding-right:15px;padding-bottom:9px;height:100%;}
#ev_top{padding-left:6px; margin:0px; padding-top:0px;padding-bottom:0px;}
#ev_bot{float:left; margin:0px; padding:0px;}
Any ideas? Help would be appreciated! Thanks. Ok, I'm completely self taught, so don't be surprise if my html is a mess. I was told recently that I'm out of date in using tables and should be using divs, so in updating my website that's what I'm trying to do. The first one is that it doesn't display properly in IE. Can anyone tell me why, and how to rectify it? http://www.ratscallions.co.uk/Test/index.html There are other problems (as you'll be able to see), but I'd like to work that one out first. Thank you, Nim Hello. I have problem with IE 6.0. 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>
<!- Holly hack for 3 px -->
<!--[if IE]>
<style type="text/css">
#_left, #_right, #_center { zoom: 1;}
</style>
<![endif]-->
<style type="text/css">
<!--
#_left {
float: left;
width: 200px;
color: #900;
}
#_right {
float: right;
width: 200px;
color: #00F;
}
#_center {
float: left;
width: 200px;
color: #00F;
}
-->
</style>
</head>
<body>
<div id="_left">Polyvios left menu<br />
sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
<div id="_right">Polyvios right menu<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
<div id="_center">ddd</div>
</body>
</html>
The result of this code must be three in line menu. (the code is an example). But IE 6.0 can't understand divs with float. Any one who knows how I can fix it? Sorry for my English. Thank you. Hello, I am using a div for my website. I would like all the content to load in the divs, I don't want to create a new page for each site.How can I do this? Also, for the portfolio,I would like the images to change when you click the arrow, but I don't want to use frames or have each image on a new page. Can I do this within the div? Thanks! http://heartless-ink.com/treegirl.html http://www.freewebs.com/stevenwang/ That is tables... Someone had mentioned I should create the website with divs. Any tips for doing this? Or is there a real simple way to do it real quick? And what are the added benefits to divs as opposed to tables? Or vise versa.. Any help, or info would be greatly appreciated. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<noframes></noframes><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="floating-1.7.js"></script>
<title>WEB PAGE TITLE GOES HERE</title>
<style type="text/css">
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #e7e7e7;
color: #000000;
float: center;
width: 100%;
font-family: 'arial',verdana,sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.3em 3.3em;
background-color: #e7e7e7;
color: #000000;
text-decoration: none;
float: center;
border-top: 1px solid #323232;
border-bottom: 1px solid #323232;
}
#navcontainer ul li a:hover
{
background-color: #ffffff;
color: #000000;
}
td.padding
{
padding: 0px 0px 0px 30px;
}
</style>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'arial',verdana,sans-serif;">
<div id="floatdiv" style="
position:absolute;
background:#323232;
border-top: solid 3px #ffffff;
border-left: solid 3px #ffffff;
border-bottom: solid 3px #ffffff;
border-right: solid 3px #ffffff;
height: 165px;
width: 32px;
top:35px;
right:30px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
z-index:100">
<p align=center><img src="follow_right.png" alt="" border="0">
<a href="http://www.facebook.com/litofficial" target="_blank"><img src="facebook.png" alt="" title="We're on Facebook!" border="0"></a><br>
<a href="http://www.twitter.com/#!/litofficial2" target="_blank"><img src="twitter.png" alt="" title="Follow us on Twitter!" border="0"></a>
</p></div>
<script type="text/javascript">
floatingMenu.add('floatdiv',
{
// Represents distance from left or right browser window
// border depending upon property used. Only one should be
// specified.
// targetLeft: 0,
targetRight: 30,
// Represents distance from top or bottom browser window
// border depending upon property used. Only one should be
// specified.
targetTop: 35,
// targetBottom: 0,
// Uncomment one of those if you need centering on
// X- or Y- axis.
// centerX: true,
// centerY: true,
});
</script>
<table width="100%" style="height: 100%;" border="0">
<!-- ============ HEADER SECTION ============== -->
<tr>
<td colspan="3" style="height: 10px;" bgcolor="#323232">
</td></tr>
<tr>
<td class="padding" colspan="3" style="height: 225px;" bgcolor="#e7e7e7"><a href="http://www.litofficial.com" target="_blank"><img src="lit_logo_001.gif" alt="" title="" border="0"></a>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">home</a></li><li><a href="#">about</a></li><li><a href="#">blog</a></li><li><a href="#">collection</a></li><li><a href="#">contact</a></li><li><a href="#">order</a></li></ul>
</div>
</td></tr>
<!-- ============ NAVIGATION BAR ============== -->
<tr>
<td colspan="3" valign="middle" height="0" bgcolor="#ffffff">
</td></tr>
<!-- ============ MIDDLE COLUMN ============== -->
<tr>
<td class="padding" width="38%" valign="top" bgcolor="#ffffff">
<h2>recent posts</h2>
The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).
</td>
<td class="padding" width="36%" valign="top" bgcolor="#ffffff">
<h2>about</h2>
The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).
<td class="padding" width="26%" valign="top" bgcolor="#ffffff">
<h2></h2>
</td>
</td></tr>
<!-- ============ FOOTER SECTION ============== -->
<tr>
<td class="padding" colspan="3" align="left" height="120" bgcolor="#323232">
<a href="http://www.facebook.com/litofficial" target="_blank"><img src="facebook.png" alt="" title="We're on Facebook!" border="0"></a>
<a href="http://www.twitter.com/#!/litofficial2" target="_blank"><img src="twitter.png" alt="" title="Follow us on Twitter!" border="0"></a>
</td></tr>
</table>
Hi again I decided to use divs instead of tables for the html layout, now i have some issues and would like to ask you guyz around here. this is the html : PHP Code: <body> <div id="wrapper"> <div id="top"> <div id="logo"></div> </div> <div id="menlog"> <img src="logo.png" width="231" height="54" /> <ul> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Search: </a></li> <li><div id="searchbx"><form class="search" action=""> <input type="text" class="text-field"/> <input type="submit" class="submit" value="submit" /></form> </div></li> </ul> </div> </div> </body> and this is the css: PHP Code: #wrapper { text-align: left; margin: 0px auto; padding: 0px; width: 100%; /* border: 1px solid black; */ } #top { width: 100%; /* border: 1px solid black; */ } #logo { background: url('bg-top.png') no-repeat; padding: 0px 0px; margin: 10px 0px 0px 0px; width: 100%; height: 90px; position: relative; } #menlog { /* width was 100% */ width: 100%; font-size:15px; } and this is what i get : now my problem is that my menu wont remain in the same line as the logo and it goes to the next line under the logo which i dont want! i tried also to put this line : PHP Code: <img src="logo.png" width="231" height="54" /> inside a div which i gave "display:inline" property but that failed too ! it would be nice if someone can advice me. I am trying to make a new layout for my site, http://www.jkrfan.com/index2.php , and I want it to be like this site: http://james-fan.org/ in the way that they have the two different background colors (the white one for the inside area and then the orangey one for the outside). I am also trying to figure out how they made the border on the right go all the way to the bottom. Help is very appreciated =] Thanks! My site is http://www.jkrfan.com/index2.php and my CSS is at http://www.jkrfan.com/styletest.css |
|||||||