I'm creating a popover and I want to apply CSS to it but my CSS is getting ignored. What could be the reason?
The JS creates following markup for popover:
<div class="popover fade bottom in" style="top: 24px; left: 461.281px; display: block;">
<div class="arrow"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">Phone</div>
</div>
Default Style is:
element.style{
top: 24px;
left: 461.281px;
display: block;
}
My CSS:
<style>
.popover{
left: 580px;
}
</style>
Can I not overwrite the CSS?
You need to use !important because inline styles take the priority and you cannot override without !important.
.popover {
left: 580px!important;
}
Using important is not considered a good practice, rather give it a id and style it.
<div id="popover" class="popover fade bottom in" style="top: 24px; left: 461.281px;
display: block;">
<style>
#popover{
left: 580px;
}
</style>
Related
I have this structure...
<body>
<div class="page-wrapper">
<div class="page-content">
<div class="login-welcome">
<h3 class="welcome">
<form class="form-login">
I'm able to apply css to login-welcome and welcome but not to form-login.
In Chrome Debugger, I don't see the styles I've set. These are the relevant styles...
.login-welcome {
position: absolute;
top: 15%;
left: 40%;
display: block;
}
.welcome {
font-weight: 600px;
font-size: 30px;
color: #653487;
}
.form-login {
padding-top: 500px;
}
In debugger, I can adjust the same padding setting by adjusting element.style so I figured using form .form-login or .form-login would work but the classes I've tried has not applied any formatting to the class. Any reason why that would be the case?
When I copy your css to chrome, there is some weird character right after the closing } of .welcome
it seems like it's stopping chrome from interpreting the next css lines
When you remove this character the following css selectors (e.g. .form-login {) are evaluated again and will be applied to your form element - everything should work then
You can use the following:
div.login-welcome .welcome{
color:red;
}
<div class="page-wrapper">
<div class="page-content">
<div class="login-welcome">
Im not affected
<h3 class="welcome">Some heading text</h3>
<form class="form-login">
some form text
</form>
</div>
</div>
</div>
It works as follows: div.login-welcome .welcome is a CSS selector which applies styles for element which have a welcome class and a <div> parent elements which have the class login-welcome.
Hopefully this was helpful.
Your code works:
.login-welcome {
position: absolute;
top: 15%;
left: 40%;
display: block;
}
.welcome {
font-weight: 600px;
font-size: 30px;
color: #653487;
}
.form-login {
padding-top: 500px;
}
<div class="page-wrapper">
<div class="page-content">
<div class="login-welcome">
<h3 class="welcome">Welcome header</h3>
<form class="form-login">
<input type="text">
</form>
</div>
</div>
</div>
look at this fiddle: https://jsbin.com/segiqoyoci/edit?html,css,output
Here is the repository for my personal website: https://github.com/flakpanzer40/flakpanzer40.github.io
As you may notice, the particles I've used are simply showing below my name, image, and description. I've tried numerous times to overlap them so that the particles happen in the back, but to no avail. I've tried absolute positions, z-index, re-arranging the DIVs, etc. I'm terrible at CSS.
Can anyone help?
Please add following styles:
.container {
/*other css*/
position: relative;
z-index: 1;
}
.particles-js-canvas-el {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
Use the following Code:
HTML:
<div id="particles-js" style="">
<canvas class="particles-js-canvas-el" width="1903" height="952" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"></canvas>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/EvanRen.jpg" alt="Evan Ren" style="width:500px;height:600px;border:5px solid white;border-radius: 50%;">
<div class="intro-text">
<span class="name">University of Waterloo Computer Science</span>
<hr class="star-light">
<span class="skills">Problem_solving expert - Hardworking - Passionate</span>
</div>
</div>
</div>
</div>
</div>
CSS:
#particles-js {
width: 100%;
height: 100%;
background-color: #13717c;
position: relative;
top: 0;
}
It is important that the parent (#particles-js) has position: relative so that you can use absolute positioning for the children.
This has got to be simple but I can't see my mistake.
I have a div with an image inside it. The div has the style display:none. The div disappears, but the image stays put. Here's the plunk:
http://plnkr.co/edit/R3i7GZKOiiSvEj3vEuIE?p=preview
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#loading {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: white;
opacity:0.2;
filter:alpha(opacity=20); /* For IE8 and earlier */
overflow: hidden;
}
.centered {
position:absolute;
top: 50%;
left: 50%;
}
.hide {
display:none;
}
</style>
</head>
<body>
<div id="loading hide">
<img class="centered" src="http://www.woldsvets.co.uk/runnerapeman.gif" width="60px" border="0"/>
</div>
</body>
</html>
Why doesn't the image also get hidden when inside an hidden element?
Thanks!
You have the wrong HTML. It should be:
<div id="loading" class="hide">
In your CSS, you have rules for #loading and .hide. Your HTML, <div id="loading hide">, has an ID that's invalid because of the space. You probably meant to have the HTML I suggest above. plinkr example
Your .hide class should be either a class in the markup, or an ID in your css.
You have two ids. Either use classes or a single id
I got this CSS layout: http://www.cssdesk.com/Lgg4q
HTML
<div id="wrap">
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
</div>
CSS
body {
background-color: grey;
font: 18px/ Times;
color: black;
}
body, html {
height: 100%;
width: 100%;
}
p { text-align: justify; }
#wrap {
width: 80%;
margin-left: 10%;
padding-top: 2%;
position: absolute;
font-size: 14px;
background: yellow;
}
.info {
margin-right: 5%;
padding-top: 2%;
float: left;
}
.img-wrap {
position: relative;
display: inline-block;
max-width: 100%;
float: left;
margin-right: 1%;
margin-top: 1%;
}
When you resize the browser window (smaller), you can see that the behavior of the divs basically breaks the design. How to handle this problem?
My thought was to give the #wrap a height, but that won't work like it should.
Here's how I'd do it. http://jsfiddle.net/joplomacedo/TYjd5/ (I couldn't figure out how to save the changes in cssdesk so I transfered it into jsfiddle)
Basically, I added a 'wrapper', which I called block around each of the image and info blocks. I gave them a width and floated them. This way, when the browser is resized, the info and the image always go together.
Was this the behavior you were looking for. What would you want to happen on the browser resizing?
You can use min-width on #wrap and set a pixel value to prevent it from breaking.
DIV elements don't behave well when used with percentages or I can say they are not meant to be used so. You have two options in this kind of situation:
Make the design of your page in such a way that it looks like it's not responding to the browser's window resize. Take as an example this very website.
Resize your containers accordingly when the browser's window is resized. To do this you will need to use Media Css classes or maybe jQuery.
I'm using the jQuery Cycle plugin to rotate images in a slideshow type fashion. That works fine. The problem I'm having is getting these images (of different sizes) to center in the containing div. The images are inside a slidshow div that has it's position set to absolute by the Cycle plugin.
I've tried setting line-height/vertical-align and whatnot but no dice. Here is the relevant HTML and CSS
HTML:
<div id="projects">
<div class="gallery">
<span class="span1">◄</span><span class="span2">►</span>
<div class="slideshow">
<img src="images/img1.png" />
<img src="images/img1.png" />
<img src="images/img1.png" />
</div>
</div>
</div>
CSS:
#main #home-column-2 #projects
{
width: 330px;
background: #fefff5;
height: 405px;
padding: 12px;
}
#main #home-column-2 #projects .gallery
{
width: 328px;
height: 363px;
position: relative;
background: url('images/bg-home-gallery.jpg');
}
#main #home-column-2 #projects .gallery img
{
position: relative;
z-index: 10;
}
And in case you want to see it, the jQuery:
$('#home-column-2 #projects .gallery .slideshow').cycle(
{
fx: 'scrollHorz',
timeout: 0,
next: "#home-column-2 #projects .gallery span.span2",
prev: "#home-column-2 #projects .gallery span.span1"
});
Any ideas on getting these images to center?
Try this:
http://www.brunildo.org/test/img_center.html
Vertical centering is a pain! Here's what the W3C page says about the vertical center:
CSS level 2 doesn't have a property
for centering things vertically. There
will probably be one in CSS level 3.
But even in CSS2 you can center blocks
vertically, by combining a few
properties. The trick is to specify
that the outer block is to be
formatted as a table cell, because the
contents of a table cell can be
centered vertically.
This method involves a little jquery, but works fantastic in most situations...
let me explain:
if all the images of the slideshow are contained within their own element div pos:absolute and those images are pos:relative, then on a $(window).load() you can run a .each() and find each img in the slideshow and adjust it's top positioning to be offset a certain number of pixels from the top..
jcycle automatically sets each parent div containing the image to pos:absolute on every onafter() so it's useless to apply this pos adjustment to them... instead target each img you have set to pos:relative...
Here is the example:
$(window).load(function() {
// move all slides to the middle of the slideshow stage
var slideshowHeight = 600; //this can dynamic or hard-coded
$('.slideImg').each(function(index) {
var thisHeight = $(this).innerHeight();
var vertAdj = ((slideshowHeight - thisHeight) / 2);
$(this).css('top', vertAdj);
});
});
and this is the html it's working on...
<div class="slideshow" style="position: relative; ">
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery -->
</div>
</div>
just make sure
.slideImg {
position:relative;
}
I think that's everything... I have an example, but it's on a dev site.. so this link might not last.. but you can take a look at it here:
http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html
The positions are relative according to the style sheet, so did you try setting them to display: block and margin-top: auto; margin-bottom: auto; ?
Another option is to align them manually in javascript based on the containing div's height.
You need to nest two divs inside each cycle item. The first must have the display: inline-table; and the second must have display: table-cell; both these divs have vertical-align: middle.
So the structure would look something like this:
<div class="slide-container">
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
</div>
With the following css:
.slide-container {
height: 300px;
}
.outer-container {
height: 300px;
display: inline-table;
vertical-align: middle;
}
.inner-container{
vertical-align: middle;
display: table-cell;
}
You can see it working here http://jsfiddle.net/alsweeet/H9ZSf/6/