Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to make my .screen class to be on its own line. Assuming I can not change the current layout.
<div class="app">
<div class="screen"></div>
</div>
I though that display: block; would do the trick but no.
.screen {
display: block;
}
As of now it all sits on one line. I am only handy with flex and I can't think of anyway flex will help me here.
If you're using flexbox flex-wrap can help. Make the first child 100% wide and put flex-wrap: wrap to the parent.
By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS. There is probably override of <div> style.
Try to use !important to prioritize your style:
.screen {
display: block !important;
}
Also, check the style of div in browser's inspector and provide that info – it would be useful to get more details
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
mylayout.razor.css
:root {
--clr-one: blue;
--clr-two: red;
}
.wrapper.normal {
--bg: var(--clr-one);
--clr: var(--clr-two);
}
.wrapper.reversed {
--bg: var(--clr-two);
--clr: var(--clr-one);
}
.title {
background-color: var(--bg);
color: var(--clr);
}
mylayout.razor
<div class="wrapper #Theme">
<div class="title">
My Title
</div>
#Body
</div>
#code {
string Theme = mycondition ? "normal" : "reversed";
}
Using the above, the colors of my "title" will switch depending on the value of "mycondition". I feel like I'm on the way the being able to theme from the layout.
I can now change the :root colors and that will affect the 'themes' so I can play with those base colors until I'm happy.
Given that "title" is a child of "wrapper", I had assumed that the variables --bg and --clr assigned on the "wrapper" would propagate to all child elements. But ...
myroutable.razor.css
.header {
background-color: var(--bg);
}
myroutable.razor
#page "/myroutable"
#layout mylayout
<div class="header">
My Header
</div>
The problem is that the "header" is not getting the value of the --bg variable from the layout.
Hopefully the above explains what I'm after. Any ideas how I might achieve this?
UPDATE
It turns out the problem was a stoopid typo in the child razor component! I'll leave the question here though as the pattern above is one viable way of delivering theming in a razor app.
The pattern outlined in the question is fine.
The problem was a typo in using the variable name in a sub-component, so using the pattern in the question will work for dealing with theming within a particular layout.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have a <div> element inside a <li> element (as shown in code snippet). The <li> element has cursor: pointer style property set and I can't remove the cursor pointer in that nested <div> element.
The <li> is not in our control to remove css, since it comes from a third party.
.container {
cursor: pointer
}
.local {
cursor: default !important
}
<ul>
<li class="container">
<div class="local"> Hello World </div>
</li>
</ul>
The .container class is actually irrelevant here. It just so happens that it has a cursor: pointer property which shows on, but the problem is in fact - What is overriding the .local classed <div> element from rendering the cursor: default property.
The best way to answer that would be to take a look at the elements and styles panels on your browsers developer tools and see what's doing that. It will let you know what's overriding it.
Then you can use adjustments, either by increasing specificity, or by changing the code that's overriding it. But the specificity needs to be relevant in comparison with the .local class and whatever is actually overriding it.
Edit: In the provided example, you don't need to worry about specificity because they're different classes. However, I frequently see !important being added to rules as a lazy way to override specificity issues that aren't replicated in the example. I assume that to be the case here as well since the OP notes that, "the container comes from a third party". So understanding specificity rules will help resolve the issue.
You could use !important but that should really be a last resort. However, you're much better served long term by increasing CSS Specificity.
Currently .container & .local have equal weight. You can increase specificity by: Using an ID, referencing more hierarchy, using combinators etc. Then the NEW attributes will override the previous attributes based on CSS order.
Eg:
.element {
background: blue;
}
.element {
background: red;
}
// produces a red element
So in this case you want to increase specificity. You can do that easily like this:
.container {
cursor: pointer;
}
.container > .local {
cursor: default;
}
// where local is a DIRECT child of .container
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I want to make the class .cart to be fixed at the bottom the the screen at all times like a fixed footer. Currently user has to scroll all the way to the bottom of the page to view this div. I have tried the following css but to now avail.
Although this code works fine for my in JS fiddle but not on my webpage (link below)
JS Fiddle -- > http://jsfiddle.net/Lec5yu1d/2/
My webpage -- > http://omgjewelz.com/create-your-set
.cart { position: fixed;
left: 0;
bottom: 0;
width: 100%; }
Hi adding this code to your style will make it work,
You need to make footer sticky along with positioning it, So here I added bottom:0px for you.
footer.site-footer {
position: sticky;
bottom: 0px;
}
For better view, I will suggest you to use background white behind the text div, as right now its transparent so it will mess up with content,
.footer-bottom {
background: white;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
hello i have two codes to understand the first question is how does the * get rid of my LI list styling when i not told css to do so this is the code that getting rid of the bullet points
*{
margin:0;
padding:0;
box-sizing:border-box;
}
and my second question is about div classes i was clawing though facebook's html makeup looking for ideas and i want to know why facebook use a lot of div classes for css when most the code i looked at could easy have been put in one css class i understand css and code being reusable but most of it was just for one div and not use any where else so why would you use multi css statements for one div is this because of readability or optimization or and i missing something and sorry about my english and punctuation
To get the margin and padding back to the <ul><li> just set it after you used the * see here: http://jsfiddle.net/8mbrn3ra/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
ul, li {
margin: 10px;
padding: 10px;
}
The other part of your question: I don't know why facebook does the things it does. But one reason could be that you have a div as a wrapper of things. If this div has a class with given styles and you want to use them somewhere else you just need to set the class to the wrapper. Understand what I mean?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
In the code below, we have for the section class="body" and a different class for each of ol, li. h2 , footer and div. What is the use of mentioning class="body" in the section when we don't apply it anywhere? In case we give a css for the "body", how will it be reflected in the code?
http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
If you read the article that you posted a link to... you should find the following...
LIMITING OUR BLOCKS
Some of you might have noticed how I added the class="body" attribute to the major sections of the layout in the markup. This is because we want the body of my website to be for a certain width (800px), and I've never been a fan of the big wrapping <div> to do that. So we'll use the basic block centering technique using margins for this. I'm also adding a couple of generic classes to this section that might be used for a post side content.
Layout
.body {clear: both; margin: 0 auto; width: 800px;}
img.right >figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; >margin: 0 0 2em 2em;}
...end quote...
In general terms, if you don't reference a class name in css or JavaScript then there is not much of a purpose in including it in your html.
If you add a css rule like the following:
.body {*css rules*}
...then wherever you have class="body" those rules will be applied to it.
Hope that helps