CSS - Baukasten

Ziel des Abschnittes CSS-Baukasten ist es verschiedene CSS-Skripte vorzuhalten, die für verschiedene Projekte eingesetzt werden können.

Bausteine für die CSS - Navigation

ToDo Bilder machen

CSS-Navi: Verschachtelte Rollover Liste

aus: http://css.maxdesign.com.au/

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

CSS
#navcontainer { margin-left: 30px; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer li { margin: 0 0 1px 0; }

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #fff;
background-color: #036;
text-decoration: none;
}

#navcontainer a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}

#navcontainer ul ul li { margin: 0 0 1px 0; }

#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #fff;
background-color: #369;
text-decoration: none;
}

#navcontainer ul ul a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}


ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.

In Anlehnukng an YAML werden die Dateien möglichst Modular vorgehalten und über ein Zentrales Sylesheet eingebunden

Konzept-Richtlinien

ToDo - evt. verwerfen erhalten bleibt das Konzept BAukastenmäßig das CSS zu verteilen. Evt. so daß man für sich funkionsfähige Skripte macht und diese durch einen Div Wrap später auf den Bereich beschränkt wo sie eingesetzt werden.

Struktur

/main.css ToDo

Zentrales Stylesheet base.css

Hier werden die verschiedenen benötigten Dateien eingebunden und einige Grundeinstellungen definiert. In einer späteren Ausbaustufe werden diese evt. ebenfalls ausgelagert In Typo3 Projekten könnten die CSS-Dateien auch über TypoScript eingebunden werden dann entfällt die base.css

/* 
### "CSS-Baukasten (c)2006 Stephan Schlegel" ###
### Version: 0.1
### Datei       : base.css
### Funktion    : Zentrales Stylesheet, Grundeinstellungen + Einbindung der CSS-Module
*/

@import url(main/base.css);
@import url(mods/basemod.css);
@import url(mods/basemod_layout_xcol_xyz.css);
@import url(navi/nav_slidingdoor.css);
@import url(main/content.css);
@import url(print/print_003.css);