I'm testing some css mixes in two wordpress themes. Im getting two different css selections on what seems the same html and css structure.
On the image, the first part relates to an expected css selection beahviour: I have a div with a class of type "register-lesson". Than, inside I have a span element which is set by a "margin-bottom: 30px;" style. I expected this because this selection is more narrow than the other two bellow.
On the other hand, in the second part of the image, I dont get the same beahviour, although the html and the css classes seems the same. In this case, the "register-lesson" class type is the third choice, and consequently Im not getting the expected "margin-bottom: 30px;" applied to the span element.
Can someone explain me why this happens?
(im using firefox on the images)
thank you!
The second one is getting a margin:0 applied from a :last-child rule. You need to change that rule or make the one with margin:30px beat the specificity of the other.
Quick and dirrrrty (and lazy) way is adding an !important to that rule.
Related
i'am new to mkdocs, here is what i'm trying to do:
add a caption to images and use a css style to use a shorter margin-bottom
i managed to install a python-makdown extension "captions", so if i use
: my sub caption
i'll get
<figure><img ...><figcaption>...
in html. Unfornutately the spacing (css: margin) is to big so i included a css file to remove the default values. Inspection in my browser now shows me, that base.css overwrites my style, so margin remains at default.
How can i overwrite base.css styles with my own styles?
As i wrote in my comment, !important guarantees overwriting:
figure img {margin-bottom: 0px !important;}
But I don't understand why...
If you use your browser's developer tools to inspect the img element...
You can see that the img is defined with a rule for div.col-md-9 img. that is, any img tags under the div with a class of col-md-9.
We can see that (as explained in CSS Precedence) the original rule uses one class attribute and two element names for a specificity of 0012. You need something of equal or higher specificity. But figure img only gives you 0002, which is lower.
To override that, you need at least the same level of specificity:
I'm sure various other permutations would give a working result as well. But we have a working solution, so why keep going. And thanks to the "inspect" tool, it was pretty quick and easy to resolve.
Rather than tweaking the CSS, it might be easier to try a different plugin, such as img2fig
I have a 24 column page that is based on the 24 column 960 template. I have an element that needs a specific with of 84px.
I tried to write the markup this way:
<div class="container_24 grid_84">
</div>
I tried writting the css this way:
.container_24 .grid_84 {
width:84px !important;
}
It is not setting to 84px it is setting to 960px.
What is the proper of displaying this.
Your CSS has this:
.container_24 .grid_84
That is looking for an element with a class of grid_84 that is a CHILD of container_24.
But you are actually looking for this in your HTML:
.container_24.grid_84
That is an element with both classes, which is what your HTML shows.
Side advice:
Don't mix grid framework syntax with your own. 24 refers to column. Your 84 refers to specific pixels.
I'd suggest using something along the lines of
.override_84px
So it's clearly not part of the grid framework. Future people that have to look at your markup will thank you.
Also, since you are making your element here, why even use the container_24 class in the first place?
Finally, the !important declaration is usually a method of last resort to over-ride some existing CSS you have no control over of. You typcially do not want to be using that attribute with your own CSS as it's usually a sign that things have gotten a bit messy.
.container_24 .grid_84 { width:84px !important; }
syntax is correct but are you sure you are looking at the right cell? I have not exactly understood your question though.
Also consider using an ID for container_24, if there is going to be only one such container in the page. Make sure you are not setting width of a span element, which does not take width unless you change its display property to block
{display:block}
The latter css statement is always used, I know you can set this with the !important tag, however, I am not sure if this only applies to the other statements within the same file. I would suggest using the order:
reset.css
960.css
text.css
style.css
I always was told to take out multiple properties in your css that you use more then once, and add them all in one rule. Like below. (please excuse the poor example)
I always seen this:
.button, .list, .items { color: #444; }
With multiple rules, can't that leave a lot of clutter?
Only in css tutorials and examples Ive seen this:
.someColor { color: #444; }
And in the css, just add another class of '.sameColor'. (div class="button someColor")
I've never seen this and feels like it would leave less clutter in your CSS. Would this be okay? Or do you think it could leave with more clutter in your HTML ?
Try to name your classes independently of their visual effect. It is a nature of CSS to play with the design and layout without having to change the HTML. Class names such as .someColor or .left-sidebar are a bad practice. Colors and position can change.
And also apply rules to semantic HTML elements rather than adding classes on all different divs and spans. It should be obvious, although many people get this wrong.
CSS is a limited set of rules and that makes it a perfect creativity stimulator.
It's all based on personal preference. I've tried both methods and prefer the second method you listed, except with more generic class names such as middleParagraph or headerGraphic so it applies to an area rather than a specific color because colors can change.
Good classnames and IDs are the first place you should optimize. THEN move onto multiple class names.
Multiple classnames can help out quite a bit though, consider:
<div class="leftColumn">Left</div>
<div class="rightColumn">Right</div>
<div class="middleColumn hasLeft hasRight">I have padding-left of 210px and padding-right of 210px</div>
<!-- alternatively, you could have -->
<div class="rightColumn">Right</div>
<div class="middleColumn hasRignt">I have padding right of 210px</div>
<!-- or -->
<div class="leftColumn">Left</div>
<div class="middleColumn hasLeft">I have padding left of 210px</div>
<!-- or -->
<div class="middleColumn">I have no padding</div>
and your css
.leftColumn { width:200px; float:left; }
.rightColumn { width:200px; float:right; }
.middleColumn.hasLeft { padding-left:210px; }
.middleColumn.hasRight { padding-right:210px; }
The result is floated right/left columns and the center area compensates for them with padding. This means you can style your middleColumn how you want to (e.g. .middleColumn .otherCoolSelector ).
It's perfectly acceptable to apply multiple classes to HTML elements. The trick is to be judicious; I usually find that when I do this, the additional classes are additions or exceptions to the basic styling being applied. For example, here are some classes I occasionally add to an element that already has a class:
error -- to style the current element if the user entered invalid data
first -- to style the first element in a list or in a table row, e.g. to suppress padding-left
last -- to style the final element in a list or in a table row, e.g. to suppress margin-right
even -- to apply zebra-striping to alternate elements
hidden -- to hide an element if it's not currently relevant
These extra classes are typically generated dynamically with a server-side language like ASP.NET or PHP. They can also be added or removed on the client side with JavaScript, esp. with a library like jQuery. This is especially useful to show or hide elements in response to an event.
There are a lot of good answers here. The trick is finding out which one fits your situation best.
One thing to consider is your markup size. In a high-traffic situation, your markup size is critical to the speed of your page loads...every byte counts. If this is the case for you, then you may want to create more CSS classes and put less in your markup. That way, the client is caching more and your website is serving up less.
What you're suggesting is a bit like an in-line style, e.g. style="color:#444". So if you want to change the color of your element you'd have to make a change to the html, which means you've defined style as part of your content. Which is exactly what css is supposed to avoid.
Imagine if you'd included 'someColor,' multiple times across multiple html files and you decide some of these elements shouldn't have 'someColor,' after all, you've got a lot of files to go through.
I'd probably avoid the list option too, if I'm making a component, say a button, I want to find .mybutton class in my css file and see all the rules for that component, without having to go through all sorts of unhelpful global classes. Also if someone comes along and changes the color in our global class he may break my button, where as if the button controlled it's own styles it can't be broken in this way.
I've search through about 10 pages, can't find this question here. I'm trying to ask what should be a simple question, but I'd like to know if there is a way to select the second ID conditionally in CSS.
Here is the gist of it:
#container {width:1000px;}
#page {width:600px;}
#sidebar {width:400px;}
#container.special {width:800px}
#container.special #sidebar {width:200px;}
Basically, if the container has the class special, it shrinks and therefor the divs inside would need to adjust as well.
I thought this would work, but it doesn't seem to. I can fix this many different ways and this is only an example, so I'm not trying to fix anything, just understand if it is possible and if not, if there is a CSS solution.
Thanks,
Exit
What you have is valid CSS. Your rule for #container.special #sidebar will override the #sidebar rule (since it's more specific), and the sidebar should get smaller.
If it's not taking effect, try using Firebug to inspect the #sidebar element. It will show you what specific style rules are actually getting applied. Then at least you'll know which rule is conflicting and we can help figure out why.
I have a page that looks like: <div id="header">...</div><div id="navigation">...</div> similar for body and footer.
I'd like to use a grid system to style the page, all of which seem to rely on giving the divs mentioned a class based on their presentation. But I don't want to do this (and can't because of the way the markup is generated)
Is there a way to do this, without just putting a class on the divs? I could copy the details of the class desired to a stylesheet mentioning the divs by id, but that feels wrong.
Edit to clarify:
The OP wants to avoid adding class="grid_3" etc. to the HTML, but also doesn't want to add #header { width: 960px; margin: 0px; } (which I think is okay) – Rory Fitzpatrick 3 hours ago
Exactly, I don't want to put presentation information in my HTML, but I hoped I wouldn't have to just take the css classes that make up the grid system apart, and apply the relevant parts (like margin:0px and width:960px), since that is bad from a maintenance and reuse angle.
So, I'll look at an automated system for doing what I need, unless there is an answer to how do you apply a css class to an HTML element, using css, without adding class="blah" to that element? Because that doesn't seem like a crazy thing to want to do to me.
Well if you use blueprint-css as your grid system you can use the compress.rb to assign the rules for given bp framework classes to a specific selector of your choice like #footer or what have you. for example in your project yaml you could have:
semantic_styles: # i dont think this is the right key definition but you get the idea
'#footer,#navigation': ['span-12','clearfix']
'#footer': ['push-1']
# etc...
Then when you call compress.rb on the project file it will roll up the necessary declaration from the array of selectors on the right into the selector on the left producing:
#footer,#navigation{ /* composite delcalrations from .span-12 and .clearfix */}
#footer {/* declarations from .push-1 */}
But all in all this is essential an automation of copying the declarations to a separate file that you say seems "wrong". But i mean other than doing this (automated or manually) i dont see what the possible options could be.
I'm not sure I understand the question. Why don't you want to put styles in a stylesheet and reference them by id?
#header{
position:relative;
...
}
I have the same reservations about grid systems, adding class names just goes against separating markup and style (but is often sacrificed for productivity).
However, I don't see what's wrong with setting the right column widths and margins using your own CSS. You could have a specific site.grid.css file that contains only selectors and widths/margins for the grid. I think this is perfectly okay, it's just a way of using CSS like variables. For instance, all 3-column elements would appear under
/* 3-column elements, width 301px */
#sidebar, #foobar, #content .aside {
width: 301px;
}
Then rather than adding class="grid_3" to your HTML, you just add the selector to the CSS.
You might want to consider using the class names initially, until you're happy with the layout, then convert it into CSS selectors. Whichever works best for your workflow.
If you don't have access to the markup you must either copy the styles, referencing the ids, or maybe you can apply the class to the ids using javascript?