NameSilo

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

Spaceship Spaceship
Watch
H

hangman21

Established Member
โ˜… 15 โ˜…
Impact
1
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;}

Code: 
#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;
}
 
Reply
0
0 Like
0 Thanks
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
Unstoppable DomainsUnstoppable Domains
Sort by date Sort by points
Nothing looks weird. Maybe it's some of the other code in the page conflicting with the css?
 
Reply
0
0 Like
0 Thanks
•••
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></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>
 
Reply
0
0 Like
0 Thanks
•••
That code looks very straight-forward as well. What are those javascript files?
 
Reply
0
0 Like
0 Thanks
•••
Log in or sign up to reply here.
Dynadot โ€” .com Registration $8.99Dynadot โ€” .com Registration $8.99

Similar threads

hoops
Need help with html/css menu
2 replies
1K views
hoops
hoops
P
CSS Help plzz
4 replies
857 views
youngspider
Y
T
Css question
3 replies
956 views
teamweiss
T
T
IE6/7 Nav Menu Glitch
1 reply
676 views
thekooliest
T
C
CSS Help
0 replies
692 views
Coolprogram
C
Appraise.net

We're social

Escrow.com

New posts โž”

Spaceship

Auction activity โž”

Unstoppable Domains

How do you think a potential buyer first checks if your domain is for sale?

Polls of interest โž”

CryptoExchange.com

Hot this week โž”

Domain Recover

Community favorite โž”

Trustap

Hot this month โž”

DomainEasy โ€” Payment Flexibility

Blog favorites

DomDB

  1. TickerCompany.com

    • Buy Now
    • $1,643

  2. freeporthousestaging.com

    • Buy Now
    • $1,175

  3. InfinitySurfboards.com

    • Make Offer

  4. PlexBit.com

    • Show Price

  5. ShowVerse.com

    • Show Price

  6. Gamebly.com

    • Make Offer

  7. PayLabs.xyz

    • Make Offer

  8. IdealTrucks.com

    • Buy Now
    • $12,500

  9. LaSemilla.com

    • Make Offer

  10. MiniImages.Com

    • Make Offer
  • The sidebar remains visible by scrolling at a speed relative to the pageโ€™s height.
Back