I'm having a problem with overriding some plugin CSS. Editing that CSS directly is not really an option, as it would make updating the plugin more risky.
The problem: an element has absolute positioning, and has top:0px in the original. I want to override it by bottom:0px.
For the sake of example
.element {position:absolute; top:0;}
/* in another file */
.my .element {bottom:0;}
On firefox this works ok (bottom:0 is the applied style), but safari/chrome don't seem to be get over the top:0.
I can work around this problem, but it would be nice to come up with a clean solution.
Use top: auto to "reset" top to its initial value.
bottom is a totally separate property to top (an element can have both a top and bottom), so perhaps you won't need bottom anymore.
Also, make sure your override selector is specific enough, but it doesn't sound like that's the problem in this case.
.my .element { position: inherit !important; top: auto; }
Related
I want the growl message to be fixed to the bottom right and i've been trying to do so by overriding the css classes of p-growl. My first attempt was to override the .ui-growl class like so:
::ng-deep .ui-growl {
position: fixed;
bottom: 0;
right: 0;
border: 3px solid #73AD21;
}
(The border is just for testing.)
This has the effect that the growcontainer itself will elongate itself from the top all the way to the bottom where it sticks to the bottom right. The actual message growl inside the message growl container still appears at the top of the container. My second attempt was to apply the css rules to the css class of the message element itself .ui-growl-item .
This does make the actual growl stick to the bottom right but it also has the unfortunate effect of seemingly erasing all the other css style rules within the default .ui-growl-item, turning the growl from green/red to practically invisible.
I indicated the growl after the css class override with the pink arrow. All you can see are some white letters and part of the error cross symbol. The green block is not part of the growl but part of the background.
Does anyone have an idea on how i could implement the desired css rules on the growl while maintaining the other css rules that i don't want to change? I think i've found the default file here https://searchcode.com/codesearch/view/2686100/ but i wouldn't know what default css rules i should include in order to prevent it from losing its color. What complicates things is that the color is conditional, it turns red when its an error, green for success etc.
EDIT:
I've tried using top and left instead to achieve the same thing but it isn't a viable option because when the message content is large part of it may disappear out of the viewport. On the other hand will small messages not stick to the bottom.
Simple, Just change the top attribute of the .ui-growl class.
By default, the class looks like.
.ui-growl {
top: 100px;
}
Change it to. Or add a new style.
.ui-growl {
top: 80vh !important;
}
Adjust the top, to suit your position. The vh here is ViewPort Height, considered in percentages of the total viewport.
UPDATE: Use this style Override
.ui-growl {
top: auto;
bottom: 0px;
}
Hope this helps. :)
I'm new to this stuff and trying to design a mock car sales website for a project, but I need some help, bearing in mind a beginner, I have designed a basic layout with divs, and I want to put a badge in the top right of the banner, but the logo went in fine using the following and CSS:
img.logo
{
position: relative;
top:15px;
left: 24px;
}
But when I try to put in a "badge" in the right hand side it moves the logo?
Anyknow know how to keep them both on the same line, also in general whats the best way to postion elements within a webpage? CSS or seperate divs?
when using different div's you should use float:right; and clear:both; in the next element.
but try to set it as a background-image:
background-image:url('./url/to/file.png');
background-repeat:no-repeat;
background-position:right;
to answer your general question: both!
use div's and position them with css.
Hard to say without the knowing the html but I would look at display:inline-block and float:right
CSS is cascading style sheets, and it is a styling language. A div is a tag belonging to the markup language HTML.
I would encourage you to follow tutorials on both css and html. There are a gazillion online. Also, make sure you learn how to inspect web pages and view source, so you can learn from what others have done. Best of luck in your endeavors!
Try to use
img.logo
{
position: absolute;
margin-top: 100px;
margin-left: 100px;
}
just change the value of margin-top and margin-left until you place it on your desired position. you can also use negative ex. -100px;
The back story....
I'm creating a modal directive for AngularJS that should take any** content and display it centered in the page with a grey transparent background. Sounds like it should be simple. It was working fine until testing w/ IE9 which is the only browser we need to support. Its an in-house site. I have a fiddler working with it centered both vertically and horizontally, that probably could be cleaned up a little. I'm assuming that its going to work, I'm on a mac right now.
The modal's html needs to be in the footer which is fixed to the bottom of the page. So
So I have two questions.
1st- When I was setting up the grey transparent background found that I needed so set the position as relative. Why is this needed? fiddler
.dialogbox-wrapper{
z-index:1000;
display: table-cell;
vertical-align: middle;
/* When this isnt included this has the opacity */
position:relative;
}
2nd- We are using less and CSS3. Is there a cleaner way?
Here's what I need -
Before anyone suggests !doctype HTML, its there.
As to #1
For z-index to be honored, an element must have position of some kind. If position: relative is simply removed, then the default static position does not recognize the z-index: 1000 and so the gray box's z-index: 50 puts your "background" to the foreground.
As to #2
"Cleaner" can be so relative. Here is a modified version of your fiddle that centers it without the need for the min-width (which you expressed in your notations wanting to eliminate), by using display: inline-block with the container set to text-align: center (which is reset on the element itself). It also sets the <a> element for the "close" to display: block so that your width: 200px actually does something (an anchor is an inline element normally, which does not honor width). Of course, now 200px for the .row is driving the width of the modal display.
It all works in IE9 for me.
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/
On a customer website, I have to add a background image for only a contained region of the page (its real content part).
The problem is, if the content is short enough, then the image will be clipped. How would be possible to have the image completely visible? I have tried to add the "overflow" CSS attribute but unfortunately it did not help me.
Here is an example of the website I have to work on: http://www.sfp-pensioen.nl/werknemer/welkom The background image is on the div element with id="content".
On the specific link that I am sending it is not an issue because the content is long enough, but if you remove elements using firebug then the problem will become obvious.
ps: IE6 must be supported.
Following on from Graham's answer:
"height" in ie6 acts like "min-height" across other browsers.
min-height: 50px;
_height: 50px;
The example above will provide a cross browser minimum height of 50px. ie6 will read "_height" where other browsers will not. If you don't hacks, use a conditional statement.
Rich
you could either give a height to the id #content
or
apply the background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; to #mainContent instead of #content
overflow for background-images is impossible, but you could set a min-height for content (or set the image in another div with lower z-index and position it abolutely to appear at the place you want - but thats a very bad solution)
The overflow attribute controls what happens to the div when the content is too big to fit - if you have a fixed-size div with some content that might overflow, you generally want the auto option. overflow has no effect on a background image.
For your case, it sounds like you want to specify a min-height on the content div. Note that this isn't supported by older browsers like IE6, which you may or may not care about. There are plenty of ways to work around this, though.
What you want is the 100% height you can achieve this with the following.
html {
height: 100%;
}
body {
height: 100%;
}
#content {
height: 100%;
}
You need the min-height and the body needs a height so every child element of the body will follow the rule.
Also by adding min-height: 100%; to all css rules will solve all your problems for any grade A browser.
If you know the #sidebar or #main will always have a visual height the same or larger than the background image then you can simply add the background image to:
.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}
instead of where it is an the moment on #content