开发者

How do i implement an indented border

开发者 https://www.devze.com 2023-02-17 21:10 出处:网络
just wanted to know how i can change my navigation menu to have an indented effect. Like 1px of one light colour, and 1 px of darker colour.

just wanted to know how i can change my navigation menu to have an indented effect. Like 1px of one light colour, and 1 px of darker colour.

Also does anybody know why i couldn't auto center the content in white,开发者_开发百科 i tried margin:0 auto; but had to code in a weird workaround.

soz, site is http://digitalgenesis.com.au/sites/1 Cheers Daz


You could probably use border-style: inset; for the border effect you want, there's no need for nested block trickery or anything like that.

Your #infowrap element won't auto-center with a simple margin: 0 auto; because it is a block element and hence its default width is the width of its parent, this causes the auto left and right margins to come out as zero. The margin: 0 auto; will work if you wrap the insides in a block and give it an explicit width (for example: http://jsfiddle.net/ambiguous/aMemg/).


http://jsfiddle.net/jkmwy/

you can style the border left/right/top/bottom to create a bevel effect.

html

<div id="a"><div id="b">blah</div></div>

css

#b {
    height: 200px;
    text-align: center;
    background-color: white;
    border: 1px solid red;
    line-height: 200px;
}

#a {
    border: 1px solid yellow;
    width: 300px;

}

body {
    background-color: black;
}
0

精彩评论

暂无评论...
验证码 换一张
取 消