...

View Full Version : Resolved CSS need help with divs



BigRusky
11-26-2008, 07:41 PM
Hello,

I have a div and i need it to always have a vertical scroll bar, but horizontal only when overflowed. Also I want it divided like in a table. I also want each row to have changing colors or preferably changing images (that i will create later). I also need a border around the whole thing (plus the visible divider; but no border in rows, just changing colors/imgs). Thanks in advance.

-Steven

BoldUlysses
11-26-2008, 08:18 PM
Hi Steven,

Have you given it a shot first? Your post sounds an awful lot like a request for free coding. Here's a good place to go (http://www.w3schools.com/default.asp) if you need references or tutorials.

After you take a crack at it, post what you have and we'll help you from there.

BigRusky
11-26-2008, 09:00 PM
wow, thanks for your awesome help...

I did give it a shot:

css:


.table
{
border: thin white solid;
overflow: scroll;
width: 200px;
height: 200px;
}


html:


<div class="table">
filler text filler text<br />
filler text filler text<br />
filler text filler text<br />
filler text filler text<br />
filler text filler text<br />
filler text filler text<br />
filler text filler text<br />
filler text filler text<br />
filler text filler text<br />
filler text filler text<br />
filler text filler text<br />
filler text filler text
</div>


output:
6906


as you see, there is a horizontal scroll bar (which i want set to auto), and i have no clue how to divide the div. I tried making separate divs but it only makes it worse.

Excavator
11-27-2008, 12:15 AM
Hello Big Rusky,

I have a div and i need it to always have a vertical scroll bar, but horizontal only when overflowed.

This seems to work in FF -
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="" content="authored by http://www.nopeople.com/Design/" />
<style type="text/css">
html, body {
text-align: center;
font: 100% "Comic Sans MS";
color: #333333;
text-decoration: none;
background: #99FFFF;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 1000px;
padding: 25px 0;
margin: 100px auto 0;
background: #ccc;
}
.table
{
border: thin white solid;
overflow: auto;
margin: 0 auto;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="table">
<p>anonbreakinglinetoscrollxLoremipsumdolorsitamet,consetetursadipscingelitr,seddiamnonumyeirmodtempori nvidunutlaboreetdoloremagna
</p>
filler text filler text
filler text filler text
filler text filler text
filler text filler text
filler text filler text
filler text filler text
filler text filler text
filler text filler text
filler text filler text
filler text filler text
filler text filler text
filler text filler text
</div>
<!--closes wrap--></div>
</body>
</html>

Take out the long text in <p>tags to stop the horizontal scroll bar.
Not sure how that works in IE...

BigRusky
11-27-2008, 12:40 AM
Thanks and is their anyway to make the vertical bar always appear?

Excavator
11-27-2008, 12:58 AM
Thanks and is their anyway to make the vertical bar always appear?

overflow-y:auto; puts a vertical scrollbar when your content is big enough to overflow.

overflow-y:scroll; puts a vertical scrollbar no matter what the content.

I think both of those block the horizontal scrollbar... play with it and see.

BigRusky
11-27-2008, 01:46 AM
THANKS!

I never knew there was a overflow-y and overflow-x.
Well now i dont even need the other code. :)

I just set overflow-y to scroll and overflow-x to auto and it works perfectly!

BigRusky
11-27-2008, 01:51 AM
Now is there some way to color every other row in my div?

Excavator
11-27-2008, 02:01 AM
Now is there some way to color every other row in my div?

Hehe, let's see what you've got so far.


You should easily be able to use a class to color your text. Have a look at this link. (http://webdesign.about.com/od/css/a/aa020899.htm) Give it a try.

BigRusky
11-27-2008, 02:09 AM
ok. but, i want it to only color every other row that is used and i need that automatic.

in other words, i need every new row to be in a different class than the one before.
would this have to be done in something like php or javascript, or can i do it in css?

BigRusky
11-27-2008, 02:34 AM
ahh, nevermind. its probably going to be ugly if i do it anyway.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum