Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Always visible footer?

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-24-2011, 01:18 AM   PM User | #1
shki
New to the CF scene

 
Join Date: Jul 2011
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
shki is an unknown quantity at this point
Always visible footer?
Hello everyone.

I'm trying to make a footer that would be always visible at the bottom of the page, with the content scrolling behind it.
The problem is that inside the footer I want to have logo floated to the left, and navigation floated to the right that wouldn't overlap when the window is resized.

With 'position: fixed' I lose the navigation when I resize the window, and min-width doesn't work for some reason.

'position: absolute' doesn't work either, the footer floats somewhere around the middle of the page when resized.

I don't even remember how many variations I've tried with max and min height and width, negative margins, padding etc.

The only solutions I found online were for the footer sticking to the bottom of the page, and not the window, and those using 'position: fixed'.

If anyone has any idea how to resolve this, it would be much appreciated.
shki is offline   Reply With Quote
Old 07-24-2011, 05:37 AM   PM User | #2
tokyodesignpop
New to the CF scene

 
Join Date: Jul 2011
Location: Tokyo, Japan
Posts: 9
Thanks: 2
Thanked 0 Times in 0 Posts
tokyodesignpop is an unknown quantity at this point
maybe
The only way you can achieve a floating footer that works in most browsers is to use js....

I found something here http://www.dynamicdrive.com/dynamici.../stayontop.htm
might help you...
I used it to create the footer on my page tokyodesignpop.com

I still need to tweak it a bit, but it should be ok for what you need...

To keep the content on the inside from over lapping just create 2 divs one using float:left and the other using float:right. Not sure if it is the best way but it seems to work for me!

good luck
tokyodesignpop is offline   Reply With Quote
Old 07-24-2011, 07:04 AM   PM User | #3
Sammy12
Registered User

 
Join Date: Jun 2011
Posts: 1,063
Thanks: 12
Thanked 241 Times in 240 Posts
Sammy12 is on a distinguished road
another solution is using iframes, however
position: fixed; with a z-index is definetly the best method

post your current script so that the problem can be detected. there should be no reason this doesn't work. if possible, upload to a server
Sammy12 is offline   Reply With Quote
Old 07-24-2011, 01:26 PM   PM User | #4
shki
New to the CF scene

 
Join Date: Jul 2011
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
shki is an unknown quantity at this point
Thanks for taking the time to reply.

tokyodesignpop, I've tried it, and it still jumbles up when I resize it, even when I float the divs left and right and put in a min-width.

sammy12, when I set the position to fixed, it doesn't scroll, and navigation dissapears, and when I set it to absolute, it floats in the middle of the resized window..

Here's the code. I hope this sheds some light.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<link rel="stylesheet" type="text/css" href="layout.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<title>CQ</title>

<script type="text/javascript">

$(document).ready(function() {

	//bubble text
	$('img.bubble').fadeIn(3000, function() {
		$('p.yes').fadeIn(700).delay(3000).fadeOut(100, function () {
			$('p.ablimp').delay(1000).fadeIn(500).delay(3000).fadeOut(200, function () {
				$('p.dontknow').delay(2500).fadeIn(900).delay(4000).fadeOut(1000, function() {
					$('img.bubble').fadeOut(600)
				});
			});
		});
	});
});	
</script>

<link rel="shortcut icon" href="favicon.ico" >

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META name="description" content="CQ Web Design & Development Studio">
<META name="keywords" content="">
</head>
<body>

<!------ PAGE ------>

<div id="page">
	<div id="bubble">
		<img src="images/bubble.png" alt="CQ web design" class="bubble">
		<p class="yes">yes.</p>
		<p class="ablimp">a blimp.</p>
		<p class="dontknow">I don't <br>know...</p>
	</div>	
	<img src="images/blimp.png" alt="CQ web design" class="blimp">
</div>


<!------ FOOTER ------>

<div id="footer">
	<div id="logo">
		<img src="images/stars.png" alt="CQ web design">
		<h1>CQ</h1>
	</div>	
		
	<div id="slogan">
		<h2>some slogan<br>
		or other</h2>
	</div>

	<div id="navigation">
		<img src="images/navigation.png" alt="navigation">
	</div>			
</div>

</body>
</html>
Code:
/*------- reset & wrap -------*/
* {
	vertical-align: baseline;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}

html {
	width: 100%;
	min-width: 1000px;
	background: url(images/html.jpg) repeat-x #fff;
}

body {
	width: 100%;
	min-width: 1000px;
}

/*------- PAGE -------*/

#page {
	width: 100%;
	min-width: 1000px;
	z-index: 1;
}

#bubble {
	text-align: center;
	width: 7.5em;
	height: 6.25em;
	position: absolute;
	margin: 5em 0em 0em 24em;
	padding: 0.01em;
	z-index: 99;
}

img.bubble {
	position: relative;
	z-index: 150;
	display: none;
}

.blimp {
	position: absolute;
	margin: 9.7em 0em 0em 12.5em;
}

/*------- FOOTER -------*/

#footer {
	width: 99.9%;
	min-width: 1000px;
	height: 11.5em;
	background: url(images/footer2.png);
	position: fixed;
	bottom: 0px;
	left: 0px;
	z-index: 9999;
}

#logo {
	width: 6.1em;
	height: 9.4em;
	text-align: center;
	background: #8a8a8b;
	position: relative;
	float: left;
	padding: 0.5em 0.01em 0.01em 0.01em;
	margin: 0em 0.5em 0em 2.5em; 
	-moz-border-radius: 0.5em;
	border-radius: 0.5em;
	border: 0.12em solid #fff;
}

#slogan {
	width: 35%;
	min-width: 10em;
	background: url(images/dot.png) repeat-x;
	position: relative;
	float: left;
	margin-top: 6.45em;
	padding-top: 0.45em;
}

#navigation {
	width: 33em;
	height: 7em;
	position: relative;
	float: right;
	margin: 2.8em 10em 0em 0em;
}

/*------- TYPE -------*/


/*------- reset -------*/

* {
	vertical-align: baseline;
	font-weight: normal;
	text-decoration: none;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}

p.yes{
	font: 1.05em 'Harabara';
	letter-spacing: 0.05em;
	color: grey;
	display: none;
	margin: -3.3em 0em 0em 0.2em ;
	position: relative;
	z-index: 200;
}

p.ablimp{
	font: 1.1em 'Harabara';
	letter-spacing: 0.05em;
	color: grey;
	display: none;
	position: relative;
	padding: 0.01em;
	margin: -3.1em 0 0 0.25em;
	z-index: 300;
}

p.dontknow{
	font: 1em 'Harabara';
	letter-spacing: 0.05em;
	line-height: 0.8em;
	color: grey;
	display: none;
	padding: 0.01em;
	margin: -3.6em 0 0 0.2em;
	position: relative;
	z-index: 400;
}

/*------- FOOTER type -------*/

/*----- logo -----*/

h1 {
	font: 3em 'Harabara';
	color: #fff;
	letter-spacing: 0.02em;
	padding: 0.16em 0.01em 0.01em 0.01em;
}

h2 {
	font: 1.05em 'TitilliumMaps26l-1wt';
	color: #f4f4f4;
	line-height: 1em;
	display: block;
	float: left;
}
Last edited by shki; 07-24-2011 at 01:30 PM..
shki is offline   Reply With Quote
Old 07-24-2011, 06:44 PM   PM User | #5
Sammy12
Registered User

 
Join Date: Jun 2011
Posts: 1,063
Thanks: 12
Thanked 241 Times in 240 Posts
Sammy12 is on a distinguished road
thanks for replying, late me take a look

try uploading it to a server if you can. here's what I'm getting



in short, when you set the footer in %, elements are going to collapse, inless using a table. if you use px, then they wont. you will have to use a fluid layout on your footer, if you want to stop the collapse. you set the footer to 99% width, therefore everything inside will be based on a % of the screen. if the user minimizes, his screen size goes from for example 1800 to 1700 to 1600, therefore 99% is less and less. therefore if you set any elements within the footer that are px, they are slowly becoming to crowded.

you set the navigation and logo to a width in px and the slogan to %. the width in px will be overcrowded. you either have to a) make the nav and logo with width % and/or use a liquid layout, or b) make the footer width a px measurement

for more info on this issue http://coding.smashingmagazine.com/2...t-one-for-you/
Last edited by Sammy12; 07-24-2011 at 06:56 PM..
Sammy12 is offline   Reply With Quote
Old 07-25-2011, 10:55 AM   PM User | #6
vikram1vicky
Regular Coder

 
Join Date: Jul 2011
Location: India
Posts: 496
Thanks: 3
Thanked 57 Times in 56 Posts
vikram1vicky is an unknown quantity at this point
Hey dear,

I have created a sample page for you. let me know if it is useful for you:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Footer</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
#footer {
    position:fixed;
    display:block;
    bottom:0px;
    height:200px;
    width:100%;
    background:#999;
    padding:10px;
}
#footer .center{
    width:800px;
    margin:10px auto;
}
#footer #left1 {
    float:left;
    width:200px;
    height:100px;
    background:#5E82DF;
    border:1px solid #1E86A8;
}
#right1 {
    float:right;
    width:500px;
    overflow:auto;
    color:#FFF;
}
#right1 ul {
    list-style:none;
    font:bold 12px Verdana, Geneva, sans-serif;
    text-align:center;
    overflow:auto;
    height:1%
}
#right1 ul li a {
    display:block;
    width:80px;
    height:50px;
    color:#FFF;
    text-decoration:none;
    float:left;
}
</style>
</head>

<body>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<div id="footer"><div class="center">
  <div id="left1"></div>
  <div id="right1">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
    </ul>
  </div>
</div></div>
</body>
</html>
vikram1vicky is offline   Reply With Quote
Old 07-25-2011, 06:12 PM   PM User | #7
shki
New to the CF scene

 
Join Date: Jul 2011
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
shki is an unknown quantity at this point
Sammy12, sorry about that, here's the link for that same thing.

http://www.knjigovodja-online.com/CQ-test/index.html

obviously, #navigation is a placeholder, and the rest of the content is going to go into the #page. I hope to get to that once this footer issue is resolved.

I get the px/% problem now, and I tried turning it all into %, but I must've messed something up, because it wouldn't stick to the bottom at all. I'll have to try to do that more carefully..

Vikram1vicky, that's exactly what I need. The problem is, when I resize the window, the navigation disappears. The content scrolls horizontally , but the footer doesn't.
shki is offline   Reply With Quote
Old 07-26-2011, 08:31 AM   PM User | #8
vikram1vicky
Regular Coder

 
Join Date: Jul 2011
Location: India
Posts: 496
Thanks: 3
Thanked 57 Times in 56 Posts
vikram1vicky is an unknown quantity at this point
Quote:
Originally Posted by shki View Post
Sammy12, sorry about that, here's the link for that same thing.

http://www.knjigovodja-online.com/CQ-test/index.html

obviously, #navigation is a placeholder, and the rest of the content is going to go into the #page. I hope to get to that once this footer issue is resolved.

I get the px/% problem now, and I tried turning it all into %, but I must've messed something up, because it wouldn't stick to the bottom at all. I'll have to try to do that more carefully..

Vikram1vicky, that's exactly what I need. The problem is, when I resize the window, the navigation disappears. The content scrolls horizontally , but the footer doesn't.


Try this code. I given a fixed width and center aligned DIV in footer div, if will protect navigation and logo from overlapping and scrolling horizontally....
vikram1vicky is offline   Reply With Quote
Old 07-26-2011, 09:18 AM   PM User | #9
shki
New to the CF scene

 
Join Date: Jul 2011
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
shki is an unknown quantity at this point
If you mean the one in your previous post, I've tried it, and it still swallows the navigation... I literally saved it as is, and opened it in FF.

I can't figure out what I'm doing wrong.
shki is offline   Reply With Quote
Old 07-26-2011, 09:28 AM   PM User | #10
vikram1vicky
Regular Coder

 
Join Date: Jul 2011
Location: India
Posts: 496
Thanks: 3
Thanked 57 Times in 56 Posts
vikram1vicky is an unknown quantity at this point
Quote:
Originally Posted by shki View Post
If you mean the one in your previous post, I've tried it, and it still swallows the navigation... I literally saved it as is, and opened it in FF.

I can't figure out what I'm doing wrong.

Give a center aligned n fixed width div.. Give width according to the width of navigation and logo.
vikram1vicky is offline   Reply With Quote
Old 07-26-2011, 10:40 AM   PM User | #11
shki
New to the CF scene

 
Join Date: Jul 2011
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
shki is an unknown quantity at this point
I understand that, that's what you did up there. I saved your code as you wrote it into a document and opened it, and I tried to apply the principle to my code. Both your navigation and mine disappear when you resize the window.

Did you try this? Did it work for you?
shki is offline   Reply With Quote
Old 07-26-2011, 12:53 PM   PM User | #12
vikram1vicky
Regular Coder

 
Join Date: Jul 2011
Location: India
Posts: 496
Thanks: 3
Thanked 57 Times in 56 Posts
vikram1vicky is an unknown quantity at this point
Quote:
Originally Posted by shki View Post
I understand that, that's what you did up there. I saved your code as you wrote it into a document and opened it, and I tried to apply the principle to my code. Both your navigation and mine disappear when you resize the window.

Did you try this? Did it work for you?

Yes it is working fine. 1st wrote and tested it and then I pasted code here
vikram1vicky is offline   Reply With Quote
Old 07-26-2011, 09:20 PM   PM User | #13
Sammy12
Registered User

 
Join Date: Jun 2011
Posts: 1,063
Thanks: 12
Thanked 241 Times in 240 Posts
Sammy12 is on a distinguished road
that's because your floating elements in a fluid layout. all the elements can't fit onto this footer when you decrease the size of your browser, therefore the nav is getting pushed off.

try setting the "some slogan or other" without any widths (no min-width or width). Then make the dotted line a separate div that is resizable (min and max width)

you need to make these types of "gutters" that are resizable in order to stall collapsing elements
Last edited by Sammy12; 07-26-2011 at 09:28 PM..
Sammy12 is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 02:17 PM.
Advertisement
Log in to turn off these ads.