opgelost scrollen content onzichtbaar maken in header

Hi,

Mijn website header is fixed en met transparant background (want moet de background van website volledig te zien zijn) en als ik scroll, de hele content komt achter logo, naam, winkelwagen etc., die zijn in header geplaatst, te zien. Echt niet mooi. Hoe kan ik deze scrollende content onzichtbaar in header maken?

Een voorbeeld daarvan is website van yahoo. Maar, daar scrolt allen content, zonder sidebars.

Ik heb verschillende variaties geprobeerd, maar het lukt mij niet.

Weet iemand de css code, hoe de hele sheet in scroll te krijgen of de hele pagina scrollen, maar in de header gebied onzichtbaar maken?

Voorbaat bedankt,
Vero

Zonder een link naar je website is het heel lastig om een advies te geven.
Heb je de site al online beschikbaar?

Hi Woody,

Normaal niet, maar nu heb speciaal mijn website voor u online gezet.

Deze link naar een gevulde pagina, want hoofdpagina is nog bijna leeg. In de boven linker hoek komt website logo, dit heb ik nu weg gehaald.

Header met horizontal menu en linker sidebar met menutjes zijn fixed. Het liefst, dat heel deel onder het witte blokje met breadcrumb verdwijnt (content + rechter sidebar).

www.adrialle.com/delicious/swarovski/cat...31-bicone-xilion-3mm

Bedankt voor een snele reactie,
Vero

Dat gaat je niet lukken. De bedoeling van een fixed header is dat de content erachter door scrollt. Dus je zult keuzes moeten maken.
Overigens: als ik je site op een mobiel bekijk, dan kan ik niks en scrollt alles alle kanten op. Ook horizontaal scrollt de content achter de modules door. Zeer onrustig!

En hoe dan dit is in yahoo.mail gemaakt? Als ik goed begrijp, dan daar header ook doorzichtig is. En linker sidebar met menu ook fixed, want scrolt deze ook niet naar boven. Scrolt allen content en verdwijnt achter header. En website is stabiel. Ik ook graag wil zoiets hebben, maar goed, heb ik header wit gemaakt, dus met scroling naar beneden nu alles goed, maar nog steeds probleem met fixed left sidebar. U zelf hebt gezien, dat alles horizontaal loopt naar verschillende kanten op. Hoe kan ik deze oplossen? Of dit gaat ook niet lukken?

Vero

Je template staat nu waarschijnlijk ingesteld op flexibele breedte.
Want op een 4:3-monitor ziet het er wel mooi uit, maar op een breedbeeldscherm staat het menu helemaal nar rechts en het winkelmandje is ook uit elkaar getrokken.

Kortom... als je wil wat jij wil, moet je denk ik eens op zoek naar een beter template.

Deze template heb ik zelf met artisteer gemaakt. Natuurlijk, na het exporteren, veel aanpassingen gedaan, die kon ik niet met artisteer doen. Ik denk, dat ik wel goed ben bekend met artisteer, ik weet precies waar ik iets moet zoeken en kan het naar verschillende kanten snel aanpassen. Als ik ga een template kopen, dan weet ik niet hoe deze opgebouwd is, daarna heb ik problemen met aanpassingen en dit gaat dan veel tijd kosten.

Deze template is op vaste 1080px breedte ingesteld. Op het begin was 1000px. Maar ik heb wat groter gedaan om mooier producten te positioneren en wat meer ruimte rondom tekst te hebben. Mijn monitor ook is met breedbeeldscherm, maar ik vind het helemaal niet erg, dat het menu helemaal naar rechts staat want hij is fixed naar rechts op 0px, natuurlijk kan ik de afstand fixen op meer px's, maar dan op 4:3 monitor komt menu ook op deze afstand van rechts en dit gaat zeker niet mooi eruitzien.

Winkelmandje op mijn scherm staat waar ik heb het geplaats: boven "home" item, want daar naar rechts is nog een bepaalde ruimte nodig voor een tekst en button, die verschijnen als in winkelmandje producten worden geplaatst.

In ieder geval bedankt voor reactie,

Vero

Ik zou toch je site eens op verschillende resoluties bekijken.

Astrid,

Ik heb veel aangepast. Dus nu op breed scherm, gewone scherm en op tablet alles perfect volgens mij. Ik wil graag je vragen nogmaals, als u het wilt, op je apparaat bekijken, want deze heb ik niet.
Ik heb wit header achtergrond gedaan. Nu mijn website schuift naar beneden en naar rechts. Onder header en onder linker menu's, die staan vast.

Voorbaat bedankt,
Vero

Vero,
Dat kun je ook heel goed zelf.
Gebruik je Google Chrome?
Installeer dan eens Resolution Test.
Een geweldige add-on voor Chrome op verschillende resoluties je site te kunnen testen.
Ook als je niet zelf een smartphone of tablet hebt.

Bedankt,

Vero

Vero,
Volgens mij is je vraag ondertussen voldoende beantwoord.
Indien je het daar mee eens bent, kun je zelf deze melding sluiten door op de groene knop Opgelost te klikken.
Uiteraard wel nadat je nog even een laatste reactie hebt geplaatst.