What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

Help Trying to Learn: need help explaining tags

aceofallwhales

Neutral Stupid Paladin of The Egg
SO, I've been doing my best to teach myself all of this, but I am struggling with what I can't find in tutorials. Please help? I'm not very smart, but I am determined.

position: absolute;
EDIT: So now I know what it can be set to, and supposedly I know what it's aligning to, but I'm trying to gain a more solid understanding before I cross it off the list of 'Things I Don't Know'. Currently I'm just using Margin instead.

width: calc(40% - 20px);

overflow: hidden;
and overflow-y: scroll;

display: inline-block;


Thank you in advance if you're able to offer any help/explanations/advice! I still have the codes these came from, but I wasn't sure if context would be needed just yet, so feel free to ask if you'd like me to post them!
 
Last edited:

Ayama

Enthusiast
Here is a really useful thread I found that defines most of the commonly occurring ones ^^
As for the width, the percentage is referring to the containing block. So, in your example, if the containing block is 100px wide, then your div would be [40% of 100px - 20px] wide, which is [40px - 20px], which is 20px. Hope that makes sense! Feel free to ask if any of this still isn't clear ^^
 

aceofallwhales

Neutral Stupid Paladin of The Egg
Here is a really useful thread I found that defines most of the commonly occurring ones ^^
As for the width, the percentage is referring to the containing block. So, in your example, if the containing block is 100px wide, then your div would be [40% of 100px - 20px] wide, which is [40px - 20px], which is 20px. Hope that makes sense! Feel free to ask if any of this still isn't clear ^^
Thank you SO much, that thread is very very helpful, holds very sexy information, I have a bit of a better understanding of position now :)

I am still having some trouble understanding the width though, so I'll explain what I did get from your explanation, because it is slowly piecing itself together.

So a width: calc(); is used specifically for nesting blocks, and refers to the parent/containing block? I had assumed that if you did something like this:
Code:
[div="width: 75%;"]
[div="width: 40%;"] content [/div]
[/div]
The parent div would be 75% of the post, then the nested div would be 40% of the parent (making it 40% of 75%), which is what I'm also assuming the width: calc(); does, but differently... or perhaps quicker?

I could ALSO be completely misunderstanding what you were trying to say though
 

Ayama

Enthusiast
No problem~ Though I do think you need to use calc() if you're going to be doing your widths in percentages instead of pixels.
 

aceofallwhales

Neutral Stupid Paladin of The Egg
hmhm... I'll have to look into that then. Percentages seemed to translate more easily between different screen sizes, so I'm going to try and keep with that for a bit and see how it works out
 

Alteras

The Sleepy One
Moderator
Supporter
Calc is used when you're are computing multiple different units at the same time, such as using pixels and percentages. If it's just percentages alone, you don't need to use it.

For more indepth info, you can use the MDN CSS reference sheets, since everything is just CSS.
 

Ayama

Enthusiast
overflow: hidden; means that, if the div contents exceed the div dimensions, they will be hidden. overflow: scroll; means that, if the div contents exceed the div dimensions, they will scroll.
 

aceofallwhales

Neutral Stupid Paladin of The Egg
Calc is used when you're are computing multiple different units at the same time, such as using pixels and percentages. If it's just percentages alone, you don't need to use it.

For more indepth info, you can use the MDN CSS reference sheets, since everything is just CSS.
Okay sweet, that makes it a little less intimidating. Would I have to use calc if I'm using percentages for the widths, and pixels for the heights? Or is it only a requirement when switching between pixels and percentages for the widths (or heights)?
(also thank you for the link, I'm definitely bookmarking that!)

overflow: hidden; means that, if the div contents exceed the div dimensions, they will be hidden. overflow: scroll; means that, if the div contents exceed the div dimensions, they will scroll.
Thank you for the clarification! Apparently that was the little nudge I needed to tell the difference between the two ^^! so if I use overflow: hidden; then it will not scroll, just hide the overflowing content?
 

Alteras

The Sleepy One
Moderator
Supporter
No. You only need to use calc if you are performing anything that needs any math. so like calc(100% - 2 * 90px) needs a calc because a calculation is being performed, and there are different units being used. but something like 80% doesn't need anything.
 

Ayama

Enthusiast
Okay sweet, that makes it a little less intimidating. Would I have to use calc if I'm using percentages for the widths, and pixels for the heights? Or is it only a requirement when switching between pixels and percentages for the widths (or heights)?
(also thank you for the link, I'm definitely bookmarking that!)



Thank you for the clarification! Apparently that was the little nudge I needed to tell the difference between the two ^^! so if I use overflow: hidden; then it will not scroll, just hide the overflowing content?
Correct.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top