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 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Is their a more efficient way of coding this in css?

    I was looking at this pixel border tutorial here: http://www.stockvault.net/tutorials/...reamweaver.php

    I've turn that table menu into a working css menu. But my way of doing it seems like its more than it should be.

    Is their a better way of creating this menu in css without using as many div's and css coding as I have?

    Here's my version: http://htmlnewbie.x10hosting.com/pixelmenu/

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Is their a better way of creating this menu in css without using as many div's and css coding as I have?

    Here's my version: http://htmlnewbie.x10hosting.com/pixelmenu/
    I don't see any menu in that link.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ok, not menu, box with scrollbar.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    .box_outer{
    border:1px solid #000;
    background:#cdcdcd;
    margin:0 auto;
    padding:5px;
    width:252px;
    font-size:12px;
    line-height:1.6;
    }
    .box_inner{
    background:#e6e6e6;
    border:1px solid #000;
    overflow:auto;
    height:166px;
    padding:10px;
    }
    Code:
    <div class="box_outer">
     <div class="box_inner">
    	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
     </div>
    </div>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for the alternative, but actually I wanted to use the images that were in the tutorial, because it has a white top and bottom border if you look closer (pixel border).

    I thought hmmm, maybe I can add a border and use the outline property, but than that would only border all around.

    I just wanted to see if their was another way to use those image borders.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    In any standard browser, you could make those borders better by specifying inset/outset instead of solid style. Say,
    Code:
    .box_outer{
    border:1px outset #000;
    background:#cdcdcd;
    margin:0 auto;
    padding:5px;
    width:252px;
    font-size:12px;
    line-height:1.6;
    }
    .box_inner{
    background:#e6e6e6;
    border:1px inset #000;
    overflow:auto;
    height:166px;
    padding:10px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    mobotech (01-11-2010)


  •  

    Posting Permissions

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