I'm trying to create the following effect using CSS3 (targeting Chrome only). Essentially I want a numbered <ol> element which contains one radio button and one label. The aim is to get the list number, the radio & the label to all align in the center:
This is my markup:
<ol>
<li>
<div class="wrapper">
<div class="left">
<input type="radio" />
</div>
<div class="right">
<label>Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines</label>
</div>
</div>
</li>
</ol>
And the CSS I have so far:
.wrapper {
display: flex
}
.left {
width: 50px;
position: relative;
}
.right {
flex: 1;
}
input {
width: 16px;
height: 16px;
position: absolute;
top: 50%;
margin-top: -8px;
}
And a jsFiddle of the above.
I've tried using floats (which breaks the <ol> numbering), I've tried using wrapping divs and different display types (table/table-cell) and I've landed at my closest effort yet by using flex.
The problem is I still can't get the list number to line up with the radio buttons. It always aligns to the top of the <li> (along with some random whitespace which I can't figure out).
I'm open to using anything to create the desired effect shown in the image. Even Javascript/jQuery. But only if a pure CSS option is not possible.
Do you really need all those div's inside your li? if not, it's all a matter of vertical-align and setting the width of the elements inside.
You could rewrite your html to:
<ol>
<li>
<input type="radio" />
<label>Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines</label>
</li>
</ol>
and css to:
li input {
vertical-align: text-bottom;
display:inline-block;
width:5%;
}
li label {
vertical-align: middle;
display:inline-block;
width:90%;
}
Here is a demo fiddle
You can recreate the numbers as stylable elements and then align them wherever you want
ol {
counter-reset:li;
margin-left:0;
padding-left:0;
}
ol > li {
position:relative;
margin:0 0 6px 2em;
padding:4px 8px;
list-style:none;
}
ol > li:before {
content:counter(li);
counter-increment:li;
position: absolute;
top: 50%;
left : -2em;
width:2em;
height: 4em;
margin: -14px 8px 0 0; /* same as font-size */
padding: 4px;
text-align:center;
}
FIDDLE
This would work regardless of the content inside the LI's
Related
I'm working on the display portion of a calculator. I have a div, with two divs, each with text, inside it.
<div>
<div>I'm text</div>
<div>I'm text</div>
</div>
The user can use buttons to add text to the divs. I want the top div to be a maximum of two lines and vertically-aligned to the bottom. When it exceeds this length, the overflow should be out of the top and hidden. I.e. the overflow should show the bottom part of the excessive text, and hide the top part.
I have searched similar questions relating to hiding images or links and tried their solutions. These generally revolve around using the following properties: position, width, height, bottom, overflow, vertical-align, word-wrap. I've understood most of these, but haven't been able to get them to work. One solution I haven't been able to successfully attempt appears to try and use some combination of the above with an additional nested div.
At this point, I've got the height & width controlled. The top div will only display two lines of text. I also have the overflow working. When it's too long, it is hidden.
The problem is that the bottom is hidden, instead of the top.
This is what it looks like. Notice the twos aren't visible, they're hidden:
This is what I want. Notice the twos are visible:
Here's relevant HTML & CSS, and below that is the link to a codepen if you need more information:
HTML (trouble div is #memory):
<div id=calculator>
<div id=displaybox>
<div id=memory>
0
</div>
<div id=display>0</div>
</div>
</div>
CSS:
#calculator {
border-style: solid;
height: 325px;
width: 260px;
margin:auto;
margin-top:10px;
border-radius:8px;
background-color: #494949;
font-family: 'Audiowide';
}
#displaybox {
border-style:solid;
border-width:3px;
width:227.5px;
margin-left:12px;
margin-right:auto;
border-radius: 8px;
text-align:right;
margin-top:20px;
padding-right:12px;
padding-left:3px;
font-size:30px;
background-color:#D4D7A1;
height: 75px;
}
#memory {
font-size:15px;
padding-right:3px;
line-height: 15px;
margin-top:5px;
padding-left:12px;
color:#767676;
margin-bottom:-7px;
word-wrap: break-word;
height:30px;
width:207px;
overflow:hidden;
vertical-align: top !important;
}
Codepen: https://codepen.io/ethan-vernon/pen/WyQqzM"https://codepen.io/ethan-vernon/pen/WyQqzM
This change to the #memory block did it:
Added display: flex and flex-flow: column-reverse
#memory{
font-size: 15px;
padding-right: 3px;
line-height: 15px;
margin-top: 5px;
padding-left: 12px;
color: #767676;
margin-bottom: -7px;
word-wrap: break-word;
height: 30px;
width: 207px;
overflow: hidden;
display: flex;
flex-flow: column-reverse;
}
I have not found an answer yet still for CSS/HTML solution. However, I turned to jQuery/JavaScript and have solved my problem by calling the below function after each update to the #memory div.
function heightCheck(str) {
console.log(str.substr(1));
console.log('memory: ' + $("#memory").height());
while ($("#memory").height()>30) {
str=str.substr(1);
$("#memory").text(str);
console.log(str);
console.log($("#memory").height());
}
}
For example, I have a div :
<div>I am a square</div>
Inside style.css :
div:nth-child(1) {
height: 200px;
width: 200px;
border-radius:0;
background-color: pink;
color: #fff;
text-align: center;
}
The text-align: center property aligns the text in the center of a div, but the text remains on the top inside the square, I want to push the text to the bottom of a square. So it looks like in this diagram. How can I accomplish this without wrapping the text in any sort of tag?
__________________
| |
| |
| |
| |
| |
|_I am a square__|
If you really don't want to wrap your text
You can do this by setting the display of the block to be table-cell, and then vertical-align to bottom. This is the only way I can think of to align the text to the bottom of the div without wrapping it in another element. This will cause a slew of other problems with your div placement, though; and you will probably have to wrap the div anyway.
div {
height: 200px;
width: 200px;
border-radius:0;
background-color: pink;
color: #fff;
text-align: center;
/* Here is my addition */
display: table-cell;
vertical-align: bottom;
}
JsFiddle example.
If you wrapping your text is an option (AKA the right way)
You really should wrap your text. Aside from semantics, you can get a lot more flexibility in your styling options.
Once you do that, your div can be set to position: relative so that it can act as a container for the child, who will get the position: absolute style. Then you add bottom: 0 and voila! It's glued to the bottom.
This method is preferred as you can still style your div as you'd expect.
HTML:
<div>
<p>test</p>
</div>
<div>
<p>test</p>
</div>
CSS:
div {
height: 200px;
width: 200px;
border-radius:0;
background-color: pink;
color: #fff;
text-align: center;
margin : 0 3px 3px 0;
/* Make sure that it contains the child properly */
position: relative;
}
div p {
position : absolute;
bottom : 0;
}
Example
I'm creating a dropdown settings box, and inside it I want to be able to have dropdown submenus to group settings. The submenus should slide down, and to do so, I am using jQuery to slide down the div that contains them. However, the absolutely positioned toggles that I have appear immediately, despite the fact that they are outside the div, which is set to overflow: hidden, as can be seen in this image:
This is a sample from my html:
<div id="settings-content" class="hover-content">
<div class="setting-expandable">
Panels to display<span class="expand-button pointer">+</span>
<div class="hide expand-content">
<label class="pointer">YouTube - LinusTechTips
<input type="checkbox" class="display-none setting" data-setting="panel.yt.ltt"><span class="toggle"></span>
</label>
<br/>
<label class="pointer">YouTube - TechQuickie
<input type="checkbox" class="display-none setting" data-setting="panel.yt.tq"><span class="toggle"></span>
</label>
<br/>
<label class="pointer">YouTube - Channel Superfun
<input type="checkbox" class="display-none setting" data-setting="panel.yt.csf"><span class="toggle"></span>
</label>
<br/>
</div>
</div>
</div>
and my CSS:
.toggle {
height: 13px;
margin: 3px 0;
position: absolute;
right: 10px;
width: 27px;
}
.toggle::after {
background - color: red;
content: "";
height: 13px;
position: absolute;
right: 0;
width: 13px;
transition: 0.2s linear all;
}
.expand-content {
margin-left: 10px;
margin-top:3px;
overflow:hidden
}
.hover-content {
position: absolute;
width: 500px;
right: 15px;
background-color: inherit;
top: -15px;
border: 2px black solid;
border-radius: 14px;
padding: 5px;
display: block;
}
JS is essentially $("...").click(function(){ $("...").slideUp(); });
If I deliberately position them outside of the content area, and set overflow hidden on each thing in turn, it only hides when it affects the #settings-content container div.
I have made a fiddle for it here: http://jsfiddle.net/S4DSh/1/
I would greatly appreciate some guidance as to how I should fix this because it looks pretty weird at the moment.
Thanks in advance!
Set it's container to position:relative and overflow:hidden.
.setting-expandable {
position:relative;
overflow:hidden;
}
DEMO
You could also just add position:relative; to .expand-content but that looks like it moves the toggles a little bit.
Also see this answer it's basically the same question.
What you want to do is change the z-index for your divs.
You should put a lower z-index value on things you want to stay in the back and higher z-index values to what you want in the front. And correct me if I'm wrong but, a value of -1 would be behind the body. You can put any value like 999
#DivInTheBack{
z-index:12;
}
#DivInTheFront{
z-index:13;
}
You should take a look at the w3schools reference: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Does anyone have any tips on how to fix the below problem of the labels and text-areas being so unsymmetric? What's the best way to structure a form like this?
I was thinking of having one div floating left (with the labels) and another div with the text areas floating right, but I didn't quite manage to structure it correctly.
It was your idea, I just wrote it...
Fiddle
HTML Layout
<div>
<div class="left">
<span>Comment</span>
<span>Tags</span>
<span>Category List</span>
</div>
<div class="right">
<input type="text" />
<input type="text" />
<select></select>
</div>
</div>
CSS
body { background: #222; color: white; }
.left, .right { width: 50%; float: left; }
.left { text-align: right; }
.right { text-align: left; }
span, input, select { display: block; padding: 5px; margin: 5px; }
span { font-family: sans-serif; line-height: 20px; font-weight: bold; }
input { width: 200px; height: 30px; box-sizing:border-box; }
select { width: 200px; height: 30px; box-sizing:border-box; }
The best way is to use BootStrap framework styling issue. you can enter the website and learn more.. alternative way is to put the labels and the input fields (select fields also) in table and they will be organized.
The better to submit BootStrap otherwise use the simple way. and there is no floating issues and that's better!
If you want to use divs, then make them both float:left and immediately after put <div style="clear:both"></div>. Then they will be displayed correctly.
Personally I use tables for this though, like in Islam Attrash's answer.
Is there a CSS way to vertically align my div within the body element?
The thing is my div will have a different height each time, so its not constant.
These are the things I've tried but they dont work:
body { vertical-align: middle; }
#mainContent {
vertical-align: middle;
}
// Also this
body { margin-top: 20%; margin-bottom: 20%; }
I did it without table: (demo on dabblet.com)
The main trick in this demo is that in the normal flow of elements going from top to bottom, so the margin-top: auto is set to zero. However, for an absolutely positioned element acts the same distribution of free space, and similarly can be centered vertically at the specified top and bottom (does not work in IE7).
This trick will work with any sizes of div.
HTML:
<div></div>
CSS:
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
A common problem indeed. I have seen many people offering straight css solutions for this but they all require knowing the height of the element needing to be centered, so no help there.
I usually do it this way using jquery:
$(document).ready(function(){
site.resize();
$(window).resize(function(){
site.resize();
});
});
var site = {
resize: function(){
var new_margin = Math.ceil(($(window).height() - $('#mainContent').height()) / 2);
$('#mainContent').css('margin-top', new_margin + 'px');
}
};
Surprisingly (or not), the vertical-align tool actually works best for this job. Best of all, no Javascript is required.
In the following example, I am positioning the outer class in the middle of the body, and the inner class in the middle of the outer class.
Preview: http://jsfiddle.net/tLkSV/513/
HTML:
<div id="container">
<span></span><div class="outer">
<span></span><div class="inner">
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0; }
#container {
text-align: center;
height: 100%; }
span {
height: 100%;
vertical-align: middle;
display: inline-block; }
.outer {
width: 100px;
height: 200px;
padding: 0;
border: 1px solid #000;
vertical-align: middle;
display: inline-block; }
.inner {
background: red;
width: 30px;
height: 20px;
vertical-align: middle;
display: inline-block; }
Vertical align works by aligning the centers of elements that are next to each other. Applying vertical-align to a single element does absolutely nothing. If you add a second element that has no width but is the height of the container, your single element will move to vertically center with this no-width element, thus vertically centering it. The only requirements are that you set both elements to inline (or inline-block), and set their vertical-align attribute to vertical-align: middle.
Note: You may notice in my code below that my <span> tag and <div> tag are touching. Because they are both inline elements, a space will actually add a space between the no-width element and your div, so be sure to leave it out.
You can do it without using tables, and without adding extra elements:
<ul>
<li>One short item</li>
<li>Any real long text...</li>
<li>Another short item</li>
</ul>
And then the CSS:
ul {
list-style-type: none;
display: table-row;
}
li {
display: table-cell;
vertical-align: middle;
}
You can see it here
It would work with any other kind of hierarchy, including div, p, etc.
Honestly, my opinion is often that if you're doing vertical alignment you should still be using a table. I know it's often frowned upon, but it is still the simplest and cleanest way to vertically center something.
HTML
<table>
<tbody>
<tr>
<td>
<div>Your DIV here.</div>
</td>
</tr>
</tbody>
</table>
CSS
td {vertical-align: middle;}