Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    90
    Thanks
    5
    Thanked 3 Times in 3 Posts

    Smile CSS need help with divs

    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
    Last edited by BigRusky; 11-27-2008 at 01:35 AM.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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 if you need references or tutorials.

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

  • #3
    New Coder
    Join Date
    Aug 2008
    Posts
    90
    Thanks
    5
    Thanked 3 Times in 3 Posts
    wow, thanks for your awesome help...

    I did give it a shot:

    css:
    Code:
    .table
    {
    	border: thin white solid;
    	overflow: scroll;
    	width: 200px;
    	height: 200px;
    }
    html:
    Code:
    <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:
    CSS need help with divs-table.gif


    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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    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">
    <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,seddiamnonumyeirmodtemporinvidunutlaboreetdoloremagna
    	</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...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Aug 2008
    Posts
    90
    Thanks
    5
    Thanked 3 Times in 3 Posts
    Thanks and is their anyway to make the vertical bar always appear?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by BigRusky View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    BigRusky (11-27-2008)

  • #7
    New Coder
    Join Date
    Aug 2008
    Posts
    90
    Thanks
    5
    Thanked 3 Times in 3 Posts
    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!

  • #8
    New Coder
    Join Date
    Aug 2008
    Posts
    90
    Thanks
    5
    Thanked 3 Times in 3 Posts
    Now is there some way to color every other row in my div?

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by BigRusky View Post
    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. Give it a try.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Aug 2008
    Posts
    90
    Thanks
    5
    Thanked 3 Times in 3 Posts
    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?

  • #11
    New Coder
    Join Date
    Aug 2008
    Posts
    90
    Thanks
    5
    Thanked 3 Times in 3 Posts
    ahh, nevermind. its probably going to be ugly if i do it anyway.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •