PDA

Click to See Complete Forum and Search --> : Scroll Boxes

GreyFaerie
09-10-2003, 02:34 PM
I am making a page where there is a table with two columns, the left column i am using for links and the right is where the content of the page will go. I have decided to use CSS scrollboxes (blogs) for all of my links and I have about six of them one right after the other. My problem is, when I go into dreamweaver... I type in all the links into the different boxes which of course will exceed the height I want the boxes to be, but thats the point in having it scroll. When I view the webpage, the scroll boxes are all the same size. but then there are huge gaps in between them because that was the length of the amount of text that I entered into the blog. How do I fix this?
toicontien
09-10-2003, 03:11 PM
Could post the code you've got or a link to the code, including the CSS?

As I understand it, the links that go with each blog are in the in the left column, and the blog text is in the right column.

All table cells in a row are as high as the cell with the tallest amount of content.


<table>
<tr>
<td class="scrollBox">links</td>
<td class="blog">blog content</td>
</tr>
.
.
.
</table>


??? Is that what you are thinking?

If you want the links on the left to be in a box with a set height, and scrollable, try something like:


<table>
<tr>
<td>
<div class="scrollBox">
Links
</div>
</td>
<td>Blog</td>
</tr>
</table>


DIVs are inherently no taller that the tallest element within them or no taller than the height set in CSS.
toicontien
09-10-2003, 03:15 PM
Here is the complete code for what I was thinking about.
GreyFaerie
09-10-2003, 07:50 PM
here is the page im working with... I have six blogs and each blog has a banner. you wont be able to see them but the little pic above each blog is a banner. the first two are spaced out perfectly... but then as you go down the gaps get bigger. thanks for your help!
GreyFaerie
09-10-2003, 07:52 PM
since you cant see the layout this page has... the blogs are on a side bar to the left and everything to the right is where my content will go for the page
toicontien
09-11-2003, 02:13 PM
I see what you're trying to do now.

You'll have to position each link box absolutely.


<head>
<style type="text/css">
<!--
.linkBox {
position: absolute;
left: 0px;
border: #1775B2 5px solid;
background: white;
width: 130px;
height: 125px;
overflow: scroll;
scrollbar-face-color: #5ABDFF;
scrollbar-highlight-color: white;
scrollbar-3dlight-color: #5ABDFF;
scrollbar-shadow-color: #119DFF;
scrollbar-darkshadow-color: black;
scrollbar-track-color: #89CEFF;
scrollbar-arrow-color: White;
}

#linkBox1 { top: 0px; }

#linkBox2 { top: 135px; }

#linkBox3 { top: 270px; }
-->
</style>
</head>

<body>

<!-- place these inside the table cell that you want the blog boxes to be -->

<div class="linkBox" id="linkBox1">
.
.
.
</div>

<div class="linkBox" id="linkBox2">
.
.
.
</div>

<div class="linkBox" id="linkBox3">
.
.
.
</div>


You can only use each ID once, so you'll have to create new IDs if you want more than 3 blog boxes. Also, be sure to specify a unit of measurement when you set an object's width, height, and position (as noted in the boldface text in the code above).

Positioning elements absolutely removes them from the normal document flow, and actually creates a new flow within the absolutely positioned element. You might have to play around with the top: and left: CSS properties to get the desired affect.