I am trying to make responsive design with CSS. Everything works great, with one problem: I can not put few divs with text in the needed location. It is hard to understand what I mean, so here is a fiddle.
As you see a text Filename Some descr is shown in the bottom and I want it to appear inside of the ligth-grey box.
<div class="OD-grid">
<span class="OD-template">
<span class="OD-template-folder">Folder</span>
</span>
<span class="OD-template">
<span class="OD-template-file">
<img src="public/img/image.png"/>
<span class="OD-template-info">
<div> Filename</div>
<div> Some descr</div>
</span>
</span>
</span>
</div>
.OD-grid > .OD-template{
display: block;
float: left;
height: 90px;
width: 33.333333%; // this should be responsive. 50%, 25%, 33.33333%
}
.OD-template-folder{
display: block;
margin: 5px;
cursor: pointer;
height: 70px;
background-color: #9FB9CA;
padding: 10px 0 0 10px;
background: #0072c6;
color: white;
font-size: 17px;
}
.OD-template-file {
display: block;
margin: 5px;
cursor: pointer;
height: 80px;
background-color: #eaecee;
}
.OD-template-file > img{
padding: 16px;
width: 48px;
height: 48px;
background: #b1b1b1;
}
in such a way that if I change the line before // this should be responsive. 50%, 25%, 33.33333% to any of these numbers, it should work properly.
Give the .OD-template-info class the style display:inline-block This shall make the text go inside the light grey area
Demo: jsFiddle
You can add float: left style to .OD-template-file > img and .OD-template-file > .OD-template-info.
I dont now how did you decide to use that labels in that way, but you could add float:left; to .OD-template-file > img
I have updated your fiddle.
I used inline-table and tabledisplays so that their widths are relative to its content.
Having vertical-align:top makes the text align to top, similar to the other ones.
.OD-template-info {
display: inline-table;
vertical-align: top;
}
.OD-template-info > * {
display: table;
}
Related
I'm using rickshaw and have a graph hover/annotation where a colour swatch (defined using a <span> is overlapping with text within the <div> that they're both contained in.
Here's my HTML:
<div class="detail" style="left:250px">
<div class="item active" style="top: 200px">
<span style="background-color: #30c020" class="detail_swatch"></span>
Very very very very very long label: 67<br/>
<span style="color:#A0A0A0">Wed, 12 Feb 2014 18:51:01 GMT</span>
</div>
</div>
and here's my CSS:
.detail {
position: absolute;
}
.detail .item {
position: absolute;
padding: 0.25em;
font-size: 12px;
font-family: Arial, sans-serif;
color: white;
white-space: nowrap;
}
.detail .item.active {
opacity: 1;
background: rgba(0, 0, 0, 0.8);
}
.detail_swatch {
display: inline-block;
float: right;
height: 10px;
margin: 0 4px 10px 10px;
width: 10px;
}
The detail_swatch correctly displays in the upper right hand corner, but will overlap the very very ... long label. Most solutions I've read to this problem involve changing the position statement of the containing div. That's not an option.
Is there any way I can ensure the detail_swatch does not overlap the text, and instead expands the div they're contained in (horizontally)?
This code is available on JSFiddle here, which also displays the problem.
You can add a padding-left: 15px; to the .detail .item.active {} to ensure that the item will not be overlapped by text. Then I made the .detail_swatch to be positioned absolute instead of float: right; so it overlaps the padding I added.
Here is the changed css:
.detail .item.active {
opacity: 1;
background: rgba(0, 0, 0, 0.8);
padding-right: 15px;
}
.detail_swatch {
display: inline-block;
position: absolute;
right: 2px;
height: 10px;
margin: 0 4px 10px 10px;
width: 10px;
}
Finally, a fiddle: Demo
Fiddle with very very long text: Demo
If you want the element at a fixed width you could use text-overflow: ellipsis
jsfiddle
.detail .text {
display: inline-block;
max-width: 90%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
The root cause of the issue is that span is an inline elemenent, it is meant to be shown inline. You want the span containing the date to behave like a block-level element, so your choice of element is wrong.
The solution is simple; use a divs instead of span to contain the date and remove the br.
I have a similar HTML structure like this Fiddle: http://jsfiddle.net/hAMmK/3/
The HTML structure:
<span class="all">
<span class="group-1">
<span class="a">A</span>
<span class="b"><input type="text" placeholder="b" /></span>
</span>
<span class="group-2">
<span class="c">C</span>
<span class="d">D</span>
</span> </span>
The current result with the css is
but my desired result would be
This result should be responsive, I mean, the width for the input text should be the maximum with the correct current width of the device/browser. Furthermore, I need compatibility with the most common browsers (as desktop as mobile/tablet).
What is the best way to solve this?
Use CSS3 Calc: Running Demo
input[type="text"]{
width: calc(100% - 100px);
}
Not (yet) supported everywhere, though, and you need to know the width to subtract.
If your buttons are static, ie you know the width/number of the left/right span's then you could use floats. It's gives a smoother responsive feel, but uses negitive margins which sometimes aren't that nice.
I changed the CSS to:
.group-1 {
width: 20px;
float: left;
margin-top: 6px;
}
.group-2 {
margin-left: 30px;
margin-right: 70px;
}
.group-3 {
width: 60px;
float: right;
margin-top: -20px;
}
Have a look at:
http://jsfiddle.net/hAMmK/16/
Like I said, it will only work if you can fix your left/right width's but seems to give a clean responsive feel.
As an alternative to css3 style calc if you need to support other browsers here is another solution.
If A is a label and C and D are buttons (as I guess), you can use width 100% in the input field and float it left, then you have to display block its parent (if it is an span as in that case) and add a margin-right the sime size than your buttons. The margin will collapse because the content is floated and the buttons will appear at the right side of your input field.
You could then do the same for the label if you know its size or you can better use a table to allow changing the label text (maybe for internationalization).
You can see it applied to your example:
http://jsfiddle.net/cTd2e/
/*Styles for position here*/
.all{
line-height: 22px;
}
table {
width: 100%;
float: left;
}
.second-cell input{
width: 100%;
float: left;
}
.b {
display: block;
margin-right: 130px;
}
td.first-cell {
white-space: nowrap;
}
td.second-cell {
width: 100%;
}
.group-2{
vertical-align: middle;
margin-left: 10px;
}
Also if the buttons contain text then you can use a table inside a table to have the input field 100% and the rest auto.
I am not aware if there is a more modern compatible way of doing that, it would be great!
Change the widths to use a percentage.
.a {
padding: 3px 7px;
background-color: LightBlue;
border: 2px solid CornflowerBlue;
border-radius: 5px;
color: SteelBlue;
width: 10%;
}
.c {
padding: 3px 7px;
background-color: Moccasin;
border: 2px solid BurlyWood;
border-radius: 5px;
color: DarkKhaki;
width: 10%;
}
.d {
padding: 3px 7px;
background-color: LightSalmon;
border: 2px solid Brown;
border-radius: 5px;
color: IndianRed;
width: 10%;
}
input{
width: 70%;
}
JS Fiddle: http://jsfiddle.net/hAMmK/4/
What is the best way to vertically center the text in my blue box?
markup:
<div class="btn-blue">
<span class="icon"></span>
Some awesome text here
</div>
and the styles:
.btn-blue {
background-color: #446598;
color: #fff;
display: inline-block;
padding: 0 20px 0 0;
line-height: 0;
}
.btn-blue .icon {
width: 50px;
height: 50px;
display: inline-block;
background-color: #00356b;
margin-right: 10px;
}
Here is the fiddle
http://jsfiddle.net/fSa6r/
Thanks.
Add line-height: 50px; to the .btn-blue class and
vertical-align: middle; to the icon class
FIDDLE
When only one line of text is needed, I find that setting line-height to the height of the box is the easiest way to vertically center text.
There are lots of ways to vertically align text, which you can check out here: http://www.vanseodesign.com/css/vertical-centering/
My personal favourite is using CSS tables (not html tables):
html:
<div id="parent">
<div id="child">Content here</div>
</div>
css:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
This is another method to show a link as a button with icon. You could to improve this code using an sprite instead two separated images:
a.mybutton {
padding: 3px 0px 3px 30px;
color: #c00;
}
a.mybutton:link,
a.mybutton:visited,
a.mybutton:active {
background: #fff url("https://dl.dropboxusercontent.com/u/59816767/assets/map-pin_off.png") left center no-repeat;
}
a.mybutton:hover { background: #fff url("https://dl.dropboxusercontent.com/u/59816767/assets/map-pin_on.png") left center no-repeat; }
Here is the: fiddle
I have this small piece here - the text has text-indent So it will not be seen and then only thing that should be seen is the span with the image (size 24*27).
Firefox sees the <a> in the size of 24*27 (as I wanted)
but chrome calculates it to 58*24 (much wider).
Getting the text itself out solves the problem (but I want to leave the text there).
When I add to the text the display:none property then it works good but I wish not to do that.
What is the mistake? Why does it calculate it differently and how do I solve it?
I have this piece of HTML:
<li class="hideText">
<a id="create" href="#">
<span class="img"></span>
<span class="text">Create</span>
</a>
</li>
General CSS is:
a{
display: block;
height: 24px;
}
span.img {
background: none repeat scroll 0 0 red;
display: block;
float: left;
height: 24px;
width: 27px;
}
#main #sidebar #createNavigation ul li.hideText span.text {
display: block;
text-indent: -9999px;
}
I agree with #ptreik - it is the use of display: block that is causing your problems.
You can change your CSS to the following and it will work:
a{
/* display: block; remove this */
height: 24px;
}
span.img {
background: none repeat scroll 0 0 red;
/* display: block; remove this as `float: left` does this for you */
float: left;
height: 24px;
width: 27px;
}
#main #sidebar #createNavigation ul li.hideText span.text {
/* display: block; remove this */
float: left; /* add this */
text-indent: -9999px;
}
I have this
<div class="iconFriends"></div>
<div class="iconFavorite"></div>
<div class="iconPM"></div>
<div class="iconShield"></div>
and the css for the icons class looks all similiar to this:
.iconFriends{
background: url(../images/icons/friends_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
}
Now the results is that there is like a <br> when I do this. But if i remove the div and make a normal <img src="..."> It shows fine. How can i fix this?
set your divs to have display:inline-block or better yet remove the divs and apply the styling to the a tags directly (again with display:inline-block)
html
css
.iconFriends{
background: url(../images/icons/friends_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
display:inline-block;
}
try giving them all a float:left
In your CSS:
.iconFriends{
background: url(../images/icons/friends_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
float: left /* or right, depending on the desired outcome */
}
Option 1: replace the <div> with a <span>
Option 2: set the <div> to display: inline;. Its default display property value is block, which is why each one is on its own line.
.iconFriends {
display: inline;
...
I would suggest reversing the order of your elements, as such:
<div class="icon iconFriends"></div>
Note the extra icon class on the div.
Then use this for your CSS:
.icon a
{
display: block;
width: 16px;
height: 16px;
}
.iconFriends
{
background: url(../images/icons/friends_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
float: left;
}
Adding float: left; will put them all on the same line. Setting display: block; on the a will allow you to set the width and height (making the entire element clickable).