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 13 of 13
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Box Style in CSS

    Hello Friends

    i am new to this community and new to css. i need some help for building a box in css . i am sorry if i call it in some wrong way

    here is a preview for what i want to build



    any help please

    Regards

    Dawebboy

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a look at
    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #wrap div{
    float:left;
    border:1px solid #000;
    width:30&#37;;
    padding:5px;
    }
    #wrap h2{
    border-bottom:1px solid #000;
    }
    #wrap ul{
    list-style:square;
    }
    </style>
    </head>
    
    <body>
    <div id="wrap">
    	<div>
    		<h2>A</h2>
    		<ul>
    			<li>1</li>
    			<li>2</li>
    			<li>3</li>
    		</ul>
    	</div>
    	<div>
    		<h2>B</h2>
    		<ul>
    			<li>1</li>
    			<li>2</li>
    			<li>3</li>
    		</ul>
    	</div>
    	<div>
    		<h2>C</h2>
    		<ul>
    			<li>1</li>
    			<li>2</li>
    			<li>3</li>
    		</ul>
    	</div>
    </div>
    </body>
    </html>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Pretty easy. Make each of the boxes a separate div and float:left with margins in place to space them apart.

    Something like this:

    Code:
    <div class="box">
     <h3>Header</h3>
      <ul>
       <li>List item</li>
       <li>List item</li>
       <li>List item</li>
      </ul>
    </div>
    with CSS applied:

    Code:
    .box {
       float:left;
       height:##px;
       width:##px;
       margin:##px;
    }
    Insert your own values to suit. Beyond that, style the text using the guidelines here.
    matt | design | blog

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    well jus create a div called box1

    Code:
    .box1 {
    width:300px;
    height:300px;
    border:1px solid #999;
    }
    Then for the rest, inside the box.
    Code:
    img.imageBox {/*for the image at the top [mas controls]*/
    width:390px;
    height:30px;
    margin:0 auto;
    }
    ul.listBox li {
     list-style-type:square;
     list-style-position:inside;
    }
    HTML
    Code:
    <div class="box1">
    <img src="img.gif" class="imageBox" alt="" />
    <ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    </ul>
    </div>
    EDIT** wow im late!
    Last edited by jcdevelopment; 07-16-2008 at 04:49 PM. Reason: getting old

  • #5
    New Coder
    Join Date
    Nov 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    sorry posted twice check the below text
    Last edited by dawebboy; 07-16-2008 at 05:53 PM. Reason: posted twice check the below text

  • #6
    New Coder
    Join Date
    Nov 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thank you very much for your help guys

    what i came up with is i created 3 individual boxes , 3 of them have 3 different colors .

    what i am stuck right now is the border color & header should be the same & the other content should be in black with in the box , other problem is the bottom border is not displaying .can any one help with this issue ?

    another issue is : ist possible to have the list-squares to be different color in each boxes ? else can you suggest me how to place image in different boxes

    My 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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">

    #wrap div{
    float:left;
    width:25%;
    padding:5px;
    margin:10px;
    }

    #wrap .heading1{
    color:#f30000;
    border:1px solid #f30000;
    border-bottom:1px solid #f30000;
    }
    #wrap .heading2{
    border:1px solid #0069ac;
    border-bottom:1px solid #0069ac;
    }
    #wrap .heading3{
    border:1px solid #f46018;
    border-bottom:1px solid #f46018;
    }

    #wrap ul{
    list-style:square;
    }
    </style>

    </head>

    <body>
    <div id="wrap">
    <div class="heading1">
    <h2> Heading 1</h2>
    <ul>
    <li>H1 txt1</li>
    <li>H1 txt2</li>
    <li>H1 txt3</li>
    </ul>
    </div>
    <div class="heading2">
    <h2>Heading 2</h2>
    <ul>
    <li>H2 txt1</li>
    <li>H2 txt2</li>
    <li>H2 txt3</li>
    </ul>
    </div>
    <div class="heading3">
    <h2>Heading 2</h2>
    <ul>
    <li>H3 txt1</li>
    <li>H3 txt2</li>
    <li>H3 txt3</li>
    </ul>
    </div>
    </div>
    </body>
    </html>

  • #7
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Try this:

    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    #wrap div{
    float:left;
    width:25&#37;;
    padding:5px;
    margin:10px;
    }
    
    #wrap .heading1{
    color:#f30000;
    border:1px solid #f30000;
    }
    #wrap .heading2{
    border:1px solid #0069ac;
    }
    #wrap .heading3{
    border:1px solid #f46018;
    }
    
    #wrap .heading1 h2{
    border-bottom:1px solid #f30000;
    }
    #wrap .heading2 h2{
    border-bottom:1px solid #0069ac;
    }
    #wrap .heading3 h2{
    border-bottom:1px solid #f46018;
    }
    
    #wrap ul{
    list-style:square;
    }
    </style>
    
    </head>
    
    <body>
    <div id="wrap">
    <div class="heading1">
    <h2> Heading 1</h2>
    <ul>
    <li>H1 txt1</li>
    <li>H1 txt2</li>
    <li>H1 txt3</li>
    </ul>
    </div>
    <div class="heading2">
    <h2>Heading 2</h2>
    <ul>
    <li>H2 txt1</li>
    <li>H2 txt2</li>
    <li>H2 txt3</li>
    </ul>
    </div>
    <div class="heading3">
    <h2>Heading 2</h2>
    <ul>
    <li>H3 txt1</li>
    <li>H3 txt2</li>
    <li>H3 txt3</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
    matt | design | blog

  • #8
    New Coder
    Join Date
    Nov 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks a lot msuffern

    it solves the issue . well any suggestion regarding the list-square , can we change the colors for the list-square , else how can i replace the list squares with images .

  • #9
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    list-style-image:url(image.gif);
    not sure if ou can change the color.

  • #10
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    If you're going to replace the squares with an image, I'd do it this way:

    Code:
    li {
    	background:url("image.gif") left center no-repeat;
    	padding-left:12px;
    }
    ...as recommended by Aero. Adjust left padding to space the text away from the list markers. It makes the vertical alignment of the list markers more consistent cross-browser.
    matt | design | blog

  • #11
    New Coder
    Join Date
    Nov 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks a lot for the help guys . i almost fixed everything . but when i put individual colors for each heading , actual colors are not displaying in FF3 & they are working in IE 7 . any known issues ?

  • #12
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Are you using colors or hex codes? CSS supports statements like
    Code:
    color:blue;
    but they can be different per browser. Try using hex values.

    Also, FF3 just came out. It has bugs. Give it time.

  • #13
    New Coder
    Join Date
    Nov 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    sorry for replying in late

    well i am using hex codes , you were true. FF3 might take some time .

    but normal hex colors has to be shown right ?

    is there any other alternate solution mate


  •  

    Posting Permissions

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