Hey there dear Stackoverflow Community,
here my css:
.text:not(#overview > *) {
margin-top: 10px;
margin-bottom: 10px;
}
i wanted that everything with the class "text" has a margin to the top and bottom of 10px, but not the one marked with the id "overview" and everything under it.
But the css isn´t working as expected.
Thanks for your help
Yasin
Isn't working as expected? So it doesn't exclude the id itself right? For that you need to add the id as well:
.text:not(#overview) {
margin-top: 10px;
margin-bottom: 10px;
}
What you are doing now, is just targetting everything inside the id and not the id itself. This will make sure that the id is also targeted.
You can also reset it using:
.text {
margin-top: 10px;
margin-bottom: 10px;
}
#overview.text {
margin-top: 0;
margin-bottom: 0;
}
The id has more specificity than class.
Well you could do it like this, but not sure if it is the right way!
.text {
margin-top: 10px;
margin-bottom: 10px;
}
#overview {
margin-top: 0;
margin-bottom: 0;
}
Related
I am learning about CSS from Progate.com (Note that they don't have any doubt clearing forum) and reached the level where I have to work on a simple layout provided in the exercises. It was quite a smooth learning until I was confused by the CSS of a class selector. So, I need to fix some CSS so that only the <li> elements inside header-list are horizontally aligned.
To do the same I changed the code to the following:
body {
font-family: "Avenir Next";
}
.header-list li {
list-style: none;
float: left;
padding: 33px 20px;
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list {
float: left;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
This gave me the same result as they wanted in the answer. But, when I try submitting the answer, a popup pops out saying that
The CSS for the float property of <li> elements should be deleted.
So, to understand why this was needed, I re-read their instructions once again and it stated that:
Rewrite the following properties specified for <li> elements so that they are applied only to the <li> elements inside header-list.:
float: left;
padding: 33px 20px;
Thus, here I am confused why it is that much necessary to write the code as follows in order to advance myself to next stage:
body {
font-family: "Avenir Next";
}
.header-list li {
list-style: none;
/* CSS properties from here are moved to line 32. But why?
We still get the required result without doing so.
*/
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list {
float: left;
}
/* Added -> CSS for <li> tags within header-list
(CONFUSION: The float and padding property could have been applied in the first .header-list li{}.
But I didn't understand why the same has been told to do again below)
*/
.header-list li {
float: left;
padding: 33px 20px;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
I searched over the internet in order to get some clue about the same. But I think, being a beginner it is very hard to clear the smaller concepts. Hence, I took it to our saviour forum - Stackoverflow. Some help or hints about the same will be greatly appreciated.
You may want to try using display: inline; instead, and deleting the floats. You stated above that they mentioned
The CSS for the float property of <li> elements should be deleted.
This is another way of of displaying your list horizontally without using floats.
Hope this helps!
I highly recommend checking out The Net Ninja on YouTube though. He is an amazing teacher, you will learn a LOT, and he is very thorouhg and makes it really easy for you to grasp the concepts. Check out the playlists on his channel he has some for html, css, and a ton more!
https://www.youtube.com/watch?v=I9XRrlOOazo&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT
On my wordpress site I use List category post plugin.
This is html code:
[catlist name=Ostatné numberposts=50 name_class=velkost
catlist thumbnail=yes force_thumbnail=yes catlist thumbnail_size=200,150 thumbnail_class=lcp_catlist
excerpt=yes excerpt_size=10 excerpt_class=moj_excerpt]
And this is CSS code:
.shrtthumbsd{
margin-bottom: 50px;
}
.shrtthumb {
float: left;
margin-left: 50px;
padding: 55px 15px;
display: inline;
width: 100%;
}
ul.lcp_catlist {
font-size: 22px;
}
.moj_excerpt{
font-size: 18px;
}
And it looks like this: https://www.akosizarobitpeniaze.sk/vsetky-clanky
I would like to align picture to the right side and have title of article (without bullet/dot) and excerpt under title.
Add this CSS to your site.
.lcp_catlist li { list-style: none !imporant; }
.lcp_catlist li img { margin-right: 0 !important; }
Please see the attachment for more detailed comprehension
I'm using Bootstrap in my current project. As you can see from the picture, there's a blank space that comes in a first column right after the content. Though if I just use columns without any styling, clearly the desired space isn't going to take place. What is the best solution for this problem? I was thinking of wrapping the content in a div with min-height rule but obviously it's a clumsy option.
Thank you.
That is your grid gutter. You can change the width of it with a custom build or by using the source code and changing the scss variable $grid-gutter-width.
As said, the problem is with the gutters.
I use this classes to avoid gutter when I don't want them:
css:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^='col-'],
.row.no-gutters > [class*=' col-'] {
padding-right: 0;
padding-left: 0;
}
// I use those for removing side padding when necessary for an specific col
[class^='col-'].no-pad, [class*=' col-'].no-pad {
padding: 0px;
}
[class^='col-'].no-left-pad, [class*=' col-'].no-left-pad {
padding-left: 0px;
}
[class^='col-'].no-right-pad, [class*=' col-'].no-right-pad {
padding-right: 0px;
}
sass:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
> [class^='col-'], > [class*=' col-'] {
padding-right: 0;
padding-left: 0;
}
}
// I use those for removing side padding when necessary for an specific col
[class^='col-'].no-pad, [class*=' col-'].no-pad {
padding: 0px;
}
[class^='col-'].no-left-pad, [class*=' col-'].no-left-pad {
padding-left: 0px;
}
[class^='col-'].no-right-pad, [class*=' col-'].no-right-pad {
padding-right: 0px;
}
I am trying to make an "Inbox" in bootstrap similar to Gmail's look and feel.
I am having some issues with the Panel that the mail items are in however.
http://jsfiddle.net/64t872o1/
I am having trouble getting rid of this Margin or padding and I cant figure out what it is.
I have set the margins and padding of the panel body to zero but it still remains.
.panel-body{
padding: 0px;
padding-bottom: 0px;
margin-bottom: none;
}
Is there an easy way to figure out where this padding is coming from?
You are seeing the margin that is set on the .list-group element.
Updated Example
.tab-content .list-group {
margin-bottom: 0;
}
Here is the initial styling set in the main Bootstrap file:
.list-group {
padding-left: 0;
margin-bottom: 20px;
}
The best way:
.tab-content .list-group {
margin-bottom: 0;
}
Add this in your css :
.tab-content .list-group{margin-bottom:0;}
Use this:
.list-group { margin-bottom: 0px; }
Right now I'm working on a bilingual website and kinda confuse about how to handle the RTL CSS codes. I have 2 things in my mind as follows;
1. Single CSS file - Overriding LTR default codes.
.content {
position: relative;
padding: 5px 10px 5px 240px;
}
.rtl .content {
padding-right: 240px;
padding-left: 10px;
}
2. Single CSS file - Without overiding
.content {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
}
.ltr .content {
padding-left: 240px;
padding-right: 10px;
}
.rtl .content {
padding-right: 240px;
padding-left: 10px;
}
Using the first method, there will a lot of overrides. Also using the second method there will be a lot of codes in the css file. I know both will do the trick but curious to know which is the best method. Kindly suggest me if there is another method too.
If you are looking for a more robust solution, I would suggest you these approaches:
CSS Preprocessor
Learn and use a CSS preprocessor like LESS (if necessary, use a plugin like Bi-App-Less) and conditionally add the correct stylesheet.
Back-end controlled variable
Use CSS mixed with some back-end variable like:
direction: <%=rtl%>;
padding-<%=right%>: 10px;
padding-<%=left%>: 240px;.
RTL Tool
Use a RTLer tool.
CSS can display your text right to left with this:
.rtl
{
direction:rtl;
}
I prefer to handle padding and margins on a single line:
.content {
position: relative;
padding:5px 10px 5px 240px;
}
.rtl .content {
padding:0 240px 0 10px;
}
You could try doing something like this
.content {
width: 500px;
padding: 5px 10px;
border: 1px solid #ddd;
}
.content.rtl {
float: right;
direction: rtl;
}
try to hardcode the minimum amount of paddings/margins specific to a direction, heres an example http://jsfiddle.net/icodeforlove/UNS5L/