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;
}
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.
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
Take a lot at the fiddle below and you would observe that when the line is about to end, the li elements break abruptly. Like, in the first line, after 4 li elements, the next li element breaks and the red circle comes in the same line while the text part moves to the next line.
Here is how I have defined the list elements in CSS:
.popular ul li:before { // Its this part of the code which is making the things
content: "\2022 "; // happen like this. If I remove this part, everything
color:red; // works fine.
}
.popular ul li{
display: inline;
padding: 4px 7px 4px 5px;
background-color:#ededed;
border-radius:5px;
border:2px solid #dcdcdc;
}
Here is the JsFiddle Link http://jsfiddle.net/e7rjW/.
Could someone please tell me how to correct this thing?
Change the display:inline to inline-block
.popular ul li{
display: inline-block;
padding: 4px 7px 4px 5px;
background-color:#ededed;
border-radius:5px;
border:2px solid #dcdcdc;
}
Fiddle: http://jsfiddle.net/e7rjW/5/
Replacing .popular ul li:before with .popular ul li a:before in the CSS fixes your issue.
See the updated JSFiddle.
EDIT: This doesn't work correctly in Chrome, as pointed out by #Nagarjun:
http://img577.imageshack.us/img577/6770/o7g.png
So you'll probably want to use his answer.
try this
http://jsfiddle.net/e7rjW/6/
replace this classess
.popular ul li{
display: inline;
padding: 4px 7px 4px 5px;
background-color:#ededed;
border-radius:5px;
border:2px solid #dcdcdc;
text-wrap:none;
float:left;
}
.popular ul li a{
display: inline-block;
color:#777;
font-family:Arial;
font-size:15px;
font-weight:700;
text-decoration:none;
text-shadow:0 1px 7px #fff;
}
i have a Problem with my Website..
I want to make a dropdown-item smaller.
Otherwise it will "plop" out of my theme..
I´m using WordPress..
Can anyone help me?!
This is the Website:
MDS
The Problem is shown at the menu-point "Kontakt -> Presse"
if reduce width it will create problem when inner text is big in length so
change this properties if you like it as below..
ul#dropdown-menu li .sub-menu li a {
color: #252525;
width: 140px;
}
ul#dropdown-menu ul {
position: absolute;
top: 100%;
right: 0;
width: 160px;
list-style: none;
display: none;
border: 1px solid #EFEFEF;
border-bottom: none;
background-color: white;
z-index: 35;
}
css:
#menu-item-38 ul, #menu-item-38 li{
width:100px;
}
#menu-item-38 ul li a{
width:80px;
}
Hi now define your last submenu width as like this
#menu-item-38 .sub-menu{
width:90px;
}
You have too many widths defined in the ul#dropdown-menu
ul#dropdown-menu ul li a = 160px ;
ul#dropdown-menu ul li = 180px ;
Change
ul#dropdown-menu ul li to
ul#dropdown-menu ul li{width:160px; overflow:hidden;}
Make sure to add overflow:hidden
I have a horizontal menu. I want to have a border around the menu (not the entire-row, only the space menu is covering). When I put border on ul, it covers the entire row, when I put border on li, it has border between menu items as well.
<ul id="menu" style = "text-align:left;">
<li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...</li>
</ul>
Here is the CSS:
ul#menu
{
padding: 0 0 0px;
position: relative;
margin: 0 0 0;
text-align: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li a
{
padding: 0px 0px;
margin-right:20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
}
Kill display: inline on the list items and float them left instead. Float the container as well, which will ensure that it's only as wiide as its contents. Finally, set overflow: hidden on the ul.
Declare ul with display:inline-block. It'll cause ul to take only space necessary to display its contents, not 100% of it.
An example
Use display: inline-block on the ul and add the border to the ul.
If you need IE6 compatibility:
#menu li {
border-top: 1px solid #000;
border-bottom: 1px solid #00;
}
You might be able to use li:first-child (I can't remember, and don't have a copy of IE6 to test with) to apply:
#menu li:first-child {
border-left: 1px solid #000;
}
But you'll likely have to add either a class-name, or id, to the first and last li elements to give them the appropriate border-left and border-right.