I am using Wordpress native menus for my custom theme. The catch is, that I am using background images instead of text. That being said: I have all of my images in tact but now I'm trying to make the images scale down responsive when the .wrapper container they are in scales down.
My latest attempt involves using background-postion: property and background-size: property and getting the image to scale with it's parent element. In this case the .wrapper. My overall goal is to get the images to stay in a horizontal line the width of the wrapper and scale down to size when the wrapper scales down.
.wrapper {
max-width:1280px;
width:95%;
margin:0 auto;
}
.nav ul li {
float:left;
max-width:100%;
height:119px;
margin:0;
padding:0
}
/* nav elements */
li#menu-item-1688 a {
background:url('img/ksl_news.png');
max-width:100%;
height:100%;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
display:block;
padding:0;
margin:0;
}
I am looking for a pure css solution if possible.
Please let me know what other info you need in order to help.
Thanks in advance.
My suggestion would to use simple jQuery to detect window/browser size changes and add classes to the necessary elements.
var $window = $(window),
$body = $('body');
$(window).on('resize', function () {
if ($window.width() < 800) {
$body.addClass('medWin');
}else{
$body.removeClass('medWin')};
});
Then you would style:
body.medWin .menu li {
// style here
}
You could also just apply the class to the menu container or the ul itself.
Related
I truly wouldn't be posting a question if I hadn't already spent hours digging through files and researching. I must really not know what I'm looking for :-|
I want to know how and why divs in a container (or the container itself) can change to 100% width when a responsive design is scaled to iphone dimensions - like the below:
http://demo2.woothemes.com/whitelight/about/
the sidebar sits underneath the main content, then the divs inside stretch to 100%
It's driving me absolutely mad! Any help / direction must appreciated :)
Basic Media query responsive layout example:
Demo: http://jsbin.com/ayojan/1/edit
Resize browser to see effect.
div {
outline:solid black;
}
.content {
width:80%;
float:left;
}
.sidebar {
width:20%;
float:left;
}
#media only screen and (max-width: 767px) {
.sidebar {
width:100%;
float:none;
}
.content {
width:100%;
float:none;
}
}
Key points: inside the media query you unfloat the elements (float:none) and set them to width: 100%;
I have a row of thumbnails (container elements) that are set to float left;
The thumbnails are scaled down to fit in a row.
<style type="text/css">
.thumbnails{
float:left;
position:relative;
}
.thumbnails img{
/* ... */
width:65px;
height:47px;
}
</style>
When the user hovers over a thumbnail, I would like to show a pop-up of the thumbnail with its original size:
<style type="text/css">
/* in addition to the above... */
.th_selector:hover img{
position:absolute;
top:-30px;
left:-30px;
width:150px;
height:113px;
display:block;
z-index:999;
}
</style>
Once I move the mouse over a thumbnail, the image bigger image is shown (as intended).
But I have two problems:
1) The other thumbnails jump one position to the left. They end up below the pop-up image. This can also create a flicker (depending on the position of the mouse pointer).
2) If the window is too small and if there are two rows of thumbnails, there is a line-break (which is not very nice).
How could I create a row of thumbnails with a nice hover-image, while keeping the original position of the thumbnails?
.thumbnails {
float:left;
position:relative;
width: 65px;
margin-right: 10px;
}
.thumbnails img{
position:relative;
display:block;
width:65px;
height:47px;
}
.thumbnails:hover img {
top:-25px;
left:-40px;
width:150px;
height:100px;
z-index:999;
}
http://jsfiddle.net/functionfirst/V4YaQ/1/
In your code example, you shouldn't use position absolute as this declaration removes the element from the document flow. This essentially means the element no longer has a 'foot-print' on the page, hence thumbnails to the right are effectively collapsing in under the now absolutely positioned element.
I am using the following CSS on anchor tags with specific classes. Works OK except that long link text is forced into new lines. I guess this has to do with the width...
a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
padding-left:30px;
height:25px;
width:25px;
display:inline-block;
text-decoration: none;
vertical-align:text-center;
}
try this
a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
height:100%;
width:100%;
display:inline-block;
text-decoration: none;
vertical-align:text-center;
}
you need to maximize the width for that use 100% width or maximum width your design allow you.
a.interactive {
/*...*/
white-space: nowrap;
}
I'm trying to place 6 images one next to another with css,
the whole thing should be able to scale pretty well in most displays (except for mobile for the moment)
so I've made this:
http://pelloponisos.telesto.gr/galleryTest/test/gallery.php#
(apparently I'm trying to make yet another carousel)
most of my images have a bigger width than height so when I scaled them I just put
width:x% in the li container and 100% for the image width.
but the sixth image is different and it causes quite a bit of trouble
I tried setting the height too but you can only scale the images based on one of the two.
The only thing that worked so far was to put a static height in the ul and then scale in both width and height but then it's not a fluid grid.
is there any way to make all li elements have a fluid height and then scale all images based on that? or if not
is there any way to make any image with different ratio scale to the one I specify in the css?
I stripped down your code a little bit, but this seems to get closer to the idea. The trick is to set the width in the container (.upper ul li) then for the images use: max-width:100%; height:auto. Also, the padding is now in %.
#carousel{
position:relative;
}
#wrapper{
margin:0 auto;
}
#slides{
width: 100%;
}
.upper ul li{
width: 200px;
max-width: 100%;
list-style:none outside none;
float:left;
padding-bottom:5px;
padding:2%;
}
img.galleryThumbnail{
max-width:100%;
height:auto;
}
.info{
display:none;
}
#buttons img{
position:absolute;
top:90px;
}
#buttons #prev img{
position:absolute;
left:29px;}
#buttons #next img{
position:absolute;
right:21px;
}
How can you do this in css?
I want the background image of the li's to slide under the background image of the ul where they are in.
I tried to do it with z-index but it didn't work.
li{
list-style:none;
background-image:url("2.png");
z-index:-10;
position:relative;
}
ul{
background-image:url("1.png");
background-repeat: no-repeat;
z-index:100;
position:relative;
}
Is this possible? And how is it done if it is.
update: Picture explaining what i mean
I like the idea so much I just made it for you jarco. It seems it is not as exact as you want but, it is pretty similar.
Demo
A little div to show the bar, and script to bring it up and down
$("ul").mouseenter(function() {
$("#bar").animate({
height: $("ul").height()
});
}).mouseleave( function() {
$("#bar").animate({
height: 20
});
});
Update with the heights