Suche im Forum:
Suchen


Autor Nachricht
Beitrag09.11.2010 um 15:04 (UTC)    
Titel: Flyout Menü Probleme - nur Text verlinkt, Hover etc.

Hallo,

ich habe mit einem Bekannten zusammen versucht ein Flyout Menü mit dem hier oft angegebenen Link zu Code 95614 von ig444 zu machen. Leider hat es gar nicht geklappt, da ich plötzlich 2 übereinanderliegende Seite hatte etc. Ich habe das Design Iceblue.

Nun hat mein Bekannter die Sache so lösen wollen, dass er in "Text über dem Design" einen Teil der Codierung unterbringt, der Rest geht über externe Links. Ist das so richtig?

Zur Sicherheit bastle ich aber nicht auf meiner Seite www.garnelenwelten.com rum, sondern auf einer Testseite: www.garnelenwelten.de.tl

Wenn man auf www.garnelenwelten.de.tl auf "Garnelen" klickt, sieht man wo mein Problem ist. Nicht der ganze Button ist verlinkt, sondern nur der Text. D. h. sowohl der Hover-Effekt als auch das Ausklapp-Menü funktionieren nicht richtig. Im IE gibt es ausserdem ein optisches Problem.

Kann mir hier jemand helfen, den bisherigen Code so zu ändern, dass es klappt?

Ich wäre Euch wirklich sehr dankbar, wenn jemand helfen kann.

LG

Clarissa

Das ist der Code über dem Design:

<style typ= "text/css">
<!--
/* Hintergrund hinter Design */
body {
background-color:#000000;
background-repeat: repeat;
text-align:center; }
/* Titel im Header entfernen */
td.headline {visibility:hidden;}

/* Container zum positionieren des Designs */
#Design_Iceblue {
position:absolute;
top: 0px;
left: 30px;
width: 980px; }

/* Design kürzen (kein scrollen des Designs bei kurzen Seiten) */
td.edit_main_tr {
height: 50% !important; }

/* Schriftfarbe + Größe auf Seiten */
td {
color:#000000;
font-size:10px;
text-align:left;
font-family: arial,verdana; }

/* Header oben */
td.edit_header_full {
background-color:#FFFFFF;
background-image:url(http://img.webme.com/pic/g/garnelen-schnecken-fische/headertest2.jpg);
background-repeat:no-repeat;
border:1px solid #000000; }

/* Titel über Navigation */
td.nav_heading {
color:#FFFFFF;
font-size:10px;
font-family:arial,verdana;
text-align:left;
height:29px;
background-color:#000000;
background-image:url(http://img.webme.com/pic/i/iceblue-test/balken_schwarz.jpg);
border:1px solid #000000; }

/* Navigation Buttons */
td.nav {
background-color:#E2E2E2;
background-image: url(http://img.webme.com/pic/g/garnelen-schnecken-fische/button3.jpg);
border:1px solid #000000; }

/* rechte Boxen 1 bis 5 */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color:#000000;
font-size:10px;
font-family:arial,verdana;
text-align:left;
background-color:#F2F2F2;
background-image: url();
border:1px solid #000000; }
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color: #000000;
font-size: 10px;
font-family: arial,verdana;
text-align: center;
background-color: #FFFFB2;
background-image:url(); }

/* Hover-Effekt Navigation Buttons */
td.nav:hover {
background-color:#800000;
background-image:url(http://img.webme.com/pic/g/garnelen-schnecken-fische/button2.jpg);
border:1px solid #000000; }

/* Textlinks in Navigation */
td.nav a {
color:#000000;
font-size:10px;
font-family:arial,verdana;
text-decoration:none;
text-align:left; }

/* Hover-Effekt Textlinks Navigation */
td.nav a:hover{
color:#000000;
font-size:10px;
font-family:arial,verdana;
text-decoration:none;
text-align:left; }

/* Bild unter Navigation entfernt */
td.edit_below_nav {display:none;}

/* Hintergrund Navigation */
td.edit_navi_headbg {
height: 50%;
background-color: ;
background-image:url();
border:0px solid #000000; }

/* Balken über Textfeld */
td.edit_content_top {
height:29px;
background-color:#000000;
background-image:url(http://img.webme.com/pic/i/iceblue-test/balken_schwarz.jpg);
border:1px solid #000000; }

/* Seitentitel über Textfeld */
td.headline2 {
color:#FFFFFF;
font-size:12px;
font-family:arial,verdana;
text-align:left; }

/* Textfeld */
td.edit_content {
padding-top:15px;
padding-bottom:15px;
background-color:#FFFFFF;
background-image: url();
border:1px solid #000000; }

/* Linke Spalte im Textfeld */
td.edit_content_left_spacer {
background-color:#F2F2F2;
background-image:url(); }

/* Rechte Spalte im Textfeld */
td.edit_content_right_spacer {
background-color:#F2F2F2;
background-image:url(); }

/* Erste Balken unter Textfeld */
td.edit_content_bottom {
height:29px;
background-color:#000000;
background-image: url(http://img.webme.com/pic/i/iceblue-test/balken_schwarz.jpg);
border:1px solid #000000; }

/* Zweiter Balken unter Textfeld (mit Counter) */
td.edit_content_bottom2 {
background-color: ;
background-image: url();
border:0px solid #000000; }


/* große Feld unter Textfeld */
td.edit_rechts_cbg {
height:50px;
background-color: ;
background-image: url();
border:0px solid #000000; }

/* Streifen rechts vom Design entfernt mit */
td.edit_rechts_sbg {display:none;}

/* Titel über rechter Box */
td.sidebar_heading {
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana ;
text-align:center;
height:29px;
background-color:#000000;
background-image: url(http://img.webme.com/pic/i/iceblue-test/balken_schwarz.jpg);
border:1px solid #000000; }

/* rechte Boxen 1 bis 5 */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-align:left;
background-color:#F2F2F2;
background-image: url();
border:1px solid #000000; }

/* Abschluß unter Boxen 1 bis 5 entfernt mit */
td.edit_rb_footer {display:none; }

/* Hintergrund unter rechten Boxen */
td.edit_rechts_bottom {
background-color: ;
background-image: url();
border:0px solid #000000; }

td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color: #000000;
font-size: 10px;
font-family: arial,verdana;
text-align: justify;
background-color: #FFFFff;
background-image:url(); }

en */

body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

/* Listenpunke werden nicht angezeigt */

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

/* Position des Menüs */

#menu
{
position: absolute;
z-index: 3;
top: 20px;
left: 10px;
width: 150px;
height: 28px;
}

/* Größe der Oberkategorien */

.menu
{
width: 150px;
height: 28px;
position: relative; /* NICHT ENTFERNEN! */
}

/* Aussehen der Oberkategorie */

.menu a
{
border: 1px solid #888;
background-color: #fff;
background-image:url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
padding-top: 4px;
margin: 0px 2px;
display: block;
height: 24px;
color: #000;
}

.menu a:hover

{
background-image:url(URL);
}

/* Größe der Unterkategorien */

#smenu1, #smenu2, #smenu3, #smenu4
{
font-size: 12px;
display: none;
width: 375px;
left: 0px; /* Dies muss etwa die Breite der Hauptkategorie sein - Variiert manchmal, einfach ausprobieren*/
top: 286px; /* NICHT ENTFERNEN ! */
padding-left: 185px;
position: absolute;
}

/* Aussehen der Unterlinks */

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
font-weight: normal;
padding-top: 2px;
height: 23px;
cursor: pointer;
/*background-color: #fff;*/
/*background-image:url(URL);*/
}
//-->
</style>

<!-- Anpassung an Internet Explorer -->
<!--[if IE] -->
<style type="text/css">
.menu a:hover
{
margin-bottom: -14px !important; /* Nur die Zahl verändern, nichts Anderes (für IE)*/
}
</style>

<!-- Nach dem </style> keine CSS-Codes mehr -->

<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 id="Design_Iceblue">
Beiträge der letzten Zeit anzeigen:   


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