Develop Reference

How do I apply multiple transform-origin on Javascript/HTML/CSS? [closed]

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
How do I apply 2 different CSS transforms to a single HTML element with different transform-origin for each?

You would need to work out the matrix value for each and then add them together using matrix mathematics. Their are some online calculators that can help with this
http://angrytools.com/css-generator/transform/

Set two DOM's of the same size, Set transform-origin for each individually
div{
height: 300px;
width: 300px;
}
.origin1 {
background-color: orange; /*Set to transparent*/
transform-origin: 0 0;
transform: scale(0.5, 0.5);
}
.origin2 {
background-color: blue;
transform-origin: 300px 300px;
transform: rotate(45deg)
}
<div class="origin1">
<div class="origin2"></div>
</div>

Can someone explain this CSS code to me? [closed]

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 6 years ago.
Improve this question
I am trying to work on adjusting the size of a picture from a web page.
My friend wrote something, and I am trying to learn from it. What does this code do?
div.page-full-width div#primary div#content div.entry-content div#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form div p.bbp-attachments-form label.btn {
width: 9vw;
height: 1vw;
}
.entry-buddypress-content div#buddypress div.full-width div#item-body div.profile div#subnav {
width: 21vw !important;
height: 8vw !important;
padding-right: 2vw !important;
margin-bottom: 0;
}
#members-stream li .action div.generic-button a, #members-list li .action div.generic-button a {
font-size: 3vw;
line-height: 4vw;
}
some are #, some are . and some are div., how do they work to target specific lines from HTML code?

#foo selects the element with the id foo. (See MDN)
.bar selects all elements with the class bar. (See MDN)
More about CSS selectors in general.

.test is for classes in html
#test is for Ids in html
div. selectes all divs with this classname
Width: 9vw means view width so the image is 9% of the view width
He basically selected with this css a lot of Ids and Classes and gives them a height, width, distance inside(padding), distance outside(margin), font size and the line height(on which height the text should be displayed).
Hope this helps

How to remove spacing between the top of a border and a div [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
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.
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.
Improve this question
I currently have a div that is displaying a chart. In my HTML page, I have given it the ID of "main". In my CSS, I am trying to bring the chart a bit more up in the page, however, have had issues. I currently have a border, and am trying to bring the chart up to the border. In other words, I won't want any padding/space between the div and the top of the border. This is how it looks like right now:
And here is how my CSS code looks like right now:
#main {
position:relative;
width:95%;
left:3%;
border: 3px solid green;
padding-top: 0px;
}
Any help would be appreciated. Thanks!

Try applying negative marging or negative top to your chart container...
Ex:
#main {
position:relative;
width:95%;
left:3%;
border: 3px solid green;
padding-top: 0px;
top:-20px
}
or
#main {
position:relative;
width:95%;
left:3%;
border: 3px solid green;
padding-top: 0px;
margin-top:-20px;
}

how to make horizontal scrolling naigation for mobile [closed]

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 8 years ago.
Improve this question
How to create a navigation similar to one shown here: https://www.dropbox.com/s/0lodaqh3st2qx1o/2014-07-11_8-56-53.mp4
I actually need to use it as a progress bar, where it jumps to next page as user progresses. But i want them to be able to navigate through pages if needed.
I can not add iframe of overflow-x because it will add a scrollbar. Is there any other possibility or approach?

Not sure if you want vertical scroll, or horizontal scroll like in that video but it's the same thing (actually vertical scroll is simpler). For horizontal something like this:
nav {
overflow-x: auto;
overflow-y: hidden;
position: relative;
white-space: nowrap;
height: 40px;
}
nav li {
display: inline-block;
position: relative;
text-align: center;
vertical-align: middle;
white-space: normal;
margin: 0 15px;
}
You basically fix the height of the menu and allow it to overflow-x. Then you place the li's side-by-side. The white-space: nowrap is also important ensure the list doesn't break on to a new line.
On desktop you will see a scrollbar, but on a mobile phone it will look better.
Fiddle: http://jsfiddle.net/V7mMB/

Padding Between "display:table-cell" [closed]

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 8 years ago.
Improve this question
Is there a way to place padding or a transparent border around the "cells" when one does display:table-cell? I would like the background to show up through this space, so I can't just set the border to white, and border-color:transparent doesn't work for me for some reason. I've checked w3schools and similar sites but I haven't been able to find this particular trait.
From user Praveen Vijayan: http://jsfiddle.net/geymU/

Use border-spacing: 10px on the parent container.
In your case
#nav ul{
display:table;
width:100%;
border-spacing: 10px;
}
You can also give top/bottom and left/right separately like border-spacing: 10px 20px;

The space between cells is controlled by the border-spacing and border-collapse properties in the table.
#nav ul {
display: table;
width: 100%;
background: yellow;
border-collapse: separate;
border-spacing: 12px 6px;
}