I have a list of .message whose display is table-row. Some of those messages should have a red triangle over them, at the bottom center. The element containing the triangle can't be inside a cell of the .message.
It's easy to do when the .message display is block but I can't seem to be able to do it with a table-row. As you can see in my fiddle, all the triangles are at the same wrong position and the second cell doesn't extend to the whole row (it does if I remove the .opener element).
What am I missing ?
Fiddle for the tests (and clarity)
Hover the left cells with your mouse to get why I want to have table-cell elements. To be more precise I need the whole range of positioning and dimension advantages of table-cell elements (same height for both cells, for example, and the right cell must fill the remaining space of the row).
Compatibility needed : Firefox and Chrome
You can get this layout with flexbox
FIDDLE
CSS
#b {
width:100%;
list-style: none;
}
.m {
display: flex;
align-items: center;
align-content: center;
position: relative;
background: #789;
border-top: thin solid #ccc;
}
.u {
width: 100px;
float:left;
opacity:.999;
}
.u:before
{
content: '';
width: 100px;
height: 100%;
display: block;
position: absolute;
top:0;
z-index:-1;
}
.c {
overflow: hidden;
width: calc(100% - 100px);
}
.u:hover:before, .c:hover {
background: yellow;
}
.opener {
width: 16px;
text-align: center;
cursor: pointer;
color: red;
left:0;right:0;
bottom:0;
margin: auto;
z-index: 0;
position: absolute;
}
.opener:before {
content:'▼';
display: block;
}
The problem is that table-cell, table-row and similar table-display values cannot have any positioning applied to. Just as if you are creating a table and giving positions to the td and tr.
An ugly fix is to wrap it in a div whose display is set to block like this
Reference: position - CSS | MDN
Related
I am new to stackoverflow and have searched through some of the other answers and tried a lot of different things but can't seem to get it right.
I need to vertically align the 'Hide Message' button with the paragraph of text so that the button appears in the centered alongside the text (jsFiddle link below). The button also needs to align with another div on the page so it has to have:
position: fixed;
right: 50px;
The main problem I am having with some of the other solutions is that if you shrink the browser, it doesn't stay vertically aligned with the text:
http://jsfiddle.net/d3R6v/2/
I don't think position: fixed; is a way to go here, instead of using fixed you should be using absolute but before that assign position: relative; to the parent element and modify your #hideMessage as
#hideMessage {
display: inline-block;
padding: 5px 10px;
background-color: #555;
color: #fff;
cursor: pointer;
position: absolute;
right: 50px;
top: 50%;
margin-top: -15px; /* Negate 1/2 the total height of the button,
this value currently is approx */
}
Demo
The reason I insisted position: absolute; is because that it will align related to the parent element whereas using fixed is relative to the viewport.
For more information over positioning, you can refer my answer here
If you have dynamic text
Coming to more cleaner solution, it would be better if you use display: table; for the parent element, and display: table-cell; for the child elements, and for the parent element of the button i.e now display: table-cell;, you can use vertical-align: middle; to vertically align the button to the dynamic text on the left hand side and also on resize, the button won't overlap the text.
Demo 2
#parent {
background-color: #bbb;
color: #fff;
width: 100%;
padding: 10px;
display: table;
}
#text {
width: 80%;
display: table-cell;
}
#hideMessage {
display: table-cell;
color: #fff;
cursor: pointer;
vertical-align: middle;
text-align: center;
}
#hello {
background-color: #555;
padding: 5px 10px;
white-space: nowrap; /* Add if you want to prevent the
button to wrap on resize */
}
I am trying to add a table border for just the inner sections, I don't want the borders to be placed at the first and last cell.
So, I tried:
.grid > div:last-of-type {
border-right: none;
}
However, as you can see in the image, the last cell is 5px larger than the rest now, that is because it is trying to fill the empty space left behind when we removed the padding from it... How can I remove the padding, but keep its height the same as the others? maybe a way to make all of them stretch to fit? please bare in mind, I can't add a fixed height as the number of cells will change and their hight may vary.
I have also tried adding border-collapse:collapse; it stretched them (AWESOME!) but the middle cell is now slightly smaller than the other two.
Here is a JsFiddle: http://jsfiddle.net/ju76y/5/
(Added images to the fiddle)
.grid {
width: 100%;
overflow: hidden;
background-color: green;
display: table;
table-layout: fixed;
word-wrap: break-word;
text-align: center;
letter-spacing: 0px;
word-spacing: 0px;
}
.grid > div {
display: table-cell;
vertical-align: top;
border-right: 5px solid red;
}
.grid > div:last-of-type {
border-right: none;
}
Try adding this to the cell property:
box-sizing:border-box;
This will align the last div to align properly with others
.grid > div:last-child > div {
margin-top: -2px;
}
DEMO
same need to be applied for the first child also
.grid > div:first-child > div {
margin-top: -2px;
}
I am having an issue with positioning text inside a div. I want the image on the right top corner (which I was able to do) and the text kind of center the bottom text in the box.
This is an example of what I want to do: http://jsfiddle.net/Lucky500/Nq769/
I created a div .bottom_box and added:
.bottom_box {
position: relative;
bottom: -50px;
left: 50px;
}
Is there an easier or more correct way to do this?
Alright -
Added text-align:center to your and elements.
Set your outer_box position to relative.
Set the img value to absolute and positioned with 0.25 em top and right instead of margin.
http://jsfiddle.net/mr_mayers/Nq769/2/
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: .5em;
Position: relative;
}
.bottom_box {
position: relative;
bottom: -50px;
}
p {
color: blue;
text-align: center;
}
img {
position: absolute;
padding: 3px;
top: 0.25em;
right: 0.25em;
}
h1 {
text-align: center;
color: red;
}
You can achieve your layout as follows:
For this HTML:
<div class="outer_box">
<img src="http://placehold.it/100x50">
<div class="bottom_box">
<h1>$25 OFF</h1>
<p>$25 off your first cleaning!</p>
</div>
</div>
Try the following CSS:
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: 0.5em;
}
.bottom_box {
clear: both;
border: 1px dotted gray; /* for demo only, optional */
}
img {
float: right;
padding: 3px;
margin: 0 0 1em 1em;
}
p {
color: blue;
margin-left: 50px;
}
h1 {
color: red;
margin-left: 50px;
}
Since your image is floated, simply clear the .bottom-box.
Use margin-left on the child elements to get any white space.
See sample: http://jsfiddle.net/audetwebdesign/3SjRG/
You can use text-align: center if you are centering the p and h1 content, but I was not sure if you wanted ragged left or ragged right alignment on the text block;
You'd be better off using text-align:center and position: absolute
See example
There are some solutions.
An other way is to make the box relative and positioning the text and image inside absolute.
I would create a container div with a border for your box, then set the inner divs (one with your image and one with your text) to position absolute. then you can use top:0; right:0; for the picture on the right corner. then bottom:xx; and left:yy; for positioning the text div.
This is just a different method than you used. If it works, doesn't break in any situation, and is simple, then it's correct. Many ways to skin a cat in programming.
I'm currently in planning stage for a site, which needs to scroll horizontally.
The simplest solution I have to tackle this is to go in this direction, JSFiddle.
I'm not sure if this is the best option, as I will have to arrange each div individually i.e. left: 100% left: 200%;.
Is there a way around the divs, with a display: inline-block value auto wrapping to the viewport, so I don't have to arrange each div individually?
Removing the absolute positioning
What you need to do here is remove the float and absolute positioning from your dividers and simply add white-space: nowrap to your body. As your dividers are set to display as inline-block, these get affected by the white-space property.
body {
margin: 0; padding: 0;
white-space: nowrap;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
}
JSFiddle demo.
Removing the spaces between each block
Now that we've removed the floats and the positioning, you'll notice that there is a white space between each divider. If we refer to this CSS Tricks article, we can remove this by simply giving the body a font-size of 0, and giving each divider a font-size of what you're wanting the font size to be within those blocks:
body {
margin: 0; padding: 0;
white-space: nowrap;
font-size:0;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
font-size:16px;
}
Second JSFiddle demo.
http://jsfiddle.net/MsRCS/3/
You can remove the absolute positioning and use float instead.
body {
margin: 0; padding: 0;
width:300%;
}
.full {
width: 33.3%;
height: 100%;
display: inline-block;
float: left;
}
#screen-1 {
background: red;
}
#screen-2 {
background: blue;
}
#screen-3 {
background: yellow;
}
I have an unordered list that has a bit of content and a button. The columns (LIs) will not always be the same height, but I want the button to always be at the bottom. I'm using the display: table / display: table-cell trick to keep the LIs the same height, however I can't get the button to align correctly. I want the button at the bottom, but I also want it to behave like the content does. Meaning I want it centered and to change it's width as the browser is resized.
Here's a fiddle that demonstrates the issue.
http://jsfiddle.net/mattymess/BBuqY/
This is a snippet of code showing how I'm doing the equal height...
.rewards .rewards-chooser {
margin: 0;
border-top: 2px solid #f4f4f4;
border-bottom: 2px solid #f4f4f4;
display: table;
width: 100%;
position: relative;
}
.rewards .reward {
width: 25%;
border-left: 2px solid #f4f4f4;
list-style: none;
display: table-cell;
}
Change position: absolute; to position: relative; in .rewards .reward .redeem class like this:
.rewards .reward .redeem {
position: relative;
bottom: 0;
box-sizing: border-box;
}
Just to knowledge: Your button is relative to something (your container), and not absolute.
To set the buttons in the same line, you should to define a height for the container scope. Something like this:
.reward-description {
height: 200px;
}
I made a clean example for you. To see, click here (jsFiddle).