I have a site where certain menu headings are drop down (css)
I want to add a small down facing arrow onto the certain menu headers that are able to drop down. Can anyone give me any ideas how to do so?
Just use this character: http://www.fileformat.info/info/unicode/char/25bc/index.htm
▼ - ▼
a:after{
content: '';
border: 4px solid transparent;
border-top: 4px solid white;
margin-left: 2px;
margin-bottom: 3px;
display: inline-block;
vertical-align: bottom;
}
I think this is the best way to do it, as you can adjust the border for the length and adjust the 'border-top' for the height, giving you full customization.
If you are using bootstrap, you can do the following:
<span class="caret"></span>
This will insert a small down arrow wherever the span is placed.
If you've creating menu and, you want the arrow not fill black in the arrow try this code: (to: arrow not fill any color)
∇ - ∇
Try the following code to add the arrow, customize the height and widht and position for the arrow as per your need.
li.has_child:after {
content: '';
position: absolute;
border: 7px solid transparent;
/* This will set the direction of the arrow.*/
border-top: 7px solid white;
top: 34px;
margin-left: 5px;
}
Related
I tried to make an under-line dotted under word to mark it as user provided information.
It is fine to use a pre-defined html under-line tag <u>..</u> with styling dotted or style border-bottom. However, it is a little bit problem with printing (the dotted not showing correctly); Therefore I decided to use dotted symbols ... instead because it is showing correct and precise.
By that way, I tried to make the word takes place of dotted points' spaces, and dotted point would stay a little bit lower from it current position under the word.
To make it clear, it would look like this:
My HTML Code do to this is like so:
.dotted:before{
content: '..................';
position: absolute;
top: 20px;
}
<p>Name: <span class="dotted">Jonh David</span></p>
However, as the information provided by user is varied, I cannot determined how many dotted points I would need to fit those information correctly.
Your tip is very much appreciated. Thanks.
Can use border-bottom-style css property
.dotted {
border-bottom: 1px solid #000;
border-bottom-style: dotted;
}
https://jsfiddle.net/j965444n/
I found this really cool site for doing this. Refer the site below.
Styling Underlines
You can play around with the properties and get the desired thickness and padding, also this is not dependent on setting the width based on the content size!
Check my below example of how this is done!
.dotted {
background-image: linear-gradient(to right, #000000 50%, transparent 50%);
background-position: 0px 100%;
background-repeat: repeat-x;
background-size: 4px 2px;
padding: 0px 3px;
}
<p>Name: <span class="dotted">Jonh David</span></p>
I think it's something like this:
#myDIV {
text-decoration: underline;
text-decoration-style:dotted;}
w3schools underline
Note: The text-decoration-style is only supported by Firefox.
If a simple dotted border isn't good enough for you and say you want to control the spacing between the dots - you could make your technique work by setting overflow:hidden on the parent element.
.dotted {
position: relative;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
}
.dotted:before {
content: '...............................';
position: absolute;
top: 4px;
width: 100%;
letter-spacing: 2px; /* adjust to control spacing between dots */
}
<p>Name: <span class="dotted">Jonh David</span></p>
<p>Name: <span class="dotted">Jo</span></p>
<p>Name: <span class="dotted">Jonh David blabla</span></p>
I wonder what is the problem with underline or you could try border-bottom: 1px dotted #444 but whatever, here's your method - a span with dotted :pseudo - which takes into account the length of the element.
content is a lot of … (use dots if you wish)
it's cropped with overflow: hidden
test cases with 2 very different lengths
3rd example is good ole dotted border (works since IE7)
.dotted {
position: relative;
}
.dotted:before{
content: '…………………………………………………………………………………………';
display: block;
position: absolute;
top: 3px;
left: 0; right: 0;
overflow: hidden;
}
.other-dots {
border-bottom: 1px dotted black;
}
<p>Name: <span class="dotted">Jonh David</span></p>
<p>Name: <span class="dotted">Maria-Magdalena von Stroheim de la Peña</span></p>
<p>Name: <span class="other-dots">Other way with bd-bottom</span></p>
I think #Christopher Marshall's idea is gonna make the same effect on printed page, so here is an example with background : https://codepen.io/Pauloscorps/pen/YrwWYo
HTML
<p>My name is : <span>John David</span></p>
CSS :
p {
span {
display:inline-block;
font-weight:bold;
&:after {
content:"";
display:block;
width:100%;
height:1px;
background:red url('https://img11.hostingpics.net/pics/194508dot.jpg') repeat center bottom;;
}
}
}
newbie here.
I'm trying to create drop down menus styled with triangles on top. I want each drop down menu to be a different color, but I cannot for the life of me figure out how to get each triangle to change... I've searched high and low and I'm not having much luck. If anyone could be of assistance, I'd really appreciate it! Here's what I use to make the triangles.
nav ul li ul:after {
position: absolute;
left: 50%;
margin-left: -10px;
top: -10px;
width: 0;
height: 0;
content:'';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff; }
Also, like I said, I am pretty new at this so if there's anything funky with my code that I can improve on please let me know... Thanks! :)
https://jsfiddle.net/LtuyhLrr/1/
You just need to add this the bottom of your CSS
.menupurple:after {
border-bottom-color: #dda1d8;
};
.menupink:after {
border-bottom-color: #ff5e7e;
}
Background
The line in your CSS that's currently controlling the triangles' color is the border-bottom: 10px solid #fff;
Currently you are overriding the background color the purple and pink menu, but you aren't overriding the color of the border that's creating the triangle.
I have tried creating a white downward arrow using the HTML code ⇩ that renders as this: ⇩.
However I could not fill it and there comes a lot of space above and below the arrow.
How can I create the same by using CSS?
body{font-size:30px;}
i.arrow-down{
color: #f0f;
width: 0.5em;
height: 0.7em;
display: inline-block;
position: relative;
background: currentColor;
vertical-align: top;
} i.arrow-down:after{
border-right: 0.5em solid transparent;
border-left: 0.5em solid transparent;
border-top: 0.4em solid currentColor;
position: absolute;
content: "";
bottom: -0.3em;
left: -0.22em;
}
Arrow Down <i class="arrow-down"></i>
The HTML code for the down arrow ↓ is ↓
Seems like a lot of work to me, have you considered using icons perhaps? Then you'd have the ability to size them, color them, transform them, etc.
http://fontawesome.io/icons/
I'm attempting to style my navigation menu design to reflect the one on timeanddate.com, as seen in this image:
To create the colors, they're using a simple bottom and left border in CSS.
I'm attempting to add a border to my <li> tags on my website sandbox, http://www.escapetech.com:8080.
I'm using the following CSS:
.anylinkcss li {
list-style-type: none;
}
.participate li {
list-style-type: square;
border-left-color: #fa514d;
}
#navigation_bar {
height: 31px;
list-style: none;
width: 1000px;
margin-top: 15px;
}
#navigation_bar li {
float: left;
padding-right: 35px;
padding-left: 10px;
margin: auto 0px;
vertical-align: middle;
}
#anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 {
position: absolute;
line-height: 18px;
z-index: 20;
background-color: #000;
text-align:left;
visibility: hidden;
left: 421px;
top:207px;
padding: 7px;
padding-left: 25px;
}
The #anylinkcss3 and further represent styles for the drop downs, while the #navigation_bar styles are for the whole bar. No matter where I add any border styles, none appear, even after I comment out all CSS code and just include a border on these IDs and classes.
My current menu is live at the link I posted above, I would greatly appreciate if someone could take a look and let me know why there may be any issues with borders appearing. This is my first Stack Exchange post so I hope that this was correctly formatted!
Although you set the width and color, you can not leave out the style parameter with borders.
To get the desired effect as you presented in the image - jsFiddle demo
dark background color for the <ul>
a wide border-left on the <li>
a margin-bottom: 2px as bottom border - shows ul background
and a few small tweaks like text-indent etc
Some information regarding borders
CSS borders consist of 3 parameters
border-width
border-style
border-color
You can set one value, which applies to all sides
border-width: 5px;
border-style: solid;
border-color: red;
Or with short hand border: 5px solid red; and also applies to all sides.
You can style each border side individually, as you are doing above.
border-side-width
border-side-style
border-side-color
Example:
border-left-width: 5px;
border-left-style: solid;
border-left-color: white;
Which can be accomplished also with shorthand: border-left: 5px solid white;
For more information and other border opportunities
https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
ahhh... Brian you beat me to it.
I inserted border-style, and then there is "BORDER"
border: 5px solid white;
Actually the trick in his case is that border is applied to the anchor tags not the lists! Cheers! :) And yes if you apply border-color as a property you should also apply border-style and border-width :)
I have this:
<style type="text/css">
.TopBorderPanel {
position: relative;
overflow: hidden;
border-top: 2px solid #bbbb9f;
margin: 1px;
width: 500px;
}
</style>
The top border has one color , #bbbb9f, what i want to do is make it 2 colors
50% #bbbb9f and 50% #cccccc
Is it possible ?
http://jsfiddle.net/CdWCA/
.TopBorderPanel {
border-top: 2px solid #bbbb9f;
position: relative;
}
.TopBorderPanel:after {
position: absolute;
left: 50%;
right: 0;
top: -2px;
border-top: 2px solid #cccccc;
content: '';
}
Better use a background *.gif split equally into two colours, and use a single pixel of padding on the top:
.TopBorderPanel {
border: 0;
background-image: url(...);
padding-top: 1px;
}
I can think of 2 ways of doing this.
My first method would be to use a pseudo selector, what this does is add content, or styles :before or :after an element. So in effect you can have 2 styles for one element, just one as normal, and then some extras added either before or after this element.
I have added a border-top, as normal, and then added another border-top with the pseudo selector.
My second solution is to add a box-shadow, that instead of normally looking like a diffused shadow, it styled to look like a solid shadow above the element.
I've created a jsFiddle which will hopefully give you an idea, but if you don't understand just say.
jsFiddle