|
HTML - Scrollable 'div' Overlaps Parent Container
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> Similar TutorialsI need my css menu to stay on top of everything, but there is a .swf with a javascript code that I am using for a slideshow that won't stay under the menu. Any solutions? - THANK YOU! Here's the test page: http://dbk.me/test/intro.html RESOLVED! - Used variable: so.addParam("wmode", "transparent"); Thanks for your help! HI: 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 Hi Guys How do I make scrollable divs ? Like the ones in hotmail contacts when writing a new email. 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 have a Table and I need to have it in some kind of scrollable panel. Is there such a scrollable component? Thanks... 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 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. 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 aaaaaaaaaaaaaaaaaaaaaaa 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! Okay so I'm trying to get cutenews to post in rows, and I know I've done it before utilizing a div container, but I can't remember what it was I did lo those many years ago. Can anyone help me out? I'm looking for an end result like this Much appreciated anyone who gives this a look and/or reply =] I'm pretty new to all of this and need some help trying to load a swf file in a container. What I have is a thumbnail gallery where I have thumbnails on the right side of the page and when you click on the thumbnail it pops on the left side of the page in a container. So what I want to do is keep the same format so you can click on the thumbnail then the swf file appears instead of an exploded image. This is what I have. Also I appreciate any and all help, thank you. <style type="text/css"> img { border: 0px } #container { text-align: center; border: 0px; margin: 0 auto; padding: 0px } #leftcol img { } #rightcol img { } </style> <td width="80" height="421"> </td> <td width="673"><div align="center"><img src="images/AF.jpg" name="ImageOnly" align="absmiddle" /></div> </div></td> <td width="71"> </td> <td width="318" valign="middle"><div id="leftcol"> <div class="root" id="root0"> <div class="scrollContainer" id="scroll0Container"> <div class="scrollContent" id="scroll0Content"> <p> <a href="#" onclick="ImageOnly.src='images/Asylum_5.jpg'"><img src="images/Asylum_5_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/Asylum_1.jpg'"><img src="images/Asylum_1_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/Asylum_2.jpg'"> <img src="images/Asylum_2_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/Asylum_3.jpg'"><img src="images/Asylum_3_thumbnail.jpg" /></a> </p> <p> </p> <p> <a href="#" onclick="ImageOnly.src='images/kerryn_5.jpg'"><img src="images/kerryn_5_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_6.jpg'"><img src="images/kerryn_6_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_7.jpg'"> <img src="images/kerryn_7_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_8.jpg'"><img src="images/kerryn_8_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_9.jpg'"><img src="images/kerryn_9_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_9.jpg'"><img src="images/kerryn_movie_thumbnail_2.jpg" /></a> (this is where I want to add it) </p> <p> </p> <p> <a href="#" onclick="ImageOnly.src='images/f_h_5.jpg'"><img src="images/f_h_5_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/f_h_6.jpg'"><img src="images/f_h_6_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/f_h_7.jpg'"><img src="images/f_h_7_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/f_h_8.jpg'"><img src="images/f_h_8_thumbnail.jpg" /></a> </p> <p> </p> <p> <a href="#" onclick="ImageOnly.src='images/football_1.jpeg'"><img src="images/football_1_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/football_2.jpeg'"><img src="images/football_2_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/football_3.jpeg'"><img src="images/football_3_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/football_4.jpeg'"><img src="images/football_4_thumbnail.jpg" /></a> </p> <p> </p> </div> </div> </div> </div> I hope I'm posting in the right section. Again thank you for any help. Hi, I recently created a landing page for my site but cannot seem to adjust the alignment of the main container element. I want to try and centre the main container vertically by putting a margin at the top. However, it will only let me put in a maximum of 10px margin? If someone could show me how to do this I would be very grateful. The url is http://www.amokcuisine.com and I hope you will see what I am getting at! Thanks GG My container kinda works, but kinda doesn't. I've had this problem before and I can't remember how I solved it, anyway.. My container is keeping my "reading" and "sidebar" divs in place, but the background of the container div isn't following down the other divs, it's just on top of the container. Here's my website : http://djance.net/wordpress (the layout is NOT done if you were wondering). And my Css : http://djance.net/layouts/14/css.style I think it's the Css, but anyway Help appriciated ! hey forum, does adding an image with a link in a div container make it null?? Problem: PHP Code: <div id="container"> <div id="top-left-box"><img src="images/rss_tab.png" width="201" height="45" longdesc="http://betyoulikeit.com/tinc?key=gNu6zzEm"></div> look cottonhead no slices thanks... -tikki- http://www.iankovi.com/htmlllll.html http://www.iankovi.com/csssss.css Any suggestions? This is what my assignment says to do word by word. "Scroll down to the four div container elements(marked with ids sample 1 through sample4) and place each of the div containers in the samples class." Here is my code and what I thought this instruction meant. HTML Code: <div id="samples_container">
<div class="samples"><div id="sample1">
<h3>Paint Ball Fun</h3>
<a href="sample1.jpg"><img src="sample1.jpg" alt="" /></a>
</div></div>
<div class="samples"><div id="sample2">
<h3>Longs Peak Memories</h3>
<a href="sample2.jpg"><img src="sample2.jpg" alt="" /></a>
</div></div>
<div class="samples"><div id="sample3">
<h3>Trick or Treat!</h3>
<a href="sample3.jpg"><img src="sample3.jpg" alt="" /></a>
</div></div>
<div class="samples"><div id="sample4">
<h3>Michael's First Concert</h3>
<a href="sample4.jpg"><img src="sample4.jpg" alt="" /></a>
</div></
</div>
The thing is it's asking me in my CSS later to make the class .samples, to have absolution positioning. Later then it asks me to set positions for ID sample1 through 4. So i'm guessing what it's trying to do is inbox all sample1-4 inside samples, so that when I declare position as absolute in the class .samples, the other ID's will already be set to absolute position and all I will need to do is assign left and top value. Unfortunately the way I boxed the sample class doesn't seem to work, given how vague the instruction is I doubt I did the right thing but I can't figure anything else. Here's a sample of my CSS just in case. Code: .samples{position:absolute;}
.samples img{width:150px; height:193px; border-width:0px;}
#samples_container{position:relative; top:0px; left:0px; height:450px;}
#sample1{left:0px; top:0px;}
#sample2{left:170px; top:0px;}
#sample3{left:0px; top:170px;}
#samples4{left:170px; top:220px;}
Thanks again in advance. Hey all, I've been trying to look this up on google but all I get as results are unanswered posts, so I'm here to ask... If I set up a blog (on an existing blogging site) or even created a standalone XML file, would I be able to parse that data into a DIV container? If so, how would I go about getting it to work? Thanks in advance, - M Hi I am trying to center a container from top to bottom aswell as left to right. This is my code for the container so far: Code: #container1 {
width:780px;
height:650px;
margin-left:auto;
margin-top:auto;
margin-right:auto;
margin-bottom:auto;
background-color:#FFFFFF;
}
As you can see my container is 780x650, i may change the height when i come to do the design but the design wont work if i cant have this container centerd on different screen resolutions. Left and Right centering has been acheived with margin's set to auto, unfortunately this does not work for top and bottom Anyone know how to achieve this, I am only really worried about browser compatability in FF and IE. Thanks in advance |
|||||||