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.
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.
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…
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.
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?
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.
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.
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…
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?
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.
<!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.
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.
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
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.
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.
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.
However that’s a question for the JS forum so I can move the thread if you want to pursue it further.