Vertical Align Image in footer

HTML & CSS
21

This works great PAul,

Only thing in Chrome I see that when you open the page it shows the sliding content go hidden.

Also doesnt work on mobile I cant click on the “Trenz New Look Gift Bundle” it doesnt slide up.

Here it is online…

http://www.trenzhairstudio.ca/newlook/

Thanks,

Mike

22

One other question I can’t seem to get the “Back to Styles” to close the slide if you rollover the slide theres back to styles that will need to close it and then just the click so you can rollover and click to open the Gift section for mobile and tablets.

Thanks,

Mike

23

Hi,

You will need to change the top:100% to something like top:98% to stop the scrollbar appearing.


.panel{
	top:98%;
	bottom:1%;
}

To close the menu on the ipad you will need something like this:


[B]<p class="close2"><a href="#">Close menu</a></p>[/B]
<div id="footer">



<style type="text/css">
p.close2{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100px;
	background:red;	

}
</style>
<style media="only screen and (max-device-width:768px)" type="text/css">
.panel:hover + p.close2 {
	z-index:999;
	display:block;
}
</style>
24

Thanks Paul,

Still trying to make the “Go Back to Styles” on the SlideUp click to close both on computers, iPhones, iPads etc not just touch screen stuff and then as mentioned in my PM on the horizontal mobile the slide up background stops even with a overflow: hidden;

Thanks

25

Came up with temp solution for the Slide Up I just made the Go Back To Styles link to the sites homepage theres no slide down with this but it does work for time being till can solve the solution. Just that one issue now when its horizontal and the slide border not going all the way down to the bottom for horizontal mobiles I changed it just for them to have different stylesheets without a 100% height but think the slide up thing is still thinking it has a 100% height I believe. If that makes sense lol

26

I gave you a solution above to close it on the ipad. You can place the link anywhere you want but I just put it in the left corner.

I don’t have a real ipad to test at the moment but it seems to work ok on the mac ipad simulator in landscale and portrait.

27

Thanks Paul, didnt seem to work when I added that code and styles to the Go Back to Style text on the computer , phone and ipad. I’ll keep looking into it, any reason why the landscape mobile slide background doesnt completely fill in thats the main issue now it works well on portrait on mobile and computer, ipad but on my iphone it doesnt it slides nice but the background doesnt continue all the way down to the footer just the text.

28

Why are you setting the wrapper to 300px high here?


 @media only screen and (min-width: 480px) and (max-width: 767px) {
#wrapper {
	width: 100%;
	height: 300px;
}
29

I set it to 300px high because its not having a fixed height or should I be setting the male and female to 300 px high instead of the wrapper?

30

Hey Paul, just wondering if you got chance to take peak at this issue?

Thanks

31

If you are talking about landscape and portrait mode on the ipad then I don’t see an issue on my ipad as the slide works and the background goes from top to bottom. I don’t have an iphone to test sorry.

I don’t like that you have re-directed to the home page though to close the slide. The technique I already gave you will work. For example when the slide is open if you simply click the “New look” image in the bottom left hand corner the slide will close. Therefore you could just create a similar link for the ipad as I have shown in the above code.

32

Ok I tried the way you mentioned on the Go Back To Styles text and it didnt work. I will put the code you gave me on the image though so its there as well but am hoping to get the Go Back To Styls to close the slide as well.

Thanks,

Mike