Zum Inhalt springen

Menü mit CSS erstellen

Erstellt am 19. Februar 2007 · 2 Antworten · letzte Antwort am 21. Februar 2007

Tags: HTML & CSS, Frage

mogqai ·

Ich habe folgendes Problem.
Ich erstelle zur Zeit eine Internetseite aufgrund einer Vorlage in html. Zusätzlich habe ich noch eine Vorlage aus CSS für die Rollovereffekte.
Ich habe es zwar fertig gebracht das Menü zu programmieren , aber ich schaffe es nicht die CSS einzubinden , dass die RO funktioniert.

Kann mir vielleicht jemand kurz anhand von meiner CSS sagen wie ich die Effekte einbauen , oder sogar ein Kurzes Beispielmenü anhand meiner Vorlage schreiben.
Die CSS und die HTML sind natürlich korrekt eingebunden.

Danke und Gruß

CSS:

/* schriftstil,scrolleiste,abstände */

body
{margin-top: 0px; margin-left: 0px; margin-right: 0px; color: black ; background-color:white; font-family: verdana,arial; font-size: 10pt;scrollbar-arrow-color: #ffffff; scrollbar-base-color: b4d1e1;
scrollbar-highlight-color : silver; scrollbar-shadow-color : black;}

table, tr, td
{margin-top: 0px; margin-left: 0px; margin-right: 0px; color: black ;font-family: verdana,arial; font-size: 10pt}

/* menue oben */

a:link.menuoben{ color: white; text-decoration:none ;font-family: verdana; font-size: 10pt;background-color:#000066;}

a:visited.menuoben{color: white;text-decoration:none;font-family: verdana; font-size: 10pt;background-color:#000066;}

a:active.menuoben{ color:orange;text-decoration:none;font-family: verdana; font-size: 10pt;background-color:#000066; }

a:hover.menuoben{ color: white;background-color:006699; text-decoration:none;font-family: verdana; font-size: 10pt;}

/* allgemeine links */

a:link{ color: #006699; text-decoration:underline ;font-family: verdana; font-size: 10pt;}

a:visited{color: #006699;text-decoration:underline;font-family: verdana; font-size: 10pt;}

a:active{ color:#006699;text-decoration:underline;font-family: verdana; font-size: 10pt; }

a:hover{ color: white;background-color:006699; text-decoration:underline and overline;font-family: verdana; font-size: 10pt; }

/* menue linke seite */

td.menulinks{ text-decoration:none ;
font-family: verdana;
font-size:10pt;
background-image:url('images/back_farbverlauf.jpg');
width:110px}

#linksmenu a {display: block; background-image:url('images/back_farbverlauf.jpg'); color: black; text-decoration:none ;font-family: verdana; font-size: 10pt;width:110px;
padding-left: 1px; padding-bottom: 1px; padding-top: 1px;margin: 0px auto
}

#linksmenu a:visited{ background-image:url('images/back_farbverlauf.jpg');color: black;text-decoration:none;font-family: verdana; font-size: 10pt;width:110px;
padding-left: 1px; padding-bottom: 1px; padding-top: 1px;margin: 0px auto
}

#linksmenu a:active{background-image:url('images/back_farbverlauf.jpg'); color:black;text-decoration:none;font-family: verdana; font-size: 10pt;width:110px;
padding-left: 1px; padding-bottom: 1px; padding-top: 1px;margin: 0px auto
}

#linksmenu a:hover {
background-color:white;
background-image:url('images/weiss.gif'); color: black; text-decoration:none ;font-family: verdana; font-size: 10pt;width:110px;
padding-left: 1px; padding-bottom: 1px; padding-top: 1px;margin: 0px auto
}
}

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="keywords" content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web net" />
<meta name="description" content="homepage, dokument, webpage, page, web, netz" />
<title>homepage, dokument, webpage, page, web, netz, homepage dokument webpage page web netz</title>
<!-- Der Copyright-Hinweis ist nicht zu löschen. Ein Entfernen des Copyright/Urheberrecht-Vermerks kann rechtliche Schritte nach sich ziehen -->
<!-- (c)Copyright by S.I.S.Papenburg / www.on-mouseover.de/templates/ -->

<script type="text/javascript">
<!--
function BlurLinks(){
lnks=document.getElementsByTagName('a');
for(i=0;i<lnks.length;i++){ lnksionfocus="new" functionifthisblurthisblur="" onload="BlurLinks;" --="">
</script>
<link rel="stylesheet" href="format.css" type="text/css" />

<!-- Banner -->

</head>

<!--###DOKUMENT### start-->

<body background="fileadmin/images/glas_back.jpg" text="black" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">

<table background="fileadmin/images/glas_back_oben.jpg" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><img src="fileadmin/images/ob_li.jpg" width="135" height="68" border="0" alt="" /></td>
<td><img src="fileadmin/images/ob_li_b.jpg" width="75" height="68" border="0" alt="" /></td>
<td align="center" width="100%"><!--Platz für Banner/Logo/Titel--><img src="fileadmin/images/beispiel_banner.jpg" width="468" height="60" border="1" alt="Beispiel-Banner" /></td>

</tr>
<tr>
<td><img src="fileadmin/images/ob_li_c.jpg" width="135" height="40" border="0" alt="" /></td>
<td><img src="fileadmin/images/leiste_li.jpg" width="75" height="40" border="0" alt="" /></td>
<td align="center" background="fileadmin/images/glas_back_oben_b.jpg" width="100%">

<!--Beginn Menue oben oder Platz für Titel -->
###MENUEOBEN###
<span style="color:white"> • </span>
<a href="index.html" class="menuoben">Privat</a> <span style="color:white"> • </span> <a href="index.html" class="menuoben">Kontakt</a> <span style="color:white"> • </span> <a href="index.html" class="menuoben">Bilder</a> <span style="color:white"> • </span> <a href="index.html" class="menuoben">Links</a> <!--Ende Menue oben--></td>
</tr>
</table><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td valign="top" width="124" align="center">

<!--Beginn Menue links-->

###MENUELINKS###

<br />
<table bgcolor="black" border="0" cellpadding="0" cellspacing="0" width="110">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="1" id="linksmenu">
<tr>
<td background="fileadmin/images/back_farbverlauf.jpg" width="110"><a href="index.html"> Home</a></td>
</tr>
<tr>
<td background="fileadmin/images/back_farbverlauf.jpg" width="110"><a href="index.html"> Chat</a></td>
</tr>
<tr>
<td background="fileadmin/images/back_farbverlauf.jpg" width="110"><a href="index.html"> Autor</a></td>
</tr>
<tr>
<td background="fileadmin/images/back_farbverlauf.jpg" width="110"><a href="index.html"> Gästebuch</a></td>
</tr>
<tr>
<td background="fileadmin/images/back_farbverlauf.jpg" width="110"><a href="index.html"> Mehr Links</a></td>
</tr>
<tr>
<td background="fileadmin/images/back_farbverlauf.jpg" width="110"><a href="index.html"> Mehr Links</a></td>
</tr>
<tr>
<td background="fileadmin/images/back_farbverlauf.jpg" width="110"><a href="index.html"> Mehr Links</a></td>
</tr>
<tr>
<td background="fileadmin/images/back_farbverlauf.jpg" width="110"><a href="index.html"> Mehr Links</a></td>
</tr>
<tr>
<td background="fileadmin/images/back_farbverlauf.jpg" width="110"><a href="index.html"> Mehr Links</a></td>
</tr>
<tr>
<td background="fileadmin/images/back_farbverlauf.jpg" width="110"><a href="index.html"> Mehr Links</a></td>
</tr>
</table>
</td>
</tr>
</table>
<!--Ende Menue links-->

</td>
<td><img src="fileadmin/images/mini_trans.gif" width="30" height="1" border="0" alt="" /></td>
<td align="left" valign="top">

<!--Beginn Inhalt-->
<br />
<table>
<tr><td>###INHALT###</td></tr>
</table>

<!--Ende Inhalt-->

</td>
<td><img src="fileadmin/images/mini_trans.gif" width="30" height="1" border="0" alt="" /></td>
</tr>
</table>

<!--###DOKUMENT### ende-->

</body>
</html>

jh@ ·

Du müsstest das Stylesheet in das Haupttemplate deiner Seite ins Setup schreiben

page.stylesheet = uploads/tf/style.css ### oder wo auch immer deins liegt.

liegts daran?