The grey border shouldn't be visible, it should be covered by the black border and I don't understand why it won't... here's the CSS code:
#portrait{
width:120px;
height:100px;
top:20px;
border: solid black 1px;
margin: 0px;
padding: 0px;
cursor:pointer;
}
#prof_picture{
width: inherit;
height: inherit;
border: none;
}
HTML (inside a table):
<td id="portrait">
<img id="prof_picture"></img>
</td>
and javascript
$("#prof_picture").attr('src',"profile/loading.gif");
I had to make the DOM inherit part of the attributes because when using that javascript line the image would assume its natural width and height and I wanted it just to fit the portrait. When I did this, the strange border appeared. Do you know why?
Add font-size: 0; to #portrait{}
Try setting your image to become a block element:
#prof_picture { display:block; }
Alternatively you could set it to align to the bottom (will work only if its an inline (or inline-block) element), although i think there may be cases or environments where this could produce unwanted results.
#prof_picture { vertical-align: bottom; }
Images are, by default (unless specified otherwise), inline elements. Most browsers will reserve some extra space here, but you could also counter this by setting the parent's line-height to zero.
#portrait{
line-height: 0;
}
Setting line-height: 0;, font-size: 0; or display: inline; on #profile Fixes it in the fiddle http://jsfiddle.net/CyV7j/6/
There is 4px of extra space added around the img element because of the way inline elements (line an img) are rendered inside of a table row.
Please consider styling with classes instead of ids. And restricting the use of tables to tabular data and not for the layout of photos.
I suggest you get rid of the border: none; by #prof_picture. You can also try to write the border on #portrait li this
border: 1px solid black;
As it is the right way to write a border.
If you are using certain browsers.... you need to set this in the css:
img{
outline:none;
}
Related
http://jsfiddle.net/dad4avvj/1/
Everytime I try to align it by doing inline-block and text-align:center it throws the numbers class out of position and looks wrong.
These circles are animated so they fill up over the course of a few seconds. I also need to add text under each one and equally pad them out within their container. Only problem is on the site I wish to implement it, it has a max-width of 900px;
How can I centralise this without messing up the rest of the text?
Give text-align: left; to .numbers and text-align:center; to .bar and remove float:left from .radial-progress will solved your issue.
.numbers {
text-align: left;
}
Check Fiddle Here.
Hope it helps.
You also have float:left applied as well as inline-block.
If you remove that and apply text-align:center to the parent. it centers then just fine.
JSfiddle Demo
#bar {
width: 100%;
background: black;
height: 300px;
margin: auto;
text-align: center;
}
.radial-progress {
display:inline-block;
/* float:left; */
}
I have a div that users input text in it. But I want to increase it's width according to it's text, until a max of 50% of the screen. My CSS code:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
Result:
There's a lot of space after the "555" message, I want this size only if the user inputs some text like:
So, how can I increase the div's width dinamically, depending on the text size?
There are many ways to achieve this, but IMHO the cleanest is the following.
Your problem is that the boxes are "greedy" and will try to expand to the available width.
To prevent this, you can:
Make it "float: left;"
But also "clear: left;" to prevent additional "left floating" elements to use the available space on the right.
The CSS becomes:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
border-radius: 2px;
border:1px solid #ffdd7c;
float: left;
clear: left;
}
I provided full code and additional explanation (on mouseover) on the Liveweave here: http://liveweave.com/DFCZFj
Try changing display type of the div to table.
Example Here
.messages {
display: table;
max-width: 50%;
min-width: 150px;
/* other declarations omitted due to brevity */
}
Just add display:inline;. You can also remove the min width property, otherwise if the text is smaller, you will still have that gap.
Block elements (div's default display type) will attempt to take up the maximum horizontal space of the container. Imagine an implicit width:100% whenever you see them. inline-block will create block level elements in which the next element will attempt to render horizontally adjacent (provided there is enough room). This is what you want to use (display: table will work in this solution as well, but it has its own idiosyncrasies. I avoid them.
So your solution requires three parts:
First, you need to specify that the rows will be no larger than 50% of the available area. You will do this with an outer frame:
.frame {
max-width:50%;
}
Next, the messages themselves should each be given space entire row(s) at a time. So we'll use an undecorated div tag around each message.
Finally, you will use display: inline-block for your innermost messages elements. Since they are the only child of their parent tag, you won't have to worry about elements winding around on one another. By using the inline-block, width is respected and this gives us a great place to apply the background color.
.messages {
display: inline-block;
min-width: 150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
Just as a reference, one would expect your markup will look like the following:
<div class="frame">
<div><div class="messages">2014</div></div>
<div><div class="messages">2014</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555
</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra
text
</div></div>
</div>
I think you'll find this gives you the intended effect. By the way, this is a general solution -- but if you choose a min-width that is larger than 50%, you will ensure that two siblings of type inline-block will be too wide for a line. If you do this, then you can dispense with the extra div in the markup.
This is an age old question, although I wasn't able to find a solution that suited me.
Given a DIV inside a table cell (TD), I want to fill the DIV's height to fit the TD
+-----------+
| TD |
|+---------+|
|| DIV ||
|+---------+|
| |
+-----------+
Only gotchas are:
I don't want to set the height of the parent TD
I want to avoid using Javascript (prefer a CSS only solution)
Keep the resizable nature of the contenteditable DIV
Bonus: get it to work in IE8+ (cross browser solution)
Bonus: use display:flex; - I couldn't work this out, but looks like it should do the trick.
Too much to ask?
Example:
Get the "foo" DIV, to fill 100% height of their parent TD. I got something close to working, but having padding on the DIV element, throws out the borders (using Opera).
/* My Attempt: close, but the padding throws out the borders */
div{
display:inline-block;
height:100%;
width:100%;
}
http://jsfiddle.net/nickg1/g5cpQ/5/
Thanks!
yes, as per you terms and conditions, display:table is the best solution for you.
Add css like this :
div{
display:table;
height: 100%;
border:1px solid red;
}
Check following link for
LIVE DEMO
Try the following:
table {
height: 1px;
}
td {
vertical-align: top;
height: 100%;
}
div{
border:1px solid red;
padding: 2px 4px;
box-sizing: border-box;
}
/* My Attempt: close, but the padding throws out the borders */
div{
display:block;
height: 100%;
}
See demo: http://jsfiddle.net/audetwebdesign/AkjND/
The trick is to specify a height on the table, any small value will do the trick.
If you want to apply vertical padding to the inner div, you need to use box-sizing: border-box, which may work as far back as IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I have an image that when rolled over reveals some lines of text, white on a red background. I would like there to be a break in the strips for each break in the line of text, like the image linked below.
http://imgur.com/ElmaEom
However, all I've gotten to so far, is making the text appear in one single large red block. I would like the text to know where to break if it's too big for 80% of the image, and appear on a new line with a new red strip behind it.
Here's a fiddle of what I have so far.
http://jsfiddle.net/mAU3d/
.thumb {
position: relative;
float: left;
}
.text, .text-js {
font-family: 'Montserrat', sans-serif;
font-size: 1.6em;
line-height: 1.6em;
display: none;
position: absolute;
top: 15px !important;
left: 0px;
text-align: left;
background: #999;
background-color: #F63146;
width:80%;
padding: 1%;
display: inline;
color: #FFF;
text-transform: uppercase;
}
Sorry if the explanation is unclear, thanks in advance for any help.
However, all I've gotten to so far, is making the text appear in one single large red block.
That’s how block elements are rendered. (Your try to use display:inline is hindered by the use of absolute positioning, which automatically makes an element block.)
But you have an h2 element inside the div – so make that inline. Sadly, you can not get padding on all sides of broken lines in an inline element – but if you just want a background-color for effect, you can fake that using a box-shadow.
.text-js h2 {
display:inline;
background: #F63146;
box-shadow:-5px 0 #F63146, 5px 0 #F63146;
}
http://jsfiddle.net/mAU3d/5/
The easiest way to achieve this is to set the h2 display to inline. Then remove the background from the .text-js and add it to the h2. I also increased line-height to add some space between lines.
.text-js h2 {
display: inline;
background: #F63146;
line-height: 1.4em;
}
Here's the updated fiddle: http://jsfiddle.net/mAU3d/10/
I don't think it is necessary to use any fake box-shadow (EDIT: box-shadow is actually useful, see the comments), you just need to style the text itself (i.e. using a span) rather than the block containing it (which is the h2):
http://jsfiddle.net/mastazi/M6APy/
<h2 class="text"><span class="break">Text should break in to new strips</span></h2>
.break{
background-color: #F63146;
line-height: 1.6em;
}
Look at my code here.
You need to resize Result panel so that you can view at least two block inline. If you click on "More details" link then it will show details but it will shift next rows block also.
Any suggestion why this it is showing like this though I have used clear:both.
.reviewimg_blk {
border: 1px solid #9B9B9B;
float: left;
margin-bottom: 15px;
margin-right: 15px;
margin-top: 15px;
padding: 5px 5px 5px 10px;
position: relative;
width: 395px;
}
That's a common problem with floats.
Use display: inline-block; vertical-align: top; instead of float:left; if you don't need IE7 support.
See https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ for a cross-browser solution.
This is happening because of position:relative. Position:relative keeps div's or blocks in a relation so the below block was moving down. Use instead position:absolute at the places related to that dropdown part.
That is because your 1st itemStyle div has more content so it is taking more height than other divs.
So add <div class="clear"> </div> after every two itemStyle divs or fix the min-height to the itemStyle div.
I have added clear class after every two itemStyle divs in demo.
DEMO
..Live demo
Hi now used to Even and odd rules in css
.itemStyle:nth-child(odd) {
clear:left;
float:left;
}
more info even or odd rules