The link "CATEGORIAS" (marked in purple) redirects to the main page and the "+" sign opens a dropdown. So if the user click through the link "CATEGORIAS" would be redirected to the main page.
We want to occupy 100% width of the screen with the :after pseudo-element covering the link. So if the user click in "CATEGORIAS", its really clicking the :after element.
http://i.imgur.com/z3QIrCU.jpg
http://i.imgur.com/ORJguW0.jpg
span {
position: absolute;
top: 0;
width: 100%;
height: 30px;
background-color: rgba(137,142,236,0.5);
}
span:after {
font-family: "FontAwesome";
content: "\f067";
font-size: 26px;
color: #7f7355;
cursor: pointer;
top: 3px;
}
Thank you
Have you tried this? Works for me.
.menu-mobile-grover,
.menu-mobile-grover:after {
width: 100%;
}
Related
The titles in my webpage are also a link that anchor to themselves, for accessibility reasons, I cannot really change that.
However, most people would like something in the likeness of 🔗 Title with only the 🔗 being a clickable link.
So my html looks like
<h2 id="myid">Title</h2>
And my CSS (so far):
h2 a::before { content: "🔗 "; }
However, I am far from having the wizardry to know what to do next, I tried looking at this question but I don't really know how to "save" the ::before part from being affected.
It's a bit tricky but you could set a fixed width for the 🔗 character and overlap the h2::after pseudoelement for the entire length of the element minus the width of the a::before pseudoelement so the text can't be clicked.
It's worth noting that this will reduce the usability of the page so be careful on using this approach
h2 {
position: relative;
display: inline-block;
}
h2::after {
position: absolute;
z-index: 1;
content: "";
right: 0;
height: 100%;
width: calc(100% - 1.25em);
}
h2 a::before {
content: "🔗";
display: inline-block;
border-bottom: 1px dashed yellowgreen;
width: 1.25em;
}
h2 a {
text-decoration: none;
color: inherit;
}
<h2 id="myid">Title</h2>
I'm trying to add an icon inside a button. The problem is that whenever I add the icon, it changes the shape of the button (it makes it taller, and sometimes wider depending on how big the icon is), and it mis-aligns the text of the button so that it is no longer centered, rather the text has been pushed down.
<button>
<i class="material-icons">weekend</i>
Test
</button>
And the CSS:
i {
color: #669FAB;
font-size: 24px !important;
}
button {
min-width: 100px;
}
https://jsfiddle.net/uxs71ymz/1/
I would like the icon to shift to the left, while having the text remain centered inside the button.
hi here is the css code
CSS
i {
color: #669FAB;
font-size: 24px !important;
vertical-align:middle;
}
button {
min-width: 100px;
}
hope this helps..
https://jsfiddle.net/hq9t8rk4/
button i.material-icons {
color: #669FAB;
font-size: 24px;
// Add the below
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
}
button {
min-width: 100px;
// Add the below
position: relative;
padding: 3px 50px;
line-height: 24px;
text-align: center;
}
I want to make my button responsive, so I can't use the image together with background. I can use the second picture of the cart only, but how can style it, so part of it remains outside?
You could apply the background-image to a :pseudo-element of a button element and position them using top and left properties.
button {
position: relative;
width: 20%;
height: 35px;
background: #B7004A;
border: none;
border-radius: 5px;
}
button:before {
position: absolute;
content: '';
width: 100%;
height: 110%;
top: -7px;
left: -3px;
background: url(http://i.stack.imgur.com/Aiy4E.png) no-repeat;
background-size: auto 105%;
}
<button></button>
Is it something like this you are looking for?
jsFiddle: http://jsfiddle.net/vgayjg9j/2/
EDIT: updated the jsFiddle. It now sticks out.
<button><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/shoping_cart.png" /></button>
button {
width: 120px;
height: 40px;
}
button img {
height: 100%;
float:left;
}
From your question I think you want to button to fill the screen if it is on smaller devices?
Media queries is where you should start.
Also make sure you use % for the width of the button, for example if you want you button to fill the screen the css would look something like this:
button {
width: 100%;
}
And if the image should not change then I would define the width of the image in pixels:
button img {
width: 40px;
}
EDIT Changed the text to reflect better the problem.
For live demo you see the website here: http://wow-klickers.de/ (The CSS here I have modified, to maybe solve the problem.)
So I have the following scenario. My website contains a navigation bar, which in the picture above contains a "Forum" button and there is above a logo. If I go over the button the hover effect hides the part of the logo which extends into the button. I want to hover over the button but not hide the part of the logo.
Here are my code snippets:
<h1 id="logo"> // the blue box of the 2. picture
// the blue box of the 1. picture
</h1>
CSS things:
#logo a {
width: 275px;
height: 126px;
display: block;
position: relative;
bottom: 18px; // added here
}
h1#logo {
margin: 0;
position: relative;
left: 85px;
top: 6px;
background: url("images/logo.png") no-repeat;
width: 275px;
display: block;
z-index: 2; // changed here
height: 126px; // added here
}
#primary-menu-bar li a, #primary-menu-bar ul.menu li a {
display: block;
white-space: nowrap;
height: 37px;
line-height: 29px;
position: relative;
z-index: 1;
}
EDIT I tried with padding or margin, but with margin my logo is cut off but the logo should overlay over the button. And padding does not work..
Add z-index:10 to h1#logo, and not just on the a tag inside.
I've got 2 elements, 2 images of exactly the same dimensions, positioned one on top of the other. Say they're called A and B (A is the top one). What I've done is made it so when you hover over A, its z-index decrements by 2 so that B is now on top, and B's hover: increments its z-index by 2 so it's now higher by 1 than A's original z-index (thus image B stays on top until you remove mouse). So basically...
#A {z-index: 5;}
#B {z-index: 4;}
#A:hover {z-index: 3;}
#B:hover {z-index: 6;}
This works perfectly in Firefox and Chrome, but IE doesn't want to hear about it, and my images keep spazzing while hovering over them. Any help is appreciated. Positioning is Absolute, if that matters.
#jklm313
That actually works in my IE9 as well. Maybe I should post the full code since one of my "images" is actually a social network button. So here it is:
HTML:
<div id="myTweetBrown"></div>
<div id="myTweet"><?php include ("myPHP/homepageSoc/tweet.php") ?></div>
CSS:
#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}
#myTweetBrown:hover {
position: absolute;
z-index: 3;
}
#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 4;
}
#myTweet:hover {
position: absolute;
z-index: 6;
}
tweet.php:
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Link to demo website: ***** -- scroll down to Tweet button
This will be up only for so long, because I don't want people to have access like that <.<
Just going to rewrite my whole answer now the source code has been provided.
All "modern" versions of IE, when not in quirks mode, accept this code perfectly fine for divs and links. The problem in IE arises for iframes and other unusual elements, at which point its rendering engine seems to fail. (Shock!) You'll get this flickering for no apparent reason, except perhaps the conflicting doctypes in the iframe and page, which I would also try avoid if possible.
Presuming this link is generated by twitter, I would advise a fallback approach for IE. Instead of hovering between your button image and a twitter provided button image, I would just manipulate the css of the button twitter provided inside the iframe using javascript.
document.getElementsByTagName('iframe')[0].getElementsByTagName('a')[0].className += 'myTweetBrown';
The button looks to be generated by HTML5 rather than being a static image, so it shouldn't be difficult to manipulate:
.myTweetBrown:hover {
background-image: url('../images/tweetBrown.png') !important;
background-repeat: no-repeat !important;
background-position: center center !important;
height: 20px !important;
width: 55px !important;
}
.myTweetBrown:hover * {
display: none;
}
The other approach you could take is keep doing what you were doing before, but applying the styles differently like so, dependant on display:
#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}
#myTweetBrown:hover {
opacity: 0;
}
#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 3;
}
Technically, CSS doesn't actually specify how and when elements go in and out of the "hover" state. So it sounds like when A goes under B, your version of IE removes the hover state from A and it immediately pops back in front of B, before B gets the hover state and pops further in front.
How about wrapping the two in a div, and testing for the hover state on that? Does that work?
http://jsfiddle.net/X64au/
Try wrap them in a div
.parent
{
position:relative;
z-index:1000;
}
.a
{
position: absolute;
z-index : 1001;
display: inline-block;
}
.b
{
position: absolute;
z-index: 1002;
display: inline-block;
}