Verticaal menu aan de linkerkant fixed maken met horizontale content

Status
Niet open voor verdere reacties.
B

brendaatje

Gebruiker
Lid geworden
2 aug 2006
Berichten
9
Hoi,

hopelijk kan iemand mij helpen. Ben bezig met een website in dreamweaver en heb een verticaal menu aan de linkerkant van de pagina. Rechts daarvan staat de content met een table met foto's. Het is de bedoeling dat je horizontaal kan scrollen zodat je alle foto's kan zien, maar het menu aan de linkerkant moet zichtbaar blijven.

Op de 1 of andere manier gaat het fout als ik het menu de position 'fixed' meegeef omdat de content dan helemaal over het menu schuift. Als ik position 'fixed' weglaat, staat de content wel op de juiste plek, maar bij het scrollen schuift mijn menu ook mee uit beeld, wat dus niet de bedoeling is. Wat moet ik aanpassen?

Dit is mijn CSS, ben nog geen expert op HTML/CSS gebied dus mogelijk staan er nog meer rare dingen in dus alvast excuus hiervoor :)

#wrapper {
height: auto;
width: auto;
margin-top: auto;
margin-bottom: auto;
margin-left: 0px;
position:absolute;
overflow: hidden;
}
#menu {
height: auto;
width: 180px;
float: left;
}
#content {
height: 750px;
width: auto;
overflow: auto;
position:relative;
padding-top: 20px;
 
Hoi brendaatje,
Iedereen die websites maakt, zal het ooit eens begonnen zijn met rare dingen, vallen en opstaan (en dan weer vallen & opstaan). Daar zou ik me niet druk om maken! :)

Ik denk dat het voornaamste wat is de weg zit, de tabel-structuur voor de foto's is.
Tabellen lenen zich niet zo goed voor de opmaak van een site, en zijn daar eigenlijk ook niet voor bedoeld. Aan de ene kant zijn tabellen te flexibel (ze stulpen alle kanten uit, als je niet uitkijkt), en aan de andere kant zijn ze juist te star (je zit vast aan rijen en kolommen, die zich slecht aan een pagina kunnen aanpassen).
  • Jammer genoeg zijn er op internet (verouderde tutorials, voorbeelden, enz.) en daarbuiten (boeken, cursussen, enz.; en ook: html-editors) nog steeds veel leermeesters/toepassingen die starten met: "Als je orde op je webpagina wilt hebben, dan begin je met het maken van een tabel" of woorden van gelijke strekking.
  • Dat moet je dus niet doen! Tabellen zorgen bv. voor een enorme hoeveelheid extra html-code. En als je wat aan de indeling van je site wilt gaan dien, dan moet je die tabellen op elke pagina van de site weer opnieuw gaan maken. :confused:

Het kan handiger!
Tegenwoordig kan de opmaak van een pagina uitstekend met (alleen) CSS gebeuren.

In jouw pagina staat een #wrapper. Hoe die precies in de html-code staat, weet ik niet, maar het lijkt me dat deze helemaal gemist kan worden.
Als je een fixed menu en content met alleen tekst daarnaast wilt hebben, dan kan je het zo doen:


  • Voorbeeld: fixed-menu-gefikst-1.htm
    (De css staat in de <head> van de broncode)
  • Het content-gedeelte voegt zich altijd naar de breedte van het scherm, en kan nooit bij de menukolom komen.

=======
Ga je in de content nu plaatjes invoeren, dan blijft dat zo. Wat er aan plaatjes niet meer op past bij een kleiner beeldscherm/window, gaat automatisch naar een volgende regel. En er hoeft helemaal niet horizontaal gescrolld te worden om alles te kunnen zien!

  • Voorbeeld: fixed-menu-gefikst-2.htm
  • Ook het aantal plaatjes op een regel voegt zich altijd naar de breedte van het scherm, en kan nooit bij de menukolom komen.

=======
Nu kan het in sommige gevallen wenselijk zijn om bv. een vast aantal plaatjes naast elkaar te hebben (of er zit een hele brede bij, die van de pagina afwandelt bij een smal scherm).
Dan zou je een <div id="fotostrook"> kunnen maken met een vaste breedte. Als je verder niets doet, dan gebeurt hetzelfde als eerst: bij een smal scherm is er wel een horizontale scrollbar onderaan, maar de content schuift onder de menukolom:


=======
Nu zou je de #content een {overflow: auto} kunnen geven, dan komt er bij de #content een scrollbar als iets er niet meer op past, en de content kan niet ,meer onder het menu schuiven.
Maar... die scrollbar staat dan helemaal onderaan de #content: je moet eerst naar beneden scrollen om 'm te kunnen zien.


=======
Een oplossing kan zijn, om de #content een {position: absolute} te geven: links beginnend naast de menukolom, en verder automatisch aan de bovenkant, rechterzijkant en onderkant doorlopen tot waar het scherm ophoudt:

  • Voorbeeld: fixed-menu-gefikst-5.htm
  • Nu staat de horizontale scrollbar altijd vast onderaan het scherm, en is altijd bij de hand.

=======
Een andere oplossing kan zijn, om de #content géén absolute positie te geven, maar om de <div id="fotostrook"> in een <div id="fotostrook-wrapper"> te zetten die een {overflow: auto} krijgt.

  • Voorbeeld: fixed-menu-gefikst-6.htm
  • Nu staat de horizontale scrollbar meteen onder onder de fotostrook, en is alleen bij de hand waar ie nodig is.
  • Er is geen horizontale scrollbar onderaan het scherm meer nodig: de rest van de content wordt netjes zo breed als het scherm toelaat.

PS: bij zo'm flexibele breedte is het wel aan te raden om een maximale breedte voor het totaal op te geven {max-width: ...px}, anders worden het bij breedbeeldschermen veel te lange regels.

Met vriendelijke groet,
CSShunter
 
Beste CSShunter,

Bedankt voor je uitgebreide reactie. Ik reageer nogal laat omdat ik het idee heb dat mijn mac dingen anders toont dan op een windows computer (kan dat?) Dat wilde ik eerste even controleren. Vandaar.

Zou je ook voorbeelden kunnen geven waarbij ik juist geen verticale scroll heb, maar alleen een horizontale scroll? Mijn website heeft een vaste hoogte en naar beneden scrollen hoeft dus bijna nooit. Het wordt een website met foto's waarbij ik juist wil dat ik horizontaal kan scrollen. Vandaar de tabel met maar 1 rij en veel kolommen en een menu die 'fixed' is zodat je met horizontaal scrollen het menu altijd blijft zien.

Alvast bedankt weer.

Groeten Brenda
 
Hoi Brenda,
Dat is in feite dezelfde manier als de laatste, maar dan geef je de binnenste <div>, waar de foto's in zitten, een vaste breedte die even breed is als de breedtes van alle foto's samen plus alle tussenruimtes voor de foto's.
In het voorbeeld: 18 kiekjes van (142px plus margin-right van 10px) = 18 x 152 = 2736px, afgerond tot 2740px.
Daarmee in de css:
Code: 
#fotostrook {
	width: 2740px;
	}
Je hoeft er verder geen tabel van te maken om de foto's naast elkaar te krijgen (als daar geen goede reden voor is): dat kan gewoon met css.
Scheelt 65,783% onnodige html-code, gok ik. :)

Met vriendelijke groet,
CSShunter
 
En als ik nou niet weet hoe breed de pagina moet worden omdat ik niet degene ben die de pagina's gaat vullen met foto's, is daar ook nog een oplossing voor?

Super bedankt..ik ga er in ieder geval z.s.m. mee aan de slag.
 
Yep, ik zie twee oplossingen:
  1. Degene die de foto's er in zet, moet de breedte van de foto's + tussenruimtes zelf uitrekenen en in de code zetten. ;)

  2. Je laat het werkje opknappen door vriend javascript. Met een scriptje laat je even razendsnel de breedtes van de verschillende foto's opmeten, en bij elkaar optellen met ook de tussenruimte erbij. Vervolgens wordt dit getal gebruikt om de noodzakelijke breedte van de fotostrook-div op te geven. Het enige dat in het script hoeft te gebeuren, is even invullen hoeveel tussenruimte in de css is opgenomen. De rest gaat op de automatiche piloot.
[JS]<script type="text/javascript">
//<![CDATA[
function berekenStrookBreedte(){
var imgMarginLR=10; // margin-left plus margin-right vam de images (zonder "px" er achter)
var fotostrook=document.getElementById('fotostrook'); // pak de fototrook vast
var allImages=fotostrook.getElementsByTagName('img'); // verzamel alle images die er in zitten
var fsWidth=imgMarginLR; // de strookbreedte begint met de tussenruimte links van de eerste foto
for (var i=0; i<allImages.length; i++){ // nu alle foto's langslopen
// per foto is de nieuwe strookbreedte: de oude breedte plus de tussenruimte plus de breedte van de nieuwe foto
fsWidth=fsWidth+imgMarginLR+allImages.offsetWidth;
}
// als alles geweest is, is de breedte dus de laatste fsWidth; die bepaalt de breedte van de fotostrook-div:
fotostrook.style.width=fsWidth+'px';
}
window.onload=function(){
// pas aan het rekenen gaan als de hele pagina is gedownload:
berekenStrookBreedte();
}
//]]>
</script>[/JS]
Wat dan overblijft, is dat wie als bezoeker javascript uit heeft staan, de foto's toch onder elkaar ziet; daar is weinig tegen te doen.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan