I am trying to generate a menu like the following:
There are several items in the menu and the active one has an arrow after it.
The menu items are tags like the following code:
<div class="menuCenter">
<div class="linksWrapper">
Home
<a class="menuCenterLinkLeft" href="#">Plans & Pricing</a>
<a class="menuCenterLinkLeft" href="#">Sign In</a>
<a class="menuCenterLinkLeft active" href="#">Sign Up</a>
<a class="menuCenterLinkLeft" href="#">Contact</a>
</div>
</div>
I tryied two options:
1- Absolutely positioning the arrow image with javascript. I have problems when resizing the page.
2- Using the :after pseudo element, like this:
.linksWrapper a.active:after
{
content: url("images/arrowImg.png");
position: relative;
left: -40px;
top: 30px;
}
The problem with this approach was the horizontal alignment of the arrow. It should be below the center of the link and I could not achive that.
I can use HTML5 or CSS 3.
Any help?
Try this:
.linksWrapper a.active:after {
content: url("images/arrowImg.png");
position: absolute;
left: 50%;
top: 30px;
margin-left: - <width-of-your-image> / 2; /* negative number!*/
}
sidenote: I avoid putting { on a newline, since it may have nasty effects in javascript.
The trick is left:50%; combined with correcting the position by setting it back half width via margin-left.
See example.
The absolute positioning approach should work, you need to put the arrow inside of another div that has position:relative defined, so that the absolute coordinates are relative to this parent div, instead of being relative to the body element.
However, I would go with this approach instead:
Make the arrow a part of the background image of the actual a.active items - this way it will center with background-position and you don't need any scripting!
I put this together really quick..
http://jsfiddle.net/8Sqwq/1/
Because I wasn't too sure how flexible your code could be, this is the best I could come up with.
Which ever href has the classname of .active will inherit the arrow
// I updated the fiddle to show it in action.
Related
I have a scenario in which I have a team page with pictures and some blurb. Under each picture I have social media links much like the following:
These are images that sit within a horizontal list underneath each item using the below base markup.
<ul>
<li>
<a><img src=""/></a>
</li>
<li>
<a><img src=""/></a>
</li>
</ul>
At the moment these are images but I would very much like if when hovered the grey inards of these images turned blue.
I was thinking just have a span with a background image like this:
<a><span class="linkedin"></span></a>
.linkedin{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture)
}
.linkedin:hover{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture-blue-version)
}
However, when I attempted this the space was empty instead of taking the size of the image.
If I enter as content I get a small part of the background image, furthermore giving the class an absolute position takes it out of document flos
Is this the ideal approach?
The problem is if you use a <span> element you need to set it to display: inline-block and you need to set a width for the image to show up. Then it works, here is a demo:
.linkedin {
display: inline-block;
width: 140px;
height:100px;
background-image:url(http://ipsumimage.appspot.com/140x100,ff7700)
}
.linkedin:hover {
background-image:url(http://ipsumimage.appspot.com/140x100,0000FF)
}
<span class="linkedin"></span>
As you see on the first :hover it flickers. Cause it will not load the image bevore you :hover the first time. This is why you should consider another solution. Like mentioned in some comments you could use http://fontawesome.io/icons/ and then just change the color.
To prevent flickering you could do the same with using <img> tags then the source will be loaded and ready to be shown on :hover. But it works best with also setting positions, demo like so:
a.special {
position: relative;
}
a.special img {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
a.special img:first-child {
visibility: visible;
}
a.special:hover img:first-child {
visibility: hidden;
}
a.special:hover img:last-child {
visibility: visible;
}
<a class="special" href="#">
<img src="http://ipsumimage.appspot.com/140x100,ff7700">
<img src="http://ipsumimage.appspot.com/140x100,0000FF">
</a>
Best approach for this is to use SVG's and change the fill of the SVG on hover.
Your approach should work however, it might be that you've not got the correct size image? try 'background-size: cover;' Or that the element has no width. Try setting a width on the span too. (don't forget to give it 'display: inline-block;' too.
Ed: checkout https://css-tricks.com/lodge/svg/
Font-Awesome is a great idea for what you're trying to achieve. Takes less data to load the page too if you can get away with using text in place of images.
By the way, when using the :hover property there is no need to redefine the width and height of the image... Just redefine the changes you'd like to make.
I'm trying to give a button slide in effect just for a mock up using bootstrap lists and overlays. I want to make it look like the button is coming in from the right. Here is the code for what Im trying to do. I'm trying give the li element a positive relative and z-index so it is "above" the .pull-right div.
Any idea what I could do for this to work? The button labeled Test should look like it is coming in from the right, therefore half the text should be visible and half should be not.
As per my understanding I think you might have to hide the overflow of the li
So, I added a class to your html structure
<ul class="list-group">
<li class="list-group-item pos-rel overflow-x-fix">
<p class="inline-block">Test</p>
<div class="pull-right pos-abs">
<button>Text</button>
<button>Test</button>
</div>
</li>
</ul>
And changed the CSS like this
inline-block{
display: inline-block;
}
.pos-rel{
position: relative;
z-index: 999;
}
.pos-abs{
position: absolute;
right: -2%;
top: 20%;
z-index: 1;
}
.overflow-x-fix {overflow-x: hidden;}
Here is the example
I'm not able to click links inside a div the is position:absolute. It seems to not work on mobile android as it works fine on the desktop in Chrome and even ie8.
As soon as I remove the style it works. The class msg-inner is only for jQuery which has it scrollTop no styling on it. I've read many answers and to use z-index or position:relative on the inner div but none works. I even tried using position:fixed on msg_container and same problem. The inner div scrolls and everything looks right but just the links are broken, BTW sporadically some will work and some don't. I took away all styling and just put plain links inside to see if it was a format issue and still nothing.
<div id="msg_container" class="absolute" style="overflow-y:auto;width:100%;height:75%">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.absolute {
position: absolute;
}
Your #msg_container shouldn't have a position of absolute, the .msg_inner should. Try this:
HTML
<div class="msg_container">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.msg_container {
position: relative;
width: 400px;
height: 400px;
}
.msg_inner {
position: absolute;
top: 0px;
left: 0px;
}
Also note that I made msg_container a class, not an ID. It's considered bad practice to have multiple ID's of the same name. While I don't know your code of course, I assumed that you might have multiple msg_containers on a page... so I used a class instead.
An article over on askthecssguy.com shows how to change/invert an image on scroll using fixed backgrounds: http://askthecssguy.com/articles/mike-asks-the-css-guy-about-a-scrolling-trick-with-background-images/
My goal takes this concept further by having the image float over other elements (in this case images).
You can see the result here: http://playground.iamkeir.com/invert-logo/v2/
However, my implementation uses superfluous elements and, so, I was wondering if anyone had any ideas/suggestions of another way to achieve this?
Javascript is certainly an option but I worry it would not be lean/elegant. Someone also suggested using Canvas.
Any ideas welcomed! Thank you.
You can avoid extra markup by using :after CSS pseudo element. Thus, your final markup will look like:
<ul>
<li class="light">
<img src="http://farm3.static.flickr.com/2802/4253151258_7d12da9e1c_z.jpg" />
</li>
<li class="dark">
<img src="http://farm1.static.flickr.com/31/66005536_d1c5afca29_z.jpg?zz=1" />
</li>
<li class="light">
<img src="http://farm4.static.flickr.com/3574/3646151231_0c68f4f974_z.jpg" />
</li>
<li class="dark">
<img src="http://farm4.static.flickr.com/3432/3310214210_813d13c899_z.jpg" />
</li>
</ul>
And the altered CSS will be:
.dark:after,
.light:after,
.dark .after,
.light .after {
position: absolute;
display: block;
content: '';
top: 0; left: 0;
height: 100%;
width: 76px;
background: transparent url(logo-white.png) no-repeat fixed 0 0;
z-index: 5;
}
.dark:after,
.dark .after {
background-image: url(logo-black.png);
}
Notice that there is .after class there. This is to make it work in IE<8, which, sadly, requires to use an expression:
.dark,
.light {
behavior: expression( !this.before ? this.before = this.innerHTML = '<div class="after"></div>' + this.innerHTML : '' );
}
While using expressions is generally discouraged, this one shouldn't affect the performance too much, since it is fully evaluated only once, and when the element is created, the condition returns false.
There is one pitfall, though. If IE8 works in IE8/IE8 mode, the pseudo-elements will be under the images, unless you set negative z-index for the latter, which isn't always acceptable.
You can look at working example here.
what you're trying to do is totally possible using the current code you just need to use absolute positioning to move the content around. For example using the test page http://askthecssguy.com/examples/fixedBackgroundImages/example01.html you can modify the .header class and make it like this.
.header {
background: url("images/cuckoo_color.jpg") no-repeat fixed 20px 20px #DBDED1;
left: -151px;
padding: 40px 40px 40px 300px;
position: absolute;
}
Doing this will make the text float over the images. Going a step further instead of using a background image you could insert a transparent PNG into it's own DIV and float it over any position on the page and keep it's position fixed. You can checkout http://www.w3schools.com/css/css_positioning.asp for some examples.
Hope that helps!
Virgil
Is there a valid non js way to turn a collection of headings, paragraphs and lists into one url? (like in advertisements?)
<a href="http://www.example.com" class="allclickable">
<h2>Fresh Bread</h2>
<p>Delivered to your door</p>
<ul>
<li>Daily</li>
<li>Fresh</li>
<li>Bread</li>
</ul>
</a>
This does not validate and I do want the href to be display as block element (so also the space around the text is clickable).
Cheers
Might be a less ugly way to do this but:
HTML:
<div id="wrapper">
<h2>Fresh Bread</h2>
...
<a class="allclickable" href="http://www.example.com"></a>
</div>
CSS:
#wrapper { position: relative; }
.allclickable { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
Basically you just pust the link over the stuff. Only downside is that the text underneath is unselectable. But it's valid :).
Of course you will have a problem with IE, see solution here: problem with z-index of an empty div layer in IE8
Use html5. In html5 this is allowed.
But be aware that some browsers will generate a different DOM where they will remove the link and place it inside every block element. So
<a><h3>header</h3><p>para</p></a>
will become
<h3><a>header</a></h3><p><a>para</a></p>.
Not that big of a deal, but it might mess up some CSS selectors.