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.
Related
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'm making a Navigation bar. It has a border at the bottom. Now I want to give the active class a other color for the border. It should be in place of the navigation border, but it shows above it.
How can I put the blue line on the place of the green line under the active Home button and keep green at the rest?
CSS Code:
https://gist.github.com/matthijs110/9859d4e2a3983383bbb0
HTML Code:
https://gist.github.com/matthijs110/a09c4cb045eebeb89a4a
This is pretty simple.. You just need to set the margin-bottom: -3px.
Your CSS should look like this:
.navbar {
border-bottom: 3px solid #5cb85c;
width: auto;
}
.active {
border-bottom: 3px solid #5bc0de;
margin-bottom: -3px;
}
Here's a fiddle: http://jsfiddle.net/4NLYZ/
So I saw this http://cre8tivenerd.com/demos/css/Line-separator.html and wanted to create a divider with that "pressed" effect. The problem is, I don't have a clue of what the divider colors should be for me, tested it out and it didn't get the same effect. My background color is #222222. Anyone that can help me and maybe explain how I "calculate" which colors I should use for the divider?
You can easily get this effect like this:
<div class="vDivider"></div>
css:
.vDivider {
width: 80%;
height: 1px;
margin: 10px auto;
background: #434343;
border-bottom: 1px solid black;
}
The contrast between the background color and the bottom border creates this effect.
Here is a DEMO
It won't look good as #222 is already too dark. Only option as #Dim13i suggested is using black as bottom color, but it won't look distinct.
How about make it a little thicker?
.line-separator {
background: none repeat scroll 0 0 #777;
border-bottom: 2px solid #000;
height: 2px;
}
Have been attempting to make a custom sidebar similar to the image linked below. However I'm unsure of how to go about coding the custom div (if even necessary) and incorporating a variable border.
I have tried managing multiple s to achieve the slanted header but to no success.
I have considered the option of just using the template as a background image but I'm not sure if that is the best approach as I would ideally like the sidebar to be scalable due to drop down menus.
I apologize if this isn't a wealth of information but I am just clueless as how to accomplish an end result. Any advice would be greatly appreciated.
http://oi47.tinypic.com/wjce1j.jpg
you can do this by
1, make a div for header like
2, make left and right side div with 100% height and repeat this image both side
it would be like
If you don't want to use images, you should be able to accomplish this with just css and html. The benefit to doing this with css and html is that it will re-size in the browser better (although newer browsers are getting better at re-sizing images) and take no time to load.
You could try something along the lines of the following.
Here are the CSS styles:
#tabbox {
position:absolute;
width: 200px;
height: 200px;
background: black;
border: 2px solid #C7ECFE;
-webkit-box-shadow:-4px 6px 12px #C7ECFE;
-moz-box-shadow: -4px 6px 12px #C7ECFE;
box-shadow:-4px 6px 12px #C7ECFE;
}
#tabbox:before {
margin-top:-2px;
margin-left:0px;
height: 0;
width: 143px;
content:"";
position: absolute;
border-bottom: 30px solid #C7ECFE;
border-right: 60px solid black;
}
#tabbox:after {
position: absolute;
top:0;
height: 0;
width: 142px;
content:"";
position: absolute;
border-bottom: 30px solid black;
border-right: 60px solid transparent;
}
And then in your body just define the div with id = "tabbox". This will give you something like this:
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;
}