nicht angemeldet
div Element "springt" bei bei Mouseover
Hallo liebe HTML-Profis,
Baue gerade an meiner ersten Website und stosse gerade an meine Grenzen! Das Grundgerüst ist soweit fertig und funktioniert auch gut! Jetzt wollte ich ein CSS-Manü (div innerhalb einer Tabelle) in das Layout integrieren! Auch das klappt ganz gut, öffnet man die Seite im IE! Verkleinert man jedoch den Browser bleibt dieses Menü an der gleichen Stelle und "springt" erst wieder in die richtige Position, wenn man mit der Maus drüberfährt! Sehr seltsam das ganze...
Hier mal der Code mit entsprechendem Menübutton:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
[code lang=css]
.tabs {list-style:none; padding:0px 0 0 0px; margin:0px 0px 0px 0; height:26px;}
.tabs li {float:left; margin-right:-29px;}
.tabs li a {display:block; position:relative; text-decoration:none;}
.tabs li a em {display:block; height:26px; float:left; padding:0 39px 0 10px; background:url(tab3.gif) right top; position:relative; z-index:100; font-size:11px; font-weight:normal; font-style:normal; color:#fff; line-height:25px; font-family:verdana;}
.tabs li a b {display:block; float:left; width:29px; height:26px; background:url(tab3.gif) left top; position:relative; z-index:200;}
.tabs li a.m1 {z-index:600;}
.tabs li a.m2 {z-index:500;}
.tabs li a.m3 {z-index:400;}
.tabs li a.m4 {z-index:300;}
.tabs li a:hover {border:0; z-index:700; cursor:pointer;}
.tabs li a:hover b {background-position: left center;}
.tabs li a:hover em {background-position: right center; color:#050;}
.tabs li a.selected, .tabs li a.selected:hover {border:0; z-index:800; cursor:default;}
.tabs li a.selected b, .tabs li a.selected:hover b {background-position: left bottom;}
.tabs li a.selected em, .tabs li a.selected:hover em {background-position: right bottom; color:#000;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" style="Width : 100%; Height : 100%;">
<tr>
<td align="center" valign="middle">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px; Height : 545px;">
<tr>
<td align="center" valign="top">
<div style="Margin-Top: 10px;">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px;">
<tr>
<td width="159" align="left" valign="bottom"></td>
<td align="center" valign="bottom"></td>
<td width="167" height="20" align="right" valign="bottom"></td>
</tr>
</table>
</div>
<div style="Margin-Top: 1px;">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px;">
<tr>
<td width="160" align="left" valign="bottom"></td>
<td width="437" align="center" valign="bottom"></td>
<td width="167" height="20" align="right" valign="bottom"></td>
</tr>
</table>
</div>
<div style="Margin-Top: 7px;">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px; Height : 21px;">
<tr>
<td height="21">
<div id="info">
<ul class="tabs">
<li><a href="gif_overlap.html?current=one" class="m1"><b></b><em>Ausstattung</em></a></li>
<li><a href="gif_overlap.html?current=two" class="m2"><b></b><em>Grundriss</em></a></li>
<li><a href="gif_overlap.html?current=three" class="m3"><b></b><em>Lage</em></a></li>
<li><a href="gif_overlap.html?current=four" class="m4"><b></b><em>Preise</em></a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
<div style="Margin-Top: 0px;">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px; Height : 279px;">
<tr>
<td width="433" align="left" valign="bottom"></td>
<td width="331" height="20" align="right" valign="bottom"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
[/code]
Bitte berücksichtigen, dass ich absoluter Neuling bin und vielleicht die ein oder andere Sache im Code suboptimal gelöst ist!
Hoffe, mir kann jemand weiterhelfen!
Vielen lieben Dank schon einmal,
Gruß Manu
-
Ist denn keiner da, der mir helfen kann/will?
-
Ist denn keiner da, der mir helfen kann/will?
damit du nicht wie der ochs vorm berg stehst, zumindest mal ein anfang:
a) schreibe vernünftigen, validen code (ansätze sind bei dir ja bereits vorhanden - allerdings wird dich http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch@title=quirksmode heimsuchen)
b) definiere alles im "ist"-zustand per css - wenn das dann alles passt und nix springt, kümmere dich um die pseudo-klassen wie z.b. :hover und definiere dort NUR die eigenschaften, die sich auch verändern sollenum dein css leichter lesbar zu machen, solltest du die eigenschaft-wert-paare untereinander schreiben und nicht in einer unleserlichen wurst - hier empfiehlt sich 1TBS als format:
selektor { eigenschaft: wert; eigenschaft: wert; eigenschaft: wert; eigenschaft: wert; } -
hi,
Ist denn keiner da, der mir helfen kann/will?
Doch!
Nur, schau dir mal dein Beispiel Online an:
http://start-navi.de/beispiele/bsp.html
Siehst du, wo das Problem liegt?
Baue dein Beispiel so um, dass der Fehler ersichtlich wird, ich lade es dir dann gerne hoch, dann kann auch nachvollzogen werden, was dass Problem ist.
holla holla
-
Danke für die Antworten,
Wie gesagt, bin noch kompletter Neuling und Fehler bzw. unsauberer Code sind da denk ich relativ normal! Aber wenn man schon ein paar nette Bücher durchgearbeitet hat, muss man einfach mal anfangen die Seite zu bauen...
Also hier nochmal der Code (Button war wohl nur über meinen Server verlinkt):
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test</title> [code lang=css]<style type="text/css"> .tabs {list-style:none; padding:0px 0 0 0px; margin:0px 0px 0px 0; height:26px;} .tabs li {float:left; margin-right:-29px;} .tabs li a {display:block; position:relative; text-decoration:none;} .tabs li a em {display:block; height:26px; float:left; padding:0 39px 0 10px; background:url(http://www.cssplay.co.uk/menus/tabs/tab3.gif) right top; position:relative; z-index:100; font-size:11px; font-weight:normal; font-style:normal; color:#fff; line-height:25px; font-family:verdana;} .tabs li a b {display:block; float:left; width:29px; height:26px; background:url(http://www.cssplay.co.uk/menus/tabs/tab3.gif) left top; position:relative; z-index:200;} .tabs li a.m1 {z-index:600;} .tabs li a.m2 {z-index:500;} .tabs li a.m3 {z-index:400;} .tabs li a.m4 {z-index:300;} .tabs li a:hover {border:0; z-index:700; cursor:pointer;} .tabs li a:hover b {background-position: left center;} .tabs li a:hover em {background-position: right center; color:#050;} .tabs li a.selected, .tabs li a.selected:hover {border:0; z-index:800; cursor:default;} .tabs li a.selected b, .tabs li a.selected:hover b {background-position: left bottom;} .tabs li a.selected em, .tabs li a.selected:hover em {background-position: right bottom; color:#000;} </style></head>
<body>
<table cellpadding="0" cellspacing="0" border="0" style="Width : 100%; Height : 100%;">
<tr>
<td align="center" valign="middle"><table cellpadding="0" cellspacing="0" border="0" style="Width : 764px; Height : 545px;">
<tr>
<td align="center" valign="top"><div style="Margin-Top: 10px;">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px;">
<tr>
<td width="159" align="left" valign="bottom"></td>
<td align="center" valign="bottom"></td>
<td width="167" height="20" align="right" valign="bottom"></td>
</tr>
</table>
</div><div style="Margin-Top: 1px;">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px;">
<tr>
<td width="160" align="left" valign="bottom"></td>
<td width="437" align="center" valign="bottom"></td>
<td width="167" height="20" align="right" valign="bottom"></td>
</tr>
</table>
</div><div style="Margin-Top: 7px;">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px; Height : 21px;">
<tr>
<td height="21">
<div id="info">
<ul class="tabs">
<li><a href="gif_overlap.html?current=one" class="m1"><b></b><em>Ausstattung</em></a></li>
<li><a href="gif_overlap.html?current=two" class="m2"><b></b><em>Grundriss</em></a></li>
<li><a href="gif_overlap.html?current=three" class="m3"><b></b><em>Lage</em></a></li>
<li><a href="gif_overlap.html?current=four" class="m4"><b></b><em>Preise</em></a></li>
</ul>
</div>
</td>
</tr>
</table>
</div><div style="Margin-Top: 0px;">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px; Height : 279px;">
<tr>
<td width="433" align="left" valign="bottom"></td>
<td width="331" height="20" align="right" valign="bottom"></td>
</tr>
</table>
</div></td>
</tr>
</table>
</td>
</tr>
</table></body>
</html>[/code]Will ja wie gesagt eigentlich nur das Menü so in der Tabelle fixieren, dass es mit dem übrigen Layout mitwandert und nicht erst in die Position hüpft, wenn man mit der Maus drüber fährt!
Vielen lieben Dank
-
hi,
Aber wenn man schon ein paar nette Bücher durchgearbeitet hat, muss man einfach mal anfangen die Seite zu bauen...
Da hast du schon viel zu lang gewartet, besser wäre Parallel zum lesen zu basteln.
> background:url(http://www.cssplay.co.uk/menus/tabs/tab3.gif);Um welchen Artikel auf CSS Play handelt es sich hier (Link Bitte), ich kann nämlich immer noch nicht nachvollziehen, was dein HTML darstellen soll.
Ein Ausklappendes Menu?
holla holla
-
Hallo,
Da hast du schon viel zu lang gewartet, besser wäre Parallel zum lesen zu basteln.
Ich habe meine Bücher auch immer noch neben mir liegen und die Website ist eigentlich auch schon fast fertig, bis eben auf diese Menü!
Es klappt sich hierbei nichts auf, es stellt lediglich eine Art "Index" dar! Ein Hauptmenü habe ich schon (in der Originaldatei unten horizontal angebracht)! Link für das Menü ist: www.cssplay.co.uk/menus/gif_overlap.html
Das funktioniert in meiner Endversion auch seeehr gut, das einzige ist, dass es einfach seinen zugewiesenen "Standort" ändert, wenn man den Browser verkleinert, dabei sollte es mit dem Rest mitwandern!
Teste mal in deinem Explorer, verkleinere dann mal den Explorer und wandere über das Menü! Es springt dann erst in die Position in der es die ganze Zeit bleiben sollte....Schönen Gruß
-
hi,
Ich habe meine Bücher auch immer noch neben mir liegen und die Website ist eigentlich auch schon fast fertig, bis eben auf diese Menü!
Ohne dir zu nahe treten zu wollen, ich weiss nicht, was du da liest, sicher ist aber, es ist nicht Empfehlenswert.
Allein schon aus dem Grund, dass du Tabellen zum Layouten verwendest.Teste mal in deinem Explorer, verkleinere dann mal den Explorer und wandere über das Menü! Es springt dann erst in die Position in der es die ganze Zeit bleiben sollte....
Ok, jetzt habe ich es gesehen, das liegt am schon vom suit erwähnten Quirks-Mode, siehe http://start-navi.de/beispiele/bsp.html.
Was ich dir mit meinem ersten Posting eigentlich sagen wollte bezog sich auf die richtige Fehlersuche, diese muss man von Grund auf lernen, sonst stehst du ständig vor solch Trivialen Problemen.
Erster und wichtigster Schritt in der Fehlersuche, Visualisierung aller Objekte, gib jedem Objekt im Dokument einen Border, eine Hintergrundfarbe, um zu sehen, wo welches Objekt sich wie verhält.
holla holla
-
Hi,
Erster und wichtigster Schritt in der Fehlersuche, Visualisierung aller Objekte, gib jedem Objekt im Dokument einen Border, eine Hintergrundfarbe, um zu sehen, wo welches Objekt sich wie verhält.
Hab ich in der Originaldatei auch gemacht für jedes "Objekt"!
In deinem Beispiel ist das Menü jetzt vertikal fixiert worden! Was ich jedoch versuche ist, es in die schon vorhandene Tabelle so einzubinden, dass es sich auch wie diese verhält! Die Website ist nämlich auch so angelegt, dass sich der Hauptbereich im Explorer gänzlich zentriert (sowohl vertikal, als auch horizontal)! sh. z.B. www.sirenuse.it
Gruß
-
-
-
-
-
-