zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Menü zickt rum /IE6/IE7/FF

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.07.2007, 12:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.07.2007
Ort: Österreich
Beiträge: 5
GizmotroniX befindet sich auf einem aufstrebenden Ast
Standard CSS Menü zickt rum /IE6/IE7/FF

Hallo Leute,

ich habe zwar schon einige Webseiten erstellt aber das ist meine erste mit CSS/XHTML und gleichzeitig meine erste mit Typo3 was aber bei meinem Problem eher nebensächlich ist.

Ich habe für meine Hauptnavigation ein horizontales Drop-Down Menü von CSSPLAY eingebunden und damit nun einige Probleme. Wenn das INHALT DIV leer ist, klappt die Anzeige und Auswahl der einzelnen SubLevel Items im IE7 und FF problemlos. Im IE6 werden keine SubLevel angezeigt ? Wenn ein Inhalt in das INHALT DIV kommt klappt es im FF immernoch problemlos aber im IE6 / IE7 können die SubLevel Items nicht mehr ausgewählt werden. Außerdem liegt das Menü im Hintergrund, sprich der Inhalt liegt über dem Menü - egal welchen z-index ich für das Menü vergebe.

Kann da mal jemand einen Blick drauf werfen ? Die ganze Seite soll bis Ende Juli fertig sein und ich steck schon 3 Tage bei dem Menü fest

TestUrl: Svoboda Bueromoebel: Home

LAYOUT-CSS
Code:
* {
margin: 0;
padding: 0;
}
	
html, body {
	overflow-x: hidden;
	overflow-y: auto;
	}

#gesamt {
	background-color: #ccc;
	color: #000;
	line-height: 1.5em;
	text-align: left;
	width: 100%;
 	height: 100%;
	min-width: 700px;
	margin: 0 auto;
                font: 400 1em arial, sans-serif;
	font-size: 10px;
}


p {

}

#lang {
	padding: 3em 0 0.5em 0;
	float: left;
	width: 30%;
	background-color: #666666;
	font-size: 10px;
}

#lang ul {
  margin: 0;
  padding: 0 0 0 1.2em;
  text-align: left;
}

#lang ul li {
  list-style: none;
  display: inline;
  text-transform: uppercase;
  font: 400 1em arial, sans-serif;
}

#lang ul li a {
  float: left;
  padding-right: 0em;
  text-transform: uppercase;

  font: 400 1em arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1em !important;
  line-height: 1em;

  color: #000000;
}


#lang ul li .offline {
  float: left;
  padding-right: 0em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1em !important;
  line-height: 1em;
  color: #666666;
}

#cross1 {
	padding: 3em 0 0.5em 0;
	float: left;
	width: 70%;
	background-color: #666666;
	text-align: right;
	font-size: 10px;
}

#cross1 ul {
  margin: 0;
  padding: 0 1.5em 0 0;
  float: right;
}

#cross1 ul li {
  list-style: none;
  display: inline;
}

#cross1 ul li a {
  float: left;
  padding-right: 0em;
  text-transform: uppercase;

  font: 400 1em arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1em !important;
  line-height: 1em;

  color: #000000;
}


/* CONTENT TEMPLATE 01 */

#logo {
	float: left;
	width: 20%;
	min-width: 200px;
	height: 90px;
	background-color: #000;
}

#logo img {
	padding: 45px 0 0 1.5em;
}

#navi {
	float: left;
	position: relative;
	height: 90px;
	width: 80%;
	background-color: #000;
}

#foto {
  clear: both;
  float: left;
  width: 35%;
  position: relative;
  height: 400px;
  min-height: 350px;
  text-align: right;
}

#foto img {
  border: 0;
  position: absolute;
  bottom: 1em;
}

#text {
  float: left;
  height: 400px;
  width: 54%;
  min-height: 350px;
  position: relative;
  
}


#scroll {
  float: left;
  width: 11%;
  height: 400px;
  min-height: 350px;
  position: relative;
  text-align: right;
  overflow: auto;
  padding: 0em 0 0 0;
}

#scroll img {
  margin: 5px;
}


/* CONTENT TEMPLATE 01 - END */


#spacer {
	padding: 2em 0 0 0;
	clear: both;
	width: 100%;
}


#katalog {
	padding: 0;
	color: #fff;
	width: 100%;
	height: 40px;
	background-color: #000;
}

#search {
	width: 100%;
	height: 50px;
	background-color: #000;
}

NAVI-CSS
Code:
#pmenu {
   position: absolute;
   top: 73px;
   display: block;
   margin: 0;
   padding: 0;
   z-index: 900;
   font-size: 10px;
   background-color: #000;
}
 
/* remove all the bullets, borders and padding from the default list styling */
#pmenu ul {
float: right;
margin:0;
padding: 0;
list-style-type: none;
}
 
#pmenu ul ul {
width: 130px;
}
 
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#pmenu li {
padding: 0;
margin: 0;
float: left;
width: 130px;
position: relative;
}
 
/* style the links for the top level */
#pmenu a, #pmenu a:visited {
display:block;
text-decoration:none; 
font: 400 1em arial, sans-serif;
letter-spacing: 0.1em;
color:#fff; 
width:125px;
height:17px; 
border-left: #ffffff 1px solid;
padding-left:7px; 
line-height:1.2em;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html #pmenu a, * html #pmenu a:visited {
width:130px;
w\idth:95px;
}
 
/* style the second level background */
#pmenu ul ul a.drop, #pmenu ul ul a.drop:visited {
background:#fff url(../../graphics/drop.gif) bottom right no-repeat;
 
}
/* style the second level hover */
#pmenu ul ul a.drop:hover{
background:#666666 url(../../graphics/drop.gif) bottom right no-repeat;
}
#pmenu ul ul :hover > a.drop {
background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
}
/* style the third level background */
#pmenu ul ul ul a, #pmenu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
#pmenu ul ul ul a:hover {
background:#b2ab9b;
}
 
 
/* hide the sub levels and give them a positon absolute so that they take up no room */
#pmenu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:17px;
left:0; 
width:150px;
}
/* another hack for IE5.5 */
* html #pmenu ul ul {
top:17px;
t\op:17px;
}
 
/* position the third level flyout menu */
#pmenu ul ul ul{
left:165px; 
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
#pmenu ul ul ul.left {
left:-165px;
}
 
/* style the table so that it takes no ppart in the layout - required for IE to work */
#pmenu table {position:absolute; top:0; left:0;}
 
/* style the second level links */
#pmenu ul ul a, #pmenu ul ul a:visited {
background:#666; 
color:#000; 
font: 400 1em arial, sans-serif;
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:145px
/* yet another hack for IE5.5 */
}
* html #pmenu ul ul a{
width:130px;
w\idth:129px;
}
 
 
/* style the top level hover */
#pmenu a:hover, #pmenu ul ul a:hover{
color:#333333; 
}
#pmenu :hover > a, #pmenu ul ul :hover > a {
color:#fff;
background:#333333;
}
 
/* make the second level visible when hover on first level list OR link */
#pmenu ul li:hover ul,
#pmenu ul a:hover ul{
visibility:visible; 
}

/* keep the third level hidden when you hover on first level list OR link */
#pmenu ul :hover ul ul{
visibility:hidden;
}
 
/* make the third level visible when you hover over second level list OR link */
#pmenu ul :hover ul :hover ul{ 
visibility:visible;
} 

#pmenu ul li a.dropact {
background-color: #003a77;
color: #ffffff;
}

#pmenu ul li:hover ul li a.dropact {
background-color: #003a77;
color: #ffffff;
}

TEMPLATE:
Code:
<body>
<!-- ###DOKUMENT### start template for typo3 -->

<div id="gesamt">

<div id="lang">
###LANG###
</div>

<div id="cross1">
<!-- ###CROSSNAVI1### -->
	<!-- ###CROSSNAVI1### -->
</div>

<div id="logo">
<!-- ###HOME### -->
  	<!-- ###HOME### -->
</div>

<div id="navi">
<!-- ###MENU1### -->
  	<!-- ###MENU1### -->
</div>

<div id="spacer">&nbsp;</div>

<div id="katalog"> ###KATALOG### </div>

<div id="search"> ###SEARCH### </div>

</div>

<!-- /* Google Analytics, Seitenstatistiken /* -->

###GOOGLE###

<!-- /* ENDE GOOGLE ANALYTICS /* -->

<!-- ###DOKUMENT### end template for typo3 -->
</body>
</html>
Bitte um Eure Analyse und Ratschläge, Danke !

lG
Roland
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.07.2007, 12:32
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Hallo auch,

Im Idealfall überprüft man das Original und seine Abwandlung auf Unterschiede bezüglich des CSS/HTML-Codes und der Umgebung in der das Menü eingebettet ist. Das sollte schonmal helfen.

Ohne zusehr in die Tiefe zu gehen - habe heute keine Zeit - sehe ich einen Scrollbalken (FF) beim div gesamt Irgendeine overflow-Eigenschaft eingestellt?

Bei vielen Menüs dieser Art, wenn ich mich recht erinnere, musste man den tiefer verschachtelten Elementen eine zusätzliche oder geänderte Eigenschaft mitgeben, damit der IE die auch angezeigt hat, sei es ein "nutzloser" background oder eine bisher noch nicht verwendete Eigenschaft

Also: Wie heißt das Original genau? (Link?) Stu Nicholls sieht es übrigens sehr gerne, wenn man ihn erwähnt

Wo soll übrigens der Inhalt rein? Bitte auffüllen, damit der Fehler nachvollzogen werden kann, so funktionierts erstmal im IE7 und FF 2.0.x

Edit: Es tut natürlich im FF bei mir nicht - nur wenn ich den Scrollbalken betätige, der IE7 verhält sich wie erwartet. Sry, keine Zeit heute
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (06.07.2007 um 12:37 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.07.2007, 12:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.07.2007
Ort: Österreich
Beiträge: 5
GizmotroniX befindet sich auf einem aufstrebenden Ast
Standard

Hallo Andi,

erstmal Danke für deine Antwort. Es tut schon mal gut zu wissen das man wahrgenommen wird

Hier der Link von wo ich den Code für das Menü hergeholt habe:
TYPO3.net - CSS Menü

Mein Code ist der von Seite 2 (ArminB) - das Original von Stu ist

Stu Nicholls | CSSplay | A css only dropdown menu

Ich hab die Startseite jetzt mal mit Inhalt befüllt damit man das Problem sieht wenn Inhalt vorhanden ist und das Menü im Hintergrund liegt und man somit nicht auf die SubLevel Items zugreifen kann.

Der Scrollbalken (vertikal) ist neu. Der war bislang nicht vorhanden zumindest bei meiner Seitenauflösung. Generell ist das overflow-x: hidden und overflow-y: auto.

lG
Roland
Mit Zitat antworten
  #4 (permalink)  
Alt 11.07.2007, 08:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.07.2007
Ort: Österreich
Beiträge: 5
GizmotroniX befindet sich auf einem aufstrebenden Ast
Pfeil erledigt !

Hallo Leute,

das Problem hab ich selbst gelöst ! Aber hier ist schon das nächste:

http://xhtmlforum.de/46787-3-spaltig...scrollbar.html

Bitte um Hilfe !

lG
Roland
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe bei CSS Menue gesucht CSS_Beginner CSS 2 21.09.2009 17:03
Problem mit CSS Dropline menü horst77 CSS 1 12.08.2009 11:49
herunterfahrendes Menü mit CSS Pablo CSS 1 27.12.2007 17:07
IE6 Problem mit CSS Menü träumer CSS 2 15.01.2007 16:55
Menü mit CSS aber mit JS Animation? xy2er CSS 6 20.03.2005 20:47


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:37 Uhr.