Hi,
Ich hab mal gesucht nach Webnavigations und hab einen tollen gefunden. Hier der Vorschau http://www.psdgraphics.com/demos/black-horizontal-dropdown-menu/menu.html
Und ich möchte jetzt das in meiner Homepage machen als Navi. Ich poste mal meine Designs Code
Text über dem Design
Code: ---------------------------------------------</span><br /></marquee></div>
<div id="Logo"> </div>
<div id="Logoschrift"><div style="text-align: center;"><span style="color: rgb(255, 255, 255);"><strong><span style="font-family: Arial;"><span style="font-size: large;"></span></span></strong><br />
<span style="font-family: Arial;"><span style="font-size: medium;">JUST FREE DESIGNS</span></span></span></div></div>
<div id="Links"><span style="font-size: small;"><a href="#"><span style="font-family: Courier New;"><span style="color: rgb(255, 255, 255);">Gästebuch </span></span></a><span style="font-family: Courier New;"><span style="color: rgb(255, 255, 255);">│ </span></span></span><span style="font-size: small;"><a href="#"><span style="font-family: Courier New;"><span style="color: rgb(255, 255, 255);">Kontakt </span></span></a><span style="font-family: Courier New;"><span style="color: rgb(255, 255, 255);">│ </span></span></span><span style="font-size: small;"><a href="#"><span style="font-family: Courier New;"><span style="color: rgb(255, 255, 255);">Partnerseiten</span></span></a><span style="font-family: Courier New;"><span style="color: rgb(255, 255, 255);"> │ </span></span></span><span style="font-size: small;"><a href="#"><span style="font-family: Courier New;"><span style="color: rgb(255, 255, 255);">Linkliste</span></span></a><span style="font-family: Courier New;"><span style="color: rgb(255, 255, 255);"> │ </span></span></span><a href="#"><span style="font-size: small;"><span style="font-family: Courier New;"><span style="color: rgb(255, 255, 255);">Impressum</span></span></span></a></div>
Text unter dem Design
Code: <div id="footer">
<center>
<table cellspacing="1" cellpadding="1" border="0" style="width: 727px; height: 148px;">
<tbody>
<tr>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);"><strong>Links</strong></span></td>
<td style="text-align: center;"><span style="background-color: rgb(0, 0, 0);"><span style="color: rgb(255, 255, 255);"><strong>Partner</strong></span></span></td>
<td style="text-align: center;"><span style="background-color: rgb(0, 0, 0);"><span style="color: rgb(255, 255, 255);"><strong>Partner</strong></span></span></td>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);"><strong>Award Gewinner</strong></span></td>
</tr>
<tr>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
</tr>
<tr>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
</tr>
<tr>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
</tr>
<tr>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
<td style="text-align: center;"><span style="color: rgb(255, 255, 255);">Beispiel</span></td>
</tr>
</tbody>
</table>
</center>
</div>
<br />
<div style="text-align: center;"><a href="#"><span style="color: rgb(255, 255, 255);">Gästebuch</span></a><span style="color: rgb(255, 255, 255);"> - </span><a href="#"><span style="color: rgb(255, 255, 255);">Kontakt</span></a><span style="color: rgb(255, 255, 255);"> - </span><a href="#"><span style="color: rgb(255, 255, 255);">Impressum</span></a><span style="color: rgb(255, 255, 255);"> │ Copyright by </span><a href="http://www.KenanMustafa.de.tl"><span style="color: rgb(255, 255, 255);">KenanMustafa.de.tl</span></a><span style="color: rgb(255, 255, 255);"> and Design und Coding by </span><a href="http://www.samnowi.de.tl"><span style="color: rgb(255, 255, 255);">SamNowi</span></a></div><br />
Css Code ohne Style Tags
Code: /* Design und Coading by SamNowi */table{margin: auto;}body {background-image: url(http://designerfied.com/wp-content/uploads/2010/07/Grey-grunge-600x425.jpg);background-color: #000;background-position: center top;background-repeat: no-repeat;}#container {width: 960px;margin: auto;overflow: hidden;margin-top: 10px;background-color: #fff;border-top: 2px solid #fff;border-left: 2px solid #fff;border-right: 2px solid #fff;}#content {float: left;width: 910px;padding: 40px;font-size: 14px;color: #fff;background-image: url();font-family: Arial;background-repeat: x-repeat;border-right: 0px solid #c9c9c9;-moz-border-radius: 8px;-webkit-border-radius: 8px;}#header {margin: auto;height: 190px;width: 960px;background-image: url(http://img.webme.com/pic/k/kenanmustafa/header1.jpg);}#newstext {position: absolute;left: 50%;width: 350px;margin-top: 55px;margin-left: -370px;overflow: hidden;}#Links {position: absolute;left: 50%;margin-top: 175px;margin-left: -460px;overflow: hidden;}#Logo {position: absolute;background-image: url(g);margin-top: 18px;left: 50%;margin-left: 250px;width: 130px;height: 130px;overflow: hidden;}#Logoschrift {position: absolute;margin-top: 148px;left: 50%;margin-left: 210px;overflow: hidden;}a {color:#ffffff;text-decoration:none;}a:hover {color:#ffffff;text-decoration:none;}#nav_container {width: 980px;height: 40px;background: url(http://img.webme.com/pic/s/samnowi-fussball/navi2.png);background-repeat: x-repeat;float: left;font-family: arial;padding: 0px 0px 0px 0px;font-size: 14px;}#nav a {float: left;text-decoration: none;color: #FFF;padding: 0px 10px 0px 10px;padding-top: 0px;border-right: 0px solid #202020}#nav a:hover {color: #000;}#nav li {list-style-type: none;}#footer {height:150px;width: 954px;background-color: #000;margin-top:40px;margin: auto;padding:3px;border-left: 2px solid #fff;border-right: 2px solid #fff;border-bottom: 2px solid #fff;}
Und hier ist noch der Code vom Navigation den ich haben will
Code: #navigation {
margin:0;
padding: 0;
clear:both;
width:950px;
height:51px;
background: #d6eaf8 url(ihttp://www.psdgraphics.com/demos/black-horizontal-dropdown-menu/images/dropdown-bg.gif) repeat-x left top;
}
ul.nav-main,
ul.nav-main li {
list-style: none;
margin: 0;
padding: 0;
}
ul.nav-main {
position: relative;
z-index: 597;
}
ul.nav-main li:hover > ul {
visibility: visible;
}
ul.nav-main li.hover,
ul.nav-main li:hover {
position: relative;
z-index: 599;
cursor: pointer;
background: url(images/dropdown-bg-hover.gif) repeat-x left top;
}
ul.nav-main li {
float:left;
display:block;
height: 51px;
color: #999;
font: 14px Arial, Helvetica, sans-serif;
background: url(images/separator.gif) no-repeat right center;
}
ul.nav-main li a {
display:block;
padding: 16px 16px 0 16px;
height: 35px;
color: #999;
font: 14px Arial, Helvetica, sans-serif;
text-decoration:none;
}
ul.nav-main li a:hover {
color:#D6D6D6;
}
ul.nav-main *.list {
padding-right: 22px;
background: url(images/navigation-arrow.gif) no-repeat right top;
}
ul.nav-sub {
visibility: hidden;
position: absolute;
padding:10px;
top: 48px;
left: 0;
z-index: 598;
background: #353535 url(images/dropdown-list-bg.gif) repeat-x left top;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
ul.nav-sub li {
list-style:none;
display:block;
padding: 0;
height: 27px;
float: none;
width:145px;
border-bottom: 1px solid #5a5a5a;
background: none;
}
ul.nav-sub li a {
list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 15px;
float: none;
width:145px;
background: none;
font: 12px Arial, Helvetica, sans-serif;
}
Ich hoffe jemand kann mir helfen das als Navi zumachen.
Gruß
Kenan |