Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I need to show the divider for every labels is there any option in Bootstrap to show the vertical divider or in css like the below image.
Vertical Dividers have been dropped in Bootstrap 3. See here
You'll have to code on your own
or you can add this code to your style-sheet
.navbar .divider-vertical {
height: 40px;
margin: 0 9px;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #ffffff;
}
This is how I would do it:
li {
display: inline;
padding: 10px;
color: white;
border-right-style: solid;
border-right-width: 2px;
border-image: linear-gradient(to bottom, transparent, gray, transparent) 1 100%;
border-left-width: 0px;
}
Here is the JSFiddle demo
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
Can anyone help me?
How can I integrate in html pages 2 different CSS styles for 2 diferent images, both being separated vertically by a space?
See the paintings below. They have different sizes, different styles.
Something like this. You may change the dimensions anytime
.img, .firstImage, .secondImage {
border: 1px dotted blue;
width: 200px;
}
.firstImage {
float:left;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
.secondImage {
float:right;
border: 2px solid #fff;
border-radius: 2px;
padding: 3px;
width: 120px;
}
A friend write for me this code, a good answer:
HTML
<div id="img1"><img src=logo.png"></div>
<div id="img2"><img src=logo2.png"></div>
CSS
#img1{border-style :solid;
border-color:red;}
#img2{border-style :solid;
border-color:blue;
margin-top:20px;}
SOURCE: HERE
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I want to draw a line before and after the text. And I want to do these features twice. Like in the image below : How can I achieve this? I tried before and after but could not solve it. I am beginner in CSS. THanks for your time.
Something like this, with ::before and ::after pseudo-elements.
.team {
text-align: center;
position: relative;
color: darkslategray;
font-size: 2em;
}
.team-span {
display: block;
text-transform: uppercase;
font-size: 0.5em;
margin-bottom: 0.5em;
}
.team-span::before,
.team-span::after {
display: inline-block;
content: "";
width: 1.5em;
height: 0.2em;
margin: 0 0.5em;
/* the lines */
border-top: 2px solid;
border-bottom: 2px solid;
}
<h2 class="team">
<span class="team-span">Our Best Team</span> Our Team
</h2>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Link: http://path.com.my/v2/gallery/
Try when you hover/mouseover one of the links in the tab, especially near EXTERIOR, ILLUMINATED, INTERIOR, PYLON , the items on the second row keep moves around.
I tried changing a few of the CSS on hover but it doesn't seems to work.
Anyone can help?
Remove float from .sortLink and use inline-block instead.
Use following css:
.sortLink {
display: inline-block;
vertical-align: top;
color: #999;
font-size: 14px;
padding: 5px 8px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
margin: 0 5px 5px 0;
transition-duration: 0.5s;
}
Solved:
margin: 0 6px 0 0 !important;
Remove the float:left; from a tag and display:inline-block;
.sortLink {
/* float:left; */
display: inline-block;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I can see this has been answered but i've tried all of the solutions yet still have a barely visable HR.
What am I doing wrong?
hr {
background-color: dimgrey;
color: dimgrey;
border: solid 2px dimgrey;
height: 5px;
width: 1000px;
}
Not sure what you consider barely visible but a 5px height is pretty visible. :)
Make sure that you are defining this css after other css which might be overwriting this rule.
Or, use !important to give this rule precedence:
hr {
background-color: dimgrey !important;
color: dimgrey !important;
border: solid 2px dimgrey !important;
height: 5px !important;
width: 1000px !important;
}
Another approach is to define a custom class for this style:
.bigHr {
background-color: dimgrey !important;
color: dimgrey !important;
border: solid 2px dimgrey !important;
height: 5px !important;
width: 1000px !important;
}
... and then use that class when you want this style:
<hr class="bigHr">
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I've found plenty of tutorials for creating Trapezoids using CSS3 but I am looking to create a four sided shape where none of the side are parallel (trapezium) like the one in the picture below.
Is this possible?
Okay..Sorry for being late. Here's my answer:
Fiddle: http://jsfiddle.net/fELER/1/
CSS:
#up-triangle {
width: 0;
height: 0;
border-bottom: 200px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
#right-triangle {
position:absolute;
top: 10px;
left:175px;
width: 50px;
height: 100px;
border-style: solid;
border-width: 100px 0 0 300px;
border-color: transparent transparent transparent yellow;
-webkit-transform: skew(29deg);
-moz-transform: skew(29deg);
-o-transform: skew(29deg);
transform: skew(29deg);
}
HTML:
<div id="up-triangle"></div>
<div id="right-triangle"></div>
Some useful links:
http://www.css3shapes.com/
http://apps.eky.hk/css-triangle-generator/
you could do this "by hand"
html:
<canvas id="polygon" />
javascript
var polygon = document.getElementById('polygon').getContext('2d');
polygon.fillStyle = '#f00';
polygon.beginPath();
polygon.moveTo(0, 0);
polygon.lineTo(90,50);
polygon.lineTo(70, 70);
polygon.lineTo(0, 90);
polygon.closePath();
polygon.fill();
this doesn't make shure it's convex and it has no parallel lines. You have to put in the correct coordinates.
Fiddle: http://jsfiddle.net/8t4rZ/
#box {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
CSS trapezoid