for my project I use some external css from devextreme. Now, I would like to override some rules. For this I inspected the external css and found the class to override. I use the css files like this:
<link href="~/css/devextreme/dx.greenmist.css" rel="stylesheet" />
<link href="~/css/customized.css" rel="stylesheet" />
In the customized.css I change a property:
.dx-treeview-toggle-item-visibility {
font: 14px/1 DXIcons;
font-size: 22px;
text-align: center;
line-height: 22px;
color: #333;
width: 21px;
height: 32px;
top: 0;
right: 0px; /*new property instead of left: -4px*/
}
If I run the app, I see, that the topmost rule is this customized rule, but there is the original rule too and my customized rule isn't applied (see the picture):
Why is my custom css rule not applied?
left and right are two different properties. Try to add:
left: auto;
to your custom style.
Related
I'm trying to replicate a webpage template solely for the purpose of becoming more familiar with the works of HTML/CSS. I want to use an image in my documents as a background for a DIV, but for some odd reason, it will not import. Keep in mind, I'm still pretty new to coding.
I pulled a random stock photo address off of Google as a test, and that would work. So, I'm thinking either I have the photo located in the wrong folder (It's in the same exact folder as the document I'm calling it from), or there's something else in my code that is conflicting with the called image/file. I'm still not sure, though.
HTML file:
<html>
<head>
<title>conquer</title>
<link rel="stylesheet" type="text/css" href="conquer.css" />
</head>
<body>
<div class="navbar">
Homepage
About Us
Services
Contact
External
</div>
<div class="topbanner"></div>
</body>
</html>
CSS file:
body {
background-color: #fff;
margin: 0;
}
/** Navigation Bar **/
.navbar {
background-color: #383E4C;
height: 100px;
width: 100%;
position: fixed;
text-align: center;
margin-top: 0px;
}
.navbar a {
color: #F6F6F7;
text-decoration: none;
font-size: 22px;
font-family: "Helvetica", sans-serif;
border: 1px solid #646D7C;
padding: 15px;
margin-top: 20px;
margin-right: 20px;
display:inline-block;
}
.navbar a:hover {
background-color: #49505F;
}
/** Top Banner **/
.topbanner {
height: 500px;
width: 300px;
background-image: url('/city.jpg');
background-repeat: no-repeat;
}
I want the image to display in the DIV, but when I open the console elements, it's just a huge invisible block.
In paths, the leading slash /, tells the browser to goto the ROOT folder.
So you will want to change this:
background-image: url('/city.jpg');
to
background-image: url('city.jpg');
I'm new to coding and I'm in the process of creating a website for my father to help build experience and a portfolio.
I'm using unsemantic & normalize.
The problems I am having are as follows;
1) I can't seem to align the bottom of the words "Michael Gilsenan" with the text in my nav bar. I have tried using the line-height property but it's behaving inconsistently and moving in all sorts of strange ways.
2) I'm trying to create a line under the header either by using the <hr> tag or by using the border-bottom property. Both of which eventually create a scroll bar on the <div> which houses my <nav> element.
I have been trying to find a solution for a good 4 hours and have done lots of reading. I apologise if I'm missing something obvious, I'm very tired now!
Thanks very much.
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" href="../external/css/normalize.css">
<link rel="stylesheet" type="text/css" href="../external/css/unsemantic-grid-responsive-tablet.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body class="grid-container">
<header class="grid-parent">
<div class="grid-50">
Michael Gilsenan
</div>
<div class="grid-50">
<ul>
<li>About</li>
<li>Bio</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</header> <!-- end of header-->
</body>
* {
margin: 0;
text-decoration: none;
}
hr {
border-style: solid;
border-color: #cacaca;
position: relative;
top: -40px;
}
/* header styles */
header {
font-family: 'Open Sans', sans-serif;
margin-top: 80px;
overflow: auto;
border-bottom: solid #cacaca 1px;
}
header a {
color: #332e2d;
}
.headertext {
font-family: 'Montserrat', sans-serif;
font-size: 300%;
letter-spacing: -0.01em;
line-height:
}
ul li {
display: inline;
}
ul {
word-spacing: 0.5em;
text-align: right;
}
On the ul
line-height: 55px; /* match the height of the headertext. */
On the header
overflow-y: hidden;
https://jsfiddle.net/wazz/ad6g2woq/63/
The trick was to find out what was causing the scrollbar. I selected the ul and went through the options and for scroll a 2nd scrollbar was added, so I new it wasn't that. Eventually I found that the scrollbar was on added on the header.
P.S. You should use a header tag <h1> for the headertext instead of making the text bigger (300%). Search engines look for header tags to understand the page (SEO). You can adjust the size of header tags in your css if it's too big or small, and still use the tag.
The scrollbar is appearing because you have the overflow property set to auto in the style declaration for the header element:
header {
font-family: 'Open Sans', sans-serif;
margin-top: 80px;
overflow: auto; <-- change or remove this
border-bottom: solid #cacaca 1px;
}
Auto gives the browser control over what to do when the contents of a container do not fit within the dimensions of the container and will often add scrollbars where you don't intend them. Removing the overflow property or setting it to none will eliminate the scrollbar.
I am not familiar with the unsemantic stylesheet that you are using but it appears to apply a float-based layout. This makes alignment of items within a container very difficult. As an alternative, I would suggest looking into flexbox. There are a few good tutorials out there. I have used all of these and can vouch for their quality:
What the Flexbox by Wes Bos - https://flexbox.io/
A Complete Guide to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox Froggy - https://flexboxfroggy.com/
To achieve the layout I think you are aiming for with flexbox requires the following:
Remove the unsemantic grid classes from your HTML
Replace your CSS with the following
* {
margin: 0;
text-decoration: none;
}
/* hr {
border-style: solid;
border-color: #cacaca;
position: relative;
top: -40px;
} */
/* header styles */
header {
display: flex;
align-items: flex-end;
height: 80px;
font-family: 'Open Sans', sans-serif;
/* overflow: auto; */
/* the overflow property is setting your scrollbar. If you don't want the scrollbar, set to none : */
/* border-bottom: solid #cacaca 1px; */
/* Here, your properties are in the wrong order.
it should be:
1. border size
2. border type/style
3. border color.
Like this: */
border-bottom: 1px solid #cacaca;
}
header a {
color: #332e2d;
}
.header-text {
font-family: 'Montserrat', sans-serif;
font-size: 3.5rem;
letter-spacing: -0.01em;
/* line-height: */
/* When you leave in style properties with no value, this will often break your stylesheet. I've commented this out. */
}
header nav {
padding: 10px;
display: flex;
}
header nav ul li {
display: inline;
align-items: flex-end;
margin: 0 20px;
}
I added in some comments about a few other things I noticed in your CSS. To see a working sample, you can check out this pen:
https://codepen.io/danyadsmith/pen/mKjyKQ
Normally, I would attempt to answer the question by telling you what you could do to achieve the result you want with the technologies you are using, but in this case I think the grid system you selected is causing your frustration. Flexbox is gaining adoption in modern browsers and can safely be used in projects that don't need to support legacy browsers. For more information on that, check the flexbox section on Can I Use:
https://caniuse.com/#feat=flexbox
Hope this helps. Good luck!
This question already has answers here:
Using Font Awesome icon for bullet points, with a single list item element
(7 answers)
Font Awesome 5 shows empty square when using the JS+SVG version
(3 answers)
Closed 4 years ago.
Hi i am trying to add the font awesome icon in before and after elements.But i do not know how to write its css and how to get font awesome icons links to put it in the after before css.
I have created a structure like this.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<style>
.thish{position:relative; height:150px; width:150px ; background:red; }
.thish::before{position:absolute; content:'tyjthsrgd';right:40%; color:#000; bottom:0; height:30px; width:60px; background:green; z-index:1; }
</style>
<body>
<div class="thish">
</div>
</body>
</html>
Add to to your before pseudo selector
content: "\f2ba";
font: normal normal normal 14px/1 FontAwesome;
To get the value of content, go to their website,
Right-click -> Inspect any icon (<i> ::before </i> tag) and then check the value of the content in the before pseudo selector.
Dont forget to put the value of font
normal normal normal 14px/1 FontAwesome;
This is very important.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<style>
.thish {
position: relative;
height: 150px;
width: 150px;
background: red;
}
.thish::before {
position: absolute;
content: "\f2ba";
font: normal normal normal 14px/1 FontAwesome;
right: 40%;
color: #000;
bottom: 0;
height: 30px;
width: 60px;
background: green;
z-index: 1;
}
</style>
<body>
<div class="thish">
</div>
</body>
</html>
For Fontawesome 4
You just have to add the following CSS to your after or before element:
font: normal normal normal 14px/1 FontAwesome;
content: '\f042';
Here the content is the icon you want to add. Just copy the Unicode of the icon from the FA website and paste it in the content with a \ prefix.
.thish {
position: relative;
height: 150px;
width: 150px;
background: red;
}
.thish::before {
position: absolute;
font:normal normal normal 14px/1 FontAwesome;
content: '\f042';
right: 40%;
color: #000;
bottom: 0;
height: 30px;
width: 60px;
background: green;
z-index: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="thish">
</div>
I want to define global variables in one css file and use the variables in other css files.
Is this possible?
Global.css:
:root {
--main-color: #192100;
--main-background: #89b66b;
}
html, body {
min-height: 100%;
width: 100%;
font-family: Arial;
color: var(--main-color);
}
SomeFile.css:
.some-rule {
display: table;
border-radius: 12px;
border: 4px solid var(--main-color);
padding-left: 10px;
padding-right: 10px;
color: var(--main-color);
}
Html: (Global.css if referenced before SomeFile.css)
<link href="Global.css" rel="stylesheet" type="text/css" />
<link href="SomeFile.css" rel="stylesheet" type="text/css" />
You can't do that with CSS. Try A CSS Preprocessor like Less or Sass.
less.css sharing variables across files
SASS - use variables across multiple files
CSS itself doesn't use variables. However, you can use another language like SASS or LESS
Hey guys I am having trouble styling my navigation so that is will always be at the same position on a page no matter the browser....
I have the following:
#Mainmenu {
width: 44%;
font-family: Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: .9em;
list-style: none;
position: absolute;
left: 35em;
top: 4.7em;
right: 0;
}
This is positioned, exacly where I want it in chrome and firefox but not in IE. Also if I change resolution it changes the positioning a little. I want to know how I can always have it at the same spot it is suppose to.
Let me know if you need anything else!
David
update:
http://jsfiddle.net/MVpkP/ - is the styles that I have in it and the layout.
The one above this is Chrome and the one I want it to remain like, that's how I want it styled.
Put this in your header
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->
Create an additional css file for IE and adjust your IE css accordingly.
you should either use % on your left/right/top, or put this element inside another element.
for example:
#Mainmenu {
width: 44%;
font-family: Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: .9em;
list-style: none;
position: absolute;
left: 3%;
top: 1.5%;
right: 0;
}
As for putting it in another element:
#wrap{
width: 700px;
margin:0 auto;
}
<div class="wrap">
your menu stuff...
</div>
either of those should solve your problem