Vertical Align Image in footer

**mbond5** · Nov 8, 2012 16:59

Hey guys,

I'm working on this fluid responsive site so it works nicely in all browsers and devices but am having trouble vertical aligning a image in the footer

Here is the site...

http://modocom.ca/trenz/

Also, how can I vertically align the text

TRENZ "NEW LOOK" GIFT BUNDLE

My other question maybe somebody can help me out here I want it so when someone clicks on "TRENZ "NEW LOOK" GIFT BUNDLE" it slides up, so that its like a panel that slides up like a toggle but keeping everything responsive of cource and would like like this when you click then when you click go back to styles it would go down to like the home screen again.

Gift-SlideUp.jpg

Thanks,

Mike

**Paul O'B** · Nov 8, 2012 17:23

Hi,

You can vertically align that text for good browsers like this:

Code:


#gift {
display: table;
}

#gift h1{
display:table-cell;
width:100%;
vertical-align:middle;
}

(IE8+)

For the slide up function you'd be looking at something like jquery's slideUp function

However that's a question for the JS forum so I can move the thread if you want to pursue it further.

**mbond5** · Nov 8, 2012 19:13

Thanks Paul,

How about the New Year New Look image in the footer I need to figure out how to vertical align that.

**Paul O'B** · Nov 9, 2012 04:59

HI,

For ie8+ you could do this:

Code:

#footer{line-height:normal}
#footer:after{
content:" ";
width:1px;
display:inline-block;
height:100%;
vertical-align:middle;
}
#footer img{
display:inline-block;
vertical-align:middle;
float:none;
}

Note that your image seems to have more empty space at the bottom than the top so the text may appear off centre a little.

You could probably also use the same method I outlined in the first post.

**mbond5** · Nov 9, 2012 08:46

Thanks Paul,

How can I make the text I have now in the footer to go next to the New Year, New Look logo land have someon the right too like this image, I've been struggling with this and still keep in 100% of the browser height and if the browser is to narrow the right text would go beneath and still remain 100% is this a easy task...

trenz-home.jpg

**Paul O'B** · Nov 9, 2012 09:11

Hi,

You can't really let the text wrap under the other text because you have a fixed height to work with.

I would do something like this instead.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	height:100%;
	margin:0;
	padding:0;
}
#footer {
	height:8%;
	display:table;
	background:red;
}
#footer:after {
	content: " ";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	width: 1px;
}
#footer p {
	margin:0;
	display:table-cell;
	width:50%;
	vertical-align:middle;
	padding:0 10px;
}
p.location { text-align:right; }
</style>
</head>

<body>
<h1>IE8+ only</h1>
<div id="footer">
		<p class="logo">Image goes here and then any text </p>
		<p class="location">Lorem ipsum dolor site amet Lorem ipsum dolor site amet </p>
</div>
</body>
</html>

**mbond5** · Nov 9, 2012 09:39

Excellent, works great just now to line up the image with the text on the right side so its all lined on the bottom tried using padding but that just shifted everything down.

**Paul O'B** · Nov 9, 2012 10:11

You should be able to just do this:

Code:

#footer img{
display:inline-block;
vertical-align:middle;
}

**mbond5** · Nov 9, 2012 10:28

Perfect!!! Your a genius, I'm looking at it on my iPhone looks good only one issue the footer is too large and huge amount of space when the right side goes to two lines, any way this can be fixed say it stay same height?

Thanks,

Mike

**mbond5** · Nov 9, 2012 10:40

Solved it I believe just made line-height smaller, is that a good way to do it?

Thanks,

Mike

**mbond5** · Nov 9, 2012 12:30

One other question on the mobile my font on the right side of the footer is larger then the font-size on the left side of the footer, I'd like to make it smaller but doesnt seem to be working.

Thanks,

Mike

**mbond5** · Nov 9, 2012 13:53

Ok fixed my font for mobile devise but now theres a large space below the footer of white on my phone like you can scroll.

Also how can I bring the .location paragraph up some so its not so far below the New Year New Look div.

Also when I flip my phone horizontal how can I fix it there as well.

Thanks,

Mike

**Paul O'B** · Nov 9, 2012 15:12

Hi,

I don't own an iphone but it looks ok in the iphone simulator.

You'll just need to tweak the rules for the smaller devices and give them something they can handle.

The footer height of 8% is not very usable and you should have used a fixed footer height because 8% when the screen height is small is not enough for the content. Of course that means you couldn't have a mid section made up width percentages and you'd need to probably use absolute positioning to get the same effect (top:0 bottom:100px etc) but that approach is not without difficulty either.

**mbond5** · Nov 9, 2012 17:37

Thanks Paul,

I got it at 18% now for mobiles seems to be working relatively well from what I can tell still seeing if theres better solutions though for the footer.

Quick question regarding my slide up and slide down question from the first post can what I'd like to achieve be done with just CSS? For example this page does it...

http://img.usabilitypost.com.s3.amaz...out/index.html

But it would slideup instead and if so could it work still being responsive as well.

EDIT: And if I wrap it in a a href it should then work when clicking and on mobiles correcT? If this can be done in CSS how would you tackle it my friend?

Thanks,

Mike

**Paul O'B** · Nov 10, 2012 04:52

Hi,

You can slide something up with transitions but to hide it on devices that don't hover you would need to have a link outside of that context that they can click to close it otherwise the panel stays open forever.

It's a little complicated but this is the basics.

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
h1, h2, h3, p { margin:0 0 1em }
html { overflow-y:scroll }
html, body {
	height:100%;
	padding:0;
	margin:0;
	background:#000;
}
#outer {
	height:80%;
	background:red;
}
#footer {
	height:20%;
	background:#000;
	color:#fff;
	text-align:center;
	border-top:1px solid #ccc;
	position:relative;
	z-index:100;
	margin-top:-1px;
}
.panel {
	position:absolute;
	width:150px;
	left:0;
	right:0;
	margin:auto;
	top:80%;
	bottom:1%;
	overflow:hidden;
	z-index:99;
	color:#000;
	text-decoration:none;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.slide {
	background:#fff;
	width:150px;
	margin:-31px auto 0;
	height:30px;
	line-height:30px;
	border-radius:8px 8px 0 0;
	color:#000;
	text-decoration:none;
	text-align:center;
	display:block;
	z-index:101;
	position:relative;
}
.close {
	position:absolute;
	display:none;
	text-align:center;
	color:000;
	width:100%;
	z-index:102;
	background:yellow;
}
.slide:hover + .panel, .panel:hover {
	top:100px;
	bottom:20%;
	left:0;
	width:100%;
	background:#fcf;
	overflow:visible;
}
</style>
</head>

<body>
<div id="outer">
		<h1>testing</h1>
</div>
<a class="slide" href="#">Hover me</a>
<div class="panel">
		<h3>Sliding Panel </h3>
		<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
</div>
<div id="footer">
		<p>footer content goes here</p>
		<a  href="#footer">Close panel</a> </div>
</body>
</html>

You keep mentioning responsive but what you are mainly talking about is fluid. Responsive is when something changes depending on the media query whereas fluid just changes with the window as required.

In truth you don;t really have a fully fluid site or responsive site because you have tied your elements to fixed heights and while that is ok when you don;t have much content you will need ot think what to do when content exceeds the height of the containers you have sent. You would then need to resort to scrollbars on all those fixed height elements which will look pretty ugly.

**mbond5** · Nov 10, 2012 07:24

Thanks for that Paul.

I see how it can get ugly with my current layout is it easy to change to something that would work well across all browsers and devices. If so what type of layout would you suggest. Its very simple page with only the four sections plus the slide up. Thanks for the help I'd love to hear how you would set it up because with your knowledge it would most likely be much better than how I have it set up now.

Thanks,

Mike

**Paul O'B** · Nov 11, 2012 03:33

You are missing the main ingredient to make an informed decision which is content. Without content it's just a drawing not a website.

You need to tailor the design to fit the content you want to present. If that content is a couple of words and a picture then your design would be fine. However if you have lots of text content then it will soon overflow the confines of your fixed height containers. Fixed height containers are usually a big no no unless as I said you are displaying a gallery or something similar.

I would suggest that you put in some real content and then you can see how your page reacts to it and then tailor the design from there.

It would seem to me that a sticky footer approach would be better and allow short content pages like your home page to be occupy the whole screen but where you have more content the footer can push down.

Otherwise perhaps a fixed footer if you want to be able to keep the footer in view and then slide up some content from it

**mbond5** · Nov 11, 2012 07:31

Thanks Paul,

What I'm going to do is get the slide content in there then test it out and see if I need something without a fixed height.

I'm having some difficulty with the slide, here is the URL....

http://modocom.ca/trenz/slide.html

Its not hiding everything and now it creates a vertical scroller and the footer isnt at the bottom could this be issue to having a fixed height website? What can I do to resolve this.

Thanks your the best,

Mike

**Paul O'B** · Nov 11, 2012 10:24

Hi,

I'm not really sure what you want it to look like but it needs to be something like this:

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Trenz - New Year New Look</title>
<link rel="stylesheet" href="css/style.css" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
<style>
@charset "UTF-8";
/* CSS Document */

html, body {
	height: 100%;
	margin:0;
	padding:0;
}
body {
	color: #FFF;
	font-size: 25px;
	line-height: 48px;
	font-style: normal;
	font-family: 'trade_gothic_lt_stdregular', sans-serif;
}
@font-face {
	font-family: 'trade_gothic_lt_stdregular';
	src: url('../font/tradegothicltstd.eot');
	src: url('../font/tradegothicltstd.eot?#iefix') format('embedded-opentype'), url('../font/tradegothicltstd.woff') format('woff'), url('../font/tradegothicltstd.ttf') format('truetype'), url('../font/tradegothicltstd.svg#trade_gothic_lt_stdregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'trade_gothic_lt_std_cnbold';
	src: url('../font/tradegothicltstd-bdcn20.eot');
	src: url('../font/tradegothicltstd-bdcn20.eot?#iefix') format('embedded-opentype'), url('../font/tradegothicltstd-bdcn20.woff') format('woff'), url('../font/tradegothicltstd-bdcn20.ttf') format('truetype'), url('../font/tradegothicltstd-bdcn20.svg#trade_gothic_lt_std_cnbold') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'trade_gothic_lt_std_boldRg';
	src: url('../font/tradegothicltstd-bold.eot');
	src: url('../font/tradegothicltstd-bold.eot?#iefix') format('embedded-opentype'), url('../font/tradegothicltstd-bold.woff') format('woff'), url('../font/tradegothicltstd-bold.ttf') format('truetype'), url('../font/tradegothicltstd-bold.svg#trade_gothic_lt_std_boldRg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'trade_gothic_lt_std_cnregular';
	src: url('../font/tradegothicltstd-cn18.eot');
	src: url('../font/tradegothicltstd-cn18.eot?#iefix') format('embedded-opentype'), url('../font/tradegothicltstd-cn18.woff') format('woff'), url('../font/tradegothicltstd-cn18.ttf') format('truetype'), url('../font/tradegothicltstd-cn18.svg#trade_gothic_lt_std_cnregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
a {
	color: #FFF;
	text-decoration: none;
}
h1 {
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	font-size: 0.8em;
	font-family: 'trade_gothic_lt_std_cnbold', sans-serif;
	-moz-text-shadow: 2px 2px 1px #000;
	-webkit-text-shadow: 2px 2px 1px #000;
	text-shadow: 2px 2px 2px #000;
 filter: progid:DXImageTransform.Microsoft.DropShadow(offX=2, offY=2, color=000);
}
.right {
	float: right;
	margin-right: 30px;
	background:url(http://modocom.ca/trenz/images/arrow-left.png) no-repeat left top;
	padding-left: 75px;
	margin-top: 30%;
}
.left {
	float: left;
	margin-left: 30px;
	background:url(http://modocom.ca/trenz/images/arrow-right.png) no-repeat right top;
	padding-right: 75px;
	margin-top: 30%;
}
#wrapper {
	width: 100%;
	height: 82%;
}
#male {
	float: left;
	width: 50%;
	height: 100%;
	background:url(http://modocom.ca/trenz/images/male.png) no-repeat bottom right #8fa4a7;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}
#male:hover {
	background:url(http://modocom.ca/trenz/images/male.png) no-repeat bottom right #bfcacb;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}
#female {
	float: left;
	width: 50%;
	height: 100%;
	background:url(http://modocom.ca/trenz/images/female.png) no-repeat bottom left #8d817b;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}
#female:hover {
	background:url(http://modocom.ca/trenz/images/female.png) no-repeat bottom left #c0bab7;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}
#gift {
	clear: both;
	width: 100%;
	height: 20%;
	background:url(http://modocom.ca/trenz/images/border1.jpg) repeat-x #323232;
	display: table;
}
#gift h1 {
	text-align: center;
	display:table-cell;
	width:100%;
	vertical-align:middle;
}
.panel {
	clear: both;
	width: 100%;
	background:url(http://modocom.ca/trenz/images/border1.jpg) repeat-x #323232;
	/*display: table;*/
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	top:100%;
	bottom:1%;
	overflow:hidden;
	z-index:99;
	color:#FFF;
	text-decoration:none;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.slide {
	margin:0 auto;
	height:10%;
	background:url(http://modocom.ca/trenz/images/border1.jpg) repeat-x #323232;
	line-height:30px;
	color:#FFF;
	text-decoration:none;
	text-align:center;
	z-index:98;
	position:relative;
	display:table;
	width:100%;
}
.slide span {
	display:table-cell;
	vertical-align:middle
}
.slide:hover + .panel, .panel:hover {
	top:20px;
	bottom:10%;
	left:0;
	width:100%;
	background:url(http://modocom.ca/trenz/images/border1.jpg) repeat-x #323232;/*overflow:visible;*/
}
#footer {
	position: relative;
	height:8%;
	display:table;
	background:url(http://modocom.ca/trenz/images/border1.jpg) repeat-x #414040;
	font-family: 'trade_gothic_lt_stdregular', sans-serif;
	letter-spacing: 1px;
	z-index: 101;
}
#footer:after {
	content: " ";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	width: 1px;
}
#footer p {
	font-size: 0.45em;
	margin:0;
	display:table-cell;
	width:50%;
	vertical-align:middle;
	padding:0 20px;
}
#footer img {
	display:inline-block;
	vertical-align:middle;
}
p.location {
	text-align: right;
	line-height: 14px;
}
p.location a { text-decoration: underline; }
p.location span { color:#a2a2a2 }
</style>
</head>

<body>
<div id="wrapper"> <a href="male.html">
		<div id="male">
				<h1 class="right">browse male styles</h1>
		</div>
		<!-- male --> 
		</a> <a href="female.html">
		<div id="female">
				<h1 class="left">browse female styles</h1>
		</div>
		<!-- female --> 
		</a> </div>
<!-- wrapper -->

<h1 class="slide" href="#"><span>TRENZ "NEW LOOK" GIFT BUNDLE</span></h1>
<div class="panel">
		<h3>Sliding Panel </h3>
		<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
</div>
<div id="footer">
		<p class="logo"><img src="images/newyearnewlook.png" class="foot-img" alt="New Year New Look">by Trenz Hair Studio</p>
		<p class="location"><span>New location beside Mongo's Grill - 1075 Memorial Avenue</span> <a href="http://www.trenzhairstudio.ca/">Visit Trenz Website</a></p>
</div>
<!-- footer -->

</body>
</html>

I removed the display table from the panel because that means you can't set a height and hide the overflow. I assumed you wanted the sliding panel hidden and shown when rolling over the text in .slide.

You should be able to adapt it to what you want from the above now.

**mbond5** · Nov 11, 2012 18:46

That works perfectly havent test it on the phones yet but will this make it so can click on Trenz New Look Gift Bundle and it will slide up? Once I put content in it I'll test it to see if I will be needing to change around the layout from 100% height.

Your a genius thanks!

**mbond5** · Nov 12, 2012 08:48

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

**mbond5** · Nov 12, 2012 09:56

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

**Paul O'B** · Nov 13, 2012 11:52

Hi,

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

Code:

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

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

Code:

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

Code:

<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>

**mbond5** · Nov 13, 2012 12:04

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

**mbond5** · Nov 13, 2012 12:16

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

User Tag List

Thread: Vertical Align Image in footer

Thread Tools

Display

Vertical Align Image in footer

Bookmarks

Bookmarks

Posting Permissions