fragmente » YAML

How to use position-absolute and z-index with Internet Explorer 7 and nested containers

karrock — Thu, 27 May 2010 11:43:19 +0000

When you have a div-container which has the attribute position-absolute and you put a 2nd div-container inside (which has also a position-absolute attribute) it can happens that Internet Explorer 7 does not interpret this correct.

I had the problem, that the 2nd div-container (which is a fold-out CSS-menu) is larger than the sorrounding div. In IE 7 the CSS-menu lays, in the part outside the sorrounding container, behind those elements. But for a menu you aspect to be the first element in the hierarchy.

Those layer positions can be set using z-index in CSS. The higher the index, the higher the position of the element to users-view. So I set the z-index to a high value but in IE 7 nothing happened.

After trying a while I worked out a very easy solution. If you use for an element the position-absolute attribute it will be set out of the normal element-flow of the website and be positioned absolute to the given position. But IE 7 inherits the value from the parent-element (here the sorrounding div-container) which had no z-index.

So my solution is to give both, the surrounding and the inner div-container a z-index. The surrounding container gets (in my case) a higher z-index than the surrounding one and the problem is fixed!

The surrounding element is the YAML #topnav-element and the inner one is a div-container with list-items which are styled as a JS-free fully CSS-menu.

#topnav {
  overflow:visible;
  z-index:5;
  position:absolute;
  [...]
}

#inner_container {
  position:absolute;
  z-index:2;
  [...]
}

How to code a jQuery slider menu

blumentritt — Sun, 21 Mar 2010 13:25:54 +0000

How to …

I show you a nice jQuery snippet for a smoothy slider menu.

This was my first jQuery experience – if you find some tuning options, tell me please!

Here you can see my script in Action: http://www.gyn-endoskopie.de/

/**
 * @author team noir GbR
 * simple slide-out Menu
 * www.gyn-endoskopie.de
 * Version 1.5 - 11.01.2010
 */
$(document).ready(function() {
 //on first loading, hide the submenu
 $(".subul li").hide();
 //show active sub element, after paging
 $(".active").parent().parent(".subul").css('margin-top', -4).children("li").show(".subul li");

 //Actionhandling
 //click on menu
 $(".slide").click(function(){

 //only one submenu is allowed to show
 $(".angeklickt li").slideUp("fast");
 $(".angeklickt").removeClass("angeklickt");
 //close other open submenus
 $(".active").parent().parent(".subul").children("li").slideUp(".subul li");

 //mark heading ul
 $(this).next("ul").addClass('angeklickt');

 //show marked submenu
 if ($(".angeklickt li").is(":hidden")) {
 $(".angeklickt li").slideDown("slow");
 $("ul.angeklickt").css('margin-top', -4);
 return false;
 }
 //close/slide submenu
 else {
 $(".angeklickt li").slideUp("slow");
 $("ul.angeklickt").css('margin-top', 0);
 $(this).next("ul").removeClass("angeklickt");
 return false;
 }
 });

});

this is the menu source code:



Startseite
Zur Person
Operationen
 Operationsspektrum
   OP-Aufklärung
   OP-Patienteninfos
   Anmeldung
 Novasure/Goldnetz
 

Tagesklinik
Kontakt
 Schreiben Sie uns
   Anfahrt mit dem Auto
   Wegbeschreibung

System information:

TYPO3 4 CMS
YAML 3.1
CSS 2/3
XHTML 1.0
http://www.gyn-endoskopie.de/

greetz!

How to build a YAML fullscreen layout

blumentritt — Sun, 21 Mar 2010 12:45:15 +0000

How to …

Yaml provides a nice solution for column layout, center layout and fullscreen layout.

The last team-noir project was a fullscreen-design for our customer. I show you how easy it is to code such a template:

Dirk Jesse wrote a very good documentation:

Variations of the Markup

As demonstrated, the two CSS classes .page_margins and .page control the basic appearance of the layout, by setting the total width as well as margins, borders, or backgrounds if necessary.

In the source code described above, the outermost DIV container .page_margins surrounds all the other elements of the webpage. This results in a layout which in its simplest form is a rectangular box against the background of the element. This effect is not always desirable.

So the main ascpect is to order your source by:

...

modify the basemod.css:

/* (en) Centering layout in old IE-versions */
 body { text-align:center; }
 .page_margins { text-align:left; margin:0 auto; }

 /* (en) Layout:width, background, borders */
 .page_margins { width: 100%; background: transparent; }

Example on Yaml.de, and here

So as you can see – really easy coding -> thank’s to Dirk Jesse!

Using YAML and be fully variable

karrock — Wed, 08 Apr 2009 21:53:57 +0000

I´m using YAML now for a while on our projects, also at work and for my own website. YAML is build as a core version which has many hacks (maybe for IE) and is made as an 3-column layout. On top of this there are some files which overwrites the other CSS classes and IDs and this is your special layout. Maybe when you use the YAML-Builder you have a finished layout where the classes in the css-directory overwrites the core classes.

For example you want to have a 2-column layout instead of a 3-column one the files in the css-directory set this layout. But when you make your own website you have to overwrite also some settings in the css-directory because you want to change the YAML-layout a bit. Layout, sizing or colours. There are two ways to do this.

You edit the files in the css-directory
You make a 2nd css-file especially for your website and include it as the last one in your html-file(s) (must be included before the IE7-hack will be included)

The first solution is good and easy but I prefer the 2nd one and now I will explain on a little example (from a project at my work I do at the moment).
I made a 2-column-layout with YAML for a little project at work. The template and layout is growing and will be finished in the next days. Now a collegue comes to me and we discuss the style and discuss about other internal websites and the corporate design. Now we decided to change to a 3-column layout, because it´s closer to the style-guide. I used the 2nd method and now I have the possibility to change the full YAML-core-layout and the overwriting files (in the css-directory) to get an 3-column layout without losing my special settings and layout-configurations for our design. If I used the first method I would have to backup the files in the css-directory, make with YAML-Builder a new 3-column layout and redo the changes from the backuped files again in the new one. This would be more complex.
The downside is, that you have a extra file and you have to include this extra css-file in every html-file you make.

How to … center a YAML Layout

blumentritt — Thu, 12 Feb 2009 13:55:36 +0000

How to

Some Layouts must be centered in your browser display. You can use several ways – i will present here my “best practice”

We use the CSS Framework from Dirk Jesse ->YAML . The author includes a horizontal alignment with the following code:

[basemod.css]
/* Layout Alignment | Layout-Ausrichtung */
#page_margins { margin: 0 auto; }

So, if you need also a vertical alignment, you can use my solution:

[basemod.css]
#page_margins {
position: absolute;
width: 1000px;
height: 500px;
left: 50%;top:50%;
margin-top: -250px;   /* enter half of height: */
margin-left: -500px;  /* enter half of width:  */
}

With this CSS code you can easily center your YAML Layout in front of your display.

If you search for more options, have a look here (german language).

Any questions?

Greetz, Martin

How to … integrate a YAML Menu to TYPO3

blumentritt — Tue, 10 Feb 2009 09:05:36 +0000

How to

If you want to use YAML with TYPO3 you will need some code snipptes for the HMENU in TypoScript. I have made my own structure, let’s have a look …

First tell TYPO3 where the Menu should be appear, you can do this with ###MARKERS### in your template or use TemplaVoila (lib.menu).

Then you have do build the HMENU Object:

lib.menu = HMENU
lib.menu {
 1 = TMENU
 entryLevel = 0
  wrap = | 
1 {
 #delete blurtag
noBlur = 1
 #expand menu?
 expAll = 1 
 NO = 1
 NO.wrapItemAndSub = |
 NO.ATagTitle.field = title
 CUR = 1
 CUR {
 wrapItemAndSub = |
 ATagParams= class="active"
 }
 }
 2 < .1
 2.wrap = |
# 3,4, ... expand for more levels
}

Now TYPO3 will generate a nice Menu and you can style it with CSS.
If you like my idea – leave a comment.

Greetz
Martin