[Erledigt] CSS Drop Down Menü und IE Problem

gombi · 13.01.2010, 22:02

Hallo!

Bin etwas neu im Bereich CSS und HTML aber hatte bei der Erstellung meiner Seite keine Probleme, zumindest im Firefox. Jetzt hab ich aber Probs mit dem IE.

Hab ein png Problem, aber hierzu werde ich die Lösung schon selber finden.

Mir geht es mehr um mein drop down menü. Dieses verschiebt nämlich beim drop down das div
unter dem Menübalken. Im FF geschieht das nicht. Hab leider noch keine Lösung gefunden.

FF

IE

JS:

Code:

	<script type='text/javascript'>

 function show(menu)

 {

	 if(document.getElementById(menu).style.display=='none') 

		document.getElementById(menu).style.display='block'; 

	 else document.getElementById(menu).style.display='none';

 }

 	</script>

CSS:

Code:

.bereich{

display: block;

color: #FFFFFF;

background-color: #;

text-align: center;

margin-top: 0px;


}



a.link{

display: block;

color: #000;

font-family: Verdana, Arial;

font-size: 13px;
font-weight: bold;
line-height:32px;

text-decoration: None;
border-top: solid 1px #fff000;
border-bottom: solid 1px #fff;
border-left: solid 1px #fff;
border-right: solid 1px #fff;

background: url(images/menu_repeader.png) repeat-x #000000;

width: 110px;

height: 32px;
padding-top:0px;

}



a.link:hover{

display: block;
background: url(images/menu_repeader_heller.png) repeat-x #000000;

Im HTML hab ich das Menü so eingebunden:

Code:

<div id="menubalken">

 <table cellpadding=0 cellspacing=0 style="position: relative; top: 0px; left: 10px;">

	<tr>

		<td valign=top>

			<div class="bereich" onMouseover="show('menu1')" onMouseout="show('menu1')">

				<a href="#" class="link">Home</a>

				<span id="menu1" style="display:none;">

					

				</span>

			</div>

		</td>

und so weiter ......

Kann mir da bitte jemand zu Seite stehen?

Vielen Dank!

Michael

nikosch · 13.01.2010, 22:11

Ich würde Dir raten, auf eine fertige Lösung wie Suckerfish zu setzen, bei der sich Leute lange mit den Unzulänglichkeiten diverser Browser auseinandergesetzt haben.

gombi · 13.01.2010, 22:20

Danke, schau mir das mal an.

Mein Menü sollte aber auch funken. Behaupten die zumindest!

Code:

/**

 * Horizontal CSS Drop-Down Menu Module

 *

 * @file		dropdown.css

 * @package		Dropdown

 * @version		0.7.1

 * @type		Transitional

 * @stacks		597-599

 * @browsers	Windows: IE6+, Opera7+, Firefox1+

 *				Mac OS: Safari2+, Firefox2+

 *

 * @link		http://www.lwis.net/

 * @copyright	2006-2008 Live Web Institute. All Rights Reserved.

 *

 */

Hat jemand vielleicht ne Idee? Ist ja sicher nur eine Kleinigkeit.

LG

nikosch · 13.01.2010, 22:25

Wie sollen wir anhand der „Signatur“ sehen, was Du an das Menü rangebastelt hast und wie der Originalcode ist?

gombi · 13.01.2010, 22:38

Dachte die Info im 1. Post ist ausreichend. Dachte außerdem es könnte ein bekannter Fehler sein den man leicht ausmerzen kann.

draco88 · 14.01.2010, 08:59

Der Fehler liegt wahrscheinlich in deinem CSS. Ich hab nirgends ein position:absolute gesehen und dann ist es logisch, dass der weitere Inhalt verschoben wird.

gombi · 14.01.2010, 19:06

Danke, schau mir das mal an, aber im FF geht es ja ohne Probs.

gombi · 14.01.2010, 21:06

Noch ne Info. Wenn ich das height: 34px; aus dem div "menubalken" raus nehme,
dann mach der FF aus das gleiche und verschiebt das div darunter.

Code:

#menubalken {
	background: url(images/menu_repeader.png) repeat-x top;

	margin: 0px auto;

	width: 800px;
	height: 34px;

	padding: 0px 0px 0px 10px;

gombi · 15.01.2010, 14:41

Danke draco88 für den Hinweis mit der Positionierung.
Es lag anscheinend an meinen mangelhaften css Kenntnissen.

Hab nun beide Elemente absolut positioniert und es scheint auch im FF zu funktionieren.

Nur wie zentriere ich jetzt die div's auf der Seite?

Macht man das so?

Code:

    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -<half of image width>px;

draco88 · 15.01.2010, 14:51

Du musst nur das div was da "runterklappt" mit position:absolute versehen. Der Rest funktioniert auch ohne.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Frage.: Dymanisches Datum im Drop Down Menü möglich?	badboygoofy	JavaScript, Ajax und mehr	1	24.07.2009 14:34
Problem mit Drop Down Menü	N@tur3	PHP Tipps 2009	8	12.06.2009 18:22
werte aus pull down menü an abfrage übergeben	TRA	PHP Tipps 2009	3	13.05.2009 10:03
CSS Listen Problem bei dynamischen rekursiven Menu	litterauspirna	HTML, Usability und Barrierefreiheit	17	25.03.2009 15:58
[Erledigt] dynamischer Drop Down als Auswahl für Tabellenwahl in MYSQL	meshking	PHP Tipps 2009	10	16.03.2009 15:15
Problem mit Drop Down Menu	Kein Genie	HTML, Usability und Barrierefreiheit	2	04.11.2008 21:55
[Erledigt] Drop Down auswahl in tabelle speichern		PHP Tipps 2005-2	6	10.08.2005 16:36
Formular + Drop down	Schneckenkind	PHP Tipps 2005-2	1	29.06.2005 08:35
2 verschachtelte while Schleifen. Großes Performanceproblem		Datenbanken	3	30.05.2005 12:52
Problem mit Menü	nullplan	PHP Tipps 2005	1	24.03.2005 22:11
problem mit Menü feld und datenbank auslese	4x4styling	Datenbanken	3	11.02.2005 11:17
Menü auf php-Seite		PHP Tipps 2005	20	01.02.2005 20:24
[Erledigt] abfrage mit drop down und ausgabe		Datenbanken	5	05.08.2004 08:48
Problem mit drop-down menu		HTML, Usability und Barrierefreiheit	3	04.08.2004 19:56
Drop Down Menü		PHP Tipps 2004	17	27.07.2004 21:19


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

13.01.2010, 22:11
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ich würde Dir raten, auf eine fertige Lösung wie Suckerfish zu setzen, bei der sich Leute lange mit den Unzulänglichkeiten diverser Browser auseinandergesetzt haben. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

13.01.2010, 22:25
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Wie sollen wir anhand der „Signatur“ sehen, was Du an das Menü rangebastelt hast und wie der Originalcode ist? __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

13.01.2010, 22:38
gombi Benutzer Registriert seit: 13.01.2010 Beiträge: 47 PHP-Kenntnisse: Anfänger	Dachte die Info im 1. Post ist ausreichend. Dachte außerdem es könnte ein bekannter Fehler sein den man leicht ausmerzen kann.

14.01.2010, 08:59
draco88 Erfahrener Benutzer Registriert seit: 01.12.2009 Beiträge: 645 PHP-Kenntnisse: Fortgeschritten	Der Fehler liegt wahrscheinlich in deinem CSS. Ich hab nirgends ein position:absolute gesehen und dann ist es logisch, dass der weitere Inhalt verschoben wird.

14.01.2010, 19:06
gombi Benutzer Registriert seit: 13.01.2010 Beiträge: 47 PHP-Kenntnisse: Anfänger	Danke, schau mir das mal an, aber im FF geht es ja ohne Probs.

14.01.2010, 21:06
gombi Benutzer Registriert seit: 13.01.2010 Beiträge: 47 PHP-Kenntnisse: Anfänger	Noch ne Info. Wenn ich das height: 34px; aus dem div "menubalken" raus nehme, dann mach der FF aus das gleiche und verschiebt das div darunter. Code: #menubalken { background: url(images/menu_repeader.png) repeat-x top; margin: 0px auto; width: 800px; height: 34px; padding: 0px 0px 0px 10px;

15.01.2010, 14:41
gombi Benutzer Registriert seit: 13.01.2010 Beiträge: 47 PHP-Kenntnisse: Anfänger	Danke draco88 für den Hinweis mit der Positionierung. Es lag anscheinend an meinen mangelhaften css Kenntnissen. Hab nun beide Elemente absolut positioniert und es scheint auch im FF zu funktionieren. Nur wie zentriere ich jetzt die div's auf der Seite? Macht man das so? Code: position: absolute; top: 30px; left: 50%; margin-left: -<half of image width>px;

15.01.2010, 14:51
draco88 Erfahrener Benutzer Registriert seit: 01.12.2009 Beiträge: 645 PHP-Kenntnisse: Fortgeschritten	Du musst nur das div was da "runterklappt" mit position:absolute versehen. Der Rest funktioniert auch ohne.