Problem with position of "Main Navigation" menu

**forlano** · 09/29/2009, 18:25

Hello,

in the last week I have installed what are supposed to be the best CMSs around there. But after half hour they were uninstalled. At the end I landed on Typolight and I am playing with it in the last days. I like it very much and I want to continue to learn it. Thanks to the developers of this great software for their efforts.

I have done some experiment with the included site. In particular I have added a third column in the default page. Then moved in the left column the module "Main Navigation" (see the picture attached) or the online site at
http://www.vegachess.com/tl .

Unfortunately I am not able to bring the menu on the left closer to the image banner. There is too much vertical space between the logo and the word "Home". I would like to reduce it. I tried anything playing with the CSS but the menu seems to be insensitive to all my temptives. Does anybody have some idea to resolve the problem?

Thank you very much in advance,
Luigi

**Ola** · 09/29/2009, 22:18

Hi Forlando and welcome to the TYPOlight community!

In music_academy.css check these entries:

Code:

#left { margin-top: 52px; }
.mod_navigation { top: 43px; }

If you change these settings to 0px the menu should stick to the top.

Tip: Install the Firebug extension for Firefox to easily inspect the structure and css of a website.

**forlano** · 09/30/2009, 00:57

Originally Posted by Ola

Hi Forlando and welcome to the TYPOlight community!

In music_academy.css check these entries:

Code:

#left { margin-top: 52px; }
.mod_navigation { top: 43px; }

If you change these settings to 0px the menu should stick to the top.

Tip: Install the Firebug extension for Firefox to easily inspect the structure and css of a website.

Hi Ola,

thanks for the answer. I entered those values. Unfortunatly all remained the same. :?
Please consider that with respect the original site structure the menu is now down in the left column and not in the header. Perhaps this make the difference and cause a strange side effect. So far I have tried many things but that damned menu is still there.

Luigi

**ramjet** · 09/30/2009, 03:54

postion: relative
top: -43px

This puts it 43 px above the top of the left column....you can use negative values

**forlano** · 09/30/2009, 09:08

Originally Posted by ramjet

postion: relative
top: -43px

This puts it 43 px above the top of the left column....you can use negative values

Hi ramjet,

I put your values in .mod_navigation but again no result! So I tried to use the same in #left with no success.
It looks like insensitive to any values, smaller or greater does not matter. It stays there and do not want to move.
I suspect there is something that override the values. Anyway the site is online for who want to have a look at.
Thanks,
Luigi

**ramjet** · 09/30/2009, 09:23

Sorry, should have said in .mod_navigation

Code:

.mod_navigation{width:200px;top:-43px;position:relative;}

.... this will work.
Empty your browser cache and refresh to ensure you are seeing new style sheet.

**forlano** · 09/30/2009, 10:16

Originally Posted by ramjet

Sorry, should have said in .mod_navigation

Code:

.mod_navigation{width:200px;top:-43px;position:relative;}

.... this will work.
Empty your browser cache and refresh to ensure you are seeing new style sheet.

I am sorry to insist, but I did what you said but no result.
Please can you check yourself at
http://vegachess.com/tl/

Luigi

**Ola** · 09/30/2009, 10:20

Originally Posted by forlano

Hi Ola,

thanks for the answer. I entered those values. Unfortunatly all remained the same. :?
Please consider that with respect the original site structure the menu is now down in the left column and not in the header. Perhaps this make the difference and cause a strange side effect. So far I have tried many things but that damned menu is still there.

Luigi

If I use Firebug in Firefox, or the debug tool in Safari, menu moves correctly if I change the css values.

How are you editing the css stylesheets? Are you using the built-in css editor in TYPOlight, or do you just open the css-files in a texteditor?

The problem is, if you open the css-files in a texteditor, the changes will be overridden because normally the css is stored in the database and a css file is automaticly rendered when you open the website in the browser.

You can however use separately stylesheets and edit them by a texteditor. But you have to manually link them in the header.

**ramjet** · 09/30/2009, 10:50

Your css (in the root directory) still says

Code:

.mod_navigation{width:200px;top:43px;position:absolute;}

Where exactly do you make the changes?

**forlano** · 09/30/2009, 12:20

Hi Ola and Ramjet,

I have installed the DevBar for IE 7 and checked the CSS. It seems that I have

#left { margin-top: 52px; }
.mod_navigation { top: 43px; }

When I point some "div" container a blu box appear around it. I saw it around the div id="right", the id="main", but it does not appear when I point on the div id="left". Anyway its value is
#left { margin-top: 52px; }

Inside "left" there is the navbar at
.mod_navigation { top: 43px; }

I did the changes ONLY in the backend as administrator (k.jones), so no external text editor or other css file. So I suppose I worked directly on the database. I posted above even a picture of the backend after the modification you suggested. It seems that the database setting are overrided when the CSS is rendered... but who is the guilty?
From other side I was able to modify the original layout adding a third column and shifting the navbar from the header to the left column... So i am a bit confused by this very silly problem. Perhaps it is active some hided template that performs some nasty operation?

Thanks for your patience,
Luigi

**Ola** · 09/30/2009, 12:36

Originally Posted by forlano

I did the changes ONLY in the backend as administrator (k.jones), so no external text editor or other css file. So I suppose I worked directly on the database. I posted above even a picture of the backend after the modification you suggested. It seems that the database setting are overrided when the CSS is rendered... but who is the guilty?

Maybe it is a read/write permission problem on your server? Try to delete the stylesheet music_academy.css through a ftp program. Then TYPOlight should create a new updated file when viewing the page in a browser. If this doesn't work, you should check your permission settings on your server. Maybe use the Safe Mode Hack that will fix these kind of errors.

**forlano** · 09/30/2009, 13:14

Originally Posted by Ola

Maybe it is a read/write permission problem on your server? Try to delete the stylesheet music_academy.css through a ftp program.

YES! :D
Removing that file (write protected) did the job. It was not easy to find it. I believed to found it in the /tl folder of the server instead was just in httpdocs.
Thank you to all for this great support!

Luigi

**ramjet** · 10/01/2009, 02:07

http://www.typolight.org/configuring...tem-check-tool
Run the latest system check tool if you haven't already, it will check all permissions/files for you