An expanded question on :
pure CSS multiple stacked position sticky?
is there a way to calculate the top position of the followup header in order to stack the headers as per the the example. I do not know the count of the amount of headers there will be so i cannot say:
.headers {position:sticky}
.header-1 {top:0;}
.header-2 {top:1em}
.header-3 {top:2em}
.header-4 {top:3em}
but would need to calculate the difference
HTML:
<div class="container">
<div class="headers header-1">header 1<div>
<div class="content">This is the content<div>
<div class="headers header-2">header 2<div>
<div class="content">This is the content<div>
<div class="headers header-3">header 3<div>
<div class="content">This is the content<div>
<div class="headers header-4">header 4<div>
<div class="content">This is the content<div>
I would need to somehow calculate the :nth-child or :type-of or so method as the list grows. not sure if it could be done in css but would like to know if it is possible
If the question is Can I use the n of nth-child or nth-of-type to calculate attributes automatically?
The answer is No, you can't, at least for now.
But there are several workarounds:
This one is not very elegant, but it's actually the most used one so far.
.bars span {
display: block;
height: 1em;
margin-bottom: 1em;
background-color: salmon;
}
.bars span:nth-child(1) {
width: 1em;
}
.bars span:nth-child(2) {
width: 2em;
}
.bars span:nth-child(3) {
width: 3em;
}
.bars span:nth-child(4) {
width: 4em;
}
// ... and many more
<div class="bars">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
And if you're using precompiled css such as scss, it can be shortened as:
#for $i from 1 through 20 {
.bars span:nth-child(#{$i}) {
width: #{$i}em;
}
}
The other one is using css variable. But you have to assign the variables manually:
.bars span {
display: block;
height: 1em;
margin-bottom: 1em;
background-color: salmon;
}
.bars span {
width: calc(var(--length) * 1em);
}
<div class="bars">
<span style="--length: 1;"></span>
<span style="--length: 2;"></span>
<span style="--length: 3;"></span>
<span style="--length: 4;"></span>
</div>
Related
This is code for the div
width: 110px;
height: 10px;
background: #ffff;
border-radius: 30px;
margin-top: -10px;
and this is how it displays it
But if display is set as list-item it shows up,any other display won't work
I'm not sure what i messed up,and why height shows 0
height only works on block box, and display: list-item uses block box by default. I guess your original css may contain inline-type display and cause height not working. Here is an example to show the results in different cases:
.bar {
width: 110px;
height: 10px;
background: #ffff;
border-radius: 30px;
margin-top: -10px;
}
.display-block {
display: block;
}
.display-inline {
display: inline;
}
.display-list-item {
display: list-item;
}
<body style="background: #999;padding: 10px">
<div>Div (default display is "block")</div>
<div class="bar"></div>
<div>Span (default display is "inline")</div>
<span class="bar"></span>
<div>With "inline" display</div>
<div class="bar display-inline"></div>
<div>With "block" display</div>
<div class="bar display-block"></div>
<div>With "list-item" display</div>
<div class="bar display-list-item"></div>
</body>
Ref: MDN - Introduction to the CSS basic box model - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content_area
Another possible case is that there are other display, height or max-height settings in the current css hierarchy and override the original ones. You may check the css applied to the target div is what you want.
I am working on a react project, and I list some operations ( objects ) in a Table, everything looks fine but the client for something I found very weird and hard, here is how it looks :
But that is not how he wanted the datatable dates looks, he wants something like this :
Is there a CSS property that can make that possible ?
Any help would be much appreciated.
there is too much code to write, but those parts are enough :
HTML :
<div class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">04/07/2018</span>
</div>
SASS :
.co-operations-contrat {
&__date {
a {
margin-right: 5px;
display: inline-block;
cursor: pointer;
+.co-operations-contrat__date-text {
margin-left: 0;
}
}
&-text {
margin-left: 25px;
font-family: "Poppins", monospace;
}
}
}
Like others have said monospace for the dates would be best. If you can't change the font are you able to wrap each part of the date?
If so what you could do is something like this;
https://jsfiddle.net/8mLwot25/3/
Basically, I've set a width on each span and aligned them with flex on the parent container. (You could also float each span). But by doing this would align the items in a better way.
It's not perfect but its a solution.
.container {
display: flex;
}
.container span {
text-align: center;
width: 20px;
}
.container span:last-child {
width: auto;
}
<div class="container">
<span>01</span>/
<span>04</span>/
<span>2019</span>
</div>
<div class="container">
<span>01</span>/
<span>05</span>/
<span>2018</span>
</div>
<div class="container">
<span>13</span>/
<span>04</span>/
<span>2019</span>
</div>
Maybe letter-spacing can help you with that. I'm not sure if you can achieve a pixel perfect result with that but this property may be usefull.
The issue is related to the Poppins font you are using for these dates. The font is not monospaced (it is sans-serif only).
If using a regular monospace font, the issue no longer appears
See demo below
.co-operations-contrat__date a {
margin-right: 5px;
display: inline-block;
cursor: pointer;
}
.co-operations-contrat__date .co-operations-contrat__date-text {
margin-left: 0;
}
.co-operations-contrat__date-text {
margin-left: 25px;
font-family: "Poppins", monospace;
}
#no-poppins .co-operations-contrat__date-text {
margin-left: 25px;
font-family: monospace;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<h2>Poppins In</h2>
<div class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">30/06/2018</span><br/>
<span class="co-operations-contrat__date-text">31/03/2018</span><br/>
<span class="co-operations-contrat__date-text">04/07/2018</span><br/>
<span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>
<h2>Poppins Out</h2>
<div id="no-poppins" class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">30/06/2018</span><br/>
<span class="co-operations-contrat__date-text">31/03/2018</span><br/>
<span class="co-operations-contrat__date-text">04/07/2018</span><br/>
<span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>
<h1>Other workarounds include </h1>
<h2>Usign <TT></h2>
<div class="co-operations-contrat__date">
<tt>30/06/2018</tt><br/>
<tt>31/03/2018</tt><br/>
<tt>04/07/2018</tt><br/>
<tt>31/01/2011</tt><br/>
</div>
<h2>Using <PRE></h2>
<div class="co-operations-contrat__date">
<span>30/06/2018</pre>
<pre>31/03/2018</pre>
<pre>04/07/2018</pre>
<pre>31/01/2011</pre>
</div>
Of course, you can choose any monospaced font of your choosing, I just went the browser's defaults for the demo.
I am designing a simple two-column layout with CSS Grid; the grid areas are named Cell1 and Cell2. In the left column (Cell1) I want a list of hyperlinks; when a hyperlink is clicked, I want the content to open in the right column (Cell2).
I think I could use bookmarks to content already loaded into Cell2, but I prefer a way to display content in the right cell when a link is clicked, without using bookmarks.
Using a CSS Grid layout, is there any way to designate a cell where content should go when a hyperlink is clicked, other than the cell that contains the hyperlinks -- using bookmarks or anything else?
Thanks very much for any info.
Yes, this is possible, but is much easier to do if you are permitted to use JavaScript/jQuery. Here is an example of using HTML and CSS only to accomplish what you need:
a {
text-decoration: none;
color: #333;
}
.tabs {
position: relative;
clear: both;
}
.tabs .tab {
float: left;
margin-right: 10px;
}
.content {
position: absolute;
background-color: white;
width: 100%;
left: 0px;
}
.tabs .tab:nth-of-type(1) .content {
z-index: 1;
}
.tab:target a {
font-weight: bold;
}
.tab:target .content {
z-index: 1;
}
<div class="tabs">
<div class="tab" id="tab1">
Tab 1
<div class="content">Content of Tab1</div>
</div>
<div class="tab" id="tab2">
Tab 2
<div class="content">Content of Tab2</div>
</div>
<div class="tab" id="tab3">
Tab 3
<div class="content">Content of Tab3</div>
</div>
</div>
Lets say I have the following html:
<header class="header">
<div class="title">
<h1>Home</h1>
</div>
<div class="logo">
<img src="#" alt="Logo">
</div>
<div class="account">
<div class="options">
</div>
<div class="search">
</div>
</div>
</header>
And I have the following SCSS:
header {
height: 4.1rem;
div {
width: 33%;
float: left;
height: 4.1rem;
line-height: 4.1rem;
color: #fff;
&.title {
h1 {
font-weight: normal;
font-size: 3rem;
padding: 0;
margin: 0;
}
}
&.logo {
text-align: center;
}
&.account {
}
}
}
Now the problem that I have is that divs options and search are 33% percent of account which is logic as I have div {width: 33%}. I know I can select direct child elements with:
header {
> div {
}
}
But this doesn't help even if I put the > infront of all other classes. I also know I can say that the width should be 0 or what ever again in .account but I would like to prevent this.
Try this:
...
& > div {width: 33%;}
div {
float: left;
height: 4.1rem;
line-height: 4.1rem;
color: #fff;
...
Take out div width and apply it only on direct children. Leave rest as is.
Here is quick fiddle (remove .option and .search styles later, its only for visualisation).
Please edit your question and better explain what exactly you want to achieve.
Use the & with > inside the parent element like this:
.services {
& > div {
margin-bottom: 25px;
}
}
I am not certain I understand you. But I think you want a combination of direct children and child pseudo selectors, in pure CSS:
header > div:first-child {
}
Or, for the second div:
header > div:nth-child(2) {
}
You could also use the not selector:
header > div:not(.account) {
}
to exclude any unwanted div's.
I'm looking for the simplest way to break up a collection of inline-blocked divs without resorting to extra markup (such as br).
I started off naively thinking that the following would do the trick except that 'four' ends up on a line of its own as well which I don't really understand.
.inline {
display:inline-block;
}
.newline {
display:block;
}
<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>
I have tried solutions using :after/:before found here on Stackoverflow but these only work for me if my elements are inline instead of inline-block.
Regrettably I also need to support IE6!
Attempt with floats
This example below does not display properly in IE 6
.inline {
float: left;
width: 50px;
height: 50px;
background: #F00;
}
.newline {
clear: left;
}
<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>
The result in IE 6
For IE6 and other old browsers you need to add a clear line for example using this code:
<div class="inline">one</div>
<div class="inline">two</div>
<div class="visualClear"></div>
<div class="inline">three</div>
<div class="inline">four</div>
.inline {
float: left;
width: 50px;
height: 50px;
background: #F00;
}
.visualClear {
clear: both;
display: block;
}
I know that it isn´t very pretty but it will work for you.