I have a bunch of classes, here are 3 as example:
.col-1-3{
width:calc(100%/(3/1));
}
.col-2-3{
width:calc(100%/(3/2));
}
.col-1{
width:100%;
}
(all of these are inline-block and position relative if that info might be useful....)
Now, if an element with any of those classes applied, also have another class applied, lets call it 'batman', I need the element to grow 30px in width.
Without touching each and everyone of my .col-* classes and in there add the 30px, is there any! other way to add to an elements width? see example pseudo code:
.batman{
add-to-width:30px;
}
I was thinking perhaps with :before and/or :after. Adding a pseudo element and somehow move it 15px to the left/right and the main element would follow/grow...but it didnt work....
requirement: strictly css, no javascript please.
Any idea?
thanks in advance!! :)
I believe You have 2 options - first is something like a margin since margins will stack, the other is using calc()
.batman {
margin: 0 15px;
}
or
.batman {
width: calc(100% + 30px);
}
Related
I need to change the container padding. Particularly the width. I tried to find the code in style.css and found this code.
.center{ width:85%; margin:0 auto;}
I adjusted the width to 100% but it took the logo and the menu bar to the left side with itself.
I am searching for the solution to this. Also I want to apply this css code to only one page.
If you're changing the width, you're going to change how that element interacts with other elements, so changing the width is a bad idea.
You should stick to just changing the padding.
.center {
width: 85%;
margin: 0 auto;
padding: 10px; //insert whatever padding you want here
}
If this is affecting the width of the element, then try applying:
.center {
//your existing css for this selector, then:
box-sizing: border-box;
}
If you want to apply this change to one page only, your best bet is probably to add a class to the html element that you're trying to modify and target that class with your new padding.
//myFlowPanel has many childFlowPanels
myFlowPanel.add(childFlowPanel1);
myFlowPanel.add(childFlowPanel2);
//.. more childs here
Then I want each of these childs will have 5px margin gap between them, but I don't want to apply "margin-top" for each child.
Just wondering if there's a way we can just has 1 line of code like this to do all the works like cellspacing in <table>:
myFlowPanel.setFlowPanelSpacing("5px");
Mybe we can do at css level, but I don't know how.
You can do it in CSS:
.myPanel div {
margin-top: 5px;
}
I've been searching around for a while (for the answer) with no success, so I guess I did "my homework"...
So basically I've a gap between 2 divs.
You can see it here.
on your content class
.content {
background: url("panel.png");
padding: 0;
margin: 0;
float: left; /*new style*/
width: 100%; /*new style*/
}
Give overflow:hidden to your .bigtext, like this:
.bigtext{
overflow:hidden;
}
This problem is called "collapsing margins".
Check this http://reference.sitepoint.com/css/collapsingmargins
http://www.w3.org/TR/CSS2/box.html
The gap is caused by the p element.
You need to take the margins off - browsers default behaviour is to add 1em before and after the paragraph.
If you use google chrome, you can right click and goto inspect element. From there you can see what default behaviours have been applied to certain elements on the page. You can even see visually what space has been created by margins. Your gap was one of them. =)
See screenshot below - this is showing the margin applied to another p element.
Try margin: 0; for those divs.
you can hack it by applying margin-top:-23px to the .content div
i have a parent div, which can change its size, depending on the available space. Within that div, i have floating divs. Now, i would like to have spacing between these divs, but no space to the parent div (see drawing).
Is there a way to do this with CSS?
Thank you
I found a solution, which at least helps in my situation, it probably is not suitable for other situations:
I give all my green child divs a complete margin:
margin: 10px;
And for the surrounding yellow parent div i set a negative margin:
margin: -10px;
I also had to remove any explicit width or height setting for the yellow parent div, otherwise it did not work.
This way, in absolute terms, the child divs are correctly aligned, although the parent yellow div obviously is set off, which in my case is OK, because it will not be visible.
You can do the following:
Assuming your container div has a class "yellow".
.yellow div {
// Apply margin to every child in this container
margin: 10px;
}
.yellow div:first-child, .yellow div:nth-child(3n+1) {
// Remove the margin on the left side on the very first and then every fourth element (for example)
margin-left: 0;
}
.yellow div:last-child {
// Remove the right side margin on the last element
margin-right: 0;
}
The number 3n+1 equals every fourth element outputted and will clearly only work if you know how many will be displayed in a row, but it should illustrate the example. More details regarding nth-child here.
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
Note2: The :nth-child() selector is supported in all major browsers, except IE8 and earlier.
Add margin to your div style
margin:0 10px 10px 0;
http://www.w3schools.com/css/css_margin.asp
I'm late to the party but... I've had a similar situation come up and I discovered padding-right (and bottom, top, left too, of course). From the way I understand its definition, it puts a padding area inside the inner div so there's no need to add a negative margin on the parent as you did with a margin.
padding-right: 10px;
This did the trick for me!
Is it not just a case of applying an appropriate class to each div?
For example:
.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }
This depends on if you know in advance which div to apply which class to.
A litte late answer.
If you want to use a grid like this, you should have a look at Bootstrap, It's relatively easy to install, and it gives you exactly what you are looking for, all wrapped in nice and simple html/css + it works easily for making websites responsive.
I have a span with several other spans inside it, and I want to toggle the sub-spans between display:block and display:inline. The spans start off with display:inline-block, then are switched to display:block. This works fine. The problem is when toggling back in Webkit (it works fine in Firefox): the spans are rendered with extra line breaks in between them.
Can I make this render correctly without putting <br/> tags between the spans?
demo here: http://jsbin.com/omalu3/4/edit
Any other solution would be a workaround since it's a browser bug.
An alternative to derekerdmann's solution:
#a.multiline * { width: 100% }
#a.oneline * { width: auto }
#a * { border:solid 1px black; display:inline-block }
Another workaround would be to not wrap the children spans with another span -- which is an inline element. Use a <div> for #a and it behaves correctly (in Webkit at least!).
On another note, the star selector is not really efficient, although I understand this is only an example so I'm not going to criticise that here :D
Now isn't that fun.
I'm not sure what's causing the problem, but it goes away if you add float: left; to #a.oneline *. When you do that, you could change the display to block so your styles look like this:
#a.multiline * { }
#a.oneline * { float:left; }
#a * { border:solid 1px black; display:block;}
The only difference between this solution and your original layout is that the oneline blocks will be aligned at the top instead of the bottom, but you could set a fixed height for those elements.