✔ Formularfelder überlagern Überschrift trotz z-index

darknet · 17. Februar 2005

Hallo Gemeinschaft,

hab ein kleines Probelm mit CSS-Formatierung. Ich habe eine Seite zusammengecodet und alles funktioniert bis auf die Formularfelder.
Das Problem ist folgendes, auf der Seite bleibt der Kopf sowie das Menü stehen. Der Content rutscht beim scrollen unter dem Kopf durch. Das klappt auch wunderbar. Nur die Select-Felder scrollen komischerweise über den Kopf. Kann mir jemand sagen warum das so ist?

Hier erst mal der Code für CSS: (bezeichnend sind #head und #content)

Code:

/* CSS Document */

a {text-decoration: none}
a:link {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000080; font-weight: bold; text-decoration: none}
a:visited {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; font-weight: bold; text-decoration: none}
a:hover {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; clip:    rect(   ); font-weight: bold; text-decoration: underline}

body {
  background-image:url(cssgrafiken/line2.gif);
  background-repeat:repeat;
  background-attachment: fixed;
}
#head {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #A5BAD4;
z-index: 100;
width: 80%;
height: 70px;
position: absolute;
  top: 0px;
  left: 150px;
         position: expression("absolute");
         top: expression(parseInt(document.body.scrollTop + 0));
      }
      #head[id] {
		 position: fixed;

}

#content {
  z-index: 1;
  position: absolute;
  top: 80px;
  left: 0px;
  width: 80%;
  margin-left: 150px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}  

#menu {
  position: absolute;
  top: 70px;
  left: 20px;
  width: 120px;
         position: expression("absolute");
         top: expression(parseInt(document.body.scrollTop + 70));
      }
      #menu[id] {
		 position: fixed;
}

#pagetitle {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  position: absolute;
  top: 250px;
  left: 20px;
  width: 120px;
         position: expression("absolute");
         top: expression(parseInt(document.body.scrollTop + 250));
      }
      #menu[id] {
		 position: fixed;
}


.form {font-size: 12px}

und hier der Code für das Formular:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="body">
<div id="head">
<h1 align="left">Arbeitsvermittlung</h1>
</div><!--ende div id="body" -->
<div id="menu"> 
  <li><a href="index.htm">Home </a></li>
  <li><a href="anmeldung.htm">Anmeldung</a></li>
  <li><a href="job_boerse.htm">Job-B&ouml;rse</a></li>
  <li><a href="kontakt.htm">Kontakt</a></li>
  <li><a href="download.htm">Download</a></li>
  <li><a href="impressum.htm">Impressum</a></li>
  <li><a href="agb.htm">ABG</a></li>
</div>

<div id="pagetitle"><h5 align="left">Kontakt</h5></div>

<div id="content">
<!-- Formularebeginn -->
    <td><font color="#FF0000"><strong>Pflichtfelder = *</strong></font>
	<form name="katalog_form" method="post" action="kontakt.php">
        <table width="610" border="0">
          <tr class="form"> 
            <td width="33%">Anrede:</td>
            <td width="67%"><span>
              <select name="anrede">
                  <option>Frau</option>
                  <option>Herr</option>
              </select>
            </span> </td>
          </tr>
          <tr class="form"> 
            <td width="33%"><span>Vorname:<font color="#FF0000">*</font></span></td>
            <td width="67%"><input name="vorname" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Nachname:<font color="#FF0000">*</font></td>
            <td width="67%"><input name="nachname" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Strasse und Hausnummer:<font color="#FF0000">*</font></td>
            <td width="67%"><span>
              <input type="text" name="strasse"> 
              <input type="text" name="nr" size="5"> 
            </span></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Postleitzahl:<font color="#FF0000">*</font></td>
            <td width="67%"><input name="plz" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Ort:<font color="#FF0000">*</font></td>
            <td width="67%"><input name="ort" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Telefon:</td>
            <td width="67%"><input name="telefon" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Fax:</td>
            <td width="67%"><input name="fax" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Geburtsdatum:</td>
            <td width="67%"> <span class="Stil4">
              <select name="tag">
                <option>Tag</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
              </select> 
              &nbsp; 
              <select name="monat">
                <option>Monat</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
              </select> 
              &nbsp; 
              <select name="jahr">
                <option>Jahr</option>
                <option value="1949">1949</option>
                <option value="1950">1950</option>
                <option value="1951">1951</option>
                <option value="1952">1952</option>
                <option value="1953">1953</option>
                <option value="1954">1954</option>
                <option value="1955">1955</option>
                <option value="1956">1956</option>
                <option value="1957">1957</option>
                <option value="1958">1958</option>
                <option value="1959">1959</option>
                <option value="1960">1960</option>
                <option value="1961">1961</option>
                <option value="1962">1962</option>
                <option value="1963">1963</option>
                <option value="1964">1964</option>
                <option value="1965">1965</option>
                <option value="1966">1966</option>
                <option value="1967">1967</option>
                <option value="1968">1968</option>
                <option value="1969">1969</option>
                <option value="1970">1970</option>
                <option value="1971">1971</option>
                <option value="1972">1972</option>
                <option value="1973">1973</option>
                <option value="1974">1974</option>
                <option value="1975">1975</option>
                <option value="1976">1976</option>
                <option value="1977">1977</option>
                <option value="1978">1978</option>
                <option value="1979">1979</option>
                <option value="1980">1980</option>
                <option value="1981">1981</option>
                <option value="1982">1982</option>
                <option value="1983">1983</option>
                <option value="1984">1984</option>
                <option value="1985">1985</option>
                <option value="1986">1986</option>
                <option value="1987">1987</option>
                <option value="1988">1988</option>
                <option value="1989">1989</option>
                <option value="1990">1990</option>
                <option value="1991">1991</option>
                <option value="1992">1992</option>
                <option value="1993">1993</option>
                <option value="1994">1994</option>
                <option value="1995">1995</option>
                <option value="1996">1996</option>
                <option value="1997">1997</option>
                <option value="1998">1998</option>
                <option value="1999">1999</option>
                <option value="2000">2000</option>
                <option value="2001">2001</option>
              </select>
            </span></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Email:<font color="#FF0000">*</font></td>
            <td width="67%"><input name="email" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">&nbsp;</td>
            <td width="67%"><span class="Stil4"></span></td>
          </tr>
          <tr class="form"> 
            <td colspan="2">Kommentar:</td>
          </tr>
          <tr class="form"> 
            <td colspan="2" class="text"><span class="Stil4">
              <textarea cols="60" rows="6" name="kommentar"></textarea>
            </span></td>
          </tr>
          <tr class="form"> 
            <td colspan="2">&nbsp;</td>
          </tr>
          <tr class="form"> 
            <td colspan="2" class="text"><input name="submit" type="submit" value="Abschicken"></td>
          </tr>
          <tr class="form"> 
            <td colspan="2">&nbsp;</td>
          </tr>
        </table>
      </form>
	  
      <!-- Formularende -->
</div><!--ende div id="content" -->
</div><!--ende div id="body" -->
</body>
</html>

Hier noch der Link zum Orginal (evtl Browser bischen kleiner ziehen damit es ordentlich was zur scrollen gibt

)
mfg
Dark

hpvw · 18. Februar 2005

Das scheint ein Browserspezifisches Problem zu sein.
Das mit den selects tritt bei mir nur im IE auf.
In NS und FF dagegen, scrollt "Kontakt" mit.
Vielleicht musst Du für den IE für das Select explizit einen eigenen kleinen z-index geben. Oder habe ich das übersehen.
Du verwendest viele Dinge, die ich noch nicht gesehen habe und valide scheint das nicht zu sein.

darknet · 18. Februar 2005

Du verwendest viele Dinge, die ich noch nicht gesehen

Dieser Teil ist nur für den IE, um Position Fixed anzugeben, fixed kennt der IE nicht. D.h. das du dem IE bischen austricksen must damit er es fixed angibt.

Code:

position: absolute;
  top: 0px;
  left: 150px;
         position: expression("absolute");
         top: expression(parseInt(document.body.scrollTop + 0));
      }

Dieser Teil ist für alle anderen Browser

Code:

      #head[id] {
		 position: fixed;

Dadurch entstehen die meisten Fehler beim validieren.
den "clip: rect( );" hab ich übersehen der muss wirklich raus.

Ich werd mal versuchen die Select-Elemente mit nem Index nach hinten zur drücken, glaube aber nicht das das funktioniert, da sie durch #content bereits einen Index haben der allerdings ignoriert wird.

mfg
Dark

darknet · 18. Februar 2005

Habs ausprobiert

z-index Zuweisung für Select bringt nichts

Code:

select {
z-index: 1;
}

Layna · 18. Februar 2005

Und wenn du "form" den z-index 1 gibst? ergibt nicht unbeding mehr sinn als es dem Selec tzu geben, aber schliesslich sprechen wir vom IE

darknet · 18. Februar 2005

gut Idee mit dem Form

Code:

form {
z-index: 1;
}

aber leider ohne Erfolg

darknet · 20. Februar 2005

Heureka, ich habs gefunden! ;-]
also Gemeinde festhalten und anschnallen, los gehts: ;-)

hier das CSS dazu:
Man beachte #frame, dieser beinhaltet das selbe Workaround wie die fix positionierten Elemente (div).

Code:

/* CSS Document */

/*links*/
a:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000080;
	font-weight: bold;
	text-decoration: none;
}
a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #336699;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: Black;
	font-weight: bold;
	text-decoration: underline;
}
a:active {
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
}

body {
  background-image:url(cssgrafiken/line2.gif);
  background-repeat:repeat;
  background-attachment: fixed;
}

#head {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #A5BAD4;
z-index: 100;
width: 80%;
height: 70px;
position: absolute;
  top: 0px;
  left: 150px;
         position: expression("absolute");
         top: expression(parseInt(document.body.scrollTop + 0));
      }
      #head[id] {
		 position: fixed;
}

#content {
  z-index: 1;
  position: absolute;
  top: 80px;
  left: 0px;
  width: 80%;
  margin-left: 150px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}  

#menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;	
	list-style-type: square;
	position: absolute;
	top: 110px;
	left: 20px;
	width: 120px;
	position: expression("absolute");
	top: expression(parseInt(document.body.scrollTop + 110));

}
      #menu[id] {
		 position: fixed;
}

#pagetitle {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #FFFFFF;
  position: absolute;
  top: 80px;
  left: 20px;
  width: 120px;
         position: expression("absolute");
         top: expression(parseInt(document.body.scrollTop + 80));
      }
      #pagetitle[id] {
		 position: fixed;
}

#frame {
  z-index: 90;
  width: 75%;
  height: 65px;
  position: absolute;
  top: 0px;
  left: 150px;
         position: expression("absolute");
         top: expression(parseInt(document.body.scrollTop + 0));
      }
      #frame[id] {
		 position: fixed;
}

.form {font-size: 12px}

und hier HTML:
Wichtig hierbei ist der IFRAME mit der id frame am Ende (kann eigentlich stehen wo er will und heissen wie er will)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="body">
<div id="head">
<h1 align="left">Arbeitsvermittlung</h1>
</div><!--ende div id="body" -->
<div id="menu"> 
  <li><a href="index.htm">Home </a></li>
  <li><a href="download.htm">Download</a></li>
  <li><a href="impressum.htm">Impressum</a></li>
  <li><a href="agb.htm">ABG</a></li>
  <li><a href="kontakt.htm">Kontakt</a></li>
  <p>Arbeitgeber<br>
  <li><a href="anmeldung.htm">Anmeldung</a></li>
  <p>Arbeitnehmer<br>
  <li><a href="job_boerse.htm">Job-B&ouml;rse</a></li>
  </div>

<div id="pagetitle">Kontakt</div>

<div id="content">
<!-- Formularebeginn -->
    <td><font color="#FF0000"><strong>Pflichtfelder = *</strong></font>
	<form name="katalog_form" method="post" action="kontakt.php">
        <table width="610" border="0">
          <tr class="form"> 
            <td width="33%">Anrede:</td>
            <td width="67%"><span>
              <select name="anrede">
                  <option>Frau</option>
                  <option>Herr</option>
              </select>
            </span> </td>
          </tr>
          <tr class="form"> 
            <td width="33%"><span>Vorname:<font color="#FF0000">*</font></span></td>
            <td width="67%"><input name="vorname" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Nachname:<font color="#FF0000">*</font></td>
            <td width="67%"><input name="nachname" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Strasse und Hausnummer:<font color="#FF0000">*</font></td>
            <td width="67%"><span>
              <input type="text" name="strasse"> 
              <input type="text" name="nr" size="5"> 
            </span></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Postleitzahl:<font color="#FF0000">*</font></td>
            <td width="67%"><input name="plz" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Ort:<font color="#FF0000">*</font></td>
            <td width="67%"><input name="ort" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Telefon:</td>
            <td width="67%"><input name="telefon" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Fax:</td>
            <td width="67%"><input name="fax" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Geburtsdatum:</td>
            <td width="67%"> <span class="Stil4">
              <select name="tag">
                <option>Tag</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
              </select> 
              &nbsp; 
              <select name="monat">
                <option>Monat</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
              </select> 
              &nbsp; 
              <select name="jahr">
                <option>Jahr</option>
                <option value="1949">1949</option>
                <option value="1950">1950</option>
                <option value="1951">1951</option>
                <option value="1952">1952</option>
                <option value="1953">1953</option>
                <option value="1954">1954</option>
                <option value="1955">1955</option>
                <option value="1956">1956</option>
                <option value="1957">1957</option>
                <option value="1958">1958</option>
                <option value="1959">1959</option>
                <option value="1960">1960</option>
                <option value="1961">1961</option>
                <option value="1962">1962</option>
                <option value="1963">1963</option>
                <option value="1964">1964</option>
                <option value="1965">1965</option>
                <option value="1966">1966</option>
                <option value="1967">1967</option>
                <option value="1968">1968</option>
                <option value="1969">1969</option>
                <option value="1970">1970</option>
                <option value="1971">1971</option>
                <option value="1972">1972</option>
                <option value="1973">1973</option>
                <option value="1974">1974</option>
                <option value="1975">1975</option>
                <option value="1976">1976</option>
                <option value="1977">1977</option>
                <option value="1978">1978</option>
                <option value="1979">1979</option>
                <option value="1980">1980</option>
                <option value="1981">1981</option>
                <option value="1982">1982</option>
                <option value="1983">1983</option>
                <option value="1984">1984</option>
                <option value="1985">1985</option>
                <option value="1986">1986</option>
                <option value="1987">1987</option>
                <option value="1988">1988</option>
                <option value="1989">1989</option>
                <option value="1990">1990</option>
                <option value="1991">1991</option>
                <option value="1992">1992</option>
                <option value="1993">1993</option>
                <option value="1994">1994</option>
                <option value="1995">1995</option>
                <option value="1996">1996</option>
                <option value="1997">1997</option>
                <option value="1998">1998</option>
                <option value="1999">1999</option>
                <option value="2000">2000</option>
                <option value="2001">2001</option>
              </select>
            </span></td>
          </tr>
          <tr class="form"> 
            <td width="33%">Email:<font color="#FF0000">*</font></td>
            <td width="67%"><input name="email" type="text"></td>
          </tr>
          <tr class="form"> 
            <td width="33%">&nbsp;</td>
            <td width="67%"><span class="Stil4"></span></td>
          </tr>
          <tr class="form"> 
            <td colspan="2">Kommentar:</td>
          </tr>
          <tr class="form"> 
            <td colspan="2" class="text"><span class="Stil4">
              <textarea cols="60" rows="6" name="kommentar"></textarea>
            </span></td>
          </tr>
          <tr class="form"> 
            <td colspan="2">&nbsp;</td>
          </tr>
          <tr class="form"> 
            <td colspan="2" class="text"><input name="submit" type="submit" value="Abschicken"></td>
          </tr>
          <tr class="form"> 
            <td colspan="2">&nbsp;</td>
          </tr>
        </table>
      </form>
<!-- Formularende -->
</div><!--ende div id="content" -->
</div><!--ende div id="body" -->
<iframe id="frame" src="" ><!--iframe zum ausblenden des Select-Feldes beim IE (schöne Grüße an MS)-->
</iframe><!--ende iframe id="frame" -->
</body>
</html>

So hier noch die Erklärung der ganzen Aktion:

Wenn ihr mit einem "festen Kopf" (head) arbeiten wollt wie ich in diesem Fall (geht aber auch bei allen anderen Elementen wie Menü oder ähnlichem bei denen beim scrollen Select störend ist), einfach die CSS-Eigenschaften des überlagerten Elements übernehmen.

Code:

/*fester Kopf*/
#head {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #A5BAD4;
z-index: 100;
width: 80%;
height: 70px;
position: absolute;
  top: 0px;
  left: 150px;
         position: expression("absolute");
         top: expression(parseInt(document.body.scrollTop + 0));
      }
      #head[id] {
		 position: fixed;
}

/*unser "Hilfs-Iframe"*/
#frame {
  z-index: 90;
  width: 75%;
  height: 65px;
  position: absolute;
  top: 0px;
  left: 150px;
         position: expression("absolute");
         top: expression(parseInt(document.body.scrollTop + 0));
      }
      #frame[id] {
		 position: fixed;
}

Danach den Iframe einfügen und mit id versehen die ihr ihm im CSS zugewiesen habt (im Beispiel #frame -> id="frame").

Code:

<iframe id="frame" src="" ><!--iframe zum ausblenden des Select-Feldes beim IE (schöne Grüße an MS)-->
</iframe><!--ende iframe id="frame" -->

Nun setzen wir den z-index für den Iframe tiefer als für das vorher von select überlagerte Element (der Iframe soll es ja nicht überlagern sonst hätten wir nichts gewonnen).

Bitte achtet darauf das ihr die Abmessungen für den Iframe etwas kleiner wählt als für das darüberliegende Element, sonst geht das zuwar im IE, sieht allerdings bei Mozilla und Co unschön aus da sonst ein Rahmen entsteht (siehe #head u. #frame width und height).

Zusammen gefasst:
Wir haben select hinter einem Iframe versteckt den wir uns hinter ein Element gelegt haben (z-index).

Tädä, das wars!

Wenn noch fragen offen sind fragt ruhig, hab auch gebraucht bis ich das raus hatte.

so siehts aus
ohne iframe Workaround
(evtl Browser bischen kleiner ziehen damit es ordentlich was zur scrollen gibt)

✔ Formularfelder überlagern Überschrift trotz z-index

darknet

Mitglied

hpvw

Erfahrenes Mitglied

darknet

Mitglied

darknet

Mitglied

Layna

Erfahrenes Mitglied

darknet

Mitglied

darknet

Mitglied

Neue Beiträge