Zurück zur Startseite
Home  
Manchester Terrier  
Standard  
Geschichte  
Datenbank  
   Ihr Stammbaum  
       Designvarianten  
Literatur  
FAQ  
MT's in Not  
Unsere Hunde  
Portraits  
Galerie  
Events  
News  
Tipps  
Forum  
Gästebuch  
Links  
Login  
Suche  
 

Designmöglichkeiten

Die Stammbäume lassen sich in vorhandene Seiten einbinden und im Design sehr einfach durch die Definition von Vorlagen gestalten und ans Seitendesign anpassen.

Die folgenden Stammbäume sind völlig identisch, es werden lediglich andere Formatvorlagen (CSS-Sytles) davorgeschaltet.

Wie solche Formatvorlagen gestaltet werden können, kann man einfach bei SELFHTML nachlesen oder sich von einem HTML-Design-Programm wie Frontpage oder Dreamweaver vormachen lassen.



Version 1

Dies ist das Original-Design der Stammbaum-Datenbank im Black-and-Tan-Look.


table.pedigree { 
    border-collapse: collapse; 
    border: 1px solid #ffefd7; 
} 
td.m { 
    border: 1px solid #FFFFFF; 
    border-collapse:collapse; 
    background-color:#fff7ea; 
}
td.f { 
    border: 1px solid #FFFFFF; 
    border-collapse:collapse; 
    background-color:#ffefd7; 
}
table.pedigree thead th, table.pedigree tfoot td {
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
}

Version 2

Alternatives Layout


table.pedigree { 
    border: none; 
} 
td.m { 
    border: 1px solid #777777; 
    background-color:#ddddff; 
}
td.f { 
    border: 1px solid #777777; 
    background-color:#ffdddd; 
}
table.pedgree thead th, table.pedigree tfoot td {
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
}

Version 3

Alternatives Layout


table.pedigree { 
    border: none;
    padding: 5px; 
} 
td.m { 
    border-top: 3px solid #AAAAAA; 
    border-left: 3px solid #AAAAAA; 
    border-right: 3px solid #555555; 
    border-bottom: 3px solid #555555; 
}
td.f { 
    border-top: 3px solid #AAAAAA; 
    border-left: 3px solid #AAAAAA; 
    border-right: 3px solid #555555; 
    border-bottom: 3px solid #555555; 
}
table.pedigree thead th, table.pedigree tfoot td {
    font-weight: bold;
    text-align: left;
    color: blue;
}

Version 4

Mal etwas kräftiger...


table.pedigree { 
 border: none; 
} 
td.m { 
    background-color:#8888ff;
    background-image:url(../_images/lo.gif); background-repeat:no-repeat; background-position:left top;
    padding:8px;
}
td.f { 
    background-color:#ff8888; 
    background-image:url(../_images/lu.gif); background-repeat:no-repeat; background-position:left bottom;
    padding:8px;
}
table.pedigree thead th, table.pedigree tfoot td {
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    background-color:#555555;
    padding:8px;
    color:white;
}
table.pedigree thead th {
    background-image:url(../_images/lo.gif); background-repeat:no-repeat; background-position:left top;
}
table.pedigree tfoot td {
    background-image:url(../_images/lu.gif); background-repeat:no-repeat; background-position:left bottom;
}