skulli: Probleme mit CSS / Input-Feld nicht fokusierbar

Beitrag lesen

SELF-Forum

Probleme mit CSS / Input-Feld nicht fokusierbar

skulli
– Informationen zu den Bewertungsregeln

Hallo allerseits,

ich habe hier ein kleines Problem beim Erstellen eines Layouts mit HTML+CSS!
Und zwar hat bis jetzt alles soweit ganz gut geklappt und beim Erstellen der Textfelder für den Login ist nun folgendes Problem aufgetreten: Die Textfelder sind zwar sichtbar, jedoch kann ich sie nicht mit dem Cursor anwählen.
Anbei der verwendete Code (HINWEIS: Wurde bis jetzt nur für den Firefox geschrieben)

Vielen Dank schonmal im Voraus
Viele Grüße

Code der HTML-Seite (Login ganz unten im div-Tag "innertoplogin")

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
  
  
<html>  
 <head>  
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
  <title>Moebelhaus Hartmann</title>  
  <link rel="stylesheet" type="text/css" href="style.css" />  
 </head>  
 <body>  
  <div id="content">  
   <div id="innertop">  
    <!--<img src="img/hartmann-logo.jpg" border="0" width="600" /><br /><br />-->  
   </div>  
   <div id="innercenter">  
   Main  
   </div>  
  
  
  
   <div id="innerleft">  
    <div id="whitespacerl"></div>  
    <div id="search" align="center">  
    <form name="produktsuche" action="#" method="post">  
     <input type="text" name="suchwort" value="Produktsuche" size="14" class="textfeld" onClick="if(this.value=='Produktsuche'){this.value='';}" onBlur="if(this.value==''){this.value='Produktsuche';}"></input>&nbsp;&nbsp;  
    </form>  
    </div>  
    <div id="menu">  
    <table border="0" width="150" cellpadding="5" cellspacing="0">  
     <tr>  
      <td width="100%" onMouseOver="this.bgColor='#FFFFFF'" onMouseOut="this.bgColor='#C00000'" align="center" style="cursor:pointer;"><a href="#">K&uuml;che</a></td>  
     </tr>  
     <tr>  
      <td width="100%" onMouseOver="this.bgColor='#FFFFFF'" onMouseOut="this.bgColor='#C00000'" align="center" style="cursor:pointer;"><a href="#">Bad</a></td>  
     </tr>  
     <tr>  
      <td width="100%" onMouseOver="this.bgColor='#FFFFFF'" onMouseOut="this.bgColor='#C00000'" align="center" style="cursor:pointer;"><a href="#">Wohnbereich</a></td>  
     </tr>  
     <tr>  
      <td width="100%" onMouseOver="this.bgColor='#FFFFFF'" onMouseOut="this.bgColor='#C00000'" align="center" style="cursor:pointer;"><a href="#">Schlafzimmer</a></td>  
     </tr>  
     <tr>  
      <td width="100%" onMouseOver="this.bgColor='#FFFFFF'" onMouseOut="this.bgColor='#C00000'" align="center" style="cursor:pointer;"><a href="#">B&uuml;ro</a></td>  
     </tr>  
     <tr>  
      <td width="100%" onMouseOver="this.bgColor='#FFFFFF'" onMouseOut="this.bgColor='#C00000'" align="center" style="cursor:pointer;"><a href="#">Kinderzimmer</a></td>  
     </tr>  
     <tr>  
      <td width="100%" onMouseOver="this.bgColor='#FFFFFF'" onMouseOut="this.bgColor='#C00000'" align="center" style="cursor:pointer;"><a href="#">Beleuchtung</a></td>  
     </tr>  
     <tr>  
      <td width="100%" onMouseOver="this.bgColor='#FFFFFF'" onMouseOut="this.bgColor='#C00000'" align="center" style="cursor:pointer;"><a href="#">Accesoires</a></td>  
     </tr>  
    </table>  
    </div>  
   </div>  
   <div id="innerright">  
    <div id="whitespacerr"></div>  
    Navi rechts  
   </div>  
   <div id="innerbottoml"></div>  
   <div id="innerbottom" align="center">  
    <a href="#">AGB</a>&nbsp;&nbsp;&nbsp;  
    <a href="#">Impressum</a>&nbsp;&nbsp;&nbsp;  
    <a href="#">Kontakt</a>&nbsp;&nbsp;&nbsp;  
    <a href="#">Filialen</a>  
   </div>  
   <div id="innerbottomr"></div>  
  
   <div id="innertopl">  
    &nbsp;Herzlich Willkommen <b>Gast</b>  
   </div>  
   <div id="innertopr" valign="bottom">  
    Benutzername: &nbsp;&nbsp; Passwort:  
   </div>  
   <div id="innertoplogin">  
    <form name="loginform" action="#" method="post">  
     <input type="text" name="username" size="18" class="loginelement" value="gg">&nbsp;&nbsp;&nbsp;&nbsp;  
     <input type="password" name="passwort" size="18" class="loginelement">  
    </form>  
   </div>  
  </div>  
 </body>  
</html>

... und das Stylesheet:

  
body {  
  color: black; background-color: white;  
  font-size: 76%;  
  font-family: Verdana,sans-serif,Arial;  
  margin: 0; padding: 1em;  
}  
.textfeld {  
 height: 15px;  
 font-size: 71%;  
 font-family: Verdana,sans-serif,Arial;  
 border: none;  
 border-bottom: 1px solid black;  
 border-top: 1px solid black;  
 border-left: 1px solid black;  
 border-right: 1px solid black;  
 border-color: #000000;  
 font-weight: bold;  
 text-align: center;  
}  
.loginelement {  
 height: 15px;  
 font-family: Verdana,sans-serif,Arial;  
 border: none;  
 border-bottom: 1px solid black;  
 border-top: 1px solid black;  
 border-left: 1px solid black;  
 border-right: 1px solid black;  
 border-color: #000000;  
 font-weight: bold;  
 text-align: center;  
}  
.button {  
 height: 18px;  
 font-size: 71%;  
 font-family: Verdana,sans-serif,Arial;  
 border: none;  
 border-bottom: 1px solid black;  
 border-top: 1px solid black;  
 border-left: 1px solid black;  
 border-right: 1px solid black;  
 border-color: #000000;  
}  
a {  
 font-size: 71%;  
}  
a:link {  
 color: #C10000;  
 text-decoration: none;  
 font-weight: bold;  
}  
a:visited {  
 color: #C10000;  
 text-decoration: none;  
 font-weight: bold;  
}  
a:focus {  
 color: #EE0000;  
 background-color: #FFC1C1;  
 font-weight: bold;  
}  
a:hover {  
 color: #EE0000;  
 text-decoration: none;  
 background-color: #FFC1C1;  
 font-weight: bold;  
}  
a:active {  
 color: #EE0000;  
 background-color: #FFC1C1;  
 font-weight: bold;  
}  
  
#menu a {  
 font-size: 100%;  
}  
#menu a:link {  
 color: #000000;  
 text-decoration: none;  
 font-weight: bold;  
}  
#menu a:visited {  
 color: #000000;  
 text-decoration: none;  
 font-weight: bold;  
}  
#menu a:focus {  
 color: #EE0000;  
 background-color: #FFFFFF;  
 font-weight: bold;  
}  
#menu a:hover {  
 color: #EE0000;  
 background-color: #FFFFFF;  
 text-decoration: none;  
 font-weight: bold;  
}  
#menu a:active {  
 color: #EE0000;  
 background-color: #FFFFFF;  
 font-weight: bold;  
}  
  
div#content {  
 margin-top: 0px;  
 border: 1px solid #C00000;  
 border-left: none;  
 border-right: none;  
 left: 50%;  
 top: 0px;  
 margin-left: -450px;  
 width: 900px;  
 height: 680px;  
 position: absolute;  
}  
div#innertop {  
 position: absolute;  
 margin-top: 0px;  
 margin-left: 150px;  
 height: 150px;  
 width: 600px;  
}  
div#innertopl {  
 text-align: left;  
 font-size: 72%;  
 color: #C10000;  
 margin-top: 130px;  
 margin-left: 150px;  
 height: 20px;  
 width: 300px;  
 float: left;  
}  
div#innertopr {  
 text-align: left;  
 font-size: 72%;  
 color: #C10000;  
 margin-top: -35px;  
 margin-left: 500px;  
 height: 15px;  
 width: 300px;  
 float: left;  
}  
div#innertoplogin {  
 text-align: left;  
 font-size: 72%;  
 color: #C10000;  
 margin-top: -20px;  
 margin-left: 500px;  
 height: 20px;  
 width: 300px;  
 float:left;  
 z-index: 10;  
}  
div#innercenter {  
 border-top: solid 1.5px #C00000;  
 position: absolute;  
 margin-top: 150px;  
 margin-left: 150px;  
 width: 600px;  
 height: 500px;  
}  
div#innerleft {  
 background-color: #C00000;  
 position: absolute;  
 margin-top: 0px;  
 margin-left: 0px;  
 width: 150px;  
 height: 650px;  
}  
div#innerright {  
 background-color: #C00000;  
 position: absolute;  
 margin-top: 0px;  
 margin-left: 750px;  
 width: 150px;  
 height: 650px;  
}  
div#whitespacerl {  
 background-color: #FFFFFF;  
 position: absolute;  
 margin-top: 150px;  
 margin-left: 0px;  
 width: 150px;  
 height: 1.5px;  
}  
div#whitespacerr {  
 background-color: #FFFFFF;  
 position: absolute;  
 margin-top: 150px;  
 margin-left: 0px;  
 width: 150px;  
 height: 1.5px;  
}  
div#innerbottom {  
 border-top: solid 1.5px #C00000;  
 background-color: #FFFFFF;  
 position: absolute;  
 margin-top: 650px;  
 margin-left: 150px;  
 width: 600px;  
 height: 20px;  
 padding: 4px;  
}  
div#innerbottoml {  
 border-top: solid 1.5px #FFFFFF;  
 background-color: #C00000;  
 position: absolute;  
 margin-top: 650px;  
 margin-left: 0px;  
 width: 150px;  
 height: 28px;  
}  
div#innerbottomr {  
 border-top: solid 1.5px #FFFFFF;  
 background-color: #C00000;  
 position: absolute;  
 margin-top: 650px;  
 margin-left: 750px;  
 width: 150px;  
 height: 28px;  
}  
div#menu {  
 margin-top: 170px;  
}  
div#search {  
 position: absolute;  
 margin-left: 0px;  
 margin-top: 120px;  
 width: 150px;  
 height: 30px;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln