I would like to add a tick mark to an active menu item, but can't seem to figure out how to with my current code. Here's a graphic of what I'm trying to accomplish (notice the tick mark hanging down (centered):
Any assistance would be greatly appreciated.
You may see the current site at:
http://www.redone.org/_dev/ski/menu2.html
The background-image solution presented in the other answers is the most common way to solve this problem. A nice alternative is also available since this particular graphic, a triangle, can be easily created in HTML + CSS; no images, canvas, SVG/VML or plugins required.
<div style="
position:absolute;
width:0;
right:0;
border: 10px solid #fff;
border-top-color: #000;
"></div>
I created a basic example of a menu using this technique. Polygons in CSS were explored at least as far back as 2001 by Tantek Çelik.
on the mouseover of below element
current_page_item
change the background image for that..//make one image with that color like call out
// this is like a psuedo code, this doesn't work in ie7 so you can use jquery
li a:hover
{
background-image: url(images/callout.jpg);
}
Your "current" menu item should be assigned an extra class (like "current"). Then you add a css rule for the "current" class which displays the extra graphic at the bottom.
Thanks for pointing me in the direction. Here's what ended up working for me:
#headerline {
overflow: visible;
border-bottom: 1px solid #2c5e93;
height: 40px;
}
#menu-main-menu li.current_page_item a{
color: #014783;
background-color: #89cefa;
}
#menu-main-menu li.current_page_item {
height: 50px;
background-image:url(ski_tick.png);
background-position:center;
background-repeat:no-repeat;
}
Related
I'm currently working on a schoolproject and I've been trying out some css-transitions. I'm using the transition property to light up the nav-links in the nav but when the page loads the color of the font and the size change size and color before they quickly transition into the styles I've specified in the css. Do you have any clue what could've caused this? I'm having the same issue with some of the other elements on the page too.
I've tried using the transition on the color property only transition:color,0.5s; but then the text turns blue/purpelish for some reason. I've also tried the webkit-prefix but that didn't really help. If I take away the transitions the problem stops.
Help would be greatly appreciated!
Here's the css for the nav
.main-head a{
text-decoration: none;
font-weight:bold;
font-size:3em;
margin:0.5em;
color:#636363;
transition:0.5s;
}
.main-head a:hover {
transition:0.5s;
color:#eee;
/*border-bottom:3px solid #eee;
border-top:3px solid #eee;*/
}
And here the page if you want to check it out for yourselves. Pay attention at the top when loading the page and you'll notice the weirdness.
http://albmar13.ddi.hh.se/Laboration%201/index.php
I've been instructed to make links on a website have a different colour underline than the font colour. It all seemed quite easy, using border-bottom as below, except that linked images are now also underlined.
Is there a way, without using JS, to stop happening?
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
An example - hovering over the below image now adds the border-bottom CSS style to it, which I don't want -
<a title="Dyne Drewett" href="http://test.dynedrewett.com">
<img class="attachment-full" width="202" height="78" alt="Dyne Drewett Solicitors" src="http://test.example.com/Website-Header.png">
</a>
The only static way to do this would be to use a class on image links like:
<a href='http://whatever.url.here/' class='imglink'>
<img src='img/image.png' alt='Alt text'>
</a>
Then apply a CSS style to this class:
a.imglink:hover {
border-bottom: 0px solid;
}
You'd have to declare this AFTER the other a:hover CSS class.
Technically, you cannot set a style on an element based on what elements it contains. You cannot make the border of an a element depend on the presence of an img element inside (and this is what you are dealing with). Using classes would help, but from the comments, it seems that this is out of the question.
There’s a workaround: place each image at the bottom of the containing element (not on the baseline as per defaults), and shift it down one pixel, or whatever the border width might be. This way, the image will cover the bottom border, provided that the image has no transparency. CSS code:
a img {
vertical-align: bottom;
position: relative;
top: 1px;
}
This slightly changes the position of all images, so it might affect the overall layout unless you take precautions.
I'd suggest adding a class to the link, so you can do
a.imglink:hover{
border:0;
}
Alternatively, if you can't control that class, you can try adding a negative margin to your image to ensure the border doesn't show:
a img{
margin:0 0 -1px 0;
}
That -1px might need adjusting based on your other rules
Here's a fiddle to show the negative margin solution: http://jsfiddle.net/QRXGe/
Your solution will require you adding an additional class name to links that wrap images (or anything where the border should be removed). There's no way to sort of "reverse select" unless you want to employ a JavaScript technique.
A jQuery technique would be something like this:
$('a > img').parent().css('border-bottom', 'none');
That will remove a "border-bottom" style from all anchor tags that have image as a direct descendant. But you'll need it on every page, and every page is getting parsed by this script, so it's a little added overhead on each page.
Otherwise, if you have access to the HTML, creating a CSS class to target these specific links such as:
a.img-link{ border-bottom:none; }
And apply it to any link that's around an image such as:
<img src="#" alt="" />
I hope that helps!
Another way to achieve this is to simply make the images in links relative and then offset the bottom to cover the border. 5px seems to do it http://jsfiddle.net/ECuwD/
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
a img {
position:relative;
bottom: -5px;
}
a:hover img {
border-bottom:none;
}
or perhaps...
a:hover img.attachment-full {
border-bottom:none;
}
Apparently, what you want is a different behavior for the same markup (<a>) based on its content.
Sadly, there is no real way to do this with pure CSS, as this language is not programming language and therefore lacks the condition structures, such as if.
That does not mean that there is no solution! Here is a couple of things you can do:
Declare (say) in your HTML that the element (<a>) should be handled differently (with classes, in your case either <a class="text"> or <a class='image'>.
Use JavaScript to change your style dynamically, which means based on conditions, such as content for instance. In your case it would probably be something like:
function onLoad() {
for (var element in document.body) {
// look for links
// if this is a link:
// look for image inside link
// if there is one:
// remove the border
}
}
I'm currently building my website and I've run into a problem. Here is the webpage.
I want to add 3px underlines to only the links, like this:
The line height of the text is 56pt, so the border-bottom is far too far away from the links. text-decoration: underline is too thin, and way too close.
They need to be about half this distance. As negative padding doesn't exist, how should I go about fixing it?
Now used to this code (This is demo)
Css
.HomeText p a {
color: red;
text-decoration: none;
position: relative;
display: inline-block;
vertical-align: top;
}
.HomeText p a:hover:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-3px;
border-bottom:solid 1px red;
}
Demo LInk
Try adding the following:
display: inline-block;
height: 1.2em;
Haven't tested extensively, but seems to close the gap nicely in modern browsers.
Answer 1: Accept that css has limitations and work round them.
Answer 2: The only way I can thing of doing this is a using a span displaying it is a block and adding a border and padding to the bottom - this process will open up a whole other can of worms though floats blocks inline text etc. So I would go back to answer 1.
did you try this?
a {
border bottom: 3px red;
}
I have searched far and wide on the Internet but have not found anything helpful regarding how to style the dropdown portion of a dropdown list in a form. I would appreciate a pointer in the right direction. Thanks.
I've been working on the same problem for a while. Came up with a pretty simple solution using a holder div that is shorter then the dropdown itself. I also use a background image to get the dropdowns arrow to look the way I like. Check it out http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/
All you need is a div around the select tag and 2 CSS classes.
HTML:
<div class="mainselection">
<select name="State" id="input7">
<option></option>
<option value="Alabama">Alabama</option>
...
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</div>
CSS:
.mainselection {
overflow:hidden;
width:350px;
margin-left:35px;
background: url("images/dropdown_arrow.png") no-repeat #fff 319px 2px;
/* dropdown_arrow.png is a 31x28 image */
}
select {
border:0;
background:transparent;
height:32px;
border:1px solid #d8d8d8;
width:350px;
-webkit-appearance: none;
}
Then after a little Javascript verification, I can also switch the class on the div to .dropdownbad to give it a red border.
.dropdownbad {
border:2px solid #c13339;
}
The default and error states are shown here:
You can apply styles using the SELECT selector or applying a classname to a SELECT element. However, you'll run into issues with IE < 8 applying things like borders to the element.
You can then target options by using the OPTION selector.
SELECT { border: solid 1px red; font-weight: bold; }
OPTION { background:green; font-style: italic; }
Should give you a drop down with a red border (if using FF or IE8 in Standards mode) with bold text, and the options should be italic with a green background.
Check out this website for CSS only solution:
http://www.htmllion.com/default-select-dropdown-style-just-css.html
HTML:
<form>
<select>
<option>CSS</option>
<option>HTML </option>
<option>HTML 5</option>
</select>
</form>
CSS:
<style>
select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
background: #0088cc url(img/select-arrow.png) no-repeat 90% center;
width: 100px; /*Width of select dropdown to give space for arrow image*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/
color: #FFF;
border-radius: 15px;
padding: 5px;
box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
}
</style>
Its possible, but convoluted to say the least. You can't actually style the drop down portion of a drop down list consistantly across different browsers as they all support them in different ways (I mean really varied support).
When I had a problam like this a few months ago, the only solution I found was to, using javascript, convert the drop down list into a ul/li drop down menu, which I could style. Of course there are numerous event that need handling, like selecting a value.
Luckly there's a plugin for JQuery that allows this be a trivial task. (The given Brainfault link for this plugin isn't working anymore.)
As mentioned above it's pretty much impossible to do using straight html, I have had good results with jQuery Combobox though.
Since this question was asked, browser technology has far improved. You can now create a custom dropdown menu entirely using CSS with no javascript.
Check out this blog post:
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
I have dropdowns in my cart that were light gray if not selected. I was able to turn the text black with this:
#customer_details ul {
color: black !important;
}
That was all I needed to change, so I can't say what else you could do.
I have a CSS rule like this:
a:hover { background-color: #fff; }
But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.
I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:
a.imagelink:hover { background-color: transparent; }
Today I was looking for a more elegant solution to this problem when I stumbled upon this.
Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.
Is there a nice way to solve this problem, or do I have to use the dirty approach again?
Thanks,
I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any...
About images with that bottom gap, you could do the following:
a img{vertical-align:text-bottom;}
This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.
For the transparent images, you should use a class.
I really hope that's solved in CSS3, by implementing a parent selector.
I'm confused at what you are terming "image links"... is that an 'img' tag inside of an anchor? Or are you setting the image in CSS?
If you're setting the image in CSS, then there is no problem here (since you're already able to target it)... so I must assume you mean:
<a ...><img src="..." /></a>
To which, I would suggest that you specify a background color on the image... So, assuming the container it's in should be white...
a:hover { background: SomeColor }
a:hover img { background-color: #fff; }
I usually do something like this to remove the gap under images:
img {
display: block;
float: left;
}
Of course this is not always the ideal solution but it's fine in most situations.
This way works way better.
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration: none;
border: 0 none;
background-color: transparent;
}
No cumbersome classes that have to be applied to each image. Detailed description here:
http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/
Untested idea:
a:hover {background-color: #fff;}
img:hover { background-color: transparent;}
The following should work (untested):
First you
a:hover { background-color: #fff; }
Then you
a:imagelink:hover { background-color: inherit; }
The second rule will override the first for <a class="imagelink" etc.> and preserve the background color of the parent.
I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.
you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.
I assume you have whitespaces between <a> and <img>? try removing that like this:
<a><img /></a>
I had this problem today, and used another solution than display: block thanks to the link by asker. This means I am able to retain the link ONLY on the image and not expand it to its container.
Images are inline, so they have space below them for lower part of letters like "y, j, g". This positions the images at baseline, but you can alter it if you have no <a>TEXT HERE</a> like with a logo. However you still need to mask the text line space and its easy if you use a plain color as background (eg in body or div#wrapper).
body {
background-color: #112233;
}
a:hover {
background-color: red;
}
a img {
border-style: none; /* not need for this solution, but removes borders around images which have a link */
vertical-align: bottom; /* here */
}
a:hover img {
background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}
I had the same problem. In my case I am using the image as background. I did the following and it resolved my problem:
background-image: url(file:"use the same background image or color");