Initially, I want to put words into this circle. Maximum character number is 20.
I want to set font size around 24px and the circle's width and height are 100px;
However, the 2nd word fell outside of the circle.
Can anyone help?
http://codepen.io/yumikohey/pen/ocFtJ
Here is my code.
<div class="blog_circle">
Channel Buzz
</div>
.blog_circle{
width:100px;
height: 100px;
border-radius:50px;
font-size:24px;
color:#000;
line-height:100px;
text-align:center;
background:#45C2B3;
margin-left: 50px;
margin-top: 50px;
}
On the other hand, how to make the font size change depends on user's inputs?
why do you have a line-height:100px? It is too high and that is what is causing it to fall outside the circle......
change it to say 40px........here is the demo
UPDATE:
add display:table-cell; to your style. This will center the text vertically in your div. when you actually inspect element and look at the div, the text is at the center of the div vertically. Updated FIDDLE
your circle is actually a square with width and height of 100px and its corners are trimmed by a distance of 50px giving the visual of a circle.
now you have your words with their font sizes but you also have line-height mentioned as 100px . Now this is like , imagine a page of ruled paper ( the one that has lines to write) line height defines the size between two lines. now in your case the line height is 100px which is the height of your entire box. If you lower the line height to say 50px (which will give you 2 lines to write on inside that 100px height box) it should work.
hope this helps
Try using padding and changing line-height and a few other things. DEMO
Related
:)
when i dont set top/left properties for an element fixed what acccured??
please see this sample code:
#fixed-menu{
background-color:#ba4444;
border-top: 5px solid #0892cd;
height: 60px;
position: fixed;
width: 100%;
z-index:9999;
box-shadow:rgb(128, 128, 128) 0px 5px 15px 0px;
}
#wrapper{
height:900px;
width:960px;
margin:0 auto;
background-color:yellow;
margin-top:100px;
}
<body>
<div id="fixed-menu"></div>
<div id="wrapper"></div>
<body>
with above code,fixed-menu also have 100px margin-top!!!!why?????
...................
how calculated top property???
Once an element has been fixed with position: fixed, the three properties left, width and right together determine the horizontal position and size, relative to the window. (CSS uses the more general word viewport; a window is an example of a viewport.)
You need at most two of the three properties, i.e., left & width, right & width, or left & right. Setting just one of the three, or none at all is also possible. In that case, CSS will use the element's natural (“intrinsic”) size and/or position, as needed, for any properties that are left at their default value ('auto').
The same holds for the trio top, height and bottom. You need to set at most two of them: top if you want to control the distance from the top of the window, bottom to control the distance from the bottom, and height if you want to specify a fixed height.
I hope that answers your question. For further reading you can refer to this link
Tip : Fixed position is free flow guy in the document window. Based on the element present before the fixed element aligns itself next to it.
In your example there's no elem before fixed div but the following wrapper div you are setting the margin top to 100px. which affects the viewport. So you can imagine the viewport for fixed element starts below the 100px mark set by the wrapper div.
you can see removing the margin in wrapper div or set the wrapper position to fixed with margin top 100px. you will get the idea.
I have been researching and working so hard to fix such a strange problem. I have a div that is supposed to hold some text. This div should be able to resize with that text, so that if there are two lines of text the div gets taller, etc. All that seems to work fine, but for some reason there's some sort of padding added to the top of the text and to the bottom of the text. I can't find what is causing that padding, and I really want to make the div fit the text more compactly. Here is an image of what i'm talking about:
http://i.imgur.com/ZblaLJX.png
The light blue box should be shorter in height so it fits the text more closely. Here is my CSS code for this div:
.captionCSS {
max-width:70%;
margin-top:10px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:0;
background-color:#aef7f8;
overflow:hidden;
color:black;
}
I have messed around with all of the margins and paddings, setting them to zero and then setting them back again and nothing seems to work. The line height is inherited from another div and is 18px, while the font size is 12px, and i tried decreasing the line height but it didn't have any effect on the top and bottom padding/gap.
Also, when the text takes up two lines, it get a bit worse in that there is an extra bit of padding on the side, which i want to get rid of:
http://i.imgur.com/Ecdxdtq.png
So yeah, that's my issue. Ideally I would like a 5px gap from the edge of the div to the top of the text, so if there is anyway to do that please let me know! Thanks so much for your help!
You might try the following.
If your code looks similar to this:
<p>Some text with <span class="captionCSS">highlighted text</span>.</p>
apply the following CSS rules:
p {
background-color: gray;
padding: 5px;
}
.captionCSS {
max-width:70%;
padding: 0 5px;
background-color:#aef7f8;
display: inline-block;
line-height: 1.00;
}
If you set display: inline-block to the caption wrapper, then the line height value will have some effect.
line-height: 1.00 forces the line height to be the same size as the font-size for the element. If you set the value to be less than 1, you will get a tighter fit but you may also clip ascenders and descenders of certain characters depending on the font.
See demo at: http://jsfiddle.net/audetwebdesign/2cyaF/
Without the HTML I can't be sure, but my first guess is that the text has a parent block level element that already has styling rules. (ex: <hX> or <p>)
You can clear those styles through css by doing something like this:
h1,h2,h3,p{
padding:0;
margin:0;
}
Here are some example cases using your style: http://jsfiddle.net/JTrWL/
I have 2 columns, floated one to each side, and I'd like to use a 1px width line separator, that goes from top to bottom of the longest column.
Id rather stay away of TABLE layouts, and I dont know which one will be the longest column, or how long will it be.
How could I do this with just css?
http://jsfiddle.net/AhfXc/2/
Something like this
.colright{
float: right;
border-left: 1px solid gray;
left: -1px;
position:relative;
}
http://jsfiddle.net/AhfXc/18/
You could fake it by putting a parent div around both and giving the parent a background image which would be a 200px wide, 1px high image with the a 1px black/gray dot in the middle.
This is possible with CSS. Here's my version of your example: http://jsfiddle.net/AhfXc/15/
Basically, just make the separator be absolutely positioned within the parent container (make the parent position relative so this works). Then attach the child to the top and bottom with top: 0 and bottom: 0. You could set the separator background to be the colour you want, but I've used a border style since you could easily apply dashed/dotted style if you want to.
This does only works if the columns have a known absolute or relative width because the separator's horizontal position is not directly affected by them, but if this is the case, it's a fairly simple solution.
I want to get rid of the space below my header logo in Garland.
I know the header is 80 pixels tall, but when I try changing that value it messes up other things.
I want to reduce the dark colored section below my logo (which is empty) by 20 pixels, and also get rid of the lighter colored section that appears just above the main column (and is about 20 pixels tall).
You can see my site on http://www.energyjustice.net.
Remove the background css properties on the "right corner" and "left corner" divs. Next, remove just the url section in the background property in the "squeeze" div.
Add this to the "squeeze" div:
margin-top: 45px;
Replace the padding in the "left-corner" div with this:
padding: 0px 25px 5em 35px;
Now, you can lower the pixels in the height property of the "header" div to bring everything up. Finally, you'll need to shrink the red background image that appears in the "wrapper" div with a simple paint program so that it doesn't clash with the rest of the content.
*Or if you want a quick and dirty fix, change the background property in the "wrapper" div to
background: #FBF9F2 url(body.png) repeat-x 2% -1.4%;
Have a look at this page. The images on the right should be centered within their divs. But if you look closely, there's a small border of around 3 pixels at the top. And if you disable the overflow: hidden (through firebug or the IE8 equivalent), it sticks out the bottom.
The HTML is this:
<div class="small">
<img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
<img src="/images/photos/View.jpg" alt="View" />
</div>
And the CSS, this:
div.small
{
width:100px;
height:100px;
line-height:100px;
text-align:center;
overflow:hidden;
margin:5px;
background-color: #C0C0C0;
float:left;
}
div.small img
{
vertical-align: middle;
max-width:100px;
max-height:100px;
display: inline;
}
What is causing this mysterious gap? I've checked margins and padding, and they don't seem to be the problem.
NB: I'm not completely sure this explanation is correct, but it seems reasonable to me.
First, let's see what the spec has to say on leading and half-leading:
Since the value of 'line-height' may be different from the height of the content area there may be space above and below rendered glyphs. The difference between the content height and the used value of 'line-height' is called the leading. Half the leading is called the half-leading.
User agents center glyphs vertically in an inline box, adding half-leading on the top and bottom. For example, if a piece of text is '12px' high and the 'line-height' value is '14px', 2pxs of extra space should be added: 1px above and 1px below the letters. (This applies to empty boxes as well, as if the empty box contained an infinitely narrow letter.)
So far, so good. So any line boxes within a div.small that have a height less than the div.small's line-height will be vertically centered with the div.small. Now let's look at the vertical-align property, specifically the middle value:
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
Note that this is not necessarily the center of the line box! The exact position will change with your choice of font face and size. You can verify this by zooming the text larger and smaller: the size of the gap changes.
As you found, setting font-size: 0 removes the gap entirely. As the font now has no height, the line box gets a leading and half-leading of 50px, with the baseline centered vertically. To render the vertical-align: middle image, the browser sets its midpoint at that baseline, plus the x-height of the font, which is now zero. This gives a vertically-centered image.
Turns out, setting font-size:0; on the div fixes the problem. However, it still doesn't explain the gap. Anyone know what causes the gap?
I cant explain entirely what is happening but after dealing with same problem, it appears it had something to do with the way I was declaring font property in css, e.g.
font:11px/1.35em Verdana, Arial, Helvetica, sans-serif;
= bad for tables apparently. -- I removed that declaration and instead used font-size:11px, line-height:px, font-family, etc, and it fixed the gap!