View Single Post
  #1  
Old 02-11-2008, 04:05 AM
kriepl Offline
pp regular
 
Join Date: Jan 2008
Location: Winnetka, CA
Posts: 37
help with position of title/logo & nav.

I am having issues having my site title and nav links stay where they are supposed to.
example: i can get them where i want, via 'fixed' positioning, but when the scroll bar is used, they stay put... if I use 'absolute' they move with the scroll bar, but I can NOT get them to where i want them located.
Here is my site: Gathering of Pixels
how i have it now, is where i want them. if you shrink the window a bit and use scroll bar, you will see they don't move along with the bg image and/or the page.

and here is my css code for the top part of page:
Code:
/* ========== Universal Elements ========== */

body {
	background-color:#202020;
	font: 9px/20px verdana, helvetica, arial, sans-serif;
	color:#acacac;
	margin:0px;
	padding:0px;
	background-image:url(../images/bg.jpg);
	background-repeat: repeat-x;
	background-position: center top;
	
}

a:link {
	color: #eee;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #eee;
}

a:hover {
	color: white;
	text-decoration: none;
}

a:active {
	text-decoration: none;
	color: #eee;
}

p {
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
h2 {
	font-size:18px;
}

h3 {
	font-size:16px;
}

h4 {
	font-size:14px;
}

h2 h3 h4 {
	color:#fff;
}

h5 {
	font-size:12px;
	color:#3F7795;
	color:#9dd5ed;
	padding-top: 0;
	margin:0px 0 10px 0;
}
#styleswitcher {
	top:0px;
	left:0px;
	z-index:100;
	position:absolute;
	width:100%;
	text-align:right;
}

#styleswitcher img {
	margin:8px 8px 8px 0;
}

#header {
	top:0px;
	position:absolute;
	width:100%;
	height:60px;
}
#logo {
	height:27px;
	position:fixed;
	left:5px;
	z-index:500;
}

#logo_sub {
	width:100%;
	position:absolute;
	bottom:0;
	padding-bottom:7px;
	font-size:15px;
	letter-spacing: 2px;
}

#nav {
	height:21px;
	position:fixed;
	right:60px;
	z-index:1000;
}

#nav_sub {
	position:absolute;
	bottom:0;
	right:0;
	padding:0px;
	margin:0px;
	color:white;
}

#nav_sub a {
	padding:2px;
	color:white;
}

#nav_sub a:hover {
	color:#000000;
}

thanks in advance for any help.
kevin


oh, meant to also add... i already did much researching on w3schools.com to try and figure it out, and searched these forums before posting this question.

Last edited by kriepl; 02-11-2008 at 04:45 AM.
Reply With Quote