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
Related
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 1 year ago.
Improve this question
When I try to make multiple circles in css and then link them to my html file.
the code looks like this:
.circle{
height: 50px;
width: 50px;
background-color: red;
}
But then when I try to make another circle (by using the same 'circle' class), it interferes with some of my javascript code, some of which are my variables. So I was wondering, if there was a second circle tag that did the same thing.
You have a css class as an example, classes are reusable in your HTML code. For example:
<div class="circle">One circle</div>
<div class="circle">Another circle</div>
Just apply the class to the element either in your JavaScript if you render elements there, or straight up in your HTML as shown above.
On another note, to get rounded edges on your element you can add a border radius in your css class:
.circle{
height: 50px;
width: 50px;
background-color: red;
border-radius: 50%;
}
Create a new div in your HTML, with another class type, f.e. cirlce2
<div class="circle2"></div>
Then just copy paste your CSS:
.circle2{
height: 50px;
width: 50px;
background-color: red;
border-radius: 100%;
}
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 7 years ago.
Improve this question
This is a simple 3-column template, with Side-bars on Left and on Right sides and content in the middle. I'm not able to understand the spacing between the columns, there's too much of space between the content(post) column and right side-bar.
[side-bar] [content/ post / matter]_____space/gap___[side-bar]
I'm not able to reduce/remove the '_space/gap ' to make the template look like
[side-bar] [content/ post / matter] [side-bar]
Before posting this here, I've tried chrome-developer tool to know and refactor it, I've not been able to understand it.
JSFiddle Example
Change this section of your code:
#right {
float: right;
width: 180px;
padding: 10px 30px 10px 0;
}
to this:
#right {
float: left;
width: 180px;
margin-left: 10px;
padding: 10px 30px 10px 0;
}
Floating right will hold that container to the rightmost position it can attain within its own container.
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 7 years ago.
Improve this question
I have 3 rectangles that I've created with CSS. I want them to be clickable and link them to a file called "index.html". I've been searching over the web but could not find a way to do it. Is there also a way where hovering your mouse over the rectangle would just have the index.html file pop up but not open in a completely new window? Here is a snippet of what I have so far:
.rec
{
height: 100px;
width: 125px;
}
#d1
{
background : lightgreen;
border: 2px solid black;
display: inline-block;
left: 0%;
}
#r1
{
background : red;
border: 2px solid black;
display: inline-block;
left: 10%; position: relative;
}
#r3
{
background : white;
border: 2px solid black;
display: inline-block;
left: 20%; position: relative;
}
You should see JavaScript and jQuery tutorials. It's what, mostly, makes web pages interactive. Although in here, the best solution is clearly to use
<a href="index.html">
it would be good for you to learn them, and their incredible power. Check this fiddle here: http://jsfiddle.net/qjntjyyr/
As you can see, it's quite simple. In the next fiddle, I'm using an event for when the mouse goes over the squares.
http://jsfiddle.net/qjntjyyr/1/
Have fun with it, you can manipulate almost everything you want.
The clickable rectangles:
Index
Index
Index
As for the little box that appears when you hover them, you could use a title="" in the anchor tag, but that has the default styling the OS gives it. To customize one yourself you'd need JavaScript.
I found an interesting link to learn for your problem:css-trick
But the first answer is a good one to use.
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/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
Following on from another SO question.
Is it possible to expand the div, left and right instead of the answers on the other SO question which only expand to the right and down...
cheers
Of course it is.
Structure
You need a parent container set to position: relative; and your actual div set to position: absolute;
This way you can modify position of your div without any worry. This should work as a starting point. You can see the child div being shifted top and left compared to the parent.
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: yellow;
margin: 40;
}
.child {
position: absolute;
top: -10px;
left: -10px;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="parent">
<div class="child">
</div>
</div>
Expansion
so for the actual expansion, you would have to animate / change the left / top position together with width and height of the box.
For every 1px you shift your box left, you have to increase its width by 2px! to get an even expansion.
$('.child').animate({'left' : '-=10px', 'width' : '+=20px'});