I've problem with my "JS-block validator". It should cover all the page and show this message, but in my project there shows also other files behind it. Can there be problem vith multiple !important?
`
body:not(div#wojs){
display:none !important;
}
#wojs{
width:100%;
height:100%;
display:block !important;
background-color: black;
position:absolute;
top:0;
left:0;
}
#wojs p {
font-size: 2.5em;
color: red;
margin: 10% auto;
}
<div id="wojs">
<p>JavaScript is disabled. Please, Allow it and refresh.</p>
</div>
`
Related
is there a better way to create this style of "underline" through CSS, other than creating a background image for it?
To be clear, I'm only interested in the "duplicated line" effect, a thicker and shorter line sitting directly atop a thinner and longer line of a different color. Thanks!
You can use pseudo elements here, i.e. :before and :after. Here, what am doing is, using an h1 element which am displaying it as inline-block. Later, we need to use CSS positioning to set both the bottom borders in place, as the borders are smaller than your element.
Later, again by using CSS positioning, we position the small border on top of the bigger one. Note that am using left: 50%; and transform: translateX(-50%) to position the border in horizontally center.
Make sure you don't miss out the z-index as it is important to use here, else the other border will render on top of the smaller one.
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
h1 {
position: relative;
display: inline-block;
font-family: Varela Round;
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
color: #401f1c;
margin: 40px; /* not required, only for demo purpose */
}
h1 span {
color: #efcc4c;
}
h1:before,
h1:after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
}
h1:before {
bottom: -11px;
width: 40px;
border-bottom: 3px solid #efcc4c;
z-index: 1;
}
h1:after {
width: 80%;
border-bottom: 1px solid #ddd;
bottom: -10px;
}
<h1>Our <span>Services</span></h1>
Edit: Refactored my code and making the demo more precisee.
Try this
HTML
<div class="text">
<span>our</span>
Services
</div>
CSS
.text{
font-weight:600;
font-size:25px;
color:red;
position: relative;
display:inline-block;
}
.text::after,
.text::before{
content:"";
position: absolute;
left: 0;
right: 0;
bottom: -5px;
margin:auto;
border-radius:5px;
height:0px;
}
.text::before{
width:100%;
border:1px solid #ccc;
}
.text::after{
width:50%;
border:2px solid red;
bottom:-6px;
}
.text span{
color:#000000;
}
Link for reference
hope this helps..
I always create "divider", like:
<div class='divider'>
<div class='divi-1'></div>
<div class='divi-2'></div>
<div class='divi-3'></div>
</div>
CSS:
.divider{
padding-top:15px; //or other
text-align:center;
display:block; // or column in bootstrap like col-md-12
}
.divider .divi-1{
display:inline-block;
height:2px; //or other
width:50px; // or other
background:#e5e5e5;
.
.divider .divi-2{
display:inline-block;
height:2px;
width:50px;
background:#000000;
}
.divider .divi-1{
display:inline-block;
height:2px; //or other
width:50px; // or other
background:#e5e5e5;
}
And that's it. You can also use vertical-align for inline-block so You have some more options to move lines verticaly ... and also it's in the flow so You know what size it have and can be sure that other elements won't overlap it.
Please refer this fiddle , http://jsfiddle.net/shrikanth/79AfQ/
After hovering header(h2), div element(popup) is displayed , which is as per design.
However I can't navigate to new div.(new div gets disappear soon after moving out h2 element)
Is there any fix for this , so that user can click on headrer then can click on contact of another div element?
HTML
<h2>What is CSS?</h2>
<div id="popup">
Contact
</div>
CSS
h2 {
position:relative;
top:22px;
left:44px;
width: 170px;
height:33px;
text-align:center;
}
#popup {
width: 240px;
background: #727272;
padding: 10px;
border-radius: 6px;
color: #FFF;
position: relative;
top:15px;
left:44px;
font-size: 12px;
line-height: 20px;
display:none;
}
h2:hover+ #popup {
display:inline-block;
}
h2:hover {
background-color:green;
}
#popup:before {
content:"";
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent #727272 transparent;
position: absolute;
top: -15px;
left: 92px;
}
Just change the hover pseudo-selector rule to include the #popup element, too (assuming your goal is just to be able to click the contact link in the #popup)
h2:hover+ #popup, #popup:hover{
display:inline-block;
}
If you want to use this approach, I suggest adding padding to the h2 element to allow your mouse to leave it without immediately deactivating the hover state, or wrapping it with a larger, invisible element.
Another way would be to add the #popup inside the h2 and absolutely position it.
This way, when you're hovering over the popup, you'll be hovering over the h2 as well.
One thing to note here is not to leave any spaces between h2 and the popup, like ReeceJHayward suggested.
<h2>What is CSS?
<div id="popup">
Contact
</div>
</h2>
DEMO:
http://jsfiddle.net/79AfQ/7/
I have some text on a page, when someone mouses over it, it will highlight (using outline) several selected images on the same page. I want this to be one way, so mousing over the text highlights the images, but I want mousing over the images to have no effect, right now it also highlights everything. Is this possible? Note: each image has an id and a class (jquery draggable) already attached to it.
HTML:
<div class="container">
<div class="containerLeft">alignments</div>
<div><img src="http://www.cool-smileys.com/images/out11.jpg" id="position7" class="ui-widget-content" /></div>
<div><img src="http://www.cool-smileys.com/images/out12.jpg" id="position8" class="ui-widget-content" /></div>
<div><img src="http://www.cool-smileys.com/images/out13.jpg" id="position9" class="ui-widget-content" /></div>
<div> <img src="http://www.cool-smileys.com/images/out14.jpg" id="position12" class="ui-widget-content" /> </div>
</div>
CSS:
/* Normal Styles */
.containerLeft {
color:#333;
width:100px;
}
.containerLeft:hover {
width:100px;
}
/* Hover Styles */
.container:hover .containerLeft {
background-color: none;
}
.container:hover #position12 {
outline:2px solid #CFF;
}
.container:hover #position7 {
outline:2px solid #CFF;
}
.container:hover #position8 {
outline:2px solid #CFF;
}
.container:hover #position9 {
outline:2px solid #CFF;
}
#position7{
position:absolute;
margin: 0;
padding: 0;
border:none;
left: 13em;
top:9em;
z-index:17;
}
#position8{
position:absolute;
margin: 0;
padding: 0;
border:none;
left: 4em;
top:15em;
z-index:2;
}
#position9{
position:absolute;
margin: 0;
padding: 0;
border:none;
left: 7em;
top:5em;
z-index:20;
}
#position12{
position:absolute;
margin: 0;
padding: 0;
border:none;
left: 24em;
top:10em;
z-index:-14;
}
Right now everything is in css, but maybe there is a javascript solution?
The jsfiddle: http://jsfiddle.net/tMzMN/8/
If you want to use JS/Jquery you could achieve what you want this way:
$(".containerLeft").hover(function() {
$(".ui-widget-content").addClass("hover_class");
}, function() {
$(".ui-widget-content").removeClass("hover_class")
});
Then just replace all 4 of your CSS selectors that look like this:
.container:hover #position9 {
outline:2px solid #CFF;
}
...
with this:
.hover_class {
outline:2px solid #CFF;
}
Here is a fiddle of it in action: http://jsfiddle.net/tMzMN/9/
Also, and don't quote me on this, using the Jquery method above will probably have a greater level of backwards compatibility with older browsers as opposed to any CSS tricks you find. I could be wrong and there may very well be something that plays nice with IE<9 but I'm not sure...
I have a previous and a next button for a php pagination script, which both fall under the class paginate.
.paginate {
font-family:Arial, Helvetica, sans-serif;
padding: 3px;
width:400px;
}
.paginate a {
padding:2px 5px 2px 5px;
margin:2px;
text-decoration:none;
color: #fff;
width: 180px;
}
so i have given them both their own individual classes Next and previous
Next
.next {
background: url("../images/more.fw.png") no-repeat;
height: 87px;
width:128px;
padding:10px;
margin:50px;
font-family:Arial;
font-size:24px;
color:#fff;
position:fixed;
top:585px;
right:470px;
}
Previous
.previous {
background: url("../images/previous.fw.png") no-repeat;
height: 87px;
width:128px;
padding:10px;
margin:50px;
font-family:Arial;
font-size:24px;
color:#fff;
position:fixed;
top:585px;
right:620px;
}
As you can see in the link below these buttons fit perfectly side by side when set against the top of the page, however what i am trying to do is get the buttons to sit say 20 px below the section above. However if i change ti from top 558px, what happens is the buttons sit at different heights and will not sit next to one another.
Any ideas would be appreciated.
Thanks
you can set the button by position:absolute; on both the .next and .previous so that the potion of button wont change
You have the style set to position: fixed, so they wont move when the screen scrolls - is this what you want?
.paginate {
position: relative;
...
.next {
position: absolute;
display: block;
...
Now set your button top and right all relative to the paginate container
In the most recent dompdf release (domdpf beta 2), inline php was disabled for security reasons. This, in turn, caused the previous footer/header code:
<script type="text/php">
if ( isset($pdf) ) {
$font = Font_Metrics::get_font("helvetica", "bold");
$pdf->page_text(72, 18, "Header: {PAGE_NUM} of {PAGE_COUNT}", $font, 6, array(0,0,0));
}
</script>
To no longer work.
I'm now trying to re-create what this script did using CSS. So far, I've figured out how to get CSS to count the pages:
.pagenum:before { content: counter(page); }
The issue I'm having is sticking the footer to the bottom of the page. Most CSS tutorials on how to do this do not seem to be working. Here's the css for my page:
html,body {
font-family:interstate;
height:100%;
width:100%;
overflow:auto;
margin-left: 40px;
margin-right: 40px;
margin-top: 20px;
margin-bottom:40px;
min-height: 100%;
}
P.breakhere {page-break-before: always}
table
{
border-collapse: collapse;
page-break-inside: avoid;
font-size:15px;
}
td
{
border: 1px solid #000
}
.noBorder {
border: 0
}
#header {background:#ffffff url('gradient.png') no-repeat center center;
height: 100px;
}
#text {
position:relative;
text-align:center;
padding:10px;
}
.pagenum:before { content: counter(page); }
My hope is someone can provide me the appropriate #footer bit, so my footer text will properly stick to the bottom of the page.
Thank you!!
Inline script is disabled by default, but if you feel you are not vulnerable to any security problems you can safely re-enable it by setting DOMPDF_ENABLE_PHP to true.
To create a header/footer using HTML+CSS you would use a fixed-position element.
CSS
#footer {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 100px;
text-align: center;
background-color: lightgray;
border-top: 2px solid gray;
}
.pagenum:before {
content: counter(page);
}
HTML
<div id="footer">
<p>page <span class="pagenum"></span></p>
</div>
The main drawback to the HTML+CSS method is that there is currently no way to get the total number of pages using this method.