I've a button already created and this is how HTML appear as below:
<div class="blue_text"><button class="blue_small" id="blue_small"></button> View this video instead.</div>
CSS as below. The text to align vertically without changing the existing markup:
#blue_text{ color:#48c4d2; font-size:15px; font-family:opensansitalic;}
Used this to vertical align the button without changing the existing mark up.
button {
vertical-align:middle;
}
The button CSS in total:
.blue_small {
height: 40px;
width: 40px;
margin-left:16px;
margin-bottom:1px;
background-color:#fff;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 3px solid #fff;
background:url(../images/index_video_small2.svg) no-repeat 5px 7px;
-webkit-box-shadow: 0px 2px 6px rgba(64,80,85,0.8);
-moz-box-shadow: 0px 2px 6px rgba(64,80,85,0.8);
box-shadow: 0px 2px 6px rgba(64,80,85,0.8);
color:#48c4d2; font-size:15px;
font-family:opensansitalic;}
I'd like to combine all of the above into CSS as below with cyan colour shading box? I've never tried this.
align top http://www.kerrydeaf.com/shade2.png
UPDATE: I have this < div >< /div > at the bottom of another container but there is gap visible and tried to close the gap without success? I'm using a current < div >< /div > as below.
<div class="blue_text"><button class="blue_small" id="blue_small"></button> View this video instead.</div>
This is a gap visible as below:
align top http://www.kerrydeaf.com/shade4.png
I'm hoping to use this < div class="blue_text" > View this video instead.< /div > to close the gap as below with margin '0'.
align top http://www.kerrydeaf.com/shade3.png
UPDATE FRIDAY 2pm: Thank you it worked a treat. It went to a bottom of a browser window. I'm hoping that the blue box to close in between DIV tags for example with this DIV tag as below. This div class="toogle_wrap" is one DIV container where I've highlighted a gap to close as below. There will be at least five div class="toogle_wrap", this is one div class="toogle_wrap" below so the gap need to close on each of them.
<div class="toogle_wrap">
<div class="trigger"><a href="#"><span class="trig">1.</span> Deaf person's attention</a></div>
<div class="toggle_container">
<ul class="lists">
<li>Learn <span class="bold">how to get</span> a Deaf person's attention.</li>
<li>Take a step-by-step process.</li>
<li>Approaching a Deaf and your approach may suggest your intention to communicate.</li>
<li>You can also <span class="bold">wave</span> to get eye contact or <span class="bold">tap</span> the person gently on the shoulder.</li>
<!--<li><span class="bold">Watch a video instead:</span> <span class="typicons">Z</span> <span class="typicn"<h5>Z</h5></span> </li>-->
</ul>
<div class="blue_text"><button class="blue_small" id="blue_small"></button> Available in video.</div>
<<<<<<<<<< The gap is here to close here >>>>>>>>.
<<<<<<<<<< The gap is here to close here >>>>>>>>.
<<<<<<<<<< The gap is here to close here >>>>>>>>.
<<<<<<<<<< The gap is here to close here >>>>>>>>.
<<<<<<<<<< The gap is here to close here >>>>>>>>.
</div>
</div>
UPDATE Friday 10pm. Here is the example of DIV. Which DIV is position: relative should go in?
