How would YOU change the CSS to move this to another part of the page?
Here is the image I'm using: http://www.frysa.us/switch.gif
The function:
<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready( function(){
$(".cb-enable").click(function(){
var parent = $(this).parents('.switch');
$('.cb-disable',parent).removeClass('selected');
$(this).addClass('selected');
$('.checkbox',parent).attr('checked', true);
});
$(".cb-disable").click(function(){
var parent = $(this).parents('.switch');
$('.cb-enable',parent).removeClass('selected');
$(this).addClass('selected');
$('.checkbox',parent).attr('checked', false);
});
});
The repeating nature of the .gif seems to mess up the positioning for me.
I'd like it to appear over to the right a little more
<style type="text/css">
* { margin: 0; padding: 0: }
body { font-family: Arial, Sans-serif; }
.cb-enable, .cb-disable, .cb-enable span, .cb-disable span { background: url
(switch.gif) repeat-x; display: block;float: left;}
.cb-enable span, .cb-disable span { line-height: 30px; display: block; background-
repeat: no-repeat; font-weight: bold; }
.cb-enable span { background-position: left -90px; padding: 0 10px; }
.cb-disable span { background-position: right -180px;padding: 0 10px; }
.cb-disable.selected { background-position: 0 -30px; }
.cb-disable.selected span { background-position: right -210px; color: #fff; }
.cb-enable.selected { background-position: 0 -60px; }
.cb-enable.selected span { background-position: left -150px; color: #fff; }
.switch label { cursor: pointer; }
</style>
If you just want to move it to the right by 120 pixels, give your element (right now it's the paragraph tag) an ID and do this:
#switchingButton{
margin-left: 120px;
}
You can use padding-left: 120px; as well if your design would require padding rather than margin.
Related
I am adding a section/block to my website. The font overlay does not look good with all background pictures. Sometimes it is hard to read the text. A slight blur will fix my issue. However, with my current code and all the variations I have tried, it applies to blur way above the text size. If I apply blur to just the text areas it does not make a perfect "square" and leaves the empty areas the original background color. Sort of a highlighter effect.
How do I make it so that it blurs only the box of text as a whole? I have been trying to get something that looks like what this guy has done: https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
My CSS code is:
* {
box-sizing: border-box;
}
beody {
margin: 0;
font-weight: 500;
font-family: 'HelveticaNeue';
}
esction {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://s15.postimg.cc/999tzxuqz/test_banner.jpg");
background-repeat:no-repeat;
background-size:cover;}
section:nth-of-type(2n) {
background-color: #FE4B74;
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
}
.einto {
height: 50vh;
}
.econten {
display: table-cell;
vertical-align: middle;
background: rgb(34,34,34); /* for IE */
background: rgba(34,34,34,0.75);
}
eh1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
ep {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
ea {
font-weight: 700;
color: #373B44;
position: relative;
e&:hover{
opacity: 0.8;
}
Here is what is happening when I apply it as is:
https://postimg.cc/image/471owh7w7/
Your black <div> should have position: absolute, and you should in style use blur for it.
Inside that <div> will be another <div> with your text (content) and it should have position: relative and with a z-index that has a greater value than the black <div>.
Forgive me for not create a jsfiddle. I hope this will be reasonably simple for the experienced.
On this site, I hope to make the area designated by the green region in the image below, have the same background as the black Login navigation button (#menu-item-661) which is https://www.wascc.com.au/wp-content/themes/WASCC/images/sign-shap.jpg. (on the site the green region is yellow)
I've tried:
#menu-item-661::after {
content: "<img src="images/sign-shap.jpg" width="100%" />"
}
which didn't work, and:
#menu-item-661::after {
content: "<li id="black-tab"> </li>";
}
#black-tab {
background-image: "images/sign-shap.jpg";
width: auto;
}
which didn't work, and:
nav {
width: auto;
}
which didn't work.
Help appreciated.
add the yellow background to your li elements like this:
ul#menu-not-logged-in li {
font: 16px/51px oswaldregular;
color: #48391f;
background: url(/images/navi-shap.jpg) 0 0 no-repeat;
float: left;
text-transform: uppercase;
position: relative;
background: url(images/navigation-bg.jpg) repeat-x;
}
and add the black background to your whole nav like this:
nav {
height: 51px;
margin: 0;
background: url(images/sign-shap.jpg) repeat-x;
font: 16px/51px oswaldregular;
width: auto;
}
Then you have it just like in your screenshot
EDIT The arrows:
#menu-not-logged-in li .sub-menu li::before {
content: "\203A";
position: absolute;
color: white;
margin: -11px 0 0 10px;
}
I have a class for a button:
.client-header button {
/*Properties*/
}
and a class to detect when the menu is open:
.client-menu-open {
/*Properties*/
}
I would like to change the button background based on whether or not the menu is open. I want something like this:
.client-header button .client-menu-open {
/*Properties*/
}
But the classes are in two different files, so it doesn't work. Is there any way to do this across different files?
Here is the code for the header index.css:
#import url('../menu/index.css');
.client-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
overflow: hidden;
border-bottom: 1px solid #7E7E7E;
background: #cccccc;
}
.client-header button {
float: left;
height: 100%;
border: none;
border-right: 1px solid var(--border-color);
border-radius: 0;
box-shadow: none;
line-height: 39px;
background-color: #444444;
color: #FFF;
}
.client-header button:hover {
background-color: #555555;
}
.client-header button:active {
background-color: #4E4E4E;
}
.client-header-caption {
float: left;
}
.client-header-title,
.client-header-subtitle {
margin-left: 10px;
}
.client-header-title {
line-height: 25px;
}
.client-header-subtitle {
font-size: 0.5rem;
line-height: 15px;
}
#media (min-width: 640px) {
.client-header-title,
.client-header-subtitle {
display: inline-block;
line-height: var(--header-height);
}
.client-header-title {
font-size: 1.5rem;
}
.client-header-subtitle {
font-size: 1rem;
}
}
.client-header .client-menu-open button {
background: #CCCCCC;
}
And here is the code for the menu index.css:
.client-menu {
position: absolute;
top: var(--header-height);
bottom: 0;
left: -var(--menu-width);
width: var(--menu-width);
border-right: 1px solid var(--border-color);
padding-bottom: var(--menu-footer-height);
overflow: hidden;
transition: left 0.2s;
}
.client-menu-open {
left: 0;
box-shadow: 0 0 30px var(--shadow-color);
background: #444444;
}
.client-menu-pinned {
box-shadow: none;
}
.client-menu-header {
height: var(--menu-header-height);
text-align: right;
background-color: #444444;
}
.client-menu-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: var(--menu-footer-height);
text-align: right;
}
And the HTML structure is:
<header class="client-header">
<button class="client-header-menu-toggle"/>
</header>
<div class="client-menu"/>
You can use #import like so (in your primary CSS stylesheet):
#import url('external.css');
/* external.css above will be loaded */
Refer to this documentation: http://www.cssnewbie.com/css-import-rule/
Link to the other file and style .client-menu-open
if this is your html
<div class="client-menu-open"> <!-- this class is here only if the menu gets opened, else, this div has no class -->
stuff
stuff
<div class="client-header-button">
<button></button>
</div>
</div>
the correct syntax is the following
button {
background:red;
}
.client-menu-open button {
background:blue
}
The #import rule allows you to include external style sheets in your document. It is a way of creating a style sheet within your document, and then importing additional rules into the document.
To use the #import rule, type:
<style type="text/css">
#import url("import1.css");
#import url "import2.css";
</style>
For more info refer here https://developer.mozilla.org/en-US/docs/Web/CSS/#import
your CSS selector is incorrect, that's why it doesn't work. It has nothing to do with where CSS styles are defined.
.client-header button .client-menu-open will only select the following elements:
elements with class="client-menu-open"
which are children of button elements
which themselves are children of elements with class="client-header"
.
what you want, I think, is
button elements
which are children of elements having "class=client-header" AND "class=client-menu-open".
the proper selector for those elements would be .client-header.client-menu-open button.
I have been trying to center the slider that I have inside the header. The header and the whole container is neatly centered, with just margin: 0 auto; Then I tried to include a slideshow inside the header, and tried by many ways to place it correctly. Yes, I succeeded for my own configuration by using position:aboslute and then playing with coordinates, but that will not work for the rest of the world.
The site (under construction) is www.hrcprojectconsulting.com
Since you ll be able to see all the CSS stuff, do you know how in heaven that can be positioned? I tried all margin combinations but I am kind out of options that I could think of.
A good news is that Internet Explorer 10 is also available now for Windows 7 so, CSS3 stuff and html5 placeholders work so I ll never code for backwards things anymore.
Note: if you happen to see everything ok, this is because you have the same kind of monitor and resolution than I do.
thank you
The code for the slider:
<style type="text/css" media="screen">
#slider {
width: 960px; /* important to be same as image width */
height: 150px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 960px; /* important to be same as image width or wider */
position: absolute;
top: 125px;
left:265px;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
The code for my homepage:
<style type = "text/css">
::selection{ background-color: #E13300; color: white; }
::-moz-selection {background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
body{
background:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 960px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
height: 300px; /*Height of top section*/
}
This is because the ul has a default padding. You will have to set the padding for your ul#sliderContent to 0:
#sliderContent {
padding:0;
margin:0;
}
Then you should remove the position: absolute from your stylesheet.
To place the sliderContent at the bottom you could do like this:
#topsection {
position: relative;
}
#slider {
position: absolute;
bottom: 0;
}
#sliderContent {
padding: 0;
margin: 0;
}
I am retrieving a bulk images through response and I need to arrange them inside a div tag and all the images are placing one below the other but I need to arrange them vertical (i.e. side by side)
So how do I do that?
And I followed this tutorial but I can arrange only text?
http://phrogz.net/CSS/vertical-align/index.html
Can anyone suggest me the right way?
Here is my code:
$('#showfilelist').append("<div id=" + file.id + "><a href='uploads/" +
file.target_name + "' target='_blank' rel='gallery'><img src='thumbs/" +
file.target_name + "' border='0'/></a> </div>");
Here is what I'm getting the result
Plupload Css:
/*
Plupload
------------------------------------------------------------------- */
.plupload_button {cursor: pointer;}
.plupload_wrapper {
font: normal 11px Verdana,sans-serif;
width: 100%;
}
.plupload .plupload_container input {width: 98%;}
.plupload .plupload_filelist_footer {border-width: 1px 0 0 0}
.plupload .plupload_filelist_header {border-width: 0 0 1px 0}
div.plupload .plupload_file {border-width: 0 0 1px 0}
div.plupload div.plupload_header {border-width: 0 0 1px 0; position: relative;}
.plupload_file .ui-icon {
cursor:pointer;
}
.plupload_header_content {
background-image: url('../img/plupload.png');
background-repeat: no-repeat;
background-position: 8px center;
min-height: 56px;
padding-left: 60px;
position:relative;
}
.plupload_header_content_bw {background-image: url('../img/plupload-bw.png');}
.plupload_header_title {
font: normal 18px sans-serif;
padding: 6px 0 3px;
}
.plupload_header_text {font: normal 12px sans-serif;}
.plupload_filelist,
.plupload_filelist_content {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
.plupload_cell {padding: 8px 6px;}
.plupload_file {
border-left: none;
border-right: none;
}
.plupload .ui-sortable-helper,
.plupload .ui-sortable .plupload_file {
cursor:move;
}
.plupload_scroll {
max-height: 180px;
min-height: 168px;
_height: 168px;
overflow-y: auto;
}
.plupload_file_size, .plupload_file_status {text-align: right;}
.plupload_file_size, .plupload_file_status {width: 52px;}
.plupload_file_action {width: 16px;}
.plupload_file_name {
overflow: hidden;
padding-left: 10px;
}
.plupload_file_rename {
width:95%;
}
.plupload_progress {width: 60px;}
.plupload_progress_container {padding: 1px;}
/* Floats */
.plupload_right {float: right;}
.plupload_left {float: left;}
.plupload_clear,.plupload_clearer {clear: both;}
.plupload_clearer, .plupload_progress_bar {
display: block;
font-size: 0;
line-height: 0;
}
.plupload_clearer {height: 0;}
/* Misc */
.plupload_hidden {display: none;}
.plupload_droptext {
background: transparent;
text-align: center;
vertical-align: middle;
border: 0;
line-height: 165px;
}
.plupload_buttons, .plupload_upload_status {float: left}
.plupload_message {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.plupload_message p {
padding:0.7em;
margin:0;
}
.plupload_message strong {
font-weight: bold;
}
plupload_message i {
font-style: italic;
}
.plupload_message p span.ui-icon {
float: left;
margin-right: 0.3em;
}
.plupload_header_content .ui-state-error,
.plupload_header_content .ui-state-highlight {
border:none;
}
.plupload_message_close {
position:absolute;
top:5px;
right:5px;
cursor:pointer;
}
.plupload .ui-sortable-placeholder {
height:35px;
}
I believe what you want is float: left; on your images.
Functioning example: http://jsfiddle.net/NeMDZ/2/ (Try moving the middle divider. Flexible layout is optional.)
The basic CSS:
div.imgContain {
overflow:hidden; /* Only necessary if you need to style the containing box.
Forces box to expand to content's height. */
}
div.imgContain img {
float:left;
}
All the other CSS is optional. Style at will.
img {
display: inline-box;
}
The images will set in the same line as long they fit there. Be very careful with padding and margin values.
Images are block-level elements by default, so you will need float: left on your images (or whatever element your image is contained in) if you want them to be side-by-side. If you want to start a new line, create a spacer element like:
.spacer {
clear: both;
}
and then add <div class="spacer"></div> where you want to break a line of images and start a new one. You may need other attributes on your spacer to work in old browsers.