RokNavMenu and Gantry 960 CSS bugs
-
-
- Linuus
- Newbie
- Posts: 15
- Thanks: 0
-
Hi!
1. RokNavMenu
When I use roknavmenu I think there is a CSS bug. I get this when I place the menu in the navigation position in Gantry:
<div class="rt-fusionmenu">...</div>
Shouldn't this also have a "rt-grid-12" class? The menu should be 940px wide to be inside the grid. Now it's 960px which is wrong.
2. rt-block
In the main area I have <div class="rt-block"> tags around elements. For example it can look like this:
<div class="rt-grid-8">
<div class="rt-block">
...content...
</div>
</div>
rt-block has a 15px padding. I don't think this should be applied to the sides. Because then it is pushed 10px by rt-grid-8 and then 15px more which results in a total distance of 25px. It should only be 10px or the grid layout is messed up.
Am I right about this or have I missed something?
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
- Do you have a link to your site? Are you placing the menu in the navigation position in the template manager or in the module manager? I can help you if I can see your code.
- The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
No CSS bugs – what you see are features of Gantry.
1. You can choose in Gantry if you want use the grid logic or not.
The navigation-position does not need the grid logic so it has this in the index.php
<?php echo $gantry->displayModules('navigation','basic','basic'); ?>
the first "basic" says dont use the grid logic, the second says use the mod-chrome "basic" wich you can find in the modules.php. in the html folder of your template.
www.gantry-framework.org/documentation/j...custom-module-chrome
So if if you want to use the grid logic in the in navigation are you would have to use
<?php echo $gantry->displayModules('navigation','standard','basic'); ?>
or
<?php echo $gantry->displayModules('navigation','standard','satndard'); ?>
wich would be more practical. (don't forget to add the a to f positions to templateDeatails.xml)
For reference check www.gantry-framework.org/documentation/j...custom-module-chrome and the other articles in the "Customize"-area
2. You need to be aware of the box-modell in webdesign.
When you have a block element with a given width (like the widths of our grid here) the padding would be added to the width-diemension. When want different paddings for different elements the grid would always break). Because of that you have to separate width and padding attributes in two elements. The grid-xy classes get the width and the 10px margin to left and right wich results in the gutter of 20px inside the grid-system (10px to the left and right for the alpha and omega grid-elements hence the 940px). The rt-block-class is responsible for th inner-padding wich is needed for design aspects. Beacuse the rt-block calss has not given width it extends as much as it can in the width but the padding will be subtracted from the inner space that is left For reference check the 960.gs-page
-
-
-
- Linuus
- Newbie
- Posts: 15
- Thanks: 0
-
Hmm.. Okay, thank you. Still some confusion though
"The rt-block-class is responsible for th inner-padding wich is needed for design aspects."
Why Isn't the margin enough? It seems to be on all other sites that uses the 960 grid
Look at the image attached from drupal.com. You can see that everything lines up with the grid nicely. It does not line up this nicely in my Gantry template as long as it has that 15px padding on the sides of the "rt-block".
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Generally speaking, it's better to have a div for padding inside your grid divs - as changing the margins of the grid divs could negative effects on your layout. This way your grids stay in place while you work inside of them, in my experience it always works out better this way.
You can always add:to your template.css file to remove it completely..rt-block{margin:0; padding:0;}
Or to remove for a specific row or module position simply add the div name before it. For example to remove it from your header section you could use:#rt-header .rt-block{margin:0; padding:0;}
Hope that helps - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
looking at drupal.org is a good example. on some of those pages you find elements like
<div class="block-inner">
wich is the same like .rt-block
RT-provides many module styles based on the grid-widths. The content of the modules need some space to the edge of the box. Thats what .rt-block is good for.
If you don't have modules with different backgrounds you don't need .rt-block – true.
But we offer lots of styles so WE need that. We need those hooks for design.
If you dont want that padding follow Cliffs advice.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
One thing I forgot to say:
If you are familiar with the module_chrome concept of Joomla you can remove that .rt-block from
modules.php in the html folder of your template.
-
Time to create page: 0.061 seconds