当前位置: 动力学知识库 > 问答 > 编程问答 >

html - CSS Code Help Needed

问题描述:

I'm looking to find out how to add another box inside my box which would be faded to act as a title bar for that specific box (If that makes sense)!

So basically, in the SOCIALBOX I'm looking to get a sub-faded bar at the top inside which would act as a title bar.

After a few comments of people saying they're not sure what I mean, I created a quick image in photoshop to act as some reference point.

Code Snippet:

body {

background: url("../images/backgroundimage.jpg") repeat 0 0;

}

/* CSS MENU BAR CODE GOES HERE */

#menubar {

width: 98.5%;

height: 40px;

background-color: #000000;

position: fixed;

border: 2px solid #ffffff;

}

.inside_text {

color: #FFFFFF;

float: right;

margin: 11px 7px 0 0;

}

.inside_text2 {

color: #FFFFFF;

float: left;

margin: 11px 0 0 7px;

}

/* CSS SOCIALBOX (RIGHT) GOES HERE */

#socialbox {

width: 40%;

height: 40%;

position: relative;

float: right;

margin: 0 8px 0 0;

background-color: #000000;

border: 2px solid #126b72;

}

<div id="menubar">

<div class="inside_text">

PLACEHOLDER TEXT

</div>

<div class="inside_text2">

PLACEHOLDER TEXT

</div>

</div>

<br />

<br />

<br />

<div id="socialbox">

</div>

网友答案:

So you are asking for a faded line within SOCIALBOX div, to serve as underline for a title?

If thats correct create another class

.title-bar
{
    border-bottom:3px;
    solid black;
    opacity:0.3;
}

position with margin-left & margin-top values inside that class based on where you want it within SOCIALBOX.

for example:

.title-bar
{
    border-bottom:3px;
    solid black;
    opacity:0.3;
    margin-left:50px;
    margin-top:30px;
    float:left;
}

create a:

<div class="title-bar"></div> 

and place that inside

<div id="socialbox"></div>

BTW make it a habit to use float:left when positioning divs with CSS, try to avoid position:absolute or fixed, unless absolutely necessary. It just comes out cleaner this way.

分享给朋友:
您可能感兴趣的文章:
随机阅读: