FK Austria 06

Home

Text über dem Design:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id='myheader'>
<table width="100%" align='center' style='min-width:1000px;'>
 <tr><td valign='top' align='center'><img src='https://img.webme.com/pic/f/fkaustria06/fkaustria06star.png' width='250px'>
<img src='https://img.webme.com/pic/d/designtest-brainice/fka_banner.png' width='600px'></td>
<td valign='center' align='right' style='padding-right:20px;'>
<ul class="bubblewrap">
<li>
<a href="http://www.facebook.com/home.php#!/pages/FK-Austria-06-eV/349233293572">
<img title="" src="http://icons.iconarchive.com/icons/iconshock/free-social/256/facebook-icon.png">
</a>
</li>
<li>
<a href="http://twitter.com/fkaustria06">
<img title="" src="http://icons.iconarchive.com/icons/iconshock/real-vista-social/256/twitter-icon.png">
</a>
</li>
<li>
<a href="http://www.youtube.com/fkaustria06">
<img title="" src="http://icons.iconarchive.com/icons/iconshock/free-social/256/youtube-icon.png">
</a>
</li>
</ul>
</td>
</tr>
</table>
</div>

<div id='navigation'>
 <ul id='nav'>
     <li><a href='home.htm'>Home</a>
           <ul class='sub'>
                <li><a href='#'>Ho</a></li>
                <li><a href='#'>Hom</a></li>
                <li><a href='#'>Home</a></li>
          </ul>
    </li>
     <li><a href='#'>Home2</a>
           <ul class='sub'>
                <li><a href='#'>Ho</a></li>
                <li><a href='#'>Hom</a></li>
                <li><a href='#'>Home</a></li>
          </ul>
    </li>
     <li><a href='news.htm'>News</a>

    </li>
 </ul>
</div>
<div id='cont'>
<div id='sidebox'>
<fieldset>
<legend>SideboxTitel</legend>
SideboxText
</fieldset><fieldset>
<legend>SideboxTitel</legend>
SideboxText
</fieldset><fieldset>
<legend>SideboxTitel</legend>
SideboxText
</fieldset>


</div>

Text unter dem Design

<script>
$('#nav>li').hover(function(){
  $(this).children(".sub").slideDown(200);
});
$('#nav>li').mouseleave(function(){
  $(this).children(".sub").slideUp(200);
});
</script>

Hinweis unter dem Inhaltsbereich (Copyright)

</div>

<div id="footer">
<br>
<div id="spalten">
<div id="spalte1">
<ul id="foot">
<img alt="" style="vertical-align: middle;" src="https://img.webme.com/pic/g/grafik-designs/fkaicon11.png">
<b style="color: #FF6600;">LINKS</b>
<li>
<a href="http://www.die-anderen07.de.tl/">» Die Anderen 07</a>
</li>
<li>
<a href="http://www.freitagabendunited.de.ms/">» Freitag Abend United</a>
</li>
<li>
<a href="http://motor-geringswalde.com/">» Motor Geringswalde</a>
</li>
</ul>
</div>
<div id="spalte2">
<ul id="foot">
<img alt="" style="vertical-align: middle;" src="https://img.webme.com/pic/g/grafik-designs/fkaicon11.png">
<b style="color: #FF6600;">Private Websiten</b>
<li>
<a href="Link url">» frei</a>
</li>
<li>
<a href="http://denise-bernhardt.de">» Denise Bernhardt</a>
</li>
<li>
<a href="Link url">» frei</a>
</li>
</ul>
</div>
<div id="spalte3">
<ul id="foot">
<img alt="" style="vertical-align: middle;" src="https://img.webme.com/pic/g/grafik-designs/fkaicon11.png">
<b style="color: #FF6600;">PARTNER</b>
<li>
<a href="http://www.spreadshirt.de/">» Spreadshirt</a>
</li>
<li>
<a href="http://igstudios.de/">» iGStudios</a>
</li>
<li>
<a href="*">» frei</a>
</li>
</ul>
</div>
<div id="spalte4">
<ul id="foot">
<img alt="" style="vertical-align: middle;" src="https://img.webme.com/pic/g/grafik-designs/fkaicon11.png">
<b style="color: #FF6600;">Sonstiges</b>
<li>
<a href="http://www.fkaustria06.de/Kontakt.htm">» Kontakt</a>
</li>
<li>
<a href="http://www.fkaustria06.de/Impressum.htm">» Impressum</a>
</li>
<li>
<a href="Link url">» frei</a>
</li>
</ul>
<br>
</div>

CSS-Code ohne Style-Tags

#cont {
 background-image:url(https://img.webme.com/pic/d/designtest-brainice/fka_content.png);
 width:800px;
 margin:auto;
 padding:10px 10px 10px 10px;
 border-left-style:ridge;
 border-right-style:ridge;
 border-color:black;
 border-bottom-left-radius:20px;
 border-bottom-right-radius:20px;
 box-shadow:2px 4px 8px grey;
}

#content {
 width:550px;
 padding:3px;
 border-right-style:dotted;
 border-color:grey;
 border-width:2px;
color:white;
text-shadow: 1px 1px 1px black;
}

body {
 margin:0;
 padding:0;
/* background-image:url(https://img.webme.com/pic/d/designtest-brainice/fka_back2.png);*/
 background-color:black;
 background-repeat:repeat-x;
}

#nav_container,#header, #title {display:none;}

#myheader {
 background-image:url(https://img.webme.com/pic/d/designtest-brainice/fka_header.png);
 background-repeat:repeat-x;
 background-size:auto 100%;
height:200px; 
width:100%;
 min-width:1000px;
}

.bubblewrap img {
 width:50px;
 opacity:0.85;
}

.bubblewrap img:hover {
 opacity:1.0;
}

.bubblewrap li {
  list-style-type:none;
}

#navigation {
 background-image:url(https://img.webme.com/pic/d/designtest-brainice/fka_nav.png);
 background-repeat:no-repeat;
 background-size:100% 50px;
 height:50px;
 width:80%;
 margin-left:auto;
 margin-right:auto;
 min-width:860px;
}

#nav {
 position:absolute;
}

#nav  li{
 display:inline;
text-align:center;
}



#navigation{ 
overflow: hidden;
}
#nav {
 margin-left:30px;
} 

#navigation ul { list-style-type: none; margin-top:8px; padding: 0px; } 
#nav ul li { margin: 0; border: none; } 

 
#nav li { 
width: 150px; 
float: left; 
text-align: center; 
 } 

#nav a { 
display: block; 
padding: 5px 5px 5px 5px; 
font-size: 20px; 
color:white;
font-weight:bold;
text-decoration: none; 
text-shadow:1px 1px 1px black;} 

.sub  {
  display:none;
}
.sub a {
 background-image:url(https://img.webme.com/pic/d/designtest-brainice/fka_header.png);
 background-repeat:repeat-x;
 background-size:auto 100%;
 background-color:black;
 border-style:solid;
 border-color:black;
 border-width:1px;
 border-radius:5px;
 color:white;

}

#nav a:hover {
 color:orange;
}

#sidebox {
 width:230px;
  float:right;
 margin-left:auto;
}

#sidebox legend {
 font-size:20px;
 color:black;
 text-shadow:1px 2px 1px white;
}

#sidebox fieldset {
 border-radius:15px;
 border-color:black;
 border-style:dotted;
 border-width:1px;
}




#footer {
    float: left;
    height: auto;
    padding-bottom: 15px;
    width: 804px;
}
#spalten {
    margin: 0 auto;
    width: 781px;
}
#spalte1, #spalte2, #spalte3, #spalte4 {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
    float: left;
    font-size: 12px;
    height: 90px;
    padding: 5px;
    width: 184px;
    margin-left:-20px;
}
#spalte1 {
    border-left: 1px solid transparent;
}
#foot li a {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 1px solid #BBBBBB;
    color: #FFFFFF;
    display: block;
    font-family: Arial,Helvetica,Verdana,sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    margin: 0;
    padding: 3px 5px;
    text-decoration: none;
    width: 170px;
}
#foot li a:hover {
    background: none repeat scroll 0 0 #FFF9D6;
    color: #000000;
}