I am quite new to XHTML/CSS, but have now got my site laid out nicely. Just one loose end which I can't seem to get past (I've spent a fair bit of time on this & found related info, but nothing quite the same):
All I want to do is overlay a faint image on my background. I don't want to use the "opaque" filters, as they trigger the script security alert on my IE Explorer 8.
I am quite happy to use the opaque gif image I have created.
I can see that z-index is the way to go. However, my image area insists on locating further down the page rather than overlaying.
Here's what I think are the key extracts of the code where I am going wrong [I have snipped detail such as fonts]:
HTML:
body { position:relative; z-index:1;
margin: 0 20px 0 0;
padding: 0;
background: #FFFFFF url(images/ge01.jpg) repeat-y;[snip]}
<div id="transparency">
</div>
CSS:
#transparency {
url(images/transparency.jpg) no-repeat;
width:230px;
height: 1000px;
position: relative; top: 80px; left:0;
z-index:2;
}
Have you tried using position: absolute; on your transparency element?
position: relative means that you will position the transparent element in relation to other content.
Related
First of all, I'd like to apologize for the lack of a serviceable example of what my code looks like. Unfortunately it contains personal information to access a database that has been made available to my university, so I cannot post it. The link to the databse is here:
http://www.studiolegale.leggiditalia.it/#mode=home,__m=site.
Now, if you don't have a proper adblocker, you'll see that a spam popup window appears. I am building a scraper in python using Selenium, and the problem seems to be that I cannot find a way to close that window. I need to get rid of it for the purpose of my project, but I have no idea how. I tried creating an action chain to locate and click the 'X' button, but both the XPath and the ID of said button are dynamic.
I then noticed that the ID of the X button always contains 'close', so I tried writing something like
spamlist = browser.find_element_by_xpath('//div[contains(#id, "close")] ')
spamlist.click
but to no avail. It gives me no error but it doesn't close the window. I admit I am a bit of a beginner, but I really can't think of what I could be doing wrong. Is there something obvious that I am missing?
EDIT 1.1
I have been asked for the HTML code of 'close element' button. Here it is:
<div id="id70a13b6c7dclose70a13b6c7d" style="display: block !important; position: absolute !important; z-index: 10 !important; height: 70px !important; padding: 20px !important; margin-top: -20px !important; margin-left: -20px !important; box-sizing: border-box !important; left: 12px; right: auto; top: 12px; bottom: auto; transform: none; transform-origin: left top;"><div id="id70a13b6c7dclose-cross70a13b6c7d" style="display:block !important;height:30px !important;min-width:30px !important;background:#000 !important;border-radius:5px !important;border:2px solid #fff !important;white-space:nowrap !important;position:relative !important;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;"><div id="id70a13b6c7dcross-container70a13b6c7d" style="overflow:visible !important;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;"><div id="id70a13b6c7dcross70a13b6c7d" style="position:absolute !important;height:20px !important;width:20px !important;top:3px !important;left:3px !important;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOAgMAAABiJsVCAAAADFBMVEUAAAD///////////84wDuoAAAAA3RSTlMAgGJiSVzhAAAAOElEQVQI12PQYGBqYNjLwP6AYb+D/AMG+Qv1DgzsX/8yMDD+/8LAwFB/AUxAuGAJsBKwYrA2sAEADzMWbZHdzhcAAAAASUVORK5CYII=) !important;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjcgMi43Yy0uNC0uNC0uNC0xIDAtMS40bC42LS42Yy40LS40IDEtLjQgMS40IDBMNyA1IDExLjMuN2MuNC0uNCAxLS40IDEuNCAwbC42LjZjLjQuNC40IDEgMCAxLjRMOSA3bDQuMyA0LjNjLjQuNC40IDEgMCAxLjRsLS42LjZjLS40LjQtMSAuNC0xLjQgMEw3IDlsLTQuMyA0LjNjLS40LjQtMSAuNC0xLjQgMGwtLjYtLjZjLS40LS40LS40LTEgMC0xLjRMNSA3IC43IDIuN3oiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==), linear-gradient(transparent, transparent) !important;background-size:20px !important;overflow:visible !important;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;"></div></div><div id="id70a13b6c7dcounter70a13b6c7d" style="display:none !important;text-align:center !important;position:absolute !important;min-height:30px !important;min-width:30px !important;color:#fff !important;font:small-caps bold 18px/30px courier new, sans-serif !important;overflow:visible !important;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;"></div></div></div>
Chances are there that the pop up is in iframe.
So you need to switch to the frame before closing the pop up.
Driver.SwitchTo().frame("frame xpath");
Driver.findElement("enter your xpath to close popup").click();
Driver.SwitchTo().defaultContent();
I am using react-virtualized WindowScroller with CellMeasurer to scroll through a 100 sample records and by itself, it works great.
Now, when I place this component in a content pane with a frozen header and footer (using flex) above and below it, react-virtualized does not bring in additional data beyond the first page.
The structure of my container page is the same as the create-react-app template:
<div className="App">
<div className="App-header" />
<div className="App-intro" />
<div className="App-footer" />
</div>
and here is the CSS I use to freeze the header and footer:
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.App {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.App-header, .App-footer {
flex-shrink: 0;
}
.App-intro {
flex-grow: 1;
overflow-y: auto;
}
FWIW, the official WindowScroller example accomplishes a frozen header using flex, but try as I might, I am not able to replicate it on my end.
I am at my wit's end after spending a whole entire day on this. I would really really appreciate any pointers to get this flex layout going with a functional window-scroller.
In the CodeSandbox you linked to (codesandbox.io/s/52j0vv936p)- window "scroll" events aren't reaching WindowScroller. That's because the window isn't actually what's scrollable, rather it's the middle "body" part. If that's what you want, you don't need to use WindowScroller at all and should remove it.
The only thing left that's broken is that your AutoSizer isn't getting a valid height because one of its parent <div>s doesn't have a correct height. For Stack Overflow convenience, here's the relevant bit:
Why is my AutoSizer setting a height of 0?
AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)
Here is a diff to your sandbox that shows what I'm talking about and here is a fixed Code Sandbox demo.
just getting started on react-leaflet and leaflet. After clicking on a marker I want to have a full screen overlay above the map to display a graph. But no matter how I set z-index of the and , the overlay always lies below the map.
Couldn't find an answer as most z-index question apply to map layers etc. within the component.
.overlay-wrapper {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
z-index: 200;
cursor: pointer;}
It should be pretty straight forward, please point me in the right direction.
As #andreasgroos mentioned in their comment, the z-index value needs to be high enough, i.e. 401 or higher. z-index: "2000 !important" should guarantee that the component will be rendered over the map.
I'm currently developing a site which requires headings as such:
My initial idea was to do this with border-bottom, but how would I limit the width of the border so that it doesn't go all the way across? The border needs to stop when it gets to the text.
Is this possible?
h1 {
background-color: #fff;
line-height: 1;
margin: 0;
display: inline;
position:relative;
z-index: 1;
}
h1:after {
content: '';
display: block;
border-bottom: 2px solid;
position: relative;
z-index: 0;
margin-top: -7px;
}
The length of the border is decided by the size of the element it is bordering. You could create another <div> inline with the text with border-bottom: 1px; and the other borders set to 0. You could then change the margin or width of the <div> to alter the length of the line. Note that you'd have to set a width, because an empty <div> has a width of 0 by default, so won't display.
Another possible (but not recommended) way to do it would be to use a <hr> but these are not well supported in HTML 5, so I would choose the first method personally.
A solution I can come up with is to give the title the same background-color as the page's background, and then to either transform: scale() the title up so that it overflows with the border of its parent, either scale the parent down so that its border hides behind the title's background.
See here for an example:
http://jsfiddle.net/WjRqC/1/
Oh, also, scaling can be replaced by making the title position: relative and moving it downwards a few pixels (and giving it a bit more vertical padding if you don't want the text too close to the line). Actually this is probably a better idea than scaling, because it's not CSS3, so it's more compatible.
Lookie here:
http://jsfiddle.net/7affw/1/
I've been trying Masonry but can't get it to work exactly as I wanted. The elements I use vary in width and height, but all fit in a grid (4 different sizes, all multiple of smallest+margins). I've also calculated a distribution of elements (7 of the smallest, 4 of all the others) that can fit precisely.
However it's rare that masonry manages to fit them neatly, sometimes there's one lurking at the bottom, sometimes several are misplaced. It's always so that in one view I can see what items need to be moved for it to fit.
Is there a way to make masonry more aggressive in moving elements? Or have it go over two times to make sure there are no empty spaces?
You should probably look at masonry's "big brother" Isotope here. Mind you, if you have elements that are sorted in a certain order or fixed in a certain order - and that are wider than a single column width - they can "block" a column at narrow browser widths.
EDIT Maybe this fiddle explains it a bit better. If you look at that one and - while observing the numbers in the divs - you see that the next masonry element up (the red element 5) can not possibly fit in the white square as it must come after element 4; so where it must end up means, that, with only three rows fitting, one gets a white gap. Maybe you can use Isotope's shuffle and/or reLayout methods and sacrifice ordering your elements in a strict order? Best would be a jsfiddle with your issue.
<article>
<div class="tile blue"><p>1</p></div>
<div class="tile black"><p>2</p></div>
<div class="tile tall yellow"><p>3</p></div>
<div class="tile grey"><p>4</p></div>
<div class="tile wide red"><p>5</p></div>
<div class="tile green"><p>6</p></div>
<div class="tile grey"><p>7</p></div>
<div class="tile blue"><p>8</p></div>
<div class="tile green"><p>9</p></div>
</article>
$('article').isotope({
itemSelector : '.tile',
masonry: {
columnWidth: 100
}
});
article .tile {
display: block;
float: left;
box-sizing: border-box;
width: 100px;
height: 100px;
font-size: 3em;
font-weight: 700;
padding: 0 6px;
color: #fff;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
border:1px dotted black;
}
article .tile.wide {
width: 200px;
}
article .tile.tall {
height: 200px;
}
.tile.yellow { background: yellow; }
.tile.red { background: red; }
.tile.blue { background: blue; }
.tile.black { background: black; }
.tile.grey { background: grey; }
.tile.green { background: green; }
To expand on Dan's answer, having just had this problem myself, it seems that Packery is a more up to date; much more maintained version of Masonry - from the same author. It's not clear to me why both projects exist as separate entities, with only typos fixed in the latter.
The good news is - it's almost totally a drop-in replacement. The only change I had to make (other than names masonry->packery where used) was to remove an option, because it is the default and only option in Packery.
That was isFitWidth: true, my feeble attempt to make Masonry pack things something close to how nicely Packery does without any options at all.
Another nice change with Packery is that gutter: x applies to vertical as well as horizontal gutters. In Masonry, this was horizontal only - though trivial with margin-bottom in CSS, this felt like a needless hack.