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);
Related
Can someone maybe help me with a few lines of css code?
I would like to my search section on my page:
http://www.virtual-forms.com/docs/
To look something like this:
https://docs.wedevs.com/
I'm new to CSS and Wordpress
Thanks, Davor 🤗
EDIT:
My latest try was with this:
/*Header search weDocs*/
.wedocs input[type="submit"],
.wedocs input[type="search"]
{
background-color: #fff !important;
color: #000;
width: 50%;
}
But no luck.
you should get on with applying correct CSS by inspecting the elements in your web browser (right-click element on site > Inspect) to find their correct classes. inspecting linked site virtual-forms.com shows that the whole search form has a parent form element with class="search-form wedocs-search-form", with child divs with classes "wedocs-search-input" for input, "wedocs-search-in" for dropdown and "search-submit" for submit-button.
I would put display: flex; on the parent element:
.wedocs-search-form {
display: flex;
}
use classes to style each individual element there
.wedocs-search-input { }
.wedocs-search-in { }
.search-submit { }
Using those classes should get you closer to getting the correct style to those elements. read up on the flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would use flex-grow on input to make it bigger for example. Hope this gets you along.
I need to surcharge Bootstrap CSS and for that i have created a new overwrite.css file.
In my different test I need to display a black background (It's only for test) but nothing.
<div id="myBackground"> </div>
CSS:
#myBackground { background-color: black; width: 100px; height: 100px; }
so i don't know where exactly you need change the bg color use these after bootstrap or in <style></style> inside <head></head>
if you want change the page background
body {
background-color: black !important;
}
if as container or column
col-md-5 {
background-color: black;
width: 100px;
height: 100px;
}
Make sure you are selecting your element with more specificity than the bootstrap css.
Load your overwrite.css file after bootstrap.
Try selecting a parent element before your #myBackground div. For example,
.main-content #myBackground {}
Find the attributes bootstrap is using that you want to override... for example if in bootstrap.css there is .navbar-nav {background:#000;} then you need to make sure your overwrite has a background attribute declared, such as #myNavbar {background:#555;}
overwrite.css : "It means what it means"! You can't create your own id or class if bootstrap doesn't know what is this...
So, you must create a third css file (style.css for example) and load this after bootstrap.css and overwrite.css !
After this, all is working!
Thanks
I have a angular project which use a library called smDateTimeRangePicker , it include the code below:
Link Here
.action {
height: 30px;
margin-bottom: 0;
position: absolute;
bottom: 0;
width: 100%; }
However, in my project, there is a code which also include action class
<div flex class="action cell">
And it is impacted by the CSS above, how to avoid it?
This question considered about these points below:
There is a way that can avoid the CSS impact between project and library.
The library uses a bad practice, it must avoid impacting project. It is a bug for the library and must be fixed.
This impact usually happens, so I need to change my project to avoid the conflict
Rename your project action class to something else is the cleanest way. Else you have to resort to fixes that are considered bad practice like !important, however these still get the job done.
this happens to me quite frequently, so to solved it I just add one parent class to my page or that particular section
<div class="my-unique-class">
---
<div class="action">
---
</div>
---
</div>
.my-unique-class .action {
height: 30px;
margin-bottom: 0;
position: absolute;
bottom: 0;
width: 100%;
}
You can avoid such kind of situation by increasing specificity of your css rules.
There are multiple ways to do so:
Include all third party CSS files before your custom file so that css rules with same priority (In Your Case) can override the rule in third party CSS file.
Above solution should work in most of the cases, but there are chances that Third party CSS might come with higher priority orders, so you can increase weight of your css by adding class at your parent tag as:
.parent > .action {
/ * Some CSS Code */
}
<section class="parent">
<div flex class="action cell"></div>
</section>
MDN has great article about CSS Specificity here
If you can't change your class name, you could make your styles unique to your element by doing:
.action.cell {
/*your styles here*/
}
By leaving out the space between action and cell you are saying that both classes are on the same element. Also, make sure you are loading your stylesheet after the 3rd party stylesheet so that your styles are being applied over theirs.
When you have a CSS rule, you can use !important before semicolon:
background: black !important ;
It marks your rule as "important" and it cannot be changed with any CSS file.
Only inline CSS can overwrite it:
style="background: blue !important"
Is this an acceptable way to preload images, compared to some js code inside of html / head
body:after{
display:none;
content:
url(img1.jpg)
url(img2.jpg)
...
}
js way
$.preload = function() {
for (var i = 0; i < arguments.length; i++) {
$("<img />").attr("src", arguments[i]);
}
}
$.preload("img1.jpg","img2.jpg");
The concept behind it is to place the background images on a pseudo-element that is loaded when the page loads but is not shown. This causes the browser to load the images so that when they are called later by another element they are ready to go.
This can be used to preload the images and swap them on hover. The "preload" div has no height/width since the images are set to background, so it doesn't show on the page, and the images are ready when you want to swap them on hover. (you will obviously have to set height/width on the anchors. I'm just showing minimal CSS here to get the point across)
HTML:
<div id="preload"></div>
<div id="icons">
</div>
CSS:
#preload {background: url('pic1b.png'), url('pic2b.png'), url('pic3b.png');}
.button-1 {background: url('pic1a.png');}
.button-2 {background: url('pic2a.png');}
.button-3 {background: url('pic3a.png');}
.button-1:hover {background: url('pic1b.png');}
.button-2:hover {background: url('pic2b.png');}
.button-3:hover {background: url('pic3b.png');}
Obviously, there are many other ways and the post above shared a link that include many others.
http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
I suppose that method would work, as long as the image isn't dynamically generated. The only issue with preloading using just CSS seems to be that the images download WITH the page, not after it. You can trigger the JavaScript event after the pageload is over.
Further reading: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
On firefox, at least, the images don't get cached with display: none. Instead you can set:
body:after {
width: 0; height: 0; overflow: hidden; display: block;
content: url('img1')
url('img2')
...;
}
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.