...

View Full Version : Is their a more efficient way of coding this in css?



mobotech
01-09-2010, 06:31 AM
I was looking at this pixel border tutorial here: http://www.stockvault.net/tutorials/pixelborders_from_photoshop_to_dreamweaver.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/

abduraooft
01-09-2010, 07:33 AM
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.

mobotech
01-09-2010, 07:45 AM
Ok, not menu, box with scrollbar.

abduraooft
01-09-2010, 07:56 AM
.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;
}

<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>

mobotech
01-09-2010, 08:33 AM
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.

abduraooft
01-09-2010, 08:38 AM
In any standard browser, you could make those borders better by specifying inset/outset instead of solid style. Say,
.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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum