Frage stellen
Auf meiner Seite ([url="http://test.pfarreimusik.ch"]http://test.pfarreimusik.ch[/url]) 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 http://test.pfarreimusik.ch/ueber_un...zungsliste.php gibt es offenkundig ein Problem mit dem Overflow. Wie kriege ich die beiden boxen in den Inhalt?
Hier der HTML-Code:
- Code: Alles auswählen
<!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ü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: Alles auswählen
* { 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
