css "position: fixed;" causing scrollbar to be disable

Question

rusty813 0 Newbie Poster

13 Years Ago

I have element that I want to be a fixed position in css, but that specific when it is set to position: fixed; it causes my scrollbar to be disabled...why is that and what do i need to do to fix this...i do want this element to be fixed so when i scroll up and down the page its still in the same area... thanks

the css tag is i am talking is .profiles {position: fixed;}

here is the website on a test server if you want to see what i am talking about http://rusty813.netai.net/profiles.html

<!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></title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
  
<body bgcolor="#000000">  
<div id="container">
  <div id="header">
    <div class="logo"></div>
    <div class="nav">
      <ul>    
        <li><a href="http://www.*****.com/***">***</a></li> |  
        <li><a href="http://www.*****.com/***">***</a></li> |
        <li><a href="http://www.*****.com/***">***</a></li> |
        <li><a href="http://www.*****.com/***">***</a></li> |
        <li><a href="http://www.*****.com/***">***</a></li> |
        <li><a href="http://www.*****.com/***">***</a></li> |
        <li><a href="http://www.*****.com/***">***</a></li> |
        <li><a href="http://www.*****.com/***">***</a></li>
      </ul>
    </div>
  </div>
  <div id="content">
    <div class="profiles">
    <ul>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb001.png" alt="***"/>***</a></li>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb002.png" alt="***"/>***</a></li>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb003.png" alt="***"/>***</a></li>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb004.png" alt="***"/>***</a></li>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb005.png" alt="***"/>***</a></li>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb006.png" alt="***"/>***</a></li>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb007.png" alt="***"/>***</a></li>
    </ul> 
    </div>	


       <table width="100%" cellpadding="0" cellspacing="0" border="0">
	    <tr>
              <td width="230" valign="top">
                <div align="center" id="mainphoto">
                  <a href=""><img src="images/profiles/***.png" class="profile_image" border="0" alt=""/></a>
                </div>
	          </td>
		</tr>
		</table>
       <table class="maintable" cellpadding="0" cellspacing="0" border="0" align="center">
             <tr>
               <td id="info" valign="top">
                 <h1>***</h1>
                   Female<br />
                   26 years old<br />
                   Houston, Texas, US<br />
               </td>
			 </tr>
			 <tr>
			   <td>
                 <div class="head">About me</div>
                 <div class="post"><p>Text here Text hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText here</p></div>
               </td>
	         </tr>
       
   <br />
   <tr>
   <td>
    <div class="gallery">
      <ul>
        <li><a href="images/profiles/model_1/image001.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image001.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image002.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image002.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image003.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image003.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image004.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image004.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image005.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image005.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image006.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image006.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image007.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image007.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image008.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image008.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image009.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image009.jpg" width="100" height="100" border="0" alt=""/></a></li>						
      </ul>
    </div>
	</td>
	</tr>
	</table>
  </div>
</div>
</body>
</html>

#header {
	position: fixed;
	z-index: 999;
}

.logo {
	position: fixed;
	background-image: url(../images/logo/logo2.png);
	width: 567px;
	height: 252px;
	top: 8px;
	left: 775px;
}

.nav {
	position: fixed;
	top: 70px;
	left: -20px;
}

.nav a{
	text-decoration: none;
	font-family: segoe script;
	font-weight: bold;
	font-size: 16px;
	color: #ec2c49;
}

.nav ul {
	word-spacing: 8px;
	font-family: segoe script;
	color: #ec2c49;
}

.nav ul li {
	display: inline;
}

#content {
	position: relative;
	top: 125px;
}
#fadeshow1, #fadeshow1 .gallerylayer {
	position: relative;
	background-color:transparent!important;
	left: 20px;
	z-index: 997;
}

#text1 {
	position: absolute;
	top: 100px;
	left: 550px;
	width: 550px;
	font-family: "segoe script";
	font-size: 20px;
	color: #4b2701;
	font-style: italic;
	font-weight: bold;
	z-index: 998;
}

.blog {
	position: relative;
	left: 200px;
}


.maintable {
	color: #ffffff;
	position: absolute;
	top: -25px;
	left: 220px;
	width: 60%;
}

.gallery ul {
	border-style: none;
	word-spacing: 8px;
	font-family: segoe script;
	color: #ec2c49;
}

.gallery ul li {
	display: inline;
}

.profiles {
	position: fixed;
}

.profiles img {
	border: 0;
}

.profiles ul {
	margin: 0;
	list-style-type: none;

}

.profiles li {
	margin: 2px 0;
	padding: 4px;
	background: url(../images/profilebg/individual_bg.png) no-repeat;
	height: 62px;
	width: 151px;
}

.profiles li img {
	vertical-align: middle;
	margin-right: 20px;
}

.profiles li a {
	font-family: segoe script;
	font-weight: bold;
	color: #e6930f;
	text-decoration: none;
	font-size: 15px;
}

html-css web-design

3 Contributors
2 Replies
179 Views
6 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Bestwebdesign

bvelez352 0 Light Poster

13 Years Ago

I copy/paste the code and when I resize it the scroll bar is there.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Bestwebdesign 0 Newbie Poster · Answer 1 · 2011-02-01T16:20:30+00:00

Hi,

You had inserted position fixed in the nav class also, so delete that one.

logo {
	position: fixed;
	background-image: url(../images/logo/logo2.png);
	width: 567px;
	height: 252px;
	top: 8px;
	left: 775px;
}
 
.nav {
	top: 70px;
	left: -20px;
}