i am trying to remove the inline css and include it into a separate stylesheet. Since it is clear to use "#" and "." for id and class, how can i externally style the "u" as in sample below. Thx in advance for any help.
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px;width: 100%; height:100%;">
</div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
Try
div[u=loading] { position: absolute; top: 0px; left: 0px; }
This is called the attribute selector (you can also do *[u=...] if you want). This won't work on earlier internet explorers (<7) or other old browsers, but will work on all modern browsers as far as I know.
Related
I'm used my university project for Ionic -3 I'm try to create sample image as
Avatar to set of the small icon, but its cant do that correctly , any one know how to make correctly like this
My code sample
my code
<ion-item>
<ion-avatar item-start>
<img src="assets/imgs/user.png">
<div>
<button id="notification-button" ion-button clear>
<ion-icon name="notifications">
</ion-icon>
</button>
</div>
</ion-avatar>
<h2>Woody</h2>
<p>This town ain't big enough for the two of us!</p>
<ion-note item-end>3:43 pm</ion-note>
</ion-item>
css
#notification-button {
position: relative;
width: 42px;
top:1px;
right: 1px;
overflow: visible!important;
}
#notifications-badge {
background-color: red;
position: absolute;
top: -3px;
right: -3px;
border-radius: 100%;
}
Underneath the answer, Before I saw your code...
I don't have ion stuff, but I can help you with the css, is this kinda what you need?
position: relative; on the .ion-item and to get the small button on its right place, just put this position: absolute; right: -5px; bottom: -5px; in the button
.ion-item{
position: relative;
height: 100px;
width: 100px;
}
.ion-avatar{
border-radius: 50%;
background-color: tomato;
box-shadow: 0 0 4px 3px #ccc;
height: 100%;
width: 100%;
}
button{
position: absolute;
right: -5px;
bottom: -5px;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: blue;
border: gray 1px solid;
cursor: pointer;
color: white;
}
<div class="ion-item">
<div class="ion-avatar">
<div>
<button id="notification-button">
<div class="ion-icon">
!!!
</div>
</button>
</div>
</div>
<h2>Woody</h2>
<p>This town ain't big enough for the two of us!</p>
<p>3:43 pm<p>
</div>
update
When I played with chrome web tools a bit, I found this to get the button to the point you wanted it.
#notification-button[_ngcontent-c0] {
position: absolute;
width: 42px;
top: 25px;
left: 30px;
overflow: visible !important;
}
changed your position: relative; to position: absolute; and changed the top and right, I'm not sure if your working responsive. But take a look if this helps. Otherwise, I know another good solution.
I'm following an blog post on displaying a "Loading" image when an Ajax call is being performed. The example has all of the styles inline and it works but I'm trying to convert it to having the CSS properties in an style sheet. Everything is converting just fine except for the filter property.
Here is the original code. The filter is in the main div and it is supposed to set the back ground of page to be transparent by 50% to draw attention to the Processing message.
<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
opacity: .8; filter: alpha(opacity=50); display:none">
<p class="submit-progress" style="position: absolute; top: 30%; left: 45%; color: White;">
Processing, please wait...<img src="~/images/ajax-loading.gif">
</p>
</div>
This is the CSS I'm trying to convert it to.
.ajax-loading-wrapper {
position: fixed;
margin: 0px;
padding: 0px;
right: 0px;
top: 0px;
width: 100%;
height: 100px;
background-color: #666;
z-index: 30001;
opacity: .8;
filter: alpha(opacity=50) !important;
}
.ajax-loading-div {
position: fixed;
top: 50%;
left: 50%;
height: 7em;
padding-top: 2.3em;
width: 20em;
margin-left: -10em;
padding-left: 2.1em;
background-color: black;
color: white;
border-radius: 5px;
}
.ajax-loading-text {
position: absolute;
top: 15%;
left: 20%;
color: white;
}
.ajax-loading-icon {
position: absolute;
top: 45%;
left: 39%;
color: white;
}
<div id="divLoading" class="ajax-loading-wrapper" style="filter: alpha(opacity=50) !important;">
<div class="ajax-loading-div">
<span class="ajax-loading-text">
Processing, please wait...
</span>
<span class="ajax-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></span>
</div>
</div>
When I inspect the page I see that the filter property is crossed out. I tried adding the !Important but that didn't work. I also tried adding just the filter to the divLoading style and that doesn't work either. What I see with these setting is a small section (~25%) at the top of the page that has this background color but I'm needing it on the whole page.
That's not quite how filter works (since IE8). It requires a list of filtering functions, each given a value. A working version of your example would be:
filter: opacity(0.5); // Opacity is 0 to 1, like the CSS property
Further Reading: MDN Docs
I have a webpage that works well with all browsers except Safari. When I first load my page in Safari, the frot page displays all the styling corresponding to that page. However, when I click on a link to go to another page the styling for the colors and images is not recognized. I wonder if somebody knows what can be causing this. Thanks in advance.
This class named "TableLeftNav" seems to disappear:
<div class="ui-layout-west container border TableLeftNav ui-layout-pane-west" style="position: absolute; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; right: auto; z-index: 0; left: 0px; width: 248px; top: 180px; bottom: 0px; height: 71px; display: block; visibility: visible;">
and the CSS for that class is:
.TableLeftNav { background-color: #003c79; width: 275px; border: #003c79; }
I am trying to place a div with text on top of an image but for some reason it doesn't work. My code is:
<div id="pics">
<div class="inner">
<img src=".." class="pic" height="310" width="310">
<div class="cover">blah blah</div>
</div>
</div>
my CSS is:
#pics{
overflow:hidden;
display:block;
}
.inner a{
position:relative;
margin:3px;
padding:10px;
top:10px;
}
.inner{
position: relative;
display: inline-block;
}
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0px;
}
I have tried many things but it doesn't seem to work. I might have messed up my cs somewhere
That's because you're targetting an ID and not a class.
In other words, in the CSS you have the definition for an ID (#cover) and the HTML code has a class:
<div class="cover">blah blah</div>
Either change the HTML to have an ID:
<div id="cover">blah blah</div>
or change the CSS to target the class name:
.cover{
position: absolute;
background-color: black;
color: white;
width: 100%;
height: 100%;
border-style: solid 5px;
top: 0px;
}
UPDATE:
You are giving the .cover a width and height of 100%, but absolute positioned elements don't really "understand" that, so I suggest changing it to:
(place the left, bottom and right to the edges, this will fit the div as 100% width and height of the relative parent)
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
border-style: solid 5px;
top: 0px;
}
How about setting the picture as background via the background-image: attribute.
You then could make your div clickable with <div onclick="window.location="url";>
In detail your css would look like this:
.image {
width:310px;
height:310px;
background-image:url('pathtoimage');
}
I was recently assigned the job of copying a JS popup our previous web developer made. I've got it very similar yet there's one thing I can't get, for the close button (X) to float over the popup in the top right corner (rather than being sat on top right corner of the popup). I've tried with position: values in the CSS and other attributes I've found around Stack overflow, yet none seem to do the trick.
The CSS:
#popup {
position:absolute;
display:hidden;
top:50%;
left:50%;
width:400px;
height:586px;
margin-top:-263px;
margin-left:-200px;
background-color:#fff;
z-index:2;
padding:5px;
}
#overlay-back {
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.7;
filter : alpha(opacity=60);
z-index : 1;
display: none;
}
.close-image {
display: block;
float:right;
cursor: pointer;
z-index:3
}
The HTML:
<div id="overlay-back"></div>
<div id="popup">
<img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" width="400" height="566" /></span>
</div>
Just add position, right and top to your class .close-image
.close-image {
cursor: pointer;
display: block;
float: right;
z-index: 3;
position: absolute; /*newly added*/
right: 5px; /*newly added*/
top: 5px;/*newly added*/
}
Use this css
.close-image {
cursor: pointer;
z-index: 3;
right: 5px;
top: 5px;
position: absolute;
}
.close-image {
cursor: pointer;
display: block;
float: right;
position: relative;
top: 22px;
z-index: 1;
}
I think this might be what you are looking for.
I know this post is little bit old but here is a potential solution for anyone who has the same problem:
First, I would change the CSS display for #popup to "none" instead of "hidden".
Second, I would change the HTML as follow:
<div id="overlay-back"></div>
<div id="popup">
<div style="position: relative;">
<img class="close-image" src="images/closebtn.png" />
<span><img src="images/load_sign.png" width="400" height="566" /></span>
</div>
</div>
And for Style as follow:
.close-image
{
display: block;
float: right;
cursor: pointer;
z-index: 3;
position: absolute;
right: 0;
top: 0;
}
I got this idea from this website (kessitek.com). A very good example on how to position elements,:
How to position a div on top of another div
I hope this helps,
Zag,
What about:
.close-image{
display:block;
cursor:pointer;
z-index:3;
position:absolute;
top:0;
right:0;
}
Is that the desired result?