I recently watched Chris Coyiers talk about pseudo elements and was looking to try and do the same.
I am looking to get the effect of an arrow pointing to the content on the right
This is the location of the li that I want to target
.overviews-list > li.active > ul.submenu > li.active
You can see from the jsfiddle the style I am going for. I think the css that needs to be changed is at the top of the css.
http://jsfiddle.net/T2HuD/1/
This will set the positioning and create a down pointing arrow. The numbers are custom and can be adjusted to change the size of the arrow and its position.
.overviews-list > li.active > ul.submenu > li.active {
position: relative;
}
.overviews-list > li.active > ul.submenu > li.active:after {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-top: 15px solid white;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
top: 25%;
right: 10px;
}
JS Fiddle
I do this for something else but it should work for you too...
.pdfLink:before {
content:"\25BA";
color:#FF0000;
font-family: Arial,Helvetica,sans-serif;
}
All codes I have tried work. I can't recall how I came across that format for the char code, but the format is obvious if you check out this char description.
Related
I am just working on a site.Here got completed everything..but almost..one thing not getting..so thought you people might help me...
Here it is please :
Here i am trying to make the dotted lines just right below the links Like this :
http://oi62.tinypic.com/2f07uy8.jpg
Here is the above image given CSS code please :
.navigation li ul li a {
color: #000;
background: none !important;
border-bottom: 1px dotted #000;
padding: 0;
display: inline-block;
}
but it's not showing up right..Here is the current image:
http://oi60.tinypic.com/es5jrq.jpg
Here is the above image given CSS code please :
.navigation li ul li a {
color: #000;
background: #e4e4e4;
height: 0;
border-bottom: 1px dotted #000;
padding: 0px;
display: inline-block;
}
You can use after class to draw a dotted line below the links and you can use letter spacing to space out the dots the way you like it.
.navigation li ul li a {
color: #000;
background: none !important;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
}
.navigation li ul li a:after {
content: "...............................";
color: #000;
bottom: 5px;
left: 0;
}
Adjust the bottom value on the :after pasedo-class to suit your needs. Sometimes you wouldnt be able to see the line drawn by the :after pseudo class, so undo the Overflow hidden to figure out where the dotted line is.
===========================================================================================
fixes:
.navigation li ul li {
background: none;
padding: 12px 12px 6px;
float: none;
display: block;
}
.navigation li ul li a {
color: #000;
background: none !important;
padding: 0;
display: inline-block;
position: relative;
box-shadow: none;
overflow: hidden;
padding-bottom: 10px;
}
.navigation li ul li a:after {
content: "..................................................";
color: #000;
position: absolute;
bottom: 3px;
left: 0;
letter-spacing: 2px;
}
The white line was a box shadow. You need to optimize your site, it takes ages to load.
You need to give the <a>'s a fixed height, as opposed to 0. Using 22px seems to work fine.
I looked at both of the sites and after checking the incorrect one I came to some conclusions.
a. you have way too much styling. It's just cluttering up your code. The key word here is simplifying.
b. don't use font, it has become somewhat obsolete in the last years.
c. the white line above is because you're using box-shadow with offset of 1px (in foundation.css line 478). Do you need this attribute? if not, maybe you should remove it.
d. can't find any border-bottom style anywhere in the element.
Below I have included an image illustrating my issue. In summary, I am having an issue with an approximately 2 pixel whitespace below each of the images on my website. I'm not exactly sure what is causing this, but it is most definitely not the image itself. I believe it to be the box-sizing: border-box snippet in my CSS, due to the fact that 2px would be the sum of the top and bottom borders, however, removing that part of the code does not solve the issue. Any help or tips would be greatly appreciated. I have tried viewing the webpage on my mobile phone, using Firefox and using Chrome, and the issue is persistent between all of them.
The webpage in question can be found at http://www.bellasaluminum.com/gallery.php?jobType=GlassWindow&page=1, however, I have included a portion of the gallery's stylesheet below:
#gallery > div {
border: 1px solid black;
margin: 5px;
width: auto;
}
#gallery > div > * {
display: inline-block;
}
#gallery > div > img {
position: relative;
padding: 0px;
margin: 0px;
}
#gallery > div > div.description {
position: relative;
padding: 3px;
width: auto;
vertical-align: top;
}
#galleryNav {
padding: 0px;
background-color: #dedede;
text-align: center;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 1px solid black;
width: 90%;
margin: auto;
}
#galleryNav > a {
text-decoration: none;
color: black;
font-family: Arial;
font-weight: bold;
display: inline-block;
padding: 10px 8px 10px 8px;
margin: 0px;
}
#galleryNav > a:hover {
background-color: #efefef;
}
#galleryNav > a.active {
background-color: #afafaf;
}
You can either make the img elements block level:
#gallery > div > img {
display:block;
}
or, change the vertical-align property value to something like top. (the default is baseline)
#gallery > div > img {
vertical-align:top;
}
The second option (vertical-align:top) should be used in this instance, because you want the text to be inline with the img element.
So here's the code I'm using to style my breadcrumbs.
.breadcrumbs-one{
box-shadow: 0 0 2px rgba(0,0,0,.2);
overflow: hidden;
width: 100%;
margin-top:15px;
margin-left:-20px;
}
.breadcrumbs-one li{
float: left;
}
.breadcrumbs-one a{
padding: .7em 1em .7em 2em;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #fff;
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
.breadcrumbs-one li:first-child a{
padding-left: 1em;
border-radius: 5px 0 0 5px;
}
.breadcrumbs-one a:hover{
background: #fff;
}
.breadcrumbs-one a::after,
.breadcrumbs-one a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}
.breadcrumbs-one a::after{
z-index: 2;
border-left-color: #ddd;
}
.breadcrumbs-one a::before{
border-left-color: #ccc;
z-index: 1;
}
.breadcrumbs-one a:hover::after{
border-left-color: #fff;
}
.breadcrumbs-one .current,
.breadcrumbs-one .current:hover{
font-weight: bold;
background: none;
}
.breadcrumbs-one .current::after,
.breadcrumbs-one .current::before{
content: normal;
}
I got it from here: http://www.red-team-design.com/css3-breadcrumbs
How do I modify the code so the CSS triangle isn't appended to the last breadcrumb?
So if there is one breadcrumb I wouldn't append a triangle at the end of it.
Similarly, if there are two breadcrumbs, I don't want a triangle at the end of the second breadcrumb.
And so on and so forth.
You could select the last li element with the last-child selector. After that you delete the content of the pseudo classes after and before.
#breadcrumbs-one li:last-child a::before,
#breadcrumbs-one li:last-child a::after
{
content: normal;
}
In this example you have selected the second link and you can see that the last link has no arrow after it.
If you want select a specific index element, for example the third li element. You can use the selector nth-child(index nummer). So for example, if you want to select the third li element you could do li:nth-child(3).
In this case :
#breadcrumbs-one li:nth-child(3) a::after,
#breadcrumbs-one li:nth-child(3) a::before
{
content: normal;
}
Fiddle update
Update
Now when you use the last-child selector and you have one element, that element will be seen as the last element. But you actually want that element not the have the idicator of last. So you have to use an other idicator for this. First, one element is the first and the last. You've already defined last-child so you could easially define the first-child element.
#breadcrumbs-one li:first-child a::after,
#breadcrumbs-one li:first-child a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
}
You want this code to have more priority then the last-child. Now you could use the !improtant tag of css, however i strongly recommend you to not use this tag at all costs. One way to give more priority to a code is to make the selector more specific. In this case the #breadcrumbs-one is actually a ul element, so placing a ul before it makes it more specific:
ul#breadcrumbs-one li:first-child a::after,
ul#breadcrumbs-one li:first-child a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
}
Now if you don't want to make a more specific selector, you can always place this code after the last-child selector code. Css will read from top to bottom order, so you want the overlapping code to be readed after the code to be overlapped. This order is only used when the selectors are identical.
However i choose the method of a more specific path, this way it doesn't matter where you place your code.
jsFiddle
Lets add another update
First of all i would suggest you to understand what happens. Here is a little example of how the arrows are created. With this the ::before and ::after pseudo classes are also used, Here some more info about that.
I would suggest you to first try it yourself before reading my answer.
Each 'crumb' is defined by the bar with text, arrow next to it and the border of the arrow.
So what psuedo class is generating what?
Well simply, the ::after pseudo class is generating the arrow it selfs and the ::before pseudo class generates the border of the arrow.
Now you only want the arrow color to be changed(you can change the border youself). Now if you have read the border-trick you may notice that this is created with only borders. This way you don't want to use background-color but change the border color.
You can change the border color with: border: 1px solid white;, however you only want to change the color. The way you do it now is also giving the width and border-style. With border-color you can change only the color. To be even more specific: border-left-color: white;.
So would have this:
#breadcrumbs-one .current::after
{
border-left-color: white;
}
Remeber what i said earlier? A more specific selector will overwrite other css code. In this case a class is more specific as a element(anchor).
Now you have only changed the arrow color. Let's change the background of the bar itself.
There is already a css code that defines the .current element :
#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
font-weight: bold;
}
Just change the background of the element, so:
#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
font-weight: bold;
background: white;
}
There you go, the .current element is white by default!
jsFiddle
Unless I've missed the point of the question, it isn't. Even on the page you cite, it shows the last item in the list has a different CSS class
<ul id="breadcrumbs-one">
<li>Lorem ipsum</li>
<li>Vivamus nisi eros</li>
<li>Nulla sed lorem risus</li>
<li>Nam iaculis commodo</li>
<li>Current crumb</li>
</ul>
So, just make sure your class="current" is on the last item in your list.
If this is dynamic, then it can be done with server sided code or probably some JavaScript
I have an tag, with the following markup:
#leftMenu ul li a {color: #111; text-decoration: none; display: block;}
And I want to be able to hover over it, and display a triangular end. Similar to this shape:
http://www.promotionalpromo.com/Upfiles/Prod_v/1-7-8-x-2-7-8--Long-Arrow_2010017055476.jpg
But not with the same dimensions, more along the lines of:
width: 200px; height: 20px;
Either I chop the two ends, (border-top-right and border-bottom-right) or I add css on with :after, however I need all this to happen when the user hovers of the tag.
How can I achieve this?
I found this site very usefull :
http://apps.eky.hk/css-triangle-generator/
when i needed to create triangles.
it generates a triangle for you.
Now after u generate the triangle, all u need to do is use :before or :after on your desired element to make it work, in your case hover as well.
Just for reference this is how I did it:
#leftMenu ul li a {color: #111; text-decoration: none; display: block; position: relative;}
#leftMenu ul li a:hover {color: #555; text-decoration: underline; background: #EEE; }
#leftMenu ul li a:hover:after
{
content:"";
float:right;
position:absolute; top:0; right:-12px; width:0; height:0;
border-style: solid;
border-width: 13px 0 12px 12px;
border-color: transparent transparent transparent #EEE;
}
I'm trying to accomplish something very, very similar to the below picture with CSS3 only.
The only difference is that the last div would have a pointed tip.
In my search for something similar to adapt, I've come across this js fiddle which comes very close to what I want to do, but introduces two problems: first, it's done with canvas, and second, it forces me to "draw" arrows effectively twice for each arrow -- one for the div, and one for the space before the next arrow. There has to be some cleaner way of doing this -- can someone provide me with some direction here?
What I need to know is how to construct what's shown in the above picture -- a series of overlapping div arrows -- with CSS3 only.
Try this - http://jsfiddle.net/ksNr3/8/
ul {
margin: 20px 60px;
}
ul li {
display: inline-block;
height: 30px;
line-height: 30px;
width: 100px;
margin: 5px 1px 0 0;
text-indent: 35px;
position: relative;
}
ul li:before {
content: " ";
height: 0;
width: 0;
position: absolute;
left: -2px;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #fff;
z-index: 0;
}
ul li:first-child:before {
border-color: transparent;
}
ul li a:after {
content: " ";
height: 0;
width: 0;
position: absolute;
right: -15px;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #ccc;
z-index: 10;
}
ul li.active a {
background: orange;
z-index: 100;
}
ul li.active a:after {
border-left-color: orange;
}
ul li a {
display: block;
background: #ccc;
}
ul li a:hover {
background: pink;
}
ul li a:hover:after {
border-color: transparent transparent transparent pink;
}
UPDATED - Made it clickable and minimized the overlapping areas - http://jsfiddle.net/ksNr3/8/
The following CSS3 Solution does not use any images and is easy to work with.
I have created TWO fully commented examples that can be expanded further.
One example has arrows that are "visually" stacked against each other.
The other example is just like the image in your Question, with "end-caps" on the arrows.
Each example has a simple jQuery .click() event listener so you can see no matter where you are clicking in the breadcrumb, the anchor will receive the correct click event. Arrow tails work correctly.
Screenshot shows active CSS hover for NavBar's breadcrumb:
When CSS is disabled in the browser, the breadcrumb navigation gracefully falls back for accessibility requirements.
Reference: jsFiddle