logo scrollt mee

Hallo allemaal ik heb een vraagje,

Ik gebruik html en css.
Ik heb een website gemaakt maar als ik scroll dan blijft het logo boven in de website in beeld staan door de rest van de pagina heen.
Weet iemand hoe ik er voor zorg dat mijn logo niet meescrollt?
Alvast bedankt!

Zou je de door jou geschreven code willen plaatsen? We hebben geen glaze bol zodat we je code kunnen lezen :smile:

Plaats de code tussen de zgn code tags

Bedoel je dit?


#logo,
#logo a {
font-family: 'Pacifico', cursive;
font-size: 60px;
color: #fff;
line-height: 65px;

sorry als het niet het goede is ik heb er niet zo heel veel verstand van.

Her makkelijkste is om te posten tussen de code tags de lijst met tags kan je hier vinden.

Post de code van de gehele pagina waar je het probleem hebt dan kunnen we ernaar zoeken.

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote,
fieldset, input {
margin: 0;
padding: 0;
}

a img {
border: 0;
}

a {
text-decoration: none;
}

::-webkit-input-placeholder {
color: #1f2223;
}

:-moz-placeholder { /* Firefox 18- */
color: #1f2223;
}

::-moz-placeholder { /* Firefox 19+ */
color: #1f2223;
}

:-ms-input-placeholder {
color: #1f2223;
}

/* General Styling and Structure
--------------------------------------------------------------------------------*/
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 23px;
color: #fff;
background: transparent url('default-bg.jpg') center center no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100%;
}

html {
height: 100%;
}

.container {
width: 770px;
}

#page-wrap {
/*width: 1200px;
overflow: hidden;*/
height: 100%;
}

#header-wrap,
#banner-wrap,
#nav-wrap,
#main-wrap,
#footer-wrap {
width:100%;
}

a {
color: #91c4f0;
}

a:hover {
color: #91c4f0;
}

h2 {
font-size: 30px;
padding: .5em 0 .2em 0;
line-height: 35px;
font-family: 'Arvo', serif;
font-weight: bold;
font-style: italic;
color: #fff;
-webkit-font-smoothing: antialiased;
}

p {
font-size: 18px;
line-height: 1.5;
padding: .5em 0;
}

blockquote {
background: rgba(0,0,0,0) url(quote.png) no-repeat 0px 18px;
font-size: 18px;
line-height: 23px;
color: #ffbb20;
padding: 1em 2em !important;
margin: 2em 0;
border-left: 0px !important;
}

.wsite-theme-dark hr.styled-hr {
background-color: rgba(255,255,255,0.4);
height: 3px;
box-shadow: none;
}

/* Content-Area
-------------------------------------------------------------*/
#content-area {
padding-top: 130px;
padding-left: 250px;
background: transparent url('bg-shadow.png') left top no-repeat;
background-size: cover;
background-attachment: variable;
min-height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

/* Sidebar
--------------------------------------------------------------------------------*/
#sidebar {
width: 250px;
position:fixed;
height:100%;
top: 0;
left: 0;
}

#title-block {
margin:20px 25px;
padding-bottom:20px;
}

#features {
padding-top: 20px;
margin:0 25px;
}

#logo,
#logo a {
font-family: 'Pacifico', cursive;
font-size: 60px;
color: #fff;
line-height: 65px;
}

/* Header: Social Links
--------------------------------------------------------------------------------*/
.wsite-social {
vertical-align: middle;
width: 200px !important;
}

.wsite-social-item {
width: 24px;
height: 24px;
margin: 5px 10px 5px 0;
float: left;
}

.wsite-social-rss { background: url(social-icons.png) no-repeat -138px -2px; }
.wsite-social-rss:hover { background-position: -138px -32px; }
.wsite-social-rss:active { background-position: -138px -62px; }

.wsite-social-linkedin { background: url(social-icons.png) no-repeat -70px -2px; }
.wsite-social-linkedin:hover { background-position: -70px -32px; }
.wsite-social-linkedin:active { background-position: -70px -62px; }

.wsite-social-facebook { background: url(social-icons.png) no-repeat -2px -2px; }
.wsite-social-facebook:hover { background-position: -2px -32px; }
.wsite-social-facebook:active { background-position: -2px -62px; }

.wsite-social-twitter { background: url(social-icons.png) no-repeat -36px -2px; }
.wsite-social-twitter:hover { background-position: -36px -32px; }
.wsite-social-twitter:active { background-position: -36px -62px; }

.wsite-social-mail { background: url(social-icons.png) no-repeat -104px -2px; }
.wsite-social-mail:hover { background-position: -104px -32px; }
.wsite-social-mail:active { background-position: -104px -62px; }

.wsite-social-pinterest { background: url(social-icons.png) no-repeat -240px -2px; }
.wsite-social-pinterest:hover { background-position: -240px -32px; }
.wsite-social-pinterest:active { background-position: -240px -62px; }

.wsite-social-youtube { background: url(social-icons.png) no-repeat -342px -2px; }
.wsite-social-youtube:hover { background-position: -342px -32px; }
.wsite-social-youtube:active { background-position: -342px -62px; }

.wsite-social-plus { background: url(social-icons.png) no-repeat -206px -2px; }
.wsite-social-plus:hover { background-position: -206px -32px; }
.wsite-social-plus:active { background-position: -206px -62px; }

.wsite-social-flickr { background: url(social-icons.png) no-repeat -172px -2px; }
.wsite-social-flickr:hover { background-position: -172px -32px; }
.wsite-social-flickr:active { background-position: -172px -62px; }

.wsite-social-vimeo { background: url(social-icons.png) no-repeat -274px -2px; }
.wsite-social-vimeo:hover { background-position: -274px -32px; }
.wsite-social-vimeo:active { background-position: -274px -62px; }

.wsite-social-yahoo { background: url(social-icons.png) no-repeat -308px -2px; }
.wsite-social-yahoo:hover { background-position: -308px -32px; }
.wsite-social-yahoo:active { background-position: -308px -62px; }

/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap {
max-height: 200px;
}
#nav .container ul {
list-style: none !important;
}

#nav .container ul li {
list-style: none !important;
}

#nav .container ul span:last-child li,
#nav .container ul > li:last-child {
background: none;
}

#nav ul li a {
display: block;
font-size:30px;
line-height: 35px;
padding: 10px 0;
color: rgba(255,255,255,0.4);
padding: 2px 25px 2px 21px;
border: 0;
outline: 0;
list-style-type: none;
position:relative;
right:-4px;
z-index:1;
text-transform: uppercase;
font-family: 'Aller', sans-serif;
}

#nav ul li#active a,
#nav ul li a:hover {
color: #fff;
border: 0;
}

/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu li a {
color: rgba(0,0,0,0.4);
background: #fff;
border: 0;
}

#wsite-menus .wsite-menu li a:hover {
color: #000;
background: #e3e3e3;
}

/* Universal banner
--------------------------------------------------------------------------------*/
#banner td { vertical-align: middle !important; text-align: center; }

#bannerright h2,
#banner h2 {
color: #fff;
font-size: 80px;
line-height: 85px;
font-family: 'Arvo', serif;
font-weight: 700;
font-style: italic;
padding: 0px;
padding-bottom: 20px;
-webkit-font-smoothing: antialiased;
}

#banner h2,
#banner p {
text-transform: capitalize;
}

#bannerright p,
#banner p {
color: #fff;
font-size: 30px;
padding-bottom: 20px;
font-family: 'Aller', sans-serif;
}

/* Page type: Tall header
--------------------------------------------------------------------------------*/
.tall-header-page .wsite-header {
width: 770px;
height: 294px;
background: url(banner-tall.jpg) no-repeat;
border-radius: 5px;
}

/* Page type: Short header
--------------------------------------------------------------------------------*/
.short-header-page .wsite-header {
width: 770px;
height: 224px;
background: url(banner-short.jpg) no-repeat;
border-radius: 5px;
}

.short-header-page #main-wrap .container h2 {
border-bottom: 4px solid rgba(255,255,255,0.2);
}

/* Page type: No header
--------------------------------------------------------------------------------*/
.no-header-page .wsite-header {
display:none;
}

/* Page type: Landing page
--------------------------------------------------------------------------------*/
.landing-page #banner {
background: none;
padding: 0;
margin-bottom: 40px;
}

.landing-banner-outer {
display: table;
width: 100%;
overflow: hidden;
}

.landing-banner-mid {
display: table-cell;
vertical-align: middle;
}

/*Splash-Page
---------------------------------------------------------*/
.splash-page .main-wrap {
display: table-cell;
max-width: 775px;
border-radius: 10px;
text-align:left;
vertical-align: middle
}
.splash-page #content-area {
display: table;
width: 100%;
padding-top: 0;
padding-left: 350px;
}

@media screen and (min--moz-device-pixel-ratio: 0) {
/* Firefox-specific CSS - table uses height as min-height */
.splash-page #content-area {
height: 100%;
}
}

.splash-page .main-wrap #content-section p{
margin-bottom:20px;
}

/*Title-page
------------------------------------------------------------------------------*/
.title-page .banner-wrap {
margin-bottom: 50px;
width: 770px;
}

.title-page #banner h2 {
color: #fff;
font-size: 80px;
line-height: 85px;
font-family: 'Arvo', serif;
font-weight: 700;
font-style: italic;
padding: 0px;
padding-bottom: 55px;
border-bottom: 4px solid rgba(255, 255, 255, 0.2);
-webkit-font-smoothing: antialiased;
}

.title-page #main-wrap .container h2 {
font-size: 30px;
font-family: 'Arvo', serif;
font-weight: bold;
font-style: italic;
color: #fff;
border-bottom: 4px solid rgba(255,255,255,0.2);
padding-bottom: 15px;
-webkit-font-smoothing: antialiased;
}
.title-page #main-wrap .container p { padding: 20px 0;}

/* Main Content
--------------------------------------------------------------------------------*/
.landing-page #main-wrap .container {
min-height:400px;
border-top: 4px solid rgba(255,255,255,0.2);
border-bottom: 4px solid rgba(255,255,255,0.2);
padding: 30px 0 80px 0;
}

.no-header-page #main-wrap .container {
padding-top: 0;
}

#main-wrap .container {
min-height:400px;
border-bottom: 4px solid rgba(255,255,255,0.2);
padding: 20px 0 0 0;
}

#main-wrap .container h2 {
font-size: 30px;
font-family: 'Arvo', serif;
font-weight: 700;
font-style: italic;
color: #fff;
padding-top: 0;
-webkit-font-smoothing: antialiased;
}
#main-wrap .paragraph ul
#main-wrap .paragraph ol {
margin: 0 !important;
padding: 0 !important;
}
#main-wrap .paragraph li {
padding-left: 10px !important;
}

#main-wrap .container form .wsite-button {
margin-top:20px;
}

/* Footer
--------------------------------------------------------------------------------*/
#footer-wrap {
text-align:right;
}

#footer-wrap .container {
padding: 20px 0;
color: rgba(255,255,255,0.4);
}
#footer-wrap .container h2 {
font-size: 18px;
font-weight: bold;
font-style: italic;
color: #fff;
}
#footer-wrap .container p {
font-size: 18px;
color: rgba(255,255,255,0.4);
padding: 0;
}

#footer-wrap .paragraph ul
#footer-wrap .paragraph ol {
margin: 0 !important;
padding: 0 !important;
}
#footer-wrap .paragraph li {
padding-left: 10px !important;
}
#footer-wrap .wsite-form-container {
text-align:left;
margin-top: 0 !important;
}

#footer-wrap .wsite-form-label {
display: inline-block;
font-family: 'arial', 'helvetica' , sans-serif;
font-size: 18px;
color: rgba(255,255,255,0.4);
font-weight: normal;
padding: 7px 0;
}

#footer-wrap .wsite-search-element-submit {
background-image: url('search.png');
width: 19px;
height: 19px;
margin-top: -10px;
left: 15px;
}

#footer-wrap .wsite-search-element-input {
padding-left: 45px;
color: rgba(255,255,255,0.4);
}

#footer-wrap .wsite-search-element-input::-webkit-input-placeholder {
color: rgba(255,255,255,0.4);
}
#footer-wrap .wsite-search-element-input:-moz-placeholder {
color: rgba(255,255,255,0.4);
}
#footer-wrap .wsite-search-element-input::-moz-placeholder {
color: rgba(255,255,255,0.4);
}
#footer-wrap .wsite-search-element-input:-ms-input-placeholder {
color: rgba(255,255,255,0.4);
}


/* Form Customization
--------------------------------------------------------------------------------*/
.wsite-form-label {
display: inline-block;
font-family: 'arial', 'helvetica' , sans-serif;
font-size: 18px;
color: #fff;
font-weight: normal;
padding: 7px 0;
}

.form-radio-container {
font-family: 'arial', 'helvetica' , sans-serif;
font-size: 18px;
color: rgba(255,255,255,0.6);
font-weight: normal;
}

.wsite-form-input {
font-family: 'arial', 'helvetica' , sans-serif;
font-size: 18px;
color: #000;
background: #fff;
border: 3px solid #fff;
width: 300px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.wsite-form-input:hover, .wsite-search-element-input:hover {
background: rgba(255,255,255,0.4);
}

.wsite-form-input:focus, .wsite-search-element-input:focus {
background: transparent;
color: #fff;
}

.form-select {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #1f2223;
background: #fff;
border: 3px solid #fff;
padding: 6px 5px;
width: 300px;
height: 40px !important;
line-height: 44px !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

/* Buttons
--------------------------------------------------------------------------------*/
/* Small structure & regular style */
.wsite-button,
#footer-wrap .wsite-search-element-input {
display: inline-block;
background: rgba(0,0,0,0);
border-radius: 25px;
border: 4px solid rgba(255,255,255,0.4);
background: rgba(0,0,0,0);
text-transform: uppercase;
}

.wsite-button:hover {
background: rgba(0,0,0,0);
border-color: #fff;
}

.wsite-button:active {
background: #fff;
border-color: #fff;
}

.wsite-button-inner {
color: #fff;
font-weight: bold;
display: block;
font-size: 13px;
background: rgba(0,0,0,0);
height:34px;
line-height:34px;
}

.wsite-button:hover .wsite-button-inner {
background: rgba(0,0,0,0);
}

.wsite-button:active .wsite-button-inner {
color: #1f2223 !important;
}

/* Large structure & regular style */
.wsite-button-large {
color: #fff;
background: rgba(0,0,0,0);
border-radius: 25px;
text-transform: uppercase;
}

.wsite-button-large:hover {
background: rgba(0,0,0,0);
border-color: #fff;
}

.wsite-button-large:active {
background: #fff;
border-color: #fff;
}

.wsite-button-large .wsite-button-inner {
background: rgba(0,0,0,0);
height:44px;
line-height:44px;
}

.wsite-button-large:hover .wsite-button-inner {
background: rgba(0,0,0,0);
}

.wsite-button-large:active .wsite-button-inner {
color: #1f2223 !important;
}

/* Highlighted styles */
.wsite-button-highlight {
background: rgba(0,0,0,0);
border-color: #ffbb20;
}

.wsite-button-highlight .wsite-button-inner {
background: rgba(0,0,0,0);
}

.wsite-button-highlight:hover {
background: rgba(255,187,32,0.2);
border-color: #ffbb20;
}

.wsite-button-highlight:active {
background: #ffbb20;
border-color: #ffbb20;
color: #1f2223 !important;
}

.wsite-button-large.wsite-button-highlight {
background: rgba(0,0,0,0);
border-color: #ffbb20;
}

.wsite-button-large.wsite-button-highlight .wsite-button-inner {
background: rgba(0,0,0,0);
}

.wsite-button-large.wsite-button-highlight:hover {
background: rgba(255,187,32,0.2);
border-radius: 25px;
}

.wsite-button-large.wsite-button-highlight:active {
background: #ffbb20;
border-color: #ffbb20;
color: #1f2223 !important;
}

/* Blog
--------------------------------------------------------------------------------*/
.wsite-theme-dark .blog-post .blog-separator {
border-color: rgba(255,255,255,0.4);
border-width: 3px;
}

/* Popover
--------------------------------------------------------------------------------*/
.popover {
color: #000;
}

/* Transitions
--------------------------------------------------------------------------------*/
.wsite-form-input,
.wsite-search-element-input,
.form-select,
.wsite-button,
#nav a {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

-webkit-transition-property: border-color, background-color, color;
-moz-transition-property: border-color, background-color, color;
-o-transition-property: border-color, background-color, color;
transition-property: border-color, background-color, color;
}

zo goed?

Bijna nu de HTML nog waar deze code bij hoort en kijk nog even goed naar de code tags: bekijk: http://www.nationaalcomputerforum.nl/misc.php?do=bbcode#code

de code tags werken op dit forum het zelfde als html tags alleen dan niet < maar met deze: [ dus aan het einde ook [/]

dit stuk
doet me vermoeden dat jou logo in de sidebar staat. (zoiets)


Als dit waar is, dan is dit je probleem:

#sidebar {
width: 250px;
position:fixed;
height:100%;
top: 0;
left: 0;
}

Position:fixed zorgt ervoor dat je element altijd dezelfde positie heeft ten opzichte van je scherm (en meescrolt)


Wat kan je doen?

je kunt twee dingen doen.

1) verwijder de 'position:fixed' property uit je css. (waarschijnlijk de beste keuze)
nadeel: je sidebar scrolt ook niet meer mee.

2) zet je logo op een andere positie. (dus niet in de sidebar)