PDA

View Full Version : Problem with site scrolling.


gigiloumill
02-22-2012, 06:54 PM
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. <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: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;

}

domedia
02-23-2012, 12:53 PM
Can you post this online.
It's really cumbersome having to copy and paste the code and make a web page out of it 8)