Here's the image i'm trying to replicate.
Here's the link I've got so far.
My issue is the border-bottom length corresponds to the fullwidth of containing element. From the image attached, the border-bottom should be a little shorter and centered.
http://jsbin.com/tukomuwuri/edit?html,css,output
You can add a pseudo after element to the list item and then add a border-top property.
li:after{
content: "";
display:block;
border-top: 4px solid color;
width: /* your desired width*/
}
You can give it an absolute position to center it or align it however you want.
By default, the border is going to stretch the width of the block-level element (in this case, the <a>).
To achieve your desired effect, you'll want to actually decrease the width of the <a>. You can do this by padding the containing <li>:
li {
background-color: white;
padding: 0 40px;
position: relative;
&:hover {
background-color: #e5e8e8;
a:before {
content: '|';
position: absolute;
top: 10px;
left: -15px;
}
}
}
Here's the example:
http://jsbin.com/ciqujidupa/3/edit?html,css,output
Related
I need to use this shape and inside that shows a text. But, I don't know why the text is not showing.
HTML:
<div id="thebag">
<h3> Shihab Mridha </h3>
</div>
CSS:
#thebag{
position: relative;
overflow: hidden;
}
#thebag::before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 30%;
background: red;
}
#thebag::after {
content: '';
position: absolute;
top: 0;
left: 30%;
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 70px solid transparent;
}
https://jsfiddle.net/kn87syvb/1/
You need to add position: relative (or position: inherit, since it's the same as the parent) to your #thebag h3 class. Currently, your CSS styles are only affecting the parent of the h3—in order for the h3 to show with the text, you need to define CSS styling for it.
https://jsfiddle.net/kn87syvb/2/
By setting a position:absolute to the #thebag::before you "broke" the flow and your text is behind your div. You have to precise, than the h3 tag will be relative depending it's container.
So you have to add this :
#thebag h3 {
position:relative
}
To precise all h3 on your #thebag section will be affected. Be careful, if you change your kind of selector, It won t work anymore.
May be it will be better to use a custom class, like this https://jsfiddle.net/kn87syvb/5/
You need to use postion:relative property:
#thebag h3{
postion:relative;
}
Small explanation:
position: relative will layout an element relative to itself. In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). It's important to note that because it's removed from flow, other elements around it will not shift with it (use negative margins instead if you want this behaviour).
However, you're most likely interested in position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relative or position: absolute set on it, then it will act as the parent for positioning coordinates for its children.
please check this snippet:
https://jsfiddle.net/kn87syvb/4/
You can also re-structure your HTML and CSS as follows:
HTML
<span class="start">Shihab Mridha</span>
<span class="end"></span>
CSS
.end {
height:0;
width:0;
float: left;
display: block;
border:10px solid #0f92ba;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#0f92ba;
border-left-color:#0f92ba;
}
.start{
height: 20px;
width: 60px;
float: left;
background: #0f92ba;
display: block;
color:#FFFFFF;
}
Reference Link : https://solutionstationbd.wordpress.com/2011/12/21/trapezoids-shape-with-css/
I'm trying to vertically position :before and :after pseudo-elements in a <h2>.
Each is placed in a float:left orange column, next to a another float:left column which contains a <p>.
I'd like to have at the top and the bottom of the <h2>, a thin border.
The issue is : if the text contained in the <p> float column is longer than the <h2>, the bottom-border of the <h2> is placed at the bottom of the text column, not at the bottom at the <h2> column.
Because of my "not-so-good-english", I made a fiddle : http://jsfiddle.net/vcH4T/
I'm really stuck with this :(
Thanks in advance for your help!
Camille
I'd like to have at the top and the bottom of the <h2>, a thin border.
Like this:
JSFiddle
CSS /* generic h2 */
h2 {
font-size:1.1em;
line-height: 20px;
background-color: #d8713c;
border-radius: 4px;
text-align: center;
color: #fff;
padding: 20px 10px;
position:relative;
}
h2::before, h2::after {
content:"";
position: absolute;
left:50%;
width: 10%; /* anything you like */
margin-left:-5%; /* 50% of width */
height: 0px;
border-bottom: 3px solid #efbe94;
}
h2::before {
top: 7%;
}
h2::after {
bottom: 7%;
}
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.
I'm having trouble styling text within a div, which is in the shape of a triangle. All done with CSS.
The triangle is currently positioned absolutely as it needs to be for a larger project (I've removed the code from the larger project as it's irrelevant).
Here is a jsFiddle
See the code below:
HTML
<div>Here is a Triangle</div>
CSS
div {
text-align: center;
color: #fff;
font-size: 1.125em;
width: 100%;
}
div:nth-child(1) {
position: absolute;
top: 100px;
left: 100px;
width: 0;
height: 0;
border-left: 126px solid transparent;
border-right: 126px solid transparent;
border-bottom: 126px solid #D30000;
}
since the div has zero width, there will be a line break between each pair of words.
A solution might be to create the shape with one element, and have the text in another one.
You need to realise the triangle is actually a very thick border of a 0x0 element located at the top vertex, and position accordingly.
Here I've positioned the text at the baseline of the triangle and made its width from one vertex of the base to the other. Feel free to play with the text element's size to avoid the text overflowing the triangle. I'm afraid, however, that you can't just let the text flow inside a triangular shape:
HTML:
<div class="triangle"><div class="text">Here is a Triangle</div></div>
CSS:
div { /*your original CSS*/ }
div.triangle { /* your original CSS for div:nth-child(1) */ }
div.text {
position: absolute;
bottom: -126px; /* baseline */
left: -126px; /* left tip */
right: -126px; /* right tip */
width: auto; /* reset width:100% from div */
height: auto; /* just in case */
}
http://jsfiddle.net/honnza/UPeCf/8/
I want to give a list item a background-color, border etc. I have the following CSS and HTML. I will also use that div to add more absolute positioned elements relative to the li > div.
ul {
list-style-image: url('../img/nr_cross.png');
}
li {
position: relative;
height: 35px;
}
div {
position: absolute;
z-index:-1;
left:-40px;
background-color: #dfdfc9;
}
<ul>
<li><p>This</p></li>
<li><p>That</p></li>
<li><p>Other</p></li>
<ul>
The problem is, i cant set the z-index for the list item. If i set the absolute position for the list item, it defeats the purpose of using the list items for layout. I'm thinking this is impossible, or maybe there is a better way to do what I want.
Update:
Update 2:
Answer below does not work in firefox 10, ie8, ie7. Also fixed question above.
Okay, that mockup clears things up. I think. Does this work for you?
ul {
list-style-image: url(http://cdn1.iconfinder.com/data/icons/splashyIcons/breadcrumb_separator_arrow_full.png);
background-color: #dfdfc9;
margin: 0;
padding: 0;
}
p {
position: relative;
left: 2em;
}
li {
border-bottom: 2px dotted black;
border-top: 1px solid transparent;
}
Example here: http://jsfiddle.net/dbT2n/1/