CSS Div Box WordPress Theme

Question

Hi I am working on a wordpress theme which was made by other developer with no notes or documentation he left. I'm currently editing the theme based on the new requirements. I'm not a good css guy, I work primarily on the backend side of things. So I need a div box or box like this:

That translucent black box is one that I need and the text inside:

I manage to make something like this:

But seems my box is way to high, can I make it on the center? Plus the content should be in white colored font. Here's my code so far:

<div class="about_area" id="about">
<div class="container">
    <div class="row">
        <div class="col-md-12 sec_headding text-center">
            <!-- <h1>
                <span></span><?php the_title(); ?><span></span>
            </h1> -->
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-12 aboutbox">
                <div class="about_content">
                    <h3 class="about_header">RED DELA CRUZ</h3>
                    <hr align="center"/>
                    <p class="lead"><?php the_field('subtitle'); ?></p>

                    <p><?php the_content(); ?></p>
                </div>
            </div>

        </div>
    </div>
</div>

The content you see in the box is generated by

<?php the_field('subtitle'); ?>

My CSS

.bxslider img{
    width:100%;
}
.about_area{
    padding-bottom:105px;
    background-color: #b0c4de;
    background-image: url('../images/about_bg.jpg');
}

.about_area .bx-wrapper .bx-viewport{
    margin-bottom: 20px;
}

.aboutbox {
    background-color: #000000;
    opacity: 0.6;
    position: relative;

}

.about_content {
    color: #FFFFFF;
}

.about_header {
    text-align: center;
    font-size: 33px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #FFFFFF;
    margin: 1em 0;
    padding: 0;
    /*width: 820px;*/
    width: 60%;
    margin: 0 auto;
}

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

I think that you mean "How to center the div Horizontally" and you will find a plenty of solutions on this previous question: How to horizontally center a <div> in another <div>?

If I am wrong and you meant something else, let me know.

edited May 23 '17 at 10:27

Community

1
1

answered Sep 29 '15 at 10:45

Xavi Alsina

643
1
8
24

Hi not just centering is what I need. As you see with the needed output and my output I need my box to slightly go down plus the font should be white inside my 2nd div – jackhammer013 Sep 29 '15 at 11:08

score 0 · Answer 2 · answered Sep 29 '15 at 10:58

you can try this one:

bxslider img{
    width:100%;
}
.about_area{
    padding-bottom:105px;
    background-color: #b0c4de;
    background-image: url('http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png');
}

.about_area .bx-wrapper .bx-viewport{
    margin-bottom: 20px;
}

.aboutbox {
    background-color: #000000;
    opacity: 0.6;
    position: relative;

}

.about_content {
    color: #FFFFFF;
}

.about_header {
    text-align: center;
    font-size: 33px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #FFFFFF;
    margin: 1em 0;
    padding: 0;
    /*width: 820px;*/
    width: 60%;
    margin: 0 auto;
}

#one, #two, #three { width: 33.3%; }
#one, #two { float: left; }
#three { float: right; clear: none; }

#one,  #three {
width: 250px;
min-height: 150px;
margin-top:-73px;
border: 4px solid gold;
background:red;
/*to reduce float drop issues in IE*/
word-wrap: break-word;

}
 #two {
     margin-top:-35px;
width: 150px;
min-height: 50px;
margin-bottom:45px;
border: 4px solid gold;
background:#C2DAD7;
/*to reduce float drop issues in IE*/
word-wrap: break-word;
     margin-left:420px;
     position:fixed;
}
p{
     margin-top:-175px;
    position:fixed;
}

Fiddle Demo

Can you explain what you did? I tried checking it on fiddle and I am confused how can I use it. Espcially you have a one two three box in there? — jackhammer013, Sep 29 '15 at 11:05
Hi. Yes, I see that you created 3 boxes in 3 different location, but my question is about only 2 exisitng div box that only needs to be adjusted. By two box is aboutbox and about_content. And the question is stated above. I am confuse with your answer on how do I suppose to use it? — jackhammer013, Sep 29 '15 at 11:13

score 0 · Answer 3 · answered Sep 29 '15 at 11:18

0

To make the box background transparent and not the text, change the .aboutbox-class to this:

.aboutbox {
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.6;
    position: relative;
    margin-top:100px;
}

And then I have added a margin to the top of the box, to get the womens faces free of the box.

answered Sep 29 '15 at 11:18

razemauze

2,666
1
16
28

I don't have problem with the background color or transparency. My problem is the size and positioning of the box. See the again the images of my post. The first is the expected output, 2nd is what I've done. – jackhammer013 Sep 29 '15 at 11:24

CSS Div Box WordPress Theme

3 Answers3