logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 02-22-2012, 06:54 PM   #1
gigiloumill
gigiloumill's Avatar
 
Join Date: Apr 2009
Location: Miami, FL
Posts: 493
Default Problem with site scrolling.

Guys, I am trying to build a site with a scroll option. The wrapper div will stay fixed and the site will scroll normal. However, I have a div called #top above the wrapper that I also made position:fixed; but, when I view on browser, the div disappears and home which is the div to scroll to #top does not move. Can anyone tell me what I'm doing wrong please? Thanks.
HTML Code:
<div id="main_wrapper">
<div id="top"></div>

<div id="wrapper">
    <div id="header" class="cupcake">
        <ul class="nav">
            <li><a href="#top">Home</a></li>
            <li><a href="#bio">bio</a></li>
            <li><a href="#schedule">Schedule</a></li>
            <li><a href="#contact">contact</a></li>
            				<li><a href="http://starionmedia.com/index.php" target="_new">Listen live</a></li>
        </ul>
    </div> 
</div>
<div id="slider_container">
        
            

  </div>
<div id="bio">
  
        	
</div>
<div id="schedule">
   
    
</div>
<div id="contact">
        
        
</div>
<div id="skyline"></div>


  
<div id="footer" >
<p><a href="#top" class="smooth"> back to top &uarr;</a></p> 
</div>
    

<div id="footer_2"><p>Provided by our friends at </p></div>
</div>
css:
Code:
a img {
	 border: none; 
}
a { 
	color: #231f20; 
	text-decoration: none; 
}
a:hover { 
	text-decoration: none; 
}


/* Text */

h1  { 
	margin: 0;
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif; 
	font-weight: 700; 
	font-style: normal; 
	letter-spacing: 0.01em; 
	text-transform: uppercase;
	font-size: 22px; 
	letter-spacing: 0.06em; 
	padding-bottom: 15px; 
	color:#1d97c3;  
}

p { 
	padding-bottom: 5px; 
	line-height: 18px;
	margin:0px;
	font-size:13.5px;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#CCC; 
}

ul, ol { 
	list-style-image: none; 
	list-style-position: outside; 
	list-style-type: none; 
}




/* Classes */
#main_wrapper {
	width: 1000px;
	background-image: none;
	background-color: #fff;
	margin-right: auto;
	margin-left: auto;
}

#top {
	overflow-x: hidden;
	overflow-y: hidden;
	width: 1000px;
	height:30px;
	color:#000;
	z-index: 100;
	margin: 0px;
	padding: 0px;
	background-color: #000;
        position:fixed;
	
	
}
.contact {
	border-left-color: #7ecfbc;
	border-left-style: solid;
	border-left-width: 3px;
	padding-left: 20px;
	padding-top: 6px;
	background-image: none;
	
}

/* Layout */

body {
	background-repeat: repeat;
	color: #231f20;
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif;
	font-size: 16px;
	letter-spacing: 0.02em;
	padding: 0;
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	
	border:0;
}

#wrapper {
	background-attachment: scroll;
	background-color: transparent;
	background-image: url(../images/nav-banner.png);
	background-position: center top;
	background-repeat: repeat-x;
	position: fixed;
	height: 50px;
	overflow-x: hidden;
	overflow-y: hidden;
	width: 1000px;
	z-index: 100;
	margin: 0px;
	padding: 0px;
}

#header {
	height: 40px;
	text-transform: uppercase;
	width: 100%;
}
#header a {
	font-family: brandon-grotesque-1, brandon-grotesque-2, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.02em;
	-moz-transition: all 100ms linear;
	-webkit-transition: all 100ms linear;
	color:#FFF;
}
#header a:hover { 
	color: #7ecfbc; 
}
#header ul {
	float: left;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 60px;
}
#header ul li { 
	float: left; 
	margin: 0 14px; 
}
	

#content { 
	padding-top: 125px; 
	overflow-x: hidden; 
	overflow-y: hidden; 
}

#bio {
	overflow-x: hidden;
	overflow-y: hidden;
	height: 700px;
	width: 100%;
	margin-top: 40px;
	padding-top: 140px;
	padding-right: 0;
	padding-bottom: 35px;
	padding-left: 0;
	
	background-repeat: no-repeat;
	background-color: #fff;
	
}

.biography {
	height: 300px;
	width: 400px;
	margin-top: 340px;
	margin-right: auto;
	margin-left: auto;
	background-color: #000;
}


#contact {
	background-attachment: scroll;
	background-color: #000;
	background-position: center bottom;
	background-repeat: no-repeat;
	overflow-x: hidden;
	overflow-y: hidden;
	height:440px;
	width: 100%;
	margin-top: 40px;
}

/* Homepage Slider */
#slider_container {
	margin-top: 0px;
    relative; 				
	width: 100%;
	height:700px;
	z-index: 0;
	
	background-repeat: no-repeat;
}
	

/* skyline */
#skyline {
	background-attachment: scroll;
	background-color: transparent;
	background-image: url(../images/nyc.png);
	background-position: center top;
	background-repeat: no-repeat;
	height: 210px;
	display: block;
	margin: 0px auto;
	width: 100%;
}

/* Services page */

#schedule {
	background-attachment: scroll;
	background-color:#000;
	background-position: center top;
	background-repeat: repeat;
	height: 700px;
	display: block;
	margin-top: 50px;
	width: 100%;
	background-image:none;	
}	


/* cupcake and grids */



/* footer */


#footer {
	width:100%;
	background-color:#000;
	margin-top:0px;
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #ABABAB;
	height: 20px;
	
}
#footer p { 
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif; 
	font-size:10px;
	color: #ABABAB;
	text-align:center;
	font-weight:300;
}

#footer a { 
	color: #7ecfbc; 
}
#footer a:hover { 
	text-decoration: underline; 
}

#footer_2 {
	width:100%;
	background-color:#FFF;
	margin-top:0px;
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #ABABAB;
	height: 20px;
	
}
#footer_2 p {
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif; 
	font-size:10px;
	color: #ABABAB;
	text-align:center;
	font-weight:300;
}

/* consulting */
#consulting {
	width:944px;
	height:590px;
	margin-top:0px;
	margin-right: auto;
	margin-left: auto;
	background-repeat:no-repeat;
	padding:0 0 0px;
	background-image: none;
}
#consulting h1 {
	font-size: 42px;
	letter-spacing: 0.06em;
	padding-top: 65px;
	width:100%;
	text-align:center;
	text-transform:capitalize;
	font-weight:800;
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif;
	padding-bottom:10px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 20px;
} 
#consulting p {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	color:#000000;
	font-weight:400;
	letter-spacing: 0.06em;
	text-align:left;
	text-height:1.2em;
	margin-right:20px;
	
}
__________________
Keeping your business connected.
www.starionmedia.com
gigiloumill is offline   Reply With Quote
Old 02-23-2012, 12:53 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Can you post this online.
It's really cumbersome having to copy and paste the code and make a web page out of it
domedia is offline   Reply With Quote
Reply


Thread Tools
Display Modes

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. The time now is 10:11 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com