I have an unordered list as a menu and the current item has a class active. I want the the active item to have a little box below it like in the image attached. How would I do this using just CSS? If there is no (good) answer I will go old-school and create an image as a background-image.
What you're describing can be done using a pseudo-element and positioning it relative to the element you're decorating: http://jsfiddle.net/fC7gn/
.box {
position: relative;
}
.box:after {
content: '';
position: absolute;
top: 100%;
width: 100%;
height: 10px;
background-color: blue;
}
You can add the following to your CSS:
a:hover{border-bottom:10px solid red;}
You can add the border-bottom style to any element. I attach it to the a tag so it spans the entire width of the content it contains.
Here's an example fiddle (don't mind the extra fluff)
Related
I am an illustrator making a portfolio site.
I'm trying to simply create a rollover css transition with Dreamweaver. I would like it so when you roll over the image the text will rise up to give a description about the image.
Do you mean something like this - DEMO?
What I've done is, I've created two classes (.pic and .text). .pic holds the picture and the other class contains the text. The .text class is positioned at the bottom of .pic and it has a height of 0; To make the text appear when you :hover over the image I just transition the height of .text, in this case from 0 to 150px;
Here the code from my demo
HTML
<div class="pic"><img src="http://placekitten.com/200/300" />
<div class="text"><p>This is a cat</p></div>
</div>
CSS
.pic {
position: relative;
width: 200px;
height: 300px;
overflow: hidden;
}
.text {
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 0;
text-align: center;
background: rgba(255, 255, 255, 0.7);
transition: height 0.7s ease-out;
}
.pic:hover > .text {
height: 150px;
}
by rolling over the image, do you mean mouse-over event? this can be done in multiple ways. but probably if you dont have too much css or javascript knowledge. then just download an image caption plugin. one such plugin that comes to my mind is called jquery capty. just google it and follow instruction of adding like 2 lines of code. its that simple.another way is using CSS positioning of the caption text over the image and use display:none initially and on mouse hover event, use the css :hover pseudo class and give it display: inline-block. hopefully this helps
The best way to do this would be to add a :hover event within your CSS file once you're within Dreamweaver.
Something similar to this:
.class {
background: blue;
}
.class:hover {
background: red;
}
DEMO
This is not something that I've seen Illustrator be able to do and transfer it to Dreamweaver
On my wordpress Website Homepage I inserted a horizontal grey strip containing social network links. I want this to touch the edges of the page over-flowing out of the body, how can I achieve this?
This is the code I used;
.outer {
float: left;
width: 100%;
height: 80px;
background-color: #f8f8f8;
position: relative;
}
The .outer rule isn't the one you'll need to adjust. Looking in the 'styles.css' document find the rule that you've written for .socialstrip. (change the . to a #)
#socialstrip {
height: 80px;
background-color: #f8f8f8;
position: absolute;
left:0;
}
You won't need to do anything else because the class .outer that's applied to it already gives you a width of 100%. Be aware that when you give this element a position of 'absolute' the element below it will not recognize that the #socialstrip element is above it. It will appear to lay over top of it. To fix this just add more margin to the top of the .bottomstrip element. Like this:
.bottomstrip{
margin-top: 200px;
}
That should give you what you are looking for.
I have never tried that before. I created an image sprite that is contains two icons. Each icon is 26px wide and high. So the sprite is 26x52px.
I have an element that is either in a div.something or in a div.anything. Depending on which class it's in I want to add a corner cap to the left or right.
So therefore I'm positioning the .element relative, the apply the :before pseudoclass to the img and position it absolute with a height and width of 26px so only one icon of the sprite fits in. I also apply "overflow:hidden" in order to hide the second icon on the sprite.
.element {
position:relative;
}
.element:before{
content: url("../images/sprite.png");
position: absolute;
height:26px;
width:26px;
overflow:hidden;
}
.something .element:before {
top: -2px;
left: -2px;
}
anything .element:before {
top: -28px;
right: -2px;
}
This works fine for the left-corner where I use the first top icon in the sprite.
However now I wonder how I can show only the second icon in the sprite for the "anything .element".
So actually the "mask" should be positioned at -2px, -2px but the sprite img inside should start at -26px so the second icon is shown.
Is this possible with css the way I'm doing it right now?
Don't use content to insert your image, as you cannot modify its position. Instead, set the content to " " and add the sprite as a background image. You can then use the background-position property to move the sprite to the correct position. Otherwise your example should be working just fine.
A working demo:
http://jsfiddle.net/RvRxY/1/
Support for :before and :after pseudo elements on img tags is limited, if at all existent on most browsers.
The best solution would be to place your img inside a div, and then have the class applied to the actual div, rather than the img.
You almost have the usage for the pseudo element correct. You can give this a try:
.somediv { position:relative;}
.somediv:before {
position: absolute;
content: '';
height: 26px;
width: 26px;
top: 0;
}
.somediv.foo1:before {
background: url("../images/sprite.png") no-repeat -2px -2px;
left: 0;
}
.somediv.foo2:before {
background: url("../images/sprite.png") no-repeat -2px -28px;
right: 0;
}
Use the background:; property rather than the content:; property so that you can position the sprite within the :before pseudo element.
left:; right:; and top:; should be used for absolute positioning of the pseudo element relative to its parent (.somediv).
Placing a 1px border around your pseudo element will help you understand the different positioning :)
Sorry to bring this up again since I am quite sure it was answered in threads like here, yet posting in older threads appears to be pointless. But I'd like to know whether this is still true that I will in fact need jQuery (or something similar) in order to change the properties of one div-element when hovering above some other div-element?
If the answer would still be yes, please have a look at the following picture:
This is part of my navigation I am trying to bring to life right now. As you can see there is some kind of mirror effect underneath the buttons. I want those buttons to be clickable while having a "hover" background-position / background-image change. I tried to do that with a single div-element which didn't work out since the button-area itself is smaller than the entire graphic so even when I was hovering above the reflection the button was ready to be used which was not very intuitive.
Currently I am using a div-element to display the background image including the hover effect and - sorry but I don't really know how to describe the following - some kind of "invisible" text link which is forced to a specific size in order to simulate a clickable area. Here a small visualization:
Green is the area of the background image which is changing upon hovering above the div-element and the red area is the "button".
So again the question ... do I still need something like jQuery to get this hover effect working only when I hover above the button area, are there different approaches to this or ... is something like jQuery really the only answer to that?
I've got a quick solution that is working in Firefox 3.6, you can try it at jsFiddle.
It is not exactly the answer to your question, but offers a solution to your design.
HTML:
<div id="container">
<a href="target1.html" id="button1">
<div id="reflection1-active"></div>
</a>
<div id="reflection1-inactive"></div>
</div>
CSS:
#container{
position: relative;
}
#button1{
background-color: #900;
height: 32px;
width: 80px;
display: block;
position: absolute;
z-index: 10;
}
#button1:hover{
background-color: #F00;
}
#button1 #reflection1-active{
position: absolute;
background-color: #f77;
height: 32px;
width: 80px;
display: block;
top: 32px;
display: none;
}
#button1:hover #reflection1-active{
display: block;
}
#button1 #reflection1-active:hover{
display: none;
}
#reflection1-inactive{
background-color: #977;
height: 32px;
width: 80px;
top: 32px;
display: block;
position: absolute;
z-index: 0;
}
when you hover on an element (link/button) inside another element (parent div) you are actually still hovering on the parent element too so you can effect the two of them at the same time:
HTML:
<div>the button</div>
CSS:
div {width: 100px; height: 200px; background: green;}
a {display: block; height: 100px; background: #000;}
div:hover {background: #cfc;}
a:hover {background: #eee;}
If I'm understanding the question right, the background (green to lightgreen) changes no matter if you're on the "button area" or not (div:hover), whereas the button area only changes when you're on the button itself as it's effected by only the a:hover
[Update]
actually I think I have misunderstood the question: you want to change the background image of the div only when you hover the <a> (button)?
put the new full background on the <a> and have it change it's height too it will mean a bigger "button" area, but that will only be when the button is actually hovered on anyway
try this CSS instead:
div {width: 100px; height: 200px; background: green;}
a {display: block; height: 100px; background: #eee;}
a:hover {background: #000; height: 200px;}
I don't know whether any browsers support this, and I've never tried, but... Could you use a selector for a sibling adjacent to the hovered element, and then use the adjacent element to render the shadow? Since the adjacent element is not a child of the hoverable element, hovering over that would not trigger the hover selection match.
This should be incredibly trivial, but it's not. I have a predefined height for an anchor, and I would like to place the text at the bottom.
<li><a class="my-text">My Text</a></li>
I used the following CSS, which does not work. The text still appears at the top.
a.my-text {
background-color:#cccc;
height:50px;
vertical-align:bottom;
width:100px;
}
The idea is: I want to align text to the bottom, but if there is text that is longer than one line, I want the over flow to go to the top, not push everything else down... any ideas of how this could be achieved?
This can't be done using css and the html you provide. If you put an extra span in the anchor, it can be done:
a.my-text {
height: 50px;
display: block;
}
a.my-text span {
position: absolute;
bottom: 0;
}
You can use bottom:0px with position:absolute in anchor.
HTML
<li><a class="my-text">My Text</a></li>
CSS
li {
position: relative;
height:200px;
border: 1px solid red;
}
a.my-text {
bottom: 0px;
border: 1px solid blue;
position: absolute;
background-color:#cccc;
width:100px;
height:50px;
}
See in jsfiddle.
It definitely would not work, because <a> anchors are inline tags, therefore assigning them heights and widths is useless. The vertical-align property determines the positioning of inline elements with respect to the line they're in, not the vertical position of the text. (See http://reference.sitepoint.com/css/vertical-align) As far as I understand what you are requesting cannot be done. However, there are alternatives, as suggested above, to achieve similar effects.
The issue with your code is that the anchor won't respond to height/width because it is an inline element. If you you add a {display: block} to the anchor it's now a block element, but, as I recall, vertical-align doesn't work on the contents of block elements. This was the easiest way I could think of using display: table-cell.
a.my-text {
background-color: #ccc;
height: 200px; width: 100px;
vertical-align: bottom;
display: table-cell;
}
It sounds like you just need to get rid of the height rule on the anchor tag and use something like padding-top: 45px on the li