zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit overflow, Navigation verschoben...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.08.2009, 20:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2009
Beiträge: 13
buemplizer befindet sich auf einem aufstrebenden Ast
Standard Problem mit overflow, Navigation verschoben...

Hallo!

Auf meiner Seite (Pfarreimusik Wünnewil-Flamatt) habe ich momentan zwei Probleme:

1. Die Navigation
Der IE stellt die Navigation nicht so dar wie die Gekko-Browser. Woran könnte das liegen? Bzw. wie müsste eine entsprechende Browser-Weiche aussehen?

2. Overflow
Auf der Seite Pfarreimusik-Wünnewil-Flamatt gibt es offenkundig ein Problem mit dem Overflow. Wie kriege ich die beiden boxen in den Inhalt?

Hier der HTML-Code:

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="all, index, follow" />

<link rel="shortcut icon" href="../favicon.ico" />
<link href="../css/index.css" rel="stylesheet" type="text/css" />

<script type="text/javascript"
src="../scripts/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

	$("ul#topnav li").hover(function() { //Hover over event on list item
		$(this).css({ 'background' : ''}); //Add background color and image on hovered list item
		$(this).find("span").show(); //Show the subnav
	} , function() { //on hover out...
		$(this).css({ 'background' : ''}); //Ditch the background
		$(this).find("span").hide(); //Hide the subnav
	});
    $("ul#topnav li span a").hover(function() { //Hover over event on list item
		$(this).css({ 'background' : ''}); //Add background color and image on hovered list item
		$(this).find("span").show(); //Show the subnav
	} , function() { //on hover out...
		$(this).css({ 'background' : ''}); //Ditch the background
		$(this).find("span").hide(); //Hide the subnav
	});
});
</script>

<title>Pfarreimusik W&uuml;nnewil-Flamatt</title>
</head>
<html>
<body>

<?php include ("../include/head.php"); ?>
<?php include ("../include/navi.php"); ?>
<div id="container">
  <div id="contents">
    <h1>Aktuelle Besetzungsliste</h1>

	<div id="linkespalte">
	<h3>Direktion</h3>
    <li>Jacques Rossier</li>
    <br />
    <li><i>Vizedirigenten:</i></li>
    <li>Hubert Schmutz</li>
    <li>Louis-Alexandre Yerly</li>
        <h3>Klarinette</h3>
    <li>Andrey Olivier</li>
    <li>Baumann Philippe</li>
    <li>Brülhart-Boschung Anita</li>
    <li>Lehmann Corinne</li>
    <li>Lehmann Ruth</li>
    <li>Poffet Muriel</li>
    <li>Roux Erna</li>
    <li>Spicher Ewald</li>
    <li>Schmutz-Schneuwly Daniela</li>
    <li>Weber-Aebischer Monika</li>
    <li>Zosso-Udry Andrea</li>

    <h3>Bassklarinette</h3>
    <li>Zollet Gertrud</li>

    <h3>Piccolo / Flöte</h3>
    <li>Freiburghaus Daniela</li>
    <li>Grossrieder Erwin (Piccolo)</li>
    <li>Grossrieder Eva</li>
    <li>Jenny Karin</li>
    <li>Roux Jeannine</li>
    <li>Schafer Jasmin</li>
    <li>Vonlanthen Samira (Piccolo)</li>
    <li>Zengaffinen Christa</li>

    <h3>Oboe</h3>
    <li>Roman Stampfli</li>

    <h3>Fagott</h3>
    <li>Pfander Stefanie</li>
    <li>Zollet Markus</li>
    
    <h3>Saxophon</h3>
    <li>Binz Jana (Alto)</li>
    <li>Brülhart Jan-Luca (Bariton)</li>
    <li>Maury Karin (Tenor)</li>
    <li>Schneuwly Anne (Alto)</li>
    <li>Schneuwly Silvia (Alto)</li>
    </div>
	
    <div id="rechtespalte">
    <h3>Waldhorn</h3>
    <li>Buchs Manuel</li>
    <li>Fasel Judith</li>
    <li>Hug Edi</li>
    <li>Ledermann Monika</li>
    <li>Schafer Oswald</li>

    <h3>Trompete</h3>
    <li>Fanger Marco</li>
    <li>Jenni Hansueli</li>
    <li>Marti Erich</li>
    <li>Schafer Iwan</li>
    <li>Weber Clemens</li>
    <li>Weber Stefan</li>

    <h3>Tenorhorn</h3>
    <li>Aebischer Armin</li>
    <li>Lehmann Alois</li>
    <li>Perler Heinrich</li>
    <li>Riedo Andreas</li>

    <h3>Posaune</h3>
    <li>Perler Christoph</li>
    <li>Roux Gilber</li>
    <li>Wyler Lorenz</li>

    <h3>Tuba</h3>
    <li>Hayoz Josef</li>
    <li>Yerly Louis-Alexandre</li>

    <h3>Kontrabass</h3>
    <li>Rigolet-Neuhaus Claudia</li>

    <h3>Perkussion</h3>
    <li>Boschung Reto</li>
    <li>Grossrieder Jan</li>
    <li>Perler Alain</li>
    <li>Roux Dominique</li>
    <li>Schmutz Hubert</li>
    <li>Stampfli Simon</li>
    </div>
  </div>
</div>
<?php include ("../include/footer.php"); ?>

</body>
</html>
Und hier das entsprechende CSS:
Code:
	* { margin: 0; padding: 0; }
	
	body
	{
	font: 15px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background-color: #1F1C1C;
	background-image:url(../images/noten_hand.gif);
	background-repeat: no-repeat;
	background-position:bottom left;
	background-attachment: fixed;
    }	/*#7f4000*/
	#head
	{
	margin: 30px auto 0px auto;
	width: 900px;
	height: 140px;
	background-image:url(../include/head.gif);
    }
	#footer
	{
	margin: 0px auto 30px auto;
	padding: 15px;
	font: 90% arial, hevetica, sans-serif;
	background-image: url(../include/footer.gif);
	color: #FFFFFF;
	text-align: center;
	width: 870px;
	height: 10px;
	clear: both;
	}
	br {
	line-height: 80%;
}
	.mailto {
	color: #000000;
	padding-left: 20px;
	background-image: url(../images/letter.gif);
    background-position: center left;
    background-repeat: no-repeat;
	}

	a:link.text {
	color: #FFFFFF;
	font-style:italic;
	padding-left: 15px;
	background-image: url(../images/link.gif);
	background-position: center left;
	background-repeat: no-repeat;
}
	a:visited.text {
	color: #999999;
	font-style:italic;
	padding-left: 15px;
	background-image: url(../images/link.gif);
	background-position: center left;
	background-repeat: no-repeat;

}
		a:hover.text, a:active.text
	{
	color: #000000;
	text-decoration: underline;
	font-style:italic;
	padding-left: 15px;
	background-image: url(../images/link.gif);
	background-position: center left;
	background-repeat: no-repeat;
	}

	a:link.navi {
	color: #FFFFFF;
}
	a:visited.navi {
	color: #999999;
}
	a[href$=".pdf"] {
    padding-left: 20px;
    background-image: url(../images/pdf.gif);
    background-position: center left;
    background-repeat: no-repeat;
}

		a:hover.navi, a:active.navi
	{
	color: #000000;
	}
	
	li {
	list-style-type: none;
	}
		
	h1	{
	color: #CCCCCC;
	font: 220% Verdana Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin: 25px 0 10px 0;
	}
	h2
	{
	color: #FFFFFF;
	font: 120% Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin: 20px 0 7px 0;
	}
		
	h3
	{
	color: #FFFFFF;
	font: 106% Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin: 15px 0 5px 0;
	}
	#container
	{
	margin: 0em auto;
	width: 876px;
	color: #FFFFFF;
	background-color:#3366cc;
	border: 12px solid;
	border-color: #0000FF;
	min-height: 550px;
	height: auto;
	}
	#contents 
	{ 
		margin: 0px 100px 20px 30px; 
		padding: 20px;
	}
		.imagefloatrechts
		{
		float: right;
		padding : 3px;
		border : 2px solid #0066cc;
		margin : 0px -10px 15px 15px; 
		z-index: 2;
		}
		.imagefloatlinks
		{
		float: left;
		padding : 3px;
		border : 2px solid #0066cc;
		margin : 0px 15px 15px -10px; 
		z-index: 2;
		}
		#linkespalte {
		float: left;
		padding: 5px;
		margin: 5px;
		width: 300px;
		}
		#rechtespalte {
		float: right;
		padding: 5px;
		margin: 5px;
		width: 300px;
		}
	#contents p 
	{
		line-height: 130%; 
		margin: 0px 0px 5px 0px;
	}

/*Navigation*/	
	.container_navi {
    margin: 0px auto 0px auto;
	width: 876px;
	border: 12px solid #0000ff;
	z-index:3;
	}	 
	
	ul#topnav {
	margin: 12px 0 0 0 ;
	padding: 0 0 0 38px;
	float: left;
	width: 838px;
	list-style: none;
	position: relative; 
	top: -50px;/*--Set relative positioning on the unordered list itself - not on the list item--*/
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #3366cc;
	z-index:2;
}
ul#topnav li {
    float: left;
	margin: 0; padding: 0;
}
ul#topnav li a {
	padding: 5px 10px;
    display: block;
	text-decoration: none;
	color:#ffffff;
}
ul#topnav li:hover {
	font-weight:bold;
	border-top: 2px solid #ffffff;
	border-bottom: 3px solid #ffffff;
}
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/

ul#topnav li span {
	float: left;
	padding: 10px 0;
	position: absolute;
	left: 0;
	display: none; /*--Hide by default--*/
	width: 876px;
	font-weight: normal;
	font-size: 100%;
}

ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {
     border-top: 1px solid #ffffff;
	 border-bottom: 2px solid #ffffff;
}

/*Gästebuch-CSS*/
div.gb              { margin: 0px 50px 20px 50px; padding: 0px; border: 1px solid #ffffff; line-height: 19px; }
div.gb-author       { margin: 0px; padding: 1px 10px 1px 10px; border-bottom: 1px solid #ffffff; background: #0066CC; }
p.gb-author-left    { margin: 0px; float: left; }
p.gb-author-right   { margin: 0px; text-align: right; }
div.gb-entry        { margin: 10px; padding: 0px; }
p.gb-browse         { padding: 0px 50px 0px 50px; text-align: right; font-weight: bold; }
p.gb-admin-buttons  { margin: 5px 0px 0px 0px; text-align: right; }
.caution            { color: black; font-weight: bold; }
.small              { font-size: 11px; line-height:16px; }
.comment            { margin: 10px 0px 0px 0px; color: #808080; font-style: italic; }
.comments-th    	{ padding: 5px; border: 1px solid #aaa; font-weight: bold; vertical-align: top; text-align: left; }
.comments-td     	{ padding: 5px; border: 1px solid #aaa; vertical-align: top; text-align: left; }
.submit-td       	{ padding: 5px; vertical-align: top; }


/*Lightbox 2.04 CSS*/
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Vielen Dank für eure Tipps und Anregungen!

Gruss buemplizer
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.08.2009, 23:57
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von buemplizer Beitrag anzeigen
Der IE stellt die Navigation nicht so dar wie die Gekko-Browser.
Unabhängig vom konkreten Problem: Deine Navi hat ein falsches Konzept - auch jede Subnavi muss eine ul sein:

Code:
<li><a href="#">text</a>
<ul>
<li>...
Zitat:
Zitat von buemplizer Beitrag anzeigen
Auf der Seite Pfarreimusik-Wünnewil-Flamatt gibt es offenkundig ein Problem mit dem Overflow.
Der Link geht nicht.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.08.2009, 14:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2009
Beiträge: 13
buemplizer befindet sich auf einem aufstrebenden Ast
Standard

hallo

danke für die schnelle antwort. die navi ist nicht meine erfindung, sondern von hier:
Horizontal Sub-nav with CSS & jQuery - Subnavigation Tutorial - CSS Tutorial - jQuery Tutorial

funktioniert einwandfrei ohne subnav-ul-tags im ie...

hier der korrekte link zum overflow-problem:
Pfarreimusik Wünnewil-Flamatt

danke für die unterstützung!

gruss
buemplizer
Mit Zitat antworten
  #4 (permalink)  
Alt 23.08.2009, 15:02
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von buemplizer Beitrag anzeigen
funktioniert einwandfrei ohne subnav-ul-tags im ie
Es ist allerdings keine gute Idee, dem IE < 7 zuliebe die Semantik zum Teufel zu jagen Man bekommt DD-Menüs auch im IE < 7 zum Laufen, sogar JS-frei - wobei ich persönlich diesen Aufwand nicht mehr betreibe (zumal mit jeder neuen IE-Generation das Risiko besteht, das ganze Menü überarbeiten zu müssen).

Ich bringe den IE < 7 folgendermaßen zum Anzeigen der Subnavi: Son of Suckerfish Dropdowns | HTML Dog (der Link, der per Hover die Subnavi erscheinen lässt, führt auf eine Seite, von der man ebenfalls zu allen Unterseiten kommt - das ist z.B. für User mit deakt. JS sehr wichtig).

Zum zweiten Problem siehe FAQ 2.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 24.08.2009, 18:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2009
Beiträge: 13
buemplizer befindet sich auf einem aufstrebenden Ast
Standard

OK... Danke für den Hinweis, ich werde mir bei Gelegenheit einmal die Variante "Suckerfish" anschauen.

So wie es ausschaut, liegt es aber nicht an der Navigation an sich, weil die scheint ja zu funktionieren. Offenbar ist das Problem die Positionierung der div's... (sprich, die navi.php alleine funktionert einwandfrei im ie). Allerdings sehe ich beim besten Willen den Fehler in der Positionierung nicht :S

Die FAQ2 habe ich gelesen, einiges ausprobiert, aber irgendwie bin ich zu blöde... Ich bin froh für weitere gratis-Tipps... Sorry für meine Dummheit
Mit Zitat antworten
  #6 (permalink)  
Alt 27.08.2009, 19:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2009
Beiträge: 13
buemplizer befindet sich auf einem aufstrebenden Ast
Standard

niemand?

vielleicht sieht jemand ja gerade das problem mit dem overflow. irgendwie scheint das mit dem float, bzw. clear zu tun zu haben. aber ich schnall einfach nicht, wo, bzw. welches div ich clearen soll, hat nichts geklappt...
Mit Zitat antworten
  #7 (permalink)  
Alt 31.08.2009, 20:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2009
Beiträge: 13
buemplizer befindet sich auf einem aufstrebenden Ast
Standard

das problem mit dem overflow konnte ich dank einem hinweis aus einem anderen forum lösen:

"leeres" div-tag mit dem style clear: both; nach dem #rechtespalte einfügen, schon funzt alles wie es soll

bleibt noch das problem mit dem ie und der navi...

wäre super, wenn mir auch hier jemand einen wertvollen tip geben könnte
Mit Zitat antworten
  #8 (permalink)  
Alt 03.09.2009, 21:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2009
Beiträge: 13
buemplizer befindet sich auf einem aufstrebenden Ast
Standard

OK, auch die Navigation sieht jetzt gut aus... das div habe ich einfach mit

Code:
max-height: 0px;
versehen, das wars. ob das so irgendwie css-konform ist, weiss ich allerdings nicht lanlos

was jetzt noch bleibt, die subnavi ist im ie nicht "erreichbar", sprich kann nicht geklickt werden, weil sie beim verlassen (mit der maus) der hauptnavi wieder verschwindet (die subnavi).

weiss wer, woran das liegen könnte? habe mal etwas von einem white-space bug gehört, aber das hat irgendwie nicht gefruchtet...
Mit Zitat antworten
  #9 (permalink)  
Alt 08.09.2009, 13:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2009
Beiträge: 13
buemplizer befindet sich auf einem aufstrebenden Ast
Standard

Damit ich nicht extra einen neuen Thread eröffnen muss, komme ich noch einmal hier damit...

Es ist immer noch das selbe Thema: Die Navi sieht im IE jetzt zwar gut aus, aber ich habe immer noch das Problem, dass ich die Subnav nicht erreiche...

Deshalb noch einmal die Frage an euch: Woran könnte das liegen? Bin wirklich dankbar um Hinweise, weil die Seite abgesehen von diesem Manko sonst eigentlich fertig ist...
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.09.2009, 10:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2009
Beiträge: 13
buemplizer befindet sich auf einem aufstrebenden Ast
Standard

Cool, endlich eine Lösung gefunden

Ist hier zwar etwas ein monolog, aber trotzdem mal die Lösung, falls es jemand brauchen kann:

Ich habe im CSS hier das Padding von 10px auf 8px geändert:
Code:
ul#topnav li span {
   float: left;
   padding: 10px 0;
   position: absolute;
   left: 0;
   display: none; /*--Hide by default--*/
   width: 876px;
   font-weight: normal;
   font-size: 100%;
}
Allerdings bin ich mir fast sicher, dass es noch elegantere Lösungen gibt, gefällt mir nämlich nicht waaaaahnsinnig gut so. Die beiden border (bottom von der Hauptnavi und top von der Subnavi) überschneiden sich so nämlich im ie...
Mit Zitat antworten
Sponsored Links
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
Navigation Problem mit activem Button clister CSS 2 19.02.2010 13:13
Div Container - Navigation verschoben Azadeh CSS 4 07.09.2008 15:03
Overflow Problem Firefox / IE SURE612 CSS 11 14.07.2006 15:40
Listenformatierung mit CSS Problem bei Navigation loozy CSS 4 07.06.2006 15:03
Problem mit Navigation AxlFoley (X)HTML 9 18.02.2005 23:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:57 Uhr.