...

View Full Version : New to Css - Missing scrollbar.



c.munro
04-28-2011, 06:06 PM
Hi, I'm new to web design.

when I view my webpage in firefox I dont have a scrollbar.

I have a feeling it is to do with the
position; fixed
tags I have in my CSS coding.

When i remove all of these tags, sure my scrollbar is there, but all my content is all over the place!

I'll quite happily move my content back into its correct place, but then i hit another problem, the text and image moves when i scale web browsers sizes (part of the whole reason why I added position; fixed)

A little help for a confused newbie,


many thanks


[code]




body {background-color: #eeedee;
font-family:"avenir";


}

@font-face {
font-family: 'AvenirLTCom45Book';
src: url('avenirltcom-book-webfont.eot');
src: url('avenirltcom-book-webfont.eot?#iefix') format('embedded-opentype'),
url('avenirltcom-book-webfont.woff') format('woff'),
url('avenirltcom-book-webfont.ttf') format('truetype'),
url('avenirltcom-book-webfont.svg#AvenirLTCom45Book') format('svg');
font-weight: normal;
font-style: normal;

}


#laptop{ position:fixed;
top:220px;
left:250px;
}




h4{
position:fixed;
top:190px;
left:65px;
z-index:10;
font-size:12px;
font-weight:100;





}

h3{
position:fixed;
top:240px;
left:135px;
z-index:10;
font-size:14px;
font-weight:600;
line-height:1.5em;


}


h2{
position:fixed;
top:145px;
left:65px;
font-weight:100;
z-index:10;
font-size:12px;

}


h1{
position:fixed;
top:110px;
left:65px;
line-height:9em;
z-index:10;
font-size:14px;
font-weight:500;
line-height:1em;



}


a:link {
color:#171717;
text-decoration: none;
}
a:visited {
text-decoration: none;
color:#171717;
}
a:hover {
text-decoration: none;
color:#171717;
}
a:active {
text-decoration: none;
color:#171717;
}

<style type="text/css">
a:link {
color:#60605B;
text-decoration:none;
}
a:hover {
color:#F7B50C;
text-decoration:none;
}


#images {
top:25px;
left:210px;
width: 400px;
height: 250px;

position:fixed;

margin: 20px auto;
}
#images img {
width: 400px;
height: 250px;

position: absolute;
top: 0;
left: -400px;
}
#images img:first-child {
left: 0;
}
#slider a {
top:40px;
left:210px;
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #C6E4F2;
}

transition: transition-property transition-duration transition-timing-function transition-delay;


#images img {
z-index: 1;
opacity: 0;

transition: all linear 1s;
-o-transition: all linear 1s;
-moz-transition: all linear 1s;
-webkit-transition: all linear 1s;
}
#images img:target {
left: 0;
z-index: 9;
opacity: 1;
}


#images {
width: 800px;
height: 500px;

position: relative;

margin: 20px auto;
}
#images img {

width: 700px;
height: 450px;

position: absolute;
top: 0;
left: -400px;
z-index: 1;
opacity: 0;

transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#images img:target {
left: 100;
z-index: 9;
opacity: 1;
}
#images img:first-child {
left: 0;
}
#slider a {
top:200px;
left:210px;
text-decoration: none;
background:#F60;
border: none;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background:#eeedee;
}
#number{
position:fixed;
top:180px;
left:580px;
}


h8{
position:fixed;
top:190px;
left:945px;
z-index:20;
font-size:12px;
font-weight:600;
}

div {
overflow: visible;

}

abduraooft
04-28-2011, 06:08 PM
A little help for a confused newbie,
It's not a good practice to have absolute/fixed positions everywhere. Perhaps, you need to drop most of them and allow the elements to be in normal flow. Can we have a link to your page?

c.munro
04-28-2011, 06:26 PM
Yes, the position tags where just an answer to everything being fixed on the page.

sure, http://www.claire-munro.com/

bearing in mind it is still very much work in progress.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum