Webdesign

I like to do creative thinks. One of them is web design and web-page development. The design of the web-pages is done in co-production with the web-page owner. The implementation is my task. Some examples you can find here:

Doris Kraußer

dein-mitbringsel.de

Design: co-production with Doris Krauer

Henning Mersch

henning-mersch.de

Design: co-production with Henning Mersch.

 

henning-mersch.de

design up to the 16th Sept. 2011

Liam Mersch

lk.mersch.it

Webpage created for my son.

Tina Kraußer

tina.krausser.net

My own webpage. Design: derived from henning-mersch.de by adaption of the CSS.

 

tina.krausser.net

design up to the 18th Sept. 2011

Vertical Navigation Tree

Once upon the time my boyfriend Henning Mersch had the great idea to
re-design his homepage. He came to me with a jpg-drawing asking me to
realize the plain and well-structured page that he had painted as
template for his webpage. I thought this should be no problem until I
tried to realize his navigation tree. I could not find any page that was
similar in appearance. So I had to do it by myself. The result was the
following code:

CSS

The css file can be found here. Please adopt the following lines:

  /*********************************************************
    Horizontal Navigation Positioning PseudoSlot
  *********************************************************/    
  /* Positioning end length of the first horizontal line of 
        each submenu */

  /* for all entries of the main Menu configure a PseudoSlot 
        and set vertical-align: top */

  .PseudoSlot_MainOne, ...{
      vertical-align: top;
  }

  /* for all PseudoSlots generate such a block and adjust 
       left and width */
 
  .PseudoSlot_MainOne .HLineEntry {
      left: 89px;
      position: absolute;
      width: 42px;
      z-index: 2; 
  }

HTML

The example html file can be found here. Be sure that the sub menu has as first cells the following code: 

  <td class="PseudoSlot_MainThree">
    <div class="HLineEntry"></div>
  </td>

  <td class="NullSlot"></td>

The class of the PseudoSlot has to be set according to the naming in the css. While the NullSlot is the place holder for the vertical line left of the sub menu that is shown if no sub menu is selected and the content of the main menu is shown. The PseudoSlot is an empty slot that fills the horizontal line to the left if the line down from the main menu is left of the left line end.

View

The above css together with the html result in the following mini navigation example: