I got a sprite picture which is a breadcrumbs menu. I want to change the y position of this sprite when the mouse is hover the menu's elements.
There is no problem to do it with a fixed width website, but i can't resolve this with a responsive one...
Here is the live version : http://jsfiddle.net/RtqkD/
and my CSS code :
.services {
height: 64px;
width: auto;
background: transparent url('https://dl.dropboxusercontent.com/u/3894287/sprite.png') no-repeat 0 0;
background-size: 100%;
}
.services #Et1 {
margin-left: 60px;
}
.services #Et1, .services #Et2, .services #Et3, .services #Et4 {
height: 65px;
}
.services li {
float: left;
width: 210px;
position: relative;
background: none;
}
.services li a {
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
.services li:first-child a {
padding-left: 10px;
}
Any tips ?
EDIT
After the #Sven comment i made a more complete live version of my issue here with CSS, HTMLand Javascript: http://jsfiddle.net/RtqkD/2/
Right, lets start with the fact that the way you're spriting that is totally unnecessary. I see why, but with some careful coding it can be gotten around.
Using the :before pseudo element, I created the triangles after each item. Now each item reacts to the hover on the anchor using CSS rather than jQuery (much neater). Browser support won't go down to IE7, but neither do most things.
Here's the fiddle: http://jsfiddle.net/robsterlini/RtqkD/5/ (EDIT sorted the padding issues http://jsfiddle.net/robsterlini/RtqkD/6/)
And here are the elements used: arrow sprite, background sprite (and if you wanted to be really tight with the sprites, you could even sprite them together, just be careful with how you do it.
Took me a little while to figure it out, so if you need any explaining then give me a shout :) Hope that helps!
Related
Working on a parallax WordPress site for a client and I have a navbar with a sprite being used for the background image for each link. You can see the seven link navbar here (http://www.aishla.com/blog/2014/my-aish-test/). Now it looks great on desktop, but I want to make those images responsive. In other words, get smaller as the design gets smaller.
So I thought I could use the background-size setting in CSS but when I tried in my media query, I get the entire sprite inside of the a href rather than just the portion of the image that I want. So I'm wondering if this is even possible to accomplish this way or if I'm stuck creating a series of sprite for different screen resolutions. Here's an example of what I'm using to try to make this work:
First off the desktop version:
nav ul.sub-nav li a { background-image: url("../aish/images/subnav.gif"); background-repeat: no-repeat; color: #000; float: left; height: auto; margin: 0; padding: 80px 0 0 0 ! important; font-size: 16px;font-weight: 700; text-transform: uppercase; text-align: center; width: 137px; }
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; }
nav ul.sub-nav li:first-child a:hover { background-position: 0px -140px; }
Now the media query fior max-width 768px:
nav ul.sub-nav { float: none; width: 763px; margin: 0 auto; padding: 0; height: auto; list-style-type: none; }
nav ul.sub-nav li a { background-size: 79.562% 79.562%; padding: 80px 0 0 0 ! important; font-size: 14px; width: 109px; }
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; }
Sorry cant comment -> you cant use background-size: in this way as you are saying that you want your background to be 79.562% of the width of nav ul.sub-nav li a which is set to 137px so that would make your entire sprite 108px wide, hence why it looks so small. if you want nice crisp icons for your nav I would just use .svg images and they will look better on high DPI screens anyway.
If you want to use background-size, you would have to calculate how many times your sprite fits into 137px and you would end up with like >600%, but your sprite would need to be the same ratio as your your div, and all that work to end up with non hdpi images I would not recommend.
I want to display a link in a mobile menu that is hidden in the regular page navigation. I removed the “Home” navigation link
<li id="home-menu">HOME </li>
from the regular webpage view in styles.css Line 60, using an alternative to display:none, discussed here: http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont.
#home-menu {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
Now, I want to enable the "Home" link in the mobile menu list. On Line 176 of styles.css, I tried to display #home-menu,
#home-menu {
display: inline-block;
}
but it will not show in the responsive menu. I am really trying to avoid using !important. I would appreciate learning how to resolve this. My example is at http://nspowers.org/ask/display/
You have a lot going on here, so without going into too much detail I'll suggest a cleaner alternative:
Remove the absolute positioning and its associated rules and instead use display: none; to hide #home-menu initially - then add display: block; at the mobile break point to have it re-appear:
header#topnav nav ul li#home-menu {
display: none; /* Also remove the !important rule from here */
/* position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; */
padding: 0; border: 0;
}
To have home re-appear for smaller devices:
#media only screen and (max-width: 579px) {
header#topnav nav ul li#home-menu {
display: block;
}
}
This seems like a simpler more maintainble solution, plus you won't need to override so many rules.
Read up on selector specificity if you're confused about how it works - see: http://www.w3.org/TR/css3-selectors/#specificity, http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ and https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity for more.
You're clipping it and have a height and width of 1px, so you need to override these properties as well:
#topnav nav ul li {
float: none;
margin: 0;
clip: auto; //reset clip to not clip
height: auto; //allow height to expand
width: 100%; //matches rest of menu elements
position: relative; //allow to flow above rest of elements instead of overlap first one
}
You also have this at line 117, which is overriding your display: inline-block because of the specificity of the selectors you are using. You can see this in the developer tools:
#topnav nav ul li {
display: block;
float: left;
font-size: 1.7em;
margin-right: 30px;
}
Ok. This is really weird and I have spent countless hours in vain searching for anything similar. I will add code, but you'll need visuals as well, so I'll include a couple of cropped images to show you what I mean.
My goal: Simple. Push my horizontal nav bar in my footer about 25px below the top edge of the footer. (Footer has a static background image)
Code used: #footer ul {margin:25px}
Result: No change.
HUH? So I played with it... tried several variations, but nothing worked. NOW, I did find a workaround... used padding instead of margin... but it bothered me that margin wouldn't work so I kept trying to figure out if I messed up my code somewhere.
I used float in the body, but I cancelled it out. Validations all came out ok. So I accidentally stumbled upon Firebug (never used it before... and still don't know how) but in my aimless clicking, I noticed something odd... when I clicked onto my footer ul, a box overlapping the footer and content was highlighted. So it appeared that my margin did exist, but instead of pushing my nav list down... it kept the nav list static, and expanded into the content.
HUH? So I did a little experiment. I created a bright border around the divs in my content and footer and ul to figure out exactly what was happening. (My content section has three divs: content (floating left); sidebar (floating right); and contentWrapper that contains both).
With the borders on, I noticed that my 'outerContent' div was collapsed. A mere 20% or so of the height of the area. So after some (lengthy) research, I came up with the overflow-auto fix. And although I still don't quite understand it, it worked. The contentWrapper expanded to meet the footer, and the footer ul moved to where I wanted to.
So problem fixed, right? Well..... not exactly.
My previews did fine, so I went back in and deleted the borders so I can get on with the rest of the formatting. Only when I previewed again... the footer ul was right back where it started. At the very edge of the top of the footer.
I did the borders again... the divs seemed fine, except that the contentWrapper was now pushed slightly above the footer to allow for that margin.
Now the REALLY weird thing is that when I put the border around my footer... the ul margin works. When I take it off... the ul goes back to where it was.
What the #$#%!? Although I know of the workaround (the padding) I am worried about compounding whatever mistake I have made and repeating constantly in the future (I have to build another website after this). If someone can figure out what I did to screw things up... it would be GREATLY appreciated.
#contentWrapper {
overflow: auto;
padding: 20px 10px;
}
#content {
float: left;
width: 660px;
}
#content h1 {
padding: 0 0 20px;
}
#content h2 {
padding: 20px 0 10px;
}
#content p {
line-height: 160%;
text-align: justify;
}
#content img {
float: left;
margin-right: 10px;
}
#content ul {
line-height: 160%;
list-style: disc outside url("../images/Bullet-artsy1.png");
margin: 0 0 10px 325px;
padding: 10px 0;
}
#content .info {
margin: 5px 0 10px 250px;
}
#rightSide {
float: right;
line-height: 140%;
padding: 0 10px;
width: 220px;
}
#rightSide h2 {
margin-top: 10px;
padding-bottom: 10px;
}
#rightSide p {
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
text-align: justify;
}
#rightSide img {
display: block;
margin: 5px auto;
}
#footer {
background-image: url("../images/TCS-Footer1b-plain-230px h.png");
background-repeat: no-repeat;
clear: both;
height: 230px;
}
#footer ul {
list-style: none outside none;
margin: 25px;
text-align: center;
}
#footer ul li {
display: inline;
margin: 30px 0;
}
#footer ul li a {
color: #E8FAFF;
padding: 30px;
}
#footer p {
color: #E8FAFF;
text-align: center;
}
#footer img {
bottom: -60px;
position: relative;
right: -900px;
}
The site is not active, but I've uploaded a word doc with images showing what I am talking about. This is the link to Temp Share: http://temp-share.com/show/dPf3UCobW
Thanks in advance to everyone who can perhaps show me where I went wrong.
First, to prevent your margin from disappearing, either change the margin on the #footer ul element to padding, or add one px of padding to the #footer element.
In this fiddle, we've set the padding on the #footer to 1px and reduced the height by 2px to compensate.
FIDDLE
#footer ul {
list-style: none outside none;
padding: 40px;
text-align: center;
}
or
#footer {
background-color: #DDDDDD;
background-repeat: no-repeat;
clear: both;
color: #808080;
font-size: 12px;
height: 228px;
padding: 1px;
}
looking at the css, your padding settings on the <a> tags won't work the way you expect, since by default they are aren't block elements. Add this to the css to have them padded correctly:
#footer ul li a {
display: inline-block;
}
likewise, your ul li should be inline-block.
so ...
#footer ul li {
display: inline-block;
margin: 30px 0;
}
#footer ul li a {
display: inline-block;
color: #E8FAFF;
padding: 30px;
}
Basically, just be aware that when top and bottom margins touch, including those of parent and child elements, the largest margin is used, but the margin is pushed outside the outermost element.
I tested it using firebug and working fine. If you have problem you can add !important at the end as this
#footer > ul {
margin: 13px !important;
}
And even what you would like to do is to get some margin before and or after the ul. For this you could set margin and/or padding value to your #footer.
Hope this help!
This is for future reference. I simply wanted to add the following link to compliment Dom Day's above. I am still having difficulty conceptualizing the event but between the two links, it will help me research it until I find the equivalent to an 'adjoining/collapsing margins-for-dummies' site. www.w3.org/TR/CSS2/box.html - Details near the bottom of the web page.
I know I have seen this somewhere before, but I am trying to create a black fixed navbar with a marker that is transparent cut-out triangle. I need help getting the triangle cut-out to be transparent to the background, so when you scroll the page, you can see through to the content beneath:
I have a standard list/anchor navigation with a javascript to move the .current class depending upon the page section:
<div class="navbar">
<ul>
<li class="current"><a>home</a></li>
<li><a>products</a></li>
<li><a>services</a></li>
<li><a>contact us</a></li>
</ul>
</div>
styled with the following CSS:
.navbar {
width: 100%;
position: fixed;
background: black;
float: left;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
a {
padding: 10px 20px 20px;
}
.current a {
background: transparent url('../img/wedge-red.png') center bottom no-repeat;
}
The only way I can think to do it is to add extra divs on either side of the ul and assign the background to them, and then use a transparent png with a cutout as the background of the li a's.
Is there a way to do this without getting really ugly like that, and adding extra divs?
Try CSS pseudo elements!
Add 2 free DOM elements before and after an existing element in the DOM. Ideal in cases when you don't want to add stuff to your markup to satisfy styling needs.
CSS Markup
.item:before {
content:"";
display: inline-block;
width: 20px;
height: 20px;
background-color: silver;
}
.item:after {
content:"";
display: inline-block;
width: 20px;
height: 20px;
background-color: gray;
}
HTML
<div class="item">Content</div>
Check this JSFiddle for a demo.
Make sure you set content: "" and display:block in order to see them.
Here's what I ended up with -- extending the borders and cropping them with overflow: hidden; (a little hacky, but it works and doesn't add elements to the DOM):
.navbar {
width: 100%;
height: 60px;
position: fixed;
overflow: hidden;
}
ul {
border-left: solid black 2000px;
border-right: solid black 2000px;
position: absolute;
top: 0;
left: 50%;
margin-left: -2000px;
}
The above worked nicely for my purposes, and behaves in a responsive environment.
The other answer on this page, using :before and :after pseudo elements didn't work for my purposes. It ended up being too fussy, the pseudo elements wouldn't align properly, and kept wrapping to the next line when the browser window was resized. That solution as suggested works with fixed-width elements, not percentages as was specified in the original question.
I have created a grid of thumbnail pictures, that when hovered over, the picture dissapears a block colour is shown with the title of the image on. but In internet explorer instead of the pictures and text appearing within their set thumbnail space they all cramp up in the left corner.
The image and title are stored within the box/ category-widescreen div, this is a dynamic code for wordpress.
Any ideas?
#page-wrap {width: 1060px; padding-bottom: 40px;}
.box { margin: 20px; float: left; }
.category-widescreen { width: 400px; height: 229px; background: #FF0000; }
.category-widescreen a{text-decoration: none;}
.category-widescreen h1{font-size: 30px; color: #FFF; line-height: 34px;}
.category-widescreen h2{font-size: 26px; color: #FFF; line-height: 30px;}
.title{position:absolute; top:14px; left:14px; z-index: 0; padding-right: 14px;}
.category-widescreen img { max-width: 400px; max-height: 229px; float: right; padding: 0 0 2px 10px; z-index:1; position:relative;}
Thankyou for any help!
Too vague! As the other guy suggests, give the basic html structure. However, some observations:
Aren't the font sizes used a bit too big (30px and 26px)?;
title{position:absolute; ...} .... make sure that the parent is styled with position:relative otherwise it will become a mess;
how about floating? Are you making sure things are floated in the right direction?
Hope have helped or at least opened your eyes wide-open! ha ha ha ...
You need to set position:relative to your posts so that the absolutely positioned elements know where to follow.
Try this:
.post {
position:relative;
}