Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag31.05.2007 um 09:18 (UTC)    
Titel: CSS Code für Menü

Hallo Leute,
ich hab mir mit Hilfe einer Seite einen CSS Code für ein neues Menü erstellt.

Code:
<style type="text/css">
 <!--
 A.menulink {
        display: block;
        width: 110px;
        text-align: center;
        text-decoration: none;
        font-family: Comic Sants MS;
        font-size: 25px;
        color: #000000;
        background-color: #FF2800;
        border-style: solid;
        border-width: 2px;
        border-color: #000000;
 }

 A.menulink:hover {
        border-style: solid;
        border-width: 2px;
        border-color: #FF2800;
        color: #FF2800;
        background-color: #000000;
 }
 -->
</style>

<table border="0" width="110" align="center">
  <tr>
    <td><a href="#" class="menulink">&nbsp;Menülink 1</a></td>
  </tr>
  <tr>
    <td><a href="#" class="menulink">&nbsp;Menülink 2</a></td>
  </tr>
  <tr>
    <td><a href="#" class="menulink">&nbsp;Menülink 3</a></td>
  </tr>
  <tr>
    <td><a href="#" class="menulink">&nbsp;Menülink 4</a></td>
  </tr>
</table>


Kann mir jemand sagen, wo ich den hinmachen soll? Ich möchte dann auch nicht mehr das alte normale Menü, das so auf der Seite ist. Wie kann ich das durch dieses Code ersetzen?

(Ich habe erst ein oder zwei mal was mit CSS gemacht... also noch totaler Anfänger^^)

Gruß,
Ich Very Happy
Beitrag31.05.2007 um 10:14 (UTC)    
Titel:

In deinem Code fehlt ein bisschen was. So wie der ist, wird er einfach oben links in die Ecke gesetzt und die Links sind nicht verlinkt.

Zitat:
<style type="text/css">
<!--
td.menulink{position:absolut;left:39px;top:439px;}
A.menulink {
display: block;
width: 110px;
text-align: center;
text-decoration: none;
font-family: Comic Sants MS;
font-size: 25px;
color: #000000;
background-color: #FF2800;
border-style: solid;
border-width: 2px;
border-color: #000000;
}

A.menulink:hover {
border-style: solid;
border-width: 2px;
border-color: #FF2800;
color: #FF2800;
background-color: #000000;
}
-->
</style>

<table border="0" width="110" align="center">
<tr>
<td><a href="#" class="menulink">&nbsp;Menülink 1</a></td>
</tr>
<tr>
<td><a href="#" class="menulink">&nbsp;Menülink 2</a></td>
</tr>
<tr>
<td><a href="#" class="menulink">&nbsp;Menülink 3</a></td>
</tr>
<tr>
<td><a href="#" class="menulink">&nbsp;Menülink 4</a></td>
</tr>
</table>


Das Rote ist die Positionierung. Du kannst anstatt 39px auch 20% schreiben. Das musst du wissen, da kannst also ein bisschen ausprobieren Wink

Das Blaue solltest du noch gegen einen Link eintauschen, da das Menü sonst nicht funktioniert Wink

Wenn du das dann richtig positioniert hast und auch fertig bist mit dem verlinken, kannst du mit

Zitat:
td.nav{visibility:hidden;}


die Navigation entfernen Wink
______________
LG André

GMMTS.de
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de