Is there already a way to avoid that all or some content of a website can be extracted by Excel or Distiller or Acrobat Reader?
For example, a php page containing a table loaded with MySQL values
CSS is not a definitive answer for this... ; )
Code:
<style type="text/css">
.deselect ::selection {
background: transparent;
color: inherit;
}
.deselect ::-moz-selection {
background: transparent;
color: inherit;
}
</style>
<body>
---------------------------------------
<div class="deselect"> (data viewer)
</div>
</body>
Related
I have 3 files for my Login-Screen: Login.aspx, Login.aspx.cs, LoginStyle.css
On the Page_Load method I am recieving some data from the current system among other things the theme-color as string (e.g #003b67).
In my .css-File i have defind 3 style rules, which should use this color.
.linkButtonPassword:hover {
color: #38d39f;
}
.login-input-div.focus > .login-faItem > i {
color: #38d39f;
}
.login-input-div:before, .login-input-div:after {
content: '';
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #38d39f;
transition: .4s;
}
so my question is, is there a way to replace the current color-string "#38d39f" with my color from code behind without defining the style in my .aspx-File? (is there a way to access a kind of variable in my css-file)
CSS files aren't processed by ASP.NET (unless you reconfigure your entire HTTP pipeline, which is a bad idea in general), so the short answer is "no".
...however a solution exists with CSS Custom Properties!
Part 1:
In your .aspx page, ideally in the <head> (you're using <asp:ContentPlaceHolder, I hope?), put this after your current <link rel="stlyesheet"> element:
<style type="text/css">
:root {
--theme-color: <%= this.customColor %>;
}
.linkButtonPassword:hover,
.login-input-div.focus > .login-faItem > i,
.login-input-div:before,
.login-input-div:after {
color: var(--theme-color);
}
</style>
You could argue this is the same thing as overwriting the properties with <%= %> directly - but the difference here is that you can now remove the color: property from the above and use color: var(--theme-color); directly in your .css file!
Part 2:
So now your <head> should contain this:
<style type="text/css">
:root {
--theme-color: <%= this.customColor %>;
}
</style>
And your .css file should contain this:
.linkButtonPassword:hover {
color: #38d39f;
color: var(--theme-color);
}
.login-input-div.focus > .login-faItem > i {
color: #38d39f;
color: var(--theme-color);
}
.login-input-div:before,
.login-input-div:after {
content: '';
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #38d39f;
background-color: var(--theme-color);
transition: .4s;
}
The color values are repeated twice (first as a literal hex-color, then again with var(--theme-color)) to ensure backwards compatibility with older browsers that don't support CSS Custom Properties (i.e. IE11 - which I assume you have to support seeming as you're using ASP.NET WebForms).
Is there any simple way , on how i can drag an drop without coding in visual studio, while using Bootstrap and Asp.net in Visual Studio .
Drag and drop functionality can be implemented in HTML5 compliant browsers, it's important that you're aware of this.So if you have users who are using old browsers this functionality may not work.
Here's a simple example which let's user drag the red <div> and drop it in one of two destination <div> elements:
<head runat="server">
<title></title>
<script type="text/javascript">
function dragStart(e) {
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("Text", e.target.getAttribute("id"));
}
function dragOver(e) {
e.preventDefault();
e.stopPropagation();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>
<style type="text/css">
#dropBox1,#dropBox2 {
width: 200px;
height: 200px;
border: 5px dashed gray;
background: lightyellow;
text-align: center;
margin: 20px 0;
color: orange;
}
#dragA {
width: 200px;
height: 200px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div id="dropBox1" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Dropped div can be inserted here-->
</div>
<div id="dropBox2" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Dropped div can be inserted here-->
</div>
<div id="dragA" draggable="true" ondragstart="dragStart(event);">
</div>
</body>
I've started out trying to build a HTML 5 website but have ran into a problem with CSS. Below is a MCVE of the issue:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
div.content {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 75%;
}
div.topbar {
background-color: #777777;
border-bottom: 1px #000000 solid;
color: #FFFFFF;
padding: 5px;
}
</style>
<div class="topBar">
<p>MCVE</p>
</div>
<div class="content">
<p>Here is some content.</p>
</div>
</body>
</html>
If you take out the <!DOCTYPE html> tag, the top bar across the top of the page works but if you put it in, it doesn't render correctly as the background colour of the div element is not rendered and neither is the border.
What am I doing wrong here so that the div.topBar style definition isn't being fully respected?
The problem is that
div.topbar
Should be
div.topBar
Because <div class="topBar"> is not <div class="topbar">
It is still being rendered in quirks mode for some reason but html5 mode wont render it.
(Demo)
HTML and CSS are case sensitive.
'topbar' and 'topBar' are different. Either capitalize the name of the class or correct the div.topbar.
I'm using Bootstrap CDN. From the 3 rules, the last 2 ones don't work. Neither the image is resized nor the heading change its font color.
HTML
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Custom styles -->
<link rel="stylesheet" type="text/css" href="./stylesheets/portada.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="section1">
<h2 class="text-center">Heading</h2>
<img class="img-responsive" src="./images/8.jpg">
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
CSS
.section1 { // Working
background-color: #363b48;
color: blue;
height: 100px;
}
.section1 .text-center{ // Not working
color: #985475;
margin-top: 20px;
background-color: red;
}
.section1 img{ //Not working
width:20px;
}
Try this, although what you have should work also
.section1 h2{
color: #985475;
margin-top: 20px;
background-color: red;
}
I noticed 2 issues in your code.
First the CDN should not be loaded over http, but https. For
cross domain issues when loading it it's better to use just the //
without the http or https. That way it will load without giving crossdomain issues.
For instance: <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Second is that you are using comments which should be /* */
instead of // single slashes because they are on the same line with
some CSS code.
Look after fixing these how it looks:
.section1 { /* Working*/
background-color: #363b48;
color: blue;
height: 100px;
}
.section1 .text-center{ /* Working*/
color: #985475;
margin-top: 20px;
background-color: red;
}
.section1 img{ /* Working*/
width:20px;
}
DEMO
http://jsfiddle.net/a_incarnati/undmcszz/9/
I can't tell for sure, but I would bet the problem lies in portada.css as it is (presumably) available on your local env, but not on the online code editors.
Css rules have weight depending on specificity. Even when you supply new rules on top of older ones, the weightiest rule will be applied. See this site to help calculate specificity: http://specificity.keegan.st/
Your HTML should has the next code at the first lines:
<!DOCTYPE html>
<html>
<head>
I am upgrading part of a very old website. One of the pages that I own uses controls and dlls that I do not. There is one dll that puts a textbox (input field) on the page. This field is concepually a label but the person chose to use a textbox. Anyways, I can't change the dll.
Is there a way in my asp.net page that uses the dll to say all the textboxes on this page should have a transparent background?
This is the code I have access to. Any changes I make have to be made here.
<asp:Content ID="Content1" ContentPlaceHolderID="bodyContent" Runat="Server">
<style type="text/css">
.heading { color:#007DC3; font-weight:300; font-size:1.5em; line-height:1.22em; margin-bottom:22px; }
</style>
<cc1:wizard id="wizCtl" runat="server"></cc1:wizard>
</asp:Content>
Thanks!
like this?
<div style = "input[type='text']{
border: none;
background-color: transparent;
}
">
<cc1:wizard id="wizCtl" runat="server"></cc1:wizard>
</div>
It doesnt seem to work...
Tried this too:
<style input [type='text']{ border: none; background-color: transparent;} >
<cc1:wizard id="wizCtl" runat="server"></cc1:wizard>
</style>
I can see your problem.
Change your code to
<style type='text/css'>div.tbwrap input[type='text']{ border: none; background-color: transparent;}</style>
<div class='tbwrap'><cc1:wizard id="wizCtl" runat="server"></cc1:wizard></div>
Your style tag was a bit off and I do not thing the 'cc1:wizard' tag should have been within the style tag either.
Try this
input[type='text']{
border: none;
background-color: transparent;
}
Is this what you're after:
<style>
input {border:0;}
</style>
input[type='text']
{
border: none;
background-color: transparent;
}
Try this:
In the head part of the doc:
<style type="text/css">
div#someDiv input[type='text']{
background-color: transparent;
}
</style>
Then wrap your textbox with div and give it an ID
<div id="someDiv">
<cc1:wizard id="wizCtl" runat="server"></cc1:wizard>
</div>
<asp:Content ID="Content1" ContentPlaceHolderID="bodyContent" Runat="Server">
<style type="text/css">
.heading { color:#007DC3; font-weight:300; font-size:1.5em; line-height:1.22em; margin-bottom:22px; }
input[type='text']{
border: none;
background-color: transparent;
}
</style>
<cc1:wizard id="wizCtl" runat="server"></cc1:wizard> <!-- if this does transform into a text input, check the page source just to be certain -->
</asp:Content>