Menu naast content plaatsen?

Status
Niet open voor verdere reacties.
R

Remi321

Gebruiker
Lid geworden
2 mrt 2010
Berichten
179
Hallo,

ik probeerde een CSS template te maken waar ik een menu naast mijn content heb. Alleen, dit wilde niet lukken. Dit is het beste wat ik tot nog toe voor elkaar heb weten te krijgen.

Vervelend, want het is me in het verleden wel gelukt. Alleen ben erg veel vergeten kwa CSS :p

HTML hier, en CSS hier.

Dus, hoe doe ik dit correct? De groene container moet dus links naast de paarse container, netjes uitgelijnd op de grijze containers erboven.

Alvast bedankt :)
 
... erg veel vergeten kwa CSS :p
Klik om te vergroten...
Waarschijnlijk vooral vergeten: steeds controleren of de id-namen van de <div>'s wel kloppen met de namen die in de css staan. ;)
Menu en contenttext zitten in de html in #content. Waar staat die in de css? :p

Andere tip:
Alle hoofd-onderdelen binnen de pagina (van boven naar beneden) worden nu achtereenvolgens apart gecentreerd. Je kan eens proberen of je de hele <body> kan centreren, dan past alles er altijd automatisch binnen. En dan kan ook heel waarschijnlijk de <div id="main"> wel gemist worden.

Met vriendelijke groet,
CSShunter
 
Ja dat is waar, dat corrigeer ik dan nog wel een keer. Ander probleempje nu. Dit is de lay-out nu, met die naam correctie. Nou wil ik dus die paarse even hoog met de groene laten worden. Hoe doe ik dat precies? En daarnaast is de witte horizontale menubar VEEL te klein in hoogte. Heb hem 50px opgegeven, maar hij weergeeft maar wat er voor de tekst nodig is. Dit komt door de groene en paarse container, aangezien deze hem overlappen. Hoe fix ik dit dan?
 
CSShunter: Je kan eens proberen of je de hele <body> kan centreren ... enz.
Remi321: Ja dat is waar, dat corrigeer ik dan nog wel een keer.
Klik om te vergroten...
Tip: Als je het wilt gaan corrigeren, zou ik het meteen doen. Later, als je allerlei andere styles en containers hebt vastgelegd, kan het veel moeilijker worden. Zie ook Gouden Regel 2 van de Golden Rules of CSS.

Laatste vraag eerst: de veel te lage menu-bar.
Wat te denken van de negatieve margin-bottoms van -30px van de #header en het #longmenu?
Dat noemen we: "overlappen". ;)
Ik zou ook de <p>'s een {margin: 0; padding: 0;} geven om niet buiten de oevers van de elementen te komen. Dat kan later altijd naar smaak worden aangepast.

Eerste vraag laatst: even hoge kolommen.
Twee naast elkaar floatende kolommen kan je even hoog maken door het hoofdstukje "Zwevende elementen" en de "CSS eigenschappen zwevende elementen" van de handleidinghtml.nl even door te nemen.
Voor bijpassende achtergrondkleuren: zie het artikel Faux Columns van alistapart.com.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hmm, meeste gefixed nu maar deze twee links konden me niet helpen om de divisions even hoog te maken, gerelateerd aan de tekst. Natuurlijk kan ik de 'height' eigenschap gebruiken, maar dit resulteert in een statische hoogte die ik niet wil.
 
Hoi Remi321,
't Zou hiermee toch goed moeten gaan, zou je zeggen.
Maar zonder online testpagina (of html- en css-code) is er geen houvast voor verdere tips! ;)
 
Ah, bedoel je dat het paars van de content moet doorlopen tot aan de blauwe footer? D.w.z. altijd zoveel paars als het groen van het menu hoog is?
  • Of omgekeerd: als de content hoger is dan het menu, dat het groen van het menu altijd doorloopt tot aan de blauwe footer?
Dan zit je op de helft van de operatie. :)
deze twee links konden me niet helpen om de divisions even hoog te maken,
Klik om te vergroten...
Eh, er was nog een derde link! ;)
De links naar de handleidinghtml gaven aan hoe je de hoogste van de twee altijd kon laten winnen (door te "clearen"), en dat is goed gegaan in je code.

Maar daarmee blijven in feite de twee kolommen nog wel de hoogte houden die ze nodig hebben volgens wat er in de betreffende kolom staat. En dus komt ook de achtergrondkleur maar net zo hoog als de betreffende kolom hoog is. Alleen de blauwe footer komt er op deze manier altijd mooi onder.

Met alleen css valt hier niets aan te doen (tenminste niet op een eenvoudige manier). Daarom verwees ik voor de achtergrondkleuren naar het artikeltje in A List Apart, waarin staat hoe je dat voor elkaar kunt krijgen met een background-image, dat er als een gordijntje met baantjes in de twee kleuren achter hangt.

Is dat wat je bedoelt?

Met vriendelijk groet,
CSShunter
 
Laatst bewerkt:
Dus, ik zou bijvoorbeeld de background kleuren van groen en paars weg kunnen halen en vervolgens op de container daarachter een achtergrond doen? Blijven de breedte van deze containers dan wel altijd hetzelfde? zodat niet straks mijn achtergrondafbeelding een verkeerde positie heeft :p
 
Dus, ik zou bijvoorbeeld de background kleuren van groen en paars weg kunnen halen en vervolgens op de container daarachter een achtergrond doen?
Klik om te vergroten...
Jawel!
Blijven de breedte van deze containers dan wel altijd hetzelfde? zodat niet straks mijn achtergrondafbeelding een verkeerde positie heeft? :p
Klik om te vergroten...
Ook jawel: je hebt voor het #submenu en de #contenttext een vaste breedte in pixels opgegeven en dan gaat het goed.

En ook neen: als je later aan die breedtes gaat sleutelen, zullen de baantjes in het achtergrond-gordijntje ook aangepast moeten worden. ;)
 
Of je maakt een background-img dat aan de linkerkant en de rechterkant nog stukken extra kleur heeft, en dus eigenlijk te breed is.
Dan kan je in de css met de background-position de baantjes makkelijk horizontaal heen en weer schuiven als de kolombreedtes anders moeten worden, zonder dat het plaatje aangepast hoeft te worden.
Met css kan alles! :)
 
CSShunter: Met alleen css valt hier niets aan te doen (tenminste niet op een eenvoudige manier).
Klik om te vergroten...
:p

Dus zonder image wel op een wat ingewikkelder css-manier ...
Met één en hetzelfde stylesheet: met css kan alles! :)

Met vriendelijke groet,
CSShunter
 
Oh, dat is best wel wat je noemt epic. Voorbeeld C is precies zoals ik wilde, hartstikke bedankt!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan