Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: the latest : liberti.org
I’m with marios on a little more top margin on the comments.
A couple minor thoughts:- On the home page I would drop the non bold text in the New service New site section maybe one unit, it would make it work more like a headline to me.
- The text size on the events sidebar seems a little too large in comparison with the rest of the text sizes.
Again these are extremely minor and strictly opinion.
Shoving is the answer – pusher robot
Offline
#26 2006-11-23 23:21:54
- guiguibonbon
- Member
- Registered: 2006-02-20
- Posts: 296
Re: the latest : liberti.org
Yes, nice to see how it evolved. And it shure evolved positively! I like the backgrounds a lot.
But one thing seriously bothers me : vertical spacing. I used not to work on that aspect either, but I’ve really come to appreciate it a lot. It makes everything so much nicer to read.
Try to get all the text to fit on one baseline grid. It’s painful but gives amazing results.
BTW, it’s funny to see how common ignorance of vertical spacing is. It used to be #1 of all typographical rules, until magazines came in, where paper restrictions didn’t allow for decent spacing. And now we don’t have the slightest sign of paper-restriction anymore (on the web), we sadly tend to keep the bad habit.
Offline
Re: the latest : liberti.org
ggbb,
By vertical spacing I’m assuming you mean line-height (to use the web term). What height would you use? I’m not trained in typography at all, wait, I’m not trained in any of this, I’m basically learning as I go, so yeah, fill me in.
Matthew
- I am Squared Eye and I
am launchinghave launched Pattern Tap
Offline
#28 2006-12-03 14:08:22
- guiguibonbon
- Member
- Registered: 2006-02-20
- Posts: 296
Re: the latest : liberti.org
I wasn’t trained about those things either; those graphic design schools over here don’t always teach you what you’d want. It takes a lot of reading to fill the gaps.
Well, vertical spacing is actually the space between two lines (I guess that’s sort of what line-height tries to do indead). You’re generally better off with more of it than not enough. There’s no real perfect formula, it also largely depends on the length of your line. The larger the line, the more vertical spacing you’ll need in order to find the next line easily.
Good practice, in the old golden age of books, the Renaissance, was to first decide what “line-height” you’d need for your main text, and to set just about any text anywhere on what is called the “baseline grid”. So, say you choose to have a line-height of 20px, you would draw lines spread apart by 20 px on your whole page, and set any text on them. This way, when you looked “through” pages, everything aligned perfectly, and your reading wasn’t disturbed by what was on the other side of the page.
Usability-wise, it has the advantage of easing the reading, because the eye knows where to expect the next line, be it when going from a heading to a paragraph, from a button to another, or from one paragraph to another. It makes “scanning” a page much easier. And everthing “breathes” a lot more too.
But it’s a real pain in the arse to do with css. I usually end up with many “line-height:1.354 em; margin: 0 0.235em;” kind of things (I set the baseline grid as a background-image of the body). But you don’t have to follow it this “christianly”, it’s more of an easy guide-line, when your eye isn’t trained enough to space things naturally the way they should.
There was also another rule, that could be useful to your site, which was not to use too many font-sizes. Usually 3 were enough : one for the very big headings – like chapters; one for the main-text; and one for side-notes. Capps, small-caps, italic, bold, alignment, colour etc. are enough to give the needed hierarchy to text, and a web-page. Again, makes scanning much easier.
If you’re interested, Mark Boulton has a lot of articles on his blog about designing for the web.
Offline
Re: the latest : liberti.org
Mathew, in your dropdown menu, how are you getting the menu item to reflect the current state/location?
I know its easy with ako_nav (which sets the current link class), but in my case, I am outputting the a list of sections as the links, then checking for categories which will be the dropdown links, so I can’t think right now how to set the current state class on the main (section) link.
Any ideas?
<li><a href=”#” title=“Title1” accesskey=“1”>Link</a></li>
<li><a href=”#” title=“Title2” accesskey=“2”>Link2</a>
<txp:cbs_category_list parent=“MainCat” wraptag=“ul” break=“li” class=”“ />
</li>
<li><a href=”#” title=“Title3” accesskey=“3”>Link3</a>
<txp:cbs_category_list parent=“SecondCat” wraptag=“ul” break=“li” class=”“ />
</li>
Offline
Re: the latest : liberti.org
jstubbs wrote:
Mathew, in your dropdown menu, how are you getting the menu item to reflect the current state/location?
How he did I can only guess that he is using the body id …
i wrote up how i did mine here which is very similar … there are many ways to do it.
and jm .. had another way
nuff-respec ::: dannyb
Offline
Re: the latest : liberti.org
jstubbs,
Both of those will work fine.
There are multiple good ways to do this, some that minimize the html, and have better semantics than others… always more to learn there.
- I am Squared Eye and I
am launchinghave launched Pattern Tap
Offline
Re: the latest : liberti.org
Thanks Daniel and Mathew – I missed the if_section tag. I will check out the options tomorrow and see what happens ;-)
Offline
Re: the latest : liberti.org
Hi again, have the following code now, which mainly works fine, with the exception that the drop down menu ONLY displays within the given section, not when the user is in ANY section.
What should happen is a regular drop down menu which is viewable anywhere on the site. The “if_section” tags are to check where the user is, and then style the current link. It appears though that the if_section is stopping the drop down from displaying unless the user is in that particular section.
cbs_category_list is used to check if categories exist, and if they have articles assigned, then display the drop down. There are no problems with this.
Code:
<ul id=“nav”>
<li><a <txp:if_section name=”“>class=“active”</txp:if_section>href=”<txp:site_url />”>Forside</a></li>
<li><a <txp:if_section name=“nyheter”>class=“active”</txp:if_section>href=”<txp:site_url />nyheter/”>Nyheter</a></li>
<li><a <txp:if_section name=“tsmg”>class=“active”</txp:if_section>href=”<txp:site_url />tsmg/”>TSMG</a>
<txp:cbs_category_list parent=“TSMG” wraptag=“ul” break=“li” class=”“ /></li>
<li><a <txp:if_section name=“spesialistklinikken”>class=“active”</txp:if_section>href=”<txp:site_url />spesialistklinikken/”>Spesialistklinikken</a>
<txp:cbs_category_list parent=“spesialistklinikken” wraptag=“ul” break=“li” class=”“ /></li>
<li><a <txp:if_section name=“akademiet”>class=“active”</txp:if_section>href=”<txp:site_url />akademiet/”>Akademiet</a>
<txp:cbs_category_list parent=“akademiet” wraptag=“ul” break=“li” class=”“ /></li>
<li><a <txp:if_section name=“behandling”>class=“active”</txp:if_section>href=”<txp:site_url />behandling/”>Behandling</a>
<txp:cbs_category_list parent=“behandling” wraptag=“ul” break=“li” class=”“ /></li>
<li><a <txp:if_section name=“tannhelsepersonell”>class=“active”</txp:if_section>href=”<txp:site_url />tannhelsepersonell/”>Tannhelsepersonell</a>
<txp:cbs_category_list parent=“tannhelsepersonell” wraptag=“ul” break=“li” class=”“ /></li>
<li><a <txp:if_section name=“kontakt-oss”>class=“active”</txp:if_section>href=”<txp:site_url />kontakt-oss/”>Kontakt Oss</a></li>
</ul>
Produces the following when in the “Behandling” section:
<li><a class=“active“href=“http://tsmg.no/behandling/”>Behandling</a>
<ul>
<li><a href=“http://tsmg.no/behandling/?c=bleking”>bleking</a></li>
</ul></li>
But when in another section:
<li><a href=“http://tsmg.no/behandling/”>Behandling</a>
</li>
Am out of ideas. Hope someone can help ;-)
Offline
Re: the latest : liberti.org
Been trying to fix my problem without success. The Javascript is loaded in every page so that should not be an issue. Code:
<script type=“text/javascript”><!—//—><![CDATA[//><!—
sfHover = function() {
var sfEls = document.getElementById(“nav”).getElementsByTagName(“LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, sfHover);
//—><!]]></script>
Edit: I found the problem – it is cbs_category_list that is the issue, as it only outputs the categories when one is within the section, as it is section-sensitive.
category_list tag is also possible, and works fine, but outputs all categories regardless of whether or not articles exist within the category. That’s why cbs_category_list is better, because it does not output the category if articles do not exist.
Any possible solution to this??
Last edited by jstubbs (2006-12-16 05:31:57)
Offline