Eenvoudige html / css aanpassing: toevoegen rechterkolom

Vandaag even wat eenvoudigs wat toch vaak nog als ingewikkeld wordt gezien: het invoegen van een extra kolom in een html webpagina. Ik ga er hierbij vanuit dat de layout van de pagina wordt bepaald door een externe style sheet (ccs file). Mocht dit niet zo zijn dan moet dat eerst worden aangepast om de website aan enige standaard te laten voldoen. Ik hoop vandaag wat extra tips te kunnen meegeven wat betreft het gebruik van het gratis html en website edit programma: Kompozer waar ik eerder al over geschreven heb. Aanpassen worden gedaan binnen de website van www.dewebmeester.nl op de pagina: http://www.dewebmeester.nl/joomla-design.html

Stap 1: de aanwezige css stijlen bekijken
Voordat ik aan de stylsheet (het css bestand) iets wil toevoegen, wil ik weten welke stijl definities er al aanwezig zijn. Bijvoorbeeld: ik wil aan een pagina van de website www.dewebmeester.nl een rechterkolom toevoegen. Ik bekijk eerst de website in de browser en blader wat door de pagina's. Nee, op geen enkele pagina is een rechterkolom te vinden. De kans is dus groot dat er nog geen stijl definitie bestaat voor "rechter kolom". Vervolgens open ik de homepagina in het programma "Kompozer" en rechtsboven zien we "CascadeS" en daar moeten we op klikken.


Links zien we dan een overzicht van alle gebruikte css files binnen het design en we kunnen daar snel door alle aanwezige stijldefinities wandelen. Mijn doel is te achterhalen of er een stijldefinitie is die precies weergeeft wat ik nodig heb of dat er een stijl is die bijne weergeeft wat ik wil. Ik vind de stijl voor de linkerkolom het beste passen. Die stijl wil ik ook voor de rechterkolom.

Stap 2: aanpassen css file (stijl sheet)
Dit doe ik het liefste via Filezilla en Notepad+. Ik open de css file via Filezilla in Notepad+ en zoek de verwijzing voor de linkerkolom op. Dat is:

#navlist { float: left; width: 170px; margin-top: 30px; margin-left: 5px;}

Vervolgens kopieer ik dit gedeelte, plak het er onder en pas de gegeven aan. Dit wordt:

#navlist2 { float: right; width: 170px; margin-top: 30px; margin-left: 5px;}

Daarna ververs ik de pagina in de browser om te kijken wat er is veranderd. Als het goed is niets. Want de html is nog niet aangepast.

Stap 3: aanpassen html
Terug naar Kompozer waar ik de pagina al open heb staan. Ik bekijk waar ik de rechterkolom wil plaatsen. De linkerkolom wordt weergegeven via <div id="navlist"></div> en de rechterkolom dus via <div id="navlist2"></div>. Als ik die plaats direct na de afsluitende </div> van de linkerkolom, dan wordt de rechterkolom netjes rechts weergegeven maar dan verplaatst de content zich naar beneden. Hoe weet ik dat? Omdat Kompozer direct een live preview toont. Deze rechterkolom div's moeten dus na de afsluitende </div> van de content geplaatst worden. Hoe vind ik die. Daartoe kopieer ik de complete html naar Notepad+ en sla ik de tekst op als html pagina. Notepad+ geeft namelijk kleurcodes en dat mis ik bij Kompozer. Oftewel: als ik klik op de openings <div content> in Notepad+ dan geeft een paarse kleur direct aan waar de afsluitende </div> zich bevindt. Makkelijk. In dit geval blijkt het de middelste van de laatste 5 afsluitenden </div> te zijn (zie afbeelding):

Kortom: na deze </div> komt <div id="navlist2">Hier komt de rechterkolom</div> En: nee! Toch niet. De rechterkolom wordt nu zichtbaar rechts van de linkerkolom maar links van de content. Opnieuw helpt Kompozer. Via de HTML tag view. Uiteindelijk plaats ik de rechterkolom code (div) voor de code van de linkerkolom. In Kompozer ziet het er dan niet goed uit (de aangepaste stijl sheet werd tenslotte niet opnieuw geladen) maar na Publish en verversen van de browser zie ik rechts van de content de (nog niet opgemaakt) tekst "Hier komt de rechterkolom".

Toch niet zo makkelijk als we dachten.
Tot zover de Kompozer en Notepad+ hints.