7 replies [Last post]
Vivienne Crow
Vivienne Crow's picture
Offline
newbie
Australia
Last seen: 2 years 36 weeks ago
Australia
Timezone: GMT+10
Joined: 2011-11-04
Posts: 4
Points: 5

I don't know if this is where I'm supposed to post this, but I'm going to post it here anyway. I'm having problems with the navigation bar at the bottom of my website. I would like to be able to have a simple text nav bar at the bottom of each page so that once someone has read the page they don't have to scroll all the way back up to navigate somewhere else. What coding do I need to be able to put the nav bar at the bottom of my pages without having it fixed as some pages have more text and information than other's and I need the navigation bar to sit beneath any and all of the information.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 44 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9148
Points: 3132

Simply have the nav bar

Simply have the nav bar follow the rest of the content.

If you'll give us the source for a typical page, or even better, a link to the page/s, we can demonstrate specifically.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Vivienne Crow
Vivienne Crow's picture
Offline
newbie
Australia
Last seen: 2 years 36 weeks ago
Australia
Timezone: GMT+10
Joined: 2011-11-04
Posts: 4
Points: 5

here's the link to my index

here's the link to my index page http://viviennecrow.netne.net and below is the CSS if that helps.

img {
	padding:5px;
}
body {
	background-color:#2a2e31;
	background-image:url(<a href="http://cbimg6.com/layouts/10/07/36432ab.png" rel="nofollow">http://cbimg6.com/layouts/10/07/36432ab.png</a>);
	background-repeat:repeat-x;
	height:345px;
}
 
 
#header {
	background-image:url(<a href="http://i29.tinypic.com/1z6wo7r.png" rel="nofollow">http://i29.tinypic.com/1z6wo7r.png</a>);
	width:768px;
	height:485px;
	position:absolute;
	left:0px;
	top:1px;
	z-index:1;
}
#content {
	position:absolute;
	left:457px;
	top:321px;
	width:468px;
	height:560px;
	z-index:2;
	color:#eaeaea;
	font-size:17px;
    font-family:Times New Roman;
}
 
 
h1 {
	width:468px;
	font-size:25px;
        font-family:Palatino Linotype;
	height:35px;
	color:#000000;
	text-align:center;
	background-image:url(<a href="http://cbimg6.com/layouts/10/07/36432ad.png" rel="nofollow">http://cbimg6.com/layouts/10/07/36432ad.png</a>);
        text-transform:uppercase;
 
}
 
h2 {
	width:195px;
	font-size:18px;
	height:30px;
	color:#c0d3dd;
	text-align:center;
	background-image:url(<a href="http://cbimg6.com/layouts/10/07/36432ae.png" rel="nofollow">http://cbimg6.com/layouts/10/07/36432ae.png</a>);
 
}
 
h3 {
        width:300px;
        font-size:25px;
        font-family:Palentino Linotype;
        height:65px;
        colour:000000;
        text-align:center;
        background-image:url(<a href="http://i809.photobucket.com/albums/zz17/BlackOrchidz/viviennecrow%20website/H3-5.png" rel="nofollow">http://i809.photobucket.com/albums/zz17/BlackOrchidz/viviennecrow%20website/H3-5.png</a>);
        text-transform:uppercase;
 
}
 
#leftnav {
	position:absolute;
	left:153px;
	top:331px;
	width:200px;
	height:497px;
	z-index:3;
	color:#eaeaea;
	font-size:16px;
}
 
#rightnav {
        position:absolute;
        left:1000px;
        top:100px;
        width:300px;
        z-index:4;
        color:#eaeaea;
        font-size:16px;
        text-align:center;
}
 
#TopNav {
	position:absolute;
	left:587px;
	top:183px;
	width:468px;
	height:36px;
	z-index:4;
 
}
 
a.nav:active, a.nav:visited, a.nav:link {
    display:Inline-block;
	color:#000000;
    font-family:veranda;
	text-align: center;
	width:85px;
	height:25px;
    font-size:11px;
    font-weight:None;
    text-decoration:none;
    letter-spacing:1px;
    line-height:25px;
	background-image:url(<a href="http://i809.photobucket.com/albums/zz17/BlackOrchidz/viviennecrow%20website/topnavbarSquare.png" rel="nofollow">http://i809.photobucket.com/albums/zz17/BlackOrchidz/viviennecrow%20website/topnavbarSquare.png</a>);
	text-transform:uppercase;
 
}
 
a.nav:hover {
	display:Inline-block;
    color:#ffffff;
    font-family:veranda;
	text-align: center;
	width:85px;
	height:25px;
    font-size:11px;
	font-weight:none;
    text-decoration: none;
    letter-spacing:1px;
    line-height:25px;
	background-image:url(<a href="http://i809.photobucket.com/albums/zz17/BlackOrchidz/viviennecrow%20website/topnavbarSquareHover.png" rel="nofollow">http://i809.photobucket.com/albums/zz17/BlackOrchidz/viviennecrow%20website/topnavbarSquareHover.png</a>);
	text-transform:uppercase;
 
 
}
 
a.link:active, a.link:visited, a.link:link {
    display:inline-block;
	color:#ffffff;
    font-family:Tahoma;
	text-align: center;
    font-size:12px;
	width:90px;
	height:20px;
    font-weight:None;
    text-decoration:none;
    letter-spacing:1px;
    line-height:14px;
 
}
 
a.link:hover {
	display:inline-block;
    color:#000000;
    font-family:Tahoma;
	text-align: center;
    font-size:13px;
	width:90px;
	height:20px;
    font-weight:normal;
    text-decoration: none;
    letter-spacing:1px;
    line-height:14px;	
 
}
 
#Icons {
	position:absolute;
	left:600px;
	top:28px;
	width:379px;
	height:61px;
	z-index:4;
	overflow:hidden;
}
 
#SiteName {
	position:absolute;
	left:80px;
	top:146px;
	width:441px;
	height:150px;
	z-index:4;
	color:#d5d7d8;
	font-size:40px;
	overflow:hidden;
	background-image:url(<a href="http://i809.photobucket.com/albums/zz17/BlackOrchidz/viviennecrow%20website/sitename2-3.png" rel="nofollow">http://i809.photobucket.com/albums/zz17/BlackOrchidz/viviennecrow%20website/sitename2-3.png</a>);
	background-repeat:no-repeat;
}
 
a.sidebar-title {
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14px;
	text-transform:uppercase;
	text-align:center;
}
 
#twitter_update_list {
    font-family:Tahoma, Geneva, sans-serif;
	font-size:13px;
}
#twitter_div {
}
ul#twitter_update_list { }
#twitter_update_list li span { }
#twitter_update_list li span a { }
#twitter_update_list li a {
    color:#AA0000;
}

Btw this is a code from a template I've found through a website layout forum and I've fiddle to make the way I need. So I know bits and pieces of CSS but I'm not a genius at it.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 44 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9148
Points: 3132

I really hate to do this to

I really hate to do this to you, but I have to suggest you scrap what you have and start over. This layout model is using all absolute positioning (AP), which is fine for small bits, but makes for a very fragile layout when used on major sections. AP elements are out of the flow, that is, they cannot be seen by other elements, nor can AP elements see other elements. Not everyone posting templates have a clue what they're doing, which means a number of people get sucked into using methods that are poorly chosen and nearly un-maintainable by less than an expert. (I pretty well know my business, but would cringe at making the pages work with variable content.)

A layout based on floats is more robust, and float elements, while complexly out of flow, can be made to interact with other elements. You cannot do that with AP elements.

At the top of the page, there is a tab labeled "tools". There you will find a css layout generator. Try that. It should get you into the ballpark, and we can help you over any rough spots.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Vivienne Crow
Vivienne Crow's picture
Offline
newbie
Australia
Last seen: 2 years 36 weeks ago
Australia
Timezone: GMT+10
Joined: 2011-11-04
Posts: 4
Points: 5

So not what I wanted to hear

So not what I wanted to hear lol especially since I know next to nothing about coding. But I guess I'll give it a go.

Thanks.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 44 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9148
Points: 3132

I didn't think you'd like it.

I didn't think you'd like it. Am I prescient, or what? I think you'd like keeping what you have even less over time. Try the generator. A lot of folks have with good results.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Vivienne Crow
Vivienne Crow's picture
Offline
newbie
Australia
Last seen: 2 years 36 weeks ago
Australia
Timezone: GMT+10
Joined: 2011-11-04
Posts: 4
Points: 5

I took your advice and used

I took your advice and used the css code generator. It wasn't as hard as I thought it would be and I've decided it might be fun to create something from the ground up and say "i did it all!" instead of just fiddling with a template I've found. I know enough graphics to be able to design a few things to make me happy now to learn the coding and styling side lol

This is what my CSS looks after I did the generator.

/* ******************************************************************** */ 
/*                  Generated by: <a href="http://csscreator.com" rel="nofollow">http://csscreator.com</a>                 */
/* ******************************************************************** */
html, body{ 
 margin:0; 
 padding:0; 
 text-align:center; 
} 
 
#pagewidth{ 
 width:100%; 
 text-align:left; 
 margin:0 auto; 
} 
 
#header{
 position:relative; 
 height:800px; 
 background-color:#000C0C; 
 width:100%;
 display:block;
 overflow:auto;
} 
 
#leftcol{
 width:20%; 
 float:left; 
 position:relative; 
 background-color:#000C0C; 
 }
 
#twocols{
 width:80%; 
 float:right; 
 position:relative; 
  }
 
#rightcol{
 width:25%; 
 float:right; 
 position:relative; 
 background-color:#000C0C;
 }
 
#maincol{
 background-color: #000C0C;  
 float: left; 
  position: relative; 
 width:75%; 
 }
 
#footer{
 height:35px; 
  background-color:#000C0C; 
 clear:both;
 display:block;
 overflow:auto;
} 
 
 
 
 
/* ******************************************************************** */ 
/* Clearfix: <a href="http://csscreator.com/attributes/containedfloat.php" rel="nofollow">http://csscreator.com/attributes/containedfloat.php</a>        */
/* ******************************************************************** */
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  
 
 
 
 
/* ******************************************************************** */ 
/*                      printer styles                                  */ 
/* ******************************************************************** */ 
 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
 
/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 44 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9148
Points: 3132

Good on ya!

Big smile

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.