I want to center a combination of css buttons in a page. I have set display: inline-block;. But they are aligning to left. I could center them if I add an additional div as parent element for the both and set them a id giving it a display:block.
Here is the css:
.q-button {
background-color: green;
color: #FFF;
min-width: 144px;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: none;
outline: none;
height: 38px;
margin-right: 10px;
margin-bottom: 20px;
line-height: 45px;
font-size: 12px;
padding: 0 20px;
font-weight: bold;
-webkit-transition: all .2s linear;
-moz-transition: background .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
display: inline-block;
text-transform: none;
position: relative;
}
.q-button a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 45px;
text-decoration: none;
z-index: 10;
}
#q-button-container{
left: 0;
right: 0;
margin: auto;
width: 49px;
display: block;
display: inline-block;
}
This is the code (custom function in WordPress theme. get_field is of Advanced Custom fields'):
function custom_content_filter_the_content( $content ) {
if ( function_exists('get_field') ) {
$content .= '<span class="q-button" id="q-button-container" data-icon="a">' . get_field('website') . '</span>';
$content .= '<span class="q-button" id="q-button-container" data-icon="a">' . get_field("website2") . '</span>';
}
return $content;
}
add_filter( 'the_content', 'custom_content_filter_the_content' );
Could any body suggest me how to do it keeping the php code intact and by just customizing the css?
Update: I was able to center the buttons after wrapping them with a new class. But here I am only able to center them if I use text-align:center. That temporarily enabled me achieve what I need. But I want to know why can't I achieve in the usual way- Fiddle
If you can consider using jQuery to wrap a div around the buttons, you can use this:
jQuery wrap All
$( ".q-button" ).wrapAll( "<div class='q-button-wrap' />");
Then you can apply css to .q-button-wrap.
Hope this helps.
easy to do just use display: inline-block
http://jsfiddle.net/robbiebardijn/q745U/
display: inline-block;
Wrap both the spans in a parent element and center that element.
Related
I have used following css classes to create a popup box for a button click event.
<style type="text/css">
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 10;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 40%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
Popup is working as expected.But when I scroll down on the popup,images and text which are not in the popup area(Which are below the popup) are also displayed as they are on the same level.I have included a screen shot of my problem.Can any one help me in this? Where have I gone wrong?
I have obtained these classes from the Bootsnip site
https://bootsnipp.com/snippets/featured/ecommerce-quick-view-popup-amp-product-row
This is the problematic view
Just add z-index: 1 to .overlay. This should fix this issue.
See CSS z-index property for more informations.
I can't see a different z-index value in this case, but If you do, just increase the number of z-index.
I use Socialengine (Zend Framework) with lot of plugin but one of plugin has a different CSS.
In fact there are lot of CSS cascading but isn't less or sass file.
My file style.css looks like this :
/*Mixins*/
=font-size($px){
font-size: calc($px/13)em;
}
=transition{
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
=border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
=text-clamp($line) {
word-break: break-word;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
line-height: normal;
-webkit-line-clamp: $line;
line-height: 18px;
height: calc(18*$line)px;
}
/* CSS */
.blog_options{
display: block;
position: absolute;
width: 170px;
right: 0;
border: 1px solid $theme_border_color;
background: #FFF;
display: none;
box-shadow: 0px 0px 21px -5px #ccc;
&.blog_options_show{
display: block;
}
& > a{
padding: 10px 15px;
display: block;
+font-size(13);
border-bottom: 1px solid $theme_border_color;
color: $theme_font_color !important;
&:hover{
background: $theme_link_color_hover;
color: #FFF !important;
}
i.fa{
+font-size(14);
margin-right: 5px;
}
&:last-of-type{
border-bottom: 0;
}
&.icon_blog_delete{
color: #c31919 !important;
background: #f6f6f6 !important;
i.fa{
color: #c31919;
}
}
}
}
So how I can compile this manually for have a clean CSS file ?
This type of CSS have a name ?
Thank you
since i don't have more knowledge about socialengine script, but it use CSScaffold in css compiling.
Review the repository for more information.
Actually I don't know how to search this issue, if it is css or php issue.
I have a div that opens a hidden div.
When I test the code outside the website it works fine. When I tested inside the website I took this.
see the picture here (http://grab.by/H8TW)
The full construct of the code is:
<ol>
<div><div>
<div></div>
<div>
<li>
<div class="lyrics">
<article>
<input type="checkbox" id="read_more" role="button">
<label for="read_more" onclick=""><span>Lyrics</span><span>Hide Lyrics</span></label>
<section></section>
<section><?php $lyric = get_post_meta(get_the_ID(), '_lyrics', true); echo $lyric; ?>
</section>
</article>
</div>
</div>
</li>
</ol>
CSS
div.lyrics {
position: relative;
top: 10px;
}
article {
margin-bottom: 3rem;
position: relative;
*zoom: 1;
}
article:before, article:after {
content: "";
display: block;
}
article:after { clear: both }
article figure {
float: right;
width: 32.5%;
}
article section:first-of-type {
float: left;
width: 62.5%;
}
article section:last-of-type {
display: none;
visibility: hidden;
}
section {
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for="read_more"] {
position: absolute;
bottom: -3rem;
left: 0;
width: 100%;
text-align: center;
padding: .65rem;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}
[for="read_more"]:hover {
background: rgba(0,0,0,.5);
color: rgb(255,255,255);
}
[for="read_more"] span:last-of-type {
display: none;
visibility: hidden;
}
input[type=checkbox]:checked ~ section {
display: block;
visibility: visible;
width: 100%;
}
input[type=checkbox]:checked ~ figure { width: 100% }
input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {
display: none;
visibility: hidden;
}
input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {
display: block;
visibility: visible;
}
Thanks for any help!
The solution of the problem came from the text editor, where I use enter for each break (< br >) I wanted to have! So every text line was a paragraph (< p >).
I am using HTML Box Pro module from Prestashop addons store, contacted them several times to say that it does not work after adding hooks to the .tpl file etc. with no response and this is a project I need to finish before December, code below just incase I'm formatting wrong
any help greatly appreciated
<style><!--
body
{
/*background-color:#f0f0f0;*/
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR2BmZU1kR795PbCjY-- wGWcdHvgdq4oM43UgpHSGKF6rk-qrhMiEFqGFe-) no-repeat;
width: auto;
height: auto;
background-size: contain;
}
.container
{
margin:0 auto;
width:90%;
}
.perspective
{
background: url("http://www.gadgetsuk.com/behind1.jpg");
background-repeat: no-repeat;
background-position: center center;
position: relative;
display: inline;
float: left;
height: 395px;
width: 395px;
margin: 20px;
margin-left: 140px;
margin-top: 125px;
-webkit-perspective: 450;
border-radius: 3px;
box-sizing: border-box;
z-index: 1;
}
.thumb
{
background: url("http://www.gadgetsuk.com/a1.jpg");
background-repeat: no-repeat;
background-position: center center;
width: 400px;
height: 400px;
position: absolute;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 0 0 0 10px rgba(255, 255, 255, .0) inset;
transition: 1s transform linear;
transform-origin: left;
cursor: pointer;
}
.thumbOpened
{
transform: rotateY(-90deg);
transform-origin: 8px;
transition: .5s linear;
}
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #000;
transform-origin: left;
transform:rotateY(180deg);
opacity:0;
animation-name: go;
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-delay: 0.5s;
width:350px;
}
#keyframes go {
100%{
opacity:1;
transform:rotateY(0deg);
}
}
--></style>
<script type="text/javascript">// <![CDATA[
function openDoor(field) {
var y = $(field).find(".thumb");
var x = y.attr("class");
if (y.hasClass("thumbOpened")) {
y.removeClass("thumbOpened");
}
else {
$(".thumb").removeClass("thumbOpened");
y.addClass("thumbOpened");
}
}
// ]]></script>
You could try to open this module files modules/yourmodule/
1. Check main .PHP file. You should assign JS / CSS files to header to get in use this.
2. Write CSS to CSS file
3. Write JS to JS file
4. Now check your HOOK and return to this HOOK your .TPL FILE.
Now you can USE this CSS style and JS and do whatever you want.
You can`t add hook in module .tpl you must do it in .PHP file. But You can write {HOOK_YOURHOOK} to show a hook in that place.
One of my websites, www.makememodern.com, is displaying duplicate Back-To-Top buttons on all browsers when it should be showing one.
footer.php
<div id="back-to-top">Back to Top</div>
CSS
#back-to-top {
position: fixed;
z-index: 1000;
bottom: 20px;
right: 20px;
display: none;
}
#back-to-top a {
display: block;
width: 40px;
height: 40px;
background: #E45323 url(http://makememodern.com/wp-content/uploads/2014/05/backtotop.png) no-repeat center center;
text-indent: -9999px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-transition: 0.2s all linear;
-moz-transition: 0.2s all linear;
-o-transition: 0.2s all linear;
transition: 0.2s all linear
}
#back-to-top a:hover {
background-color: #222222;
}
HTML shows:
<div id="back-to-top" style="display: block;">Back to Top</div>
I achieve my desired results when I erase from the HTML directly above, but I can't figure out how to change it permanently.
Looks like you have a syntax error on line 790 in the view source.
<p>Copyright © 2014 Make Me Modern LLC, All rights reserved. <a href=</p>
Looks like there might be an extraneous link tag <a href=
If for whatever reason the <a href= is intentional, then it needs to be completed.
The main thing is, you're missing a closing tag on that line.
Your CSS is generating a different image for every a tag.
I suggest you to put the background image inside the #back-to-top style
#back-to-top {
position: fixed;
z-index: 1000;
bottom: 20px;
right: 20px;
display: none;
width: 40px;
height: 40px;
background: #E45323 url(http://makememodern.com/wp-content/uploads/2014/05/backtotop.png) no-repeat center center;
text-indent: -9999px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-transition: 0.2s all linear;
-moz-transition: 0.2s all linear;
-o-transition: 0.2s all linear;
transition: 0.2s all linear
}
#back-to-top a {
display: block;
}
#back-to-top:hover {
background-color: #222222;
}