Given the following CSS
.comment {
margin: 10px;
display: block;
overflow: auto;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
-webkit-box-shadow: rgba(0, 0, 0, .2) 1px 1px 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
min-height: 200px;
width: 100%
}
This is applied to a textarea but the right margin is ignored and the textarea goes off the screen.
why is this?
By setting the width to 100% and a margin of 10px the textarea will be a 100% width of it's container shifted down and to the left 10px
To get your desired result you'll probably need to use a container around the textarea with a 10px padding.
See example.
commentA is using a container with padding
commentB is your original CSS
so something like:
<div class="comment-container">
<textarea class="commentA"></textarea>
</div>
and
.comment-container {
padding:10px;
}
.commentA {
width:100%;
min-height: 200px;
}
to get started.
Just use:
display: inline
Instead of:
display: block
Related
What order would this go in?
div{
margin:0px 0px 13px 0px;
}
What side of the div would the 13px effect?
Also would I need all of the px or just one or none?
could I do this?
div{
margin:0 0 13 0;
}
It goes in this order: top, right, bottom and left. For example:
div {
margin: 1px 2px 3px 4px;
}
is equal to
div {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}
You also can specify only 2 properties, and for example:
div {
margin: 10px 20px;
}
means the following: margin-top and margin-bottom are equal to 10px, margin-left and margin-right are equal to 20px.
You can also specify 3 values, like this:
div {
margin: 1px 2px 3px;
}
And it equals to:
div {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 2px;
}
And as you already know margin: 1px will set all 4 margins to 1px.
When you specifuing a number not equal to 0, you should specify px or % and so on, but when you specify 0, it can be just 0, it's OK.
I have the following code:
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 20px;
height: 30px;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
The problem is that the <div class="perc"> can go up to width:95%;. How would I go about calculating pixels so that I can use JS 1%-100%. To clarify: I'm adding width with JS, so that's not an issue.
Why this happens
This issue is happening because you are setting the width to 100%, but the inner box also has a padding of 10px (in left and right) and a border of 2px. That makes it have an actual width of 100% of its parent width + 20px (10px margin on both sides) + 4px (2px border on both sides).
How to fix it
You could fix it in different ways. The easiest one would be to use box-sizing with a value of border-box:
The width and height properties include the padding and border, but not the margin.
The code would look like this (note how the height changes too):
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 35px;
width:100%;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
box-sizing:border-box;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
I'd like a CSS div with an arched top and a square (or slightly rounded corners) bottom.
Here's my CSS:
#oval {
width: 200px;
height: 500px;
background: red;
border-radius: 80px/20px 5px;
}
I also tried 80px/20px 80px/20px 5px 5px with no luck, and a bunch of other combinations. I've been testing in Firefox.
Any help would rock!
You could try this:
border-radius: 80px 80px 5px 5px / 20px 20px 5px 5px;
Try building out each corner separately like this
.oval {
width: 200px;
height: 500px;
background: red;
border-top-left-radius:200px;
border-top-right-radius:200px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;
//border-radius: 80px/20px 5px;
}
Okay, here's the rule: border-radius: 85% 85% 5px 5px / 15% 15% 5px 5px;
Apparently, you specify all the horizontal radii for four corners, then all the vertical radii
Whenever I put in the HTML for my webpage; the #content div is below the widget/sidebar and I already tried position:absolute- and that causes my images to not re-size.
#content {
background: #fff;
margin: 2px 0 2px;
padding: 20px 62px;
width: 68%;
display: block;
float: left;
margin-left: 25%;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-moz-box-shadow: 0px 0px 0px 0px #000000;
-webkit-box-shadow: 0px 0px 0px 0px #000000;
box-shadow: 0px 0px 0px 0px #000000;
}
/************************************************************************************
SIDEBAR
*************************************************************************************/
#sidebar {
width: 25%;
float: left;
margin: 2px 0 2px;
}
.widget {
background: #0b2d7e;
margin: 0 0 0px;
padding: 0px 20px;
/* rounded corner */
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
/* box shadow */
-moz-box-shadow: 0px 0px 0px 0px #000000;
-webkit-box-shadow: 0px 0px 0px 0px #000000;
box-shadow: 0px 0px 0px 0px #000000;
}
Same lesson I tried to teach you earlier. You're stuff doesn't add up to 100% because of the paddings. You have 68% + 25% + 25% + more padding = way more than 100%.
If a box is 50% wide and it has a padding of 10px on the left and right, and a 1px border, then you have 50% +20px+2px.
If you have two divs exactly the same as above you have 100% +40px +40px +2px +2px = more than 100%.
Use box-sizing: border-box; to solve your padding and border problem above. Then you just have to take into account the margins.
See the Can I Use It for box-sizing.
Here is a JS Fiddle fixing your code... You also had a stray </aside> that wasn't needed.
http://jsfiddle.net/a2YSa/1/
Note that in the code I provided, box-sizing: border-box; tells the div to calculate its width including padding and borders. Then I have 25% sized left column, and a 50% right content column with a 25% margin = 100%.
Here is a fiddle with 25% sidebar and 75% main with 0 margins.
http://jsfiddle.net/a2YSa/3/
Screenshot of my last fiddle:
Have you tried using firebug to visualize the problem ? I think you should remove your 25% left margin on your #content...
i think the problem is here:
content width: 68%
content margin-left: 25%
sidebar width: 25%
you currently use more then 100%.
if that isn't the problem, please post html code too or check the width AND paddings / margins with Firebug. it's the easiest way.
I want to know how you can set the width of a DIV to span to the size of the text in the div element. Note that the text must be in a div, I cannot put it in a span, and using Display:inline-block messes with my javascript function. The other problem is that the DIV element has a background (see classes flying-text) and that background spans with the parent element width and not the text width inside the div. How to do that?
My code:
CSS:
<style>
.container{
width:910px;
height: 380px;
background: url(http://v4m.mobi/php/images/home_back.jpg) center no-repeat;
margin:0 auto;
color:#FFF;
background-color: #000;
}
.flying-text{
margin-left:-100px;
color: #fff;
font-size: 20px;
height: 50px;
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 0px 10px 10px 10px;
border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
text-align: left;
vertical-align: middle;
padding: 5px 0px;
}
</style>
HTML:
<div class="container">
<div class="flying-text active-text">Text1</div>
<div class="flying-text">Text2</div>
<div class="flying-text">Text3</div>
</div>
Thank You
A couple of suggestions:
Float the divs. e.g. if you gave the .flying-text elements a float:left declaration then they would 'shrink wrap' to their contents. (You would also need a clear:left declaration to clear floats).
Wrap the text in an inline or inline-block element (such as a span), and set your background color on the span. e.g. <div class="flying-text active-text"><span>Text1</span></div>
you are trying to get your to fill the container's width, but you want them to be wrapping the contained text. these are two opposite behaviours.
keep the div as they are, and wrap the text in a (semantically correct) <p> tag. then your css will become:
.flying-text{
margin-left:-100px;
color: #fff;
font-size: 20px;
height: 50px;
text-align: left;
vertical-align: middle;
padding: 5px 0px;
}
.flying-text p {
float: left;
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 0px 10px 10px 10px;
border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
}