i have an element with the following css attributes:
.myElem {
position:absolute;
width: 100%;
top: 25px;
height:6px;
padding: 1px 0px;
}
please see this screen shot i uploaded
when looking at the layout tab of the firebug inspection....i noticed the '-13' at the bottom...where is it from? what does it mean? i did not specify it...why is it showing there? what does it tell me about 'bottom'? or it means something else?
It's show position from bottom in minus if the position from top overlap or more than his parent.
Check this example http://jsfiddle.net/wqrh6/
in this when .myElem position top overlap his parent then the firebug show position from bottom
Related
I'd like to have my website including v-app-bar and everything limited to max-width 1440px on larger screen, and add a thin bolder to both left and right edges. For the rest of the area outside of the edge, I'd like to add a nice background color or image.
What's the better way to accomplish this idea? I am using Vuetify v2.1.5. Thanks.
You can do this with plain 'ol CSS
#page {
background: url(niceimage.jpg);
width: 100vw;
min-height: 100vh;
}
#app {
max-width:1440px;
margin: 0 auto;
}
where #app is your application div, and #page is an element that wraps it;
The Pinterest Widget Builder allows for flexibility in creating a widget to place on your site. I added one on this page, but there appears to be a limit to the width you can set for the widget. For example I set the width to 1170, but it is only displaying at 1111px.
Here is the code:
<a data-pin-do="embedUser" href="http://www.pinterest.com/rouvieremedia/" data-pin-scale-width="180" data-pin-board-width="1170">Follow Pinterest's board Pin pets on Pinterest.</a>
This is a Bootstrap site and I would really like to be able to make this widget responsive as well. I tried applying css styling to the widget just to see if I could impact it using this. Alas, no luck.
div.container > span.PIN_1407891215996_embed_grid.PIN_1407891215996_fancy {
border: 5px solid red;
}
Any suggestions for interacting with this element would be appreciated. Then I can apply some additional styling.
Wrap your widget in a container, e.g. #pinterest-container, and add the following styles:
#pinterest-container > span {
width: 100% !important;
overflow: hidden;
}
#pinterest-container > span > span > span > span {
min-width: 0;
}
The first one overrides width which is otherwise fixed, making it responsive. The second one deals with an issue where the last column is not displayed if the widget is very narrow.
The width of the widget depends on a number of factors:
The width of the enclosing element: you can't exceed that width
A multiple of the data-pin-scale-width + padding: the width of the widget won't pad right. It'll be exactly the size of the multiple of the items inside + small padding left and right, and the padding between the items
And given the above, the data-pin-scale-width obviously
So if you want an exact width of 1200, try the data-pin-scale-width="195". That should do it, assuming the enclosing element is larger.
Here's a solution I came up with: http://pastebin.com/kXVDWUu8
I suggest including the following style:
#pin-container > span {
box-shadow: none !important;
width: 100%;
overflow: hidden;
}
To make the Pinterest widget responsive, this is the solution that worked for me. Taken from here.
CSS
#pinterest-container {
display: flex;
}
#pinterest-container a {
flex: 1;
}
how can I make the position of the popup button in the RadCalendar control (http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/custompopup/defaultcs.aspx) to be on the other side, eg:
I'm not using Rad Telerik, so I'm not sure if there are other ways to do it, but it's possible to make it look like what you are asking by working with CSS.
I've made some tests on the demo page, and this is a CSS that should help you.
div.RadPicker table.rcSingle .rcInputCell ~ td {
position: relative;
right: 113px;
display: block;
}
div.RadPicker table.rcSingle .rcInputCell .RadInput {
position: relative;
left: 42px;
}
I would like to have in Wordpress the normal text width 660px and the images between text wider than the text (max-width:1000px).
How can i handle that?
You could give images negative left and right margins. In order to work, though, they shouldn't be max-width, but just width:
.container {
width: 660px;
}
img {
width: 1000px;
margin-left: -170px;
margin-right: -170px;
}
Another alternative, use a grid system and great a new .row or whatever your grid system calls it for each image, with columns that are wider than the one used for the text.
I have an absolute positioned div inside another absolute positioned div. The child div content is much bigger than the parent can contain. This is by design. I need the child div to spill out of its parent. It does so in every other browser except IE 8 (IE 7 looks OK, not sure) In IE8 the part of the child that is out of parent is clipped. It is there, but just not visible as can be verified by IE developer tools.
I tried z-index, tried explicitly setting overflow:visible, no luck at all.
UPDATE: I found out that the problem is caused by a filter defined in the parent div like this:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";
Anyone has an idea how to work around that?
I solved it using this How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
My solution is a little modified, just put an empty div with class "ie_rgba_fix" inside the container you want transparent, add this CSS someplace IE specific and the children will not clip anymore as with overflow: hidden
/* IE8 RGB A workaround */
div.ie_rgba_fix
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";
}
Try making the elements inside the absolute positioned element position:relative, and/or add a wrapper around all the elements in that absolute positioned element and relative it.
i took a tip from the checked answer here & the linked question, but didn't want to use an empty DIV (especially because other browsers don't need it).
Instead, i set up IE8-specific CSS that uses the container DIV's :before pseudo-element.
However, pseudo-elements are styled content, not DOM objects, so the -ms-filter property is useless. To compromise, i use a PNG matching the original filter i wanted (actually a data: URL, but either works) as the background-image.
i force the pseudo-element to the full size of the container, absolute-position it, and ta-da, the child element is visible outside the parent, and the parent still gets a transparency background.
.container.ie8 {
background-color: transparent;
position: relative;
}
.container.ie8:before {
background-image: url("data:image/png;base64,...");
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}