I want to add a vertical line between the green blocks in the following image. I am using :after to do that. However I do not want to display the line after the last block. Is there any trick to do that?
CSS:
.block{
width: 20px;
height: 20px;
margin-right: 20px;
background: green;
float: left;
}
.block:after {
content: '';
width: 0;
height: 100%;
position: absolute;
border: 1px solid black;
top: 0;
left: 10px;
}
Demo:
http://jsfiddle.net/rhwb7b2o/
Note: The height of the list items varies. HTML markup can be changed if required.
Add position:relative to the li elements so that each line does not cover the whole ul.
Then add li:last-child .block{position:relative;overflow:hidden;} to handle the last element.
Demo at http://jsfiddle.net/gaby/qj2dbdkz/
Use the :not selector with the :last-child selector. Like this:
.block:not(:last-child):after { /* ... */ }
Related
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
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.
Maybe this has been answered before but I haven't found a proper solution for my question on SO.
Ok, here goes:
I need to underline an h3 tag with 100% EXCEPT for the part where the actual text is. like so:
My super title
____________________________________________________
This has to be 100% width, so something like
h3:after {
content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
}
with fixed number whitespaces wouldn't work.
Also the tag has to be pure. Meaning it is not surrounded with DIVs or span etc... (User submitted content from wysiwyg) It's just an h3 tag.
Is this possible in css3 at all? If not I'm willing to add some js to make it work.
UPDATE:
Here's a screenshot with expected result:
you could try in this way:
Markup
<h3>A 100% wide title</h3>
CSS
h3 {
display: block;
width: 100%;
background: #fff;
white-space: nowrap;
overflow: hidden;
}
h3:after {
content: "";
display: inline-block;
width: 100%;
margin-left: .5em;
border-bottom: 1px #767676 solid;
}
Example: http://cdpn.io/Awpef
Resulting effect
Like this? demo
h3:after {
content:"";
border-bottom: 1px solid black;
overflow: hidden;
width: 100%;
display: inline-block;
position: relative;
left: 150px;
top: -20px;
}
Try this:
CSS
h3 {
display:block;
width:100%;
overflow: hidden;
position: relative;
}
h3:after {
content:'';
border-bottom:1px solid black;
position: absolute;
width: 100%;
}
JSFIDDLE
Without using the :after pseudo element, you could do this:
<div id="wraptitle"><h3>A Second Title</h3></div>
CSS
#wraptitle {
border-bottom : 1px solid black;
position : relative;
}
#wraptitle h3 {
display : inline;
position : relative;
bottom : 0;
border-bottom : 1px solid white; /* white is actually the background color */
padding-right : 10px;
}
Make sure margin of the h3 element is set to 0, or its border wouldn't go over it.
A live example can be seen here: http://jsfiddle.net/JYNn5/
I have a <div> with the ID #left, which cotnains another <div> with the ID #container. Inside #container is a <ul>.
I thought the default would be that the <li> would vertically expand to contain any and all text inside it. But it doesn't. This is the CSS:
#left {
width:200px;
}
#container {
margin: 0 6px;
overflow:hidden;
}
#container li {
background:greenyellow;
position: relative;
border: #BF0000 thin solid;
margin: 0 0 12px 0;
-webkit-border-radius: 6px;
border-radius: 6px;
clear:both;
}
#container li:hover {
background: #ffffff;
}
#container a {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
By using jsFiddle, I've discovered that it's the <a> tag, and something about it's CSS properties that is breaking my <li> tag's height. However, if I change the <a>, I lose the other effect I want, which is to be able to click anywhere in the <li> and have it activate the link.
Can I get the <li> to expand vertically and also the <a> tag to fill the entire <li>? I don't see why the <a> should impact the <li> the way it's doing right now.
What i understand that you want to have your li to wrap your a tag properly while a tag can grow its height based on content. if this is the case please visit http://jsfiddle.net/jBvQ8/16/ for solution.
If you need some modification or other use case to handle i will update that jsfiddle of mine.
#left {
width:200px;
}
#container {
margin: 0 6px;
}
#container li {
background:greenyellow;
position: relative;
border: #BF0000 thin solid;
margin: 0 0 12px 0;
-webkit-border-radius: 6px;
border-radius: 6px;
clear:both;
}
#container li:hover {
background: #ffffff;
}
#container a {
display:block;
width: 100%;
}
I am not sure what you want, but maybe you want entire <a> to be inside li with the applied CSS.
simply remove position:absolute from the css of anchor tag i.e.
#container a {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
see this fiddle
and if you want a pointer cursor, when you hover your li with anchor, simply specify href tag(even href='#') to the anchors
see this fiddle for clickable anchors
I have following code
div {
width: 200px;
border-bottom: 1px solid magenta;
height: 50px;
}
<div></div>
The div width is 200px so border-bottom is also 200px but what should I do if I want border-bottom only 100px without changing div width?
You can use pseudoelements. E.g.
div {
width : 200px;
height : 50px;
position: relative;
z-index : 1;
background: #eee;
}
div:before {
content : "";
position: absolute;
left : 0;
bottom : 0;
height : 1px;
width : 50%; /* or 100px */
border-bottom:1px solid magenta;
}
<div>Item 1</div>
<div>Item 2</div>
No need to use extra markup for presentational purpose. :after is also supported from IE8.
edit:
if you need a right-aligned border, just change left: 0 with right: 0
if you need a center-aligned border just simply set left: 50px;
Another way to do this (in modern browsers) is with a negative spread box-shadow. Check out this updated fiddle: http://jsfiddle.net/WuZat/290/
box-shadow: 0px 24px 3px -24px magenta;
I think the safest and most compatible way is the accepted answer above, though. Just thought I'd share another technique.
I added line under under h3 tag like this
<h3 class="home_title">Your title here</h3>
.home_title{
display:block;
}
.home_title::after {
display:block;
clear:both;
content : "";
position: relative;
left : 0;
bottom : 0;
max-width:250px;
height : 1px;
width : 50%; /* or 100px */
border-bottom:1px solid #e2000f;
margin:0 auto;
padding:4px 0px;
}
You can use a linear gradient:
div {
width:100px;
height:50px;
display:block;
background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px);
background-position: bottom;
background-size: 100% 25px;
background-repeat: no-repeat;
border-bottom: 1px solid #000;
border-top: 1px solid red;
}
<div></div>
You cannot have a different sized border than the div itself.
the solution would be to just add another div under neath, centered or absolute positioned, with the desired 1pixel border and only 1pixel in height.
http://jsfiddle.net/WuZat/3/
I left the original border in so you can see the width, and have two examples -- one with 100 width, and the other with 100 width centered. Delete the one you dont wish to use.
Late to the party but for anyone who wants to make 2 borders (on the bottom and right in my case) you can use the technique in the accepted answer and add an :after psuedo-element for the second line then just change the properties like so:
http://jsfiddle.net/oeaL9fsm/
div
{
width:500px;
height:500px;
position: relative;
z-index : 1;
}
div:before {
content : "";
position: absolute;
left : 25%;
bottom : 0;
height : 1px;
width : 50%;
border-bottom:1px solid magenta;
}
div:after {
content : "";
position: absolute;
right : 0;
bottom : 25%;
height : 50%;
width : 1px;
border-right:1px solid magenta;
}
I did something like this in my project. I would like to share it here. You can add another div as a child and give it a border with small width and place it left, centre or right with usual CSS
HTML code:
<div>
content
<div class ="ac-brdr"></div>
</div>
CSS as below:
.active {
color: magneta;
}
.active .ac-brdr {
width: 20px;
margin: 0 auto;
border-bottom: 1px solid magneta;
}
This will help:
http://www.w3schools.com/tags/att_hr_width.asp
<hr width="50%">
This creates a horizontal line with a width of 50%, you would need to create/modify the class if you would like to edit the style.
I have case to have some bottom border between pictures in div container and the best one line code was - border-bottom-style: inset;
div{
font-size: 25px;
line-height: 27px;
display:inline-block;
width:200px;
text-align:center;
}
div::after {
background: #f1991b none repeat scroll 0 0;
content: "";
display: block;
height: 3px;
margin-top: 15px;
width: 100px;
margin:auto;
}
The border is given the whole html element. If you want half bottom border, you can wrap it with some other identifiable block like span.
HTML code:
<div> <span>content here </span></div>
CSS as below:
div{
width:200px;
height:50px;
}
span{
width:100px;
border-bottom:1px solid magenta;
}
I just accomplished the opposite of this using :after and ::after because I needed to make my bottom border exactly 1.3rem wider:
My element got super deformed when I used :before and :after at the same time because the elements are horizontally aligned with display: flex, flex-direction: row and align-items: center.
You could use this for making something wider or narrower, or probably any mathematical dimension mods:
a.nav_link-active {
color: $e1-red;
margin-top: 3.7rem;
}
a.nav_link-active:visited {
color: $e1-red;
}
a.nav_link-active:after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
margin-left: -$nav-spacer-margin;
display: block;
}
a.nav_link-active::after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
margin-right: -$nav-spacer-margin;
display: block;
}
Sorry, this is SCSS, just multiply the numbers by 10 and change the variables with some normal values.
Border right length smaller than parent div
with pseudo-elements
#import url(https://fonts.googleapis.com/css?family=Raleway);
body{
font-family: 'Raleway', sans-serif;
}
div {
width : 200px;
height : 50px;
position: relative;
z-index : 1;
background-color: #f5f5f5;
margin: 20px auto;
padding: 20px;
color:#726E97;
}
div:before {
content : "";
position: absolute;
right : 0;
top : 25%;
height : 50px;
width : 50%;
border-right:5px solid #726E97;
}
<div>BOX 1</div>