So I'm having a view that uses a layout and I wanted to change the css for body for just him, and i stumbled upon this solution:
Top of my view:
#{
ViewData["PageId"] = "Login";
}
Css:
body#Login {
padding-top: 0;
background: #000428;
background: -webkit-linear-gradient(to left, #004e92, #000428);
background: linear-gradient(to left, #004e92, #000428);
}
But when I decided I wanted to change the css for the html too, it didn't work?
html#Login {
overflow-y: auto;
}
Can someone explain how that even works, and why can't there be any space between body and #Login
Your selector requires the body tag having a Id called Login like this:
<body id="Login">
This is the Target Element of your Selector
</body>
So if the body doesn't have this Id, the selector didn't match. A non-matching example could be this one:
<body>
This element has no Id called Login and so Css wouldn't apply
</body>
You could overwrite the body with some additional Code, that's right. But keep in mind, that the order matters in CSS! So you've to include your second code after the original CSS code, which you want to overwrite. When the CSS is loaded in the _Layout file, you could use a section for example, to make sure that it's applied after the shared CSS to overwrite it:
<link rel="stylesheet" rel="css/master-shared-stylesheet.css">
#RenderSection("AdditionalPageCss")
Then you can do something like this in the View, where you want to overwrite master-shared-stylesheet.css:
#section AdditionalPageCss {
<style type="text/css">
/* Overwrite */
body {
overflow-y: auto;
}
</style>
}
Related
<html>
<body>
<nav>....</nav>
<article>more things...</article>
<div id="myModal" class="modal">contents</div>
<body>
</html>
In linked CSS file (using Chrome):
#media print{
body:not(#myModal){
display:none;
visibility:hidden;
}
#myModal{ /*shouldn't have to but doesn't work anyway */
display:block;
visibility:visible;
}
}
This does not work. I am trying to get rid of everything behind the modal for printing without scripting. Apparently that is not possible. Can a display:none :not not negate elements contained within the container?
Edit: I have looked here, but cannot find the answer. https://www.w3.org/TR/css3-selectors/#negation
Edit: I want to hide everything except the modal. But display:none keeps that from happening. It does it for the whole body element, regardless of my negation.
Edit: Whatever it is, it does not work in the media call, so my current idea is to move the div. I thought there might be a better way. Edit: I also need display:none because print will still print the blank pages where the elements are hidden. display will remove those elements and allow me to print my modal without a bunch of blank pages of hidden elements.
display: none doesn't load the element or it's children. To Chrome, Firefox, etc., #myModal doesn't exist. Consequently, you can't use display: none as the way to did.
There are other alternatives though:
Option 1
#media print {
* {
visibility: hidden;
height: 0 !important; /* added !important with info from update */
}
#myModal {
visibility: visible;
height: auto !important;
}
}
<body>
<nav>....</nav>
<article>more things...</article>
<div id="myModal" class="modal">contents</div>
<button onclick="window.print();">Print</button>
<body>
Option 2 This probably won't work with your new update.
#media print {
body > *:not(#myModal) {
display: none;
}
}
<body>
<nav>....</nav>
<article>more things...</article>
<div id="myModal" class="modal">contents</div>
<button onclick="window.print();">Print</button>
<body>
<style>
background-image: url(".....");
</style>
The background tends to be blank when I use this snippet.Is there any other way to get background image for my page ?.
The background tends to be blank when i use this snippet
That's because you haven't specified the tag in which you want to
apply the background image to.
you haven't specified a valid path to the image.
Simply do something like below but of course replace the URL with your own:
body {
background-image: url("paper.gif");
}
You need to specify which element you want to give the background.
Either you give the element a class or a id or something like body.
.class {
background-image: url("http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Logos%20Wikipedia.ico");
}
#id {
background-image: url("http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Logos%20Wikipedia.ico");
}
body {
background-image: url("https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png");
}
<div id="id">Test1</div>
<div class="class">Test2</div>
Also you can write it inline
<body style="background-image: url('img/bg.jpg')">
You need to specify the tag, class, or id you want the background-image to be in. Example
body, .class, #id {
background-image: url("img.png");
}
or inline-style
<div style="background-image: url('something.gif')"></div>
You also need to be sure of the image path of the image you want to put
for instance if image is in the same folder as css or html say
body {
background-image: url("image.png");
}
if in a folder outside the css folder
body {
background-image: url("../foldername/image.png");
}
and so on
This is an example of code in CSS:
block {
margin-left: 1in;
margin-top; 1in;
position: absolute;
background-image: url('../images/myimage.png');
background-size: 100% 100%;
}
Now I am using this CSS file on more than one HTML page and there need to be able to change this image per page. Maybe through HTML?
<block><somehowchangeimagehere></somehowchangeimagehere></block>
? Please, only HTML & CSS.
One way to handle this is to put a class on the BODY tag for each page, then make different subclasses:
<body class="pageOne">
CSS:
.pageOne block {
background-image: url('../images/myimageOne.png');
}
.pageTwo block {
background-image: url('../images/myimageTwo.png');
}
The image URL is relative to the CSS page URL, not the HTML page URL. It should just work.
If you insert something like this in your html after you include the stylesheet you can override the stylesheet:
<style type="text/css">
block {
background-image('some_image_thats_specific_to_the_page');
}
</style>
I have 30 buttons of different sizes and I want to set the width of all at once through CSS. But I haven't been able to get it to work right.
[insert example of failed CSS code here]
But it doesn't work. For example, the following button doesn't follow the above rule:
[insert minimal, complete HTML example here that illustrates the issue]
If you need to do this explicitly, you can simply add the !important attribute, although this will guarantee that regardless of location or source, the width property will be overridden, so be sure that you definitely want to apply that style.
button {
width: XXXpx !important;
}
EDIT
To make the above style only apply to one HTML page, as per your request, you can change the HTML for that page slightly, giving an id to your <body> tag, and then targeting buttons only when they appear below that id.
HTML
<body id="page_title">
CSS
#page_title button {
width: XXXpx !important;
}
You can create a button class in your css
.button
{
width: ____px;
}
and then in your .aspx add cssClass="button" to your ASP buttons (I assume they're asp.net controls?)
For input element
INPUT[type="submit"] {
width: XXXpx;
}
For button
BUTTON {
width: XXXpx;
}
Assuming your buttons have something unique in common (ie. they're all have the class name of "buttons"), you can just use a CSS selector to set their width property. ie.
.buttons {
width:100px;
}
There are a number of different selectors you can use to target them, and keep in mind you can have multiple classnames on each html element by putting a space between them. ie. <div class='nav button'></div> will respond to both the .nav and .button definitions.
I don't know if there's a different Css usage in Asp.net but I just can't make it work.
I target my .css file with
<link href="Style/Style.css" type="text/css" rel="Stylesheet" />
code. And there are <div> and <table> elements.
The table has an id and its properties in the css file are working normal. But I can't say the same thing about <div> and <a> tags.
Let's take this example:
<div align="center" id="bla">
And I use id in css file in different ways. I first used #bla { } or div#bla or div #bla { }, then I used .bla { } or div.bla { } or div .bla { } with making class="bla" instead of id="bla" in Aspx page, they all did not work.
But when I moved the code from css file to Aspx file between <style type="text/css"><style/> tags, it worked normal.
The same behaviour happens in <a> too. But it does not in <table>.
Is there a different usage? What do I miss?
More info at http://jsfiddle.net/npTc6/
It could be a pathing issue to your CSS file. If you have multiple CSS files, it could also be the order of your CSS files. You should verify that you have the correct path to your CSS file and that you have the correct file name referenced in your code. Often, the most simple mistakes are the most frustrating.
UPDATE:
Your CSS has a space between the "a" anchor and the class name, and I believe you need a leading slash on your image references (if not there already).
Example:
a .Russia
{
display: block;
background-image: url("/Images/Default/Russia.png");
width: 173px;
height: 173px;
}
try...
a.Russia
{
display: block;
background-image: url("/Images/Default/Russia.png");
width: 173px;
height: 173px;
}
It was a problem common in Asp.Net. Just about background properties. Standart CSS background-image code had some issues so there are variations. I tried many, then fixed it by using this one:
background: url(/Images/Default/Turkiye.png);