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

abduraooft · 01-09-2010, 07:33 AM

Quote:

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

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>

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,

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