Da ich demnächst neue Designs veröffentliche habe ich beschlossen einige
Copyrights und Urheberrechtsfreie CSS Designs zu veröffentlichen.
Ich werde ca. jede Woche bis jede zweite Woche ein Design in diesem Thread veröffentlichen.
Meinungen zu den Designs sind gern gesehen;)
Wo der Sinn in der Aktion ist? Viele User wollen Vermerksfreie Designs und in diesem Thread stelle ich diese zur Verfügung.
Sollte der Threat hier nicht willkommen sein, bitte verschieben =P
---------------------------------------------------------------------------
Design 1: Simple Blue CSS
- Header
- Navigation Oben
- Content
Eigenschaften:
Das Design passt sich den Auflösungen zu 100% an.
Design einfügen:
-Login Homepage Baukasten
-Design einstellen
- Auswahl CSS Design nur für Profis
- erweiterte Eimstellungen
Design wie beschrieben einfügen:
Diesen Teil bei Text über dem Design einfügen:
Code:
<style type="text/css" media="screen">
<!--
body
{
font-family: veranda , sans-serif;
font-size: 14px;
overflow: auto;
padding: 0px;
margin: 0px;
}
ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li a
{
padding-right: 0px;padding-top: 10px;
}
div.menu
{
position: absolute;
z-index: 3;
top: 210px;
left: 100px;
width:905px;
}
.menu li
{
width: 160px;
float:left;
}
.menu a
{
border: 0px solid #XXXXXXX;
background-color: #XXXXXXX;
background-image: url(http://img.webme.com/pic/d/demon-x-homepage-hilfe/classicnavone.jpg);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 30px;
color: #000000;
}
.menu a:hover
{
color: #000000;
background-color: #XXXXXX;
background-image: url(http://img.webme.com/pic/d/demon-x-homepage-hilfe/classicnavhoverone.jpg);
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 14px;
display: none;
width: 160px;
float:left;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 0px;
border-top: 0px;
cursor: pointer;
color: #000000;
}
//-->
</style>
<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<div class="menu">
<li><a href="Link">Titel</a></li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> Gruppentitel</a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
<li><a href="Link">Titel</a></li>
<li><a href="Link">Titel</a></li>
<li><a href="Link">Titel</a></li>
<li><a href="Link">Titel</a></li>
<li><a href="Link">Titel</a></li>
</ul>
</li>
<li><a href="Link">Titel</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);"> Gruppentitel</a>
<ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3">
<li><a href="Link">Titel</a></li>
<li><a href="Link">Titel</a></li>
<li><a href="Link">Titel</a></li>
<li><a href="Link">Titel</a></li>
<li><a href="Link">Titel</a></li>
<li><a href="Link">Titel</a></li>
<li><a href="Link">Titel</a></li>
<li> </li>
</ul>
</li>
<li><a href="Link">Titel</a></li>
</ul>
</li>
</div>