Probleme mit CSS / Input-Feld nicht fokusierbar von skulli, 14.04.2008 18:28

Probleme mit CSS / Input-Feld nicht fokusierbar

skulli 14.04.2008 18:28

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

Probleme mit CSS / Input-Feld nicht fokusierbar
ChrisB 15.04.2008 00:09

css
– Informationen zu den Bewertungsregeln
Hi,

ich habe hier ein kleines Problem beim Erstellen eines Layouts mit HTML+CSS!

Das naechste Mal stelle bitte ein Online-Beispiel zur Verfuegung, damit man sich den ganzen Krempel nicht Copy&Paste-n muss.

Die Textfelder sind zwar sichtbar, jedoch kann ich sie nicht mit dem Cursor anwählen.

Das ist auch kein Wunder, weil -

(Login ganz unten im div-Tag "innertoplogin")
- ueber diesem das inhaltsleere, von dir absolute positionierte #innertop drueber liegt.
Was man im uebrigen mit FireBug auch ganz schnell rausfinden kann ...

MfG ChrisB
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Probleme mit CSS / Input-Feld nicht fokusierbar
  
  skulli 15.04.2008 11:31
  
  css
  – Informationen zu den Bewertungsregeln
  Hallo und vielen Dank für die Antwort,
  
  Das naechste Mal stelle bitte ein Online-Beispiel zur Verfuegung, damit man sich den ganzen Krempel nicht Copy&Paste-n muss.
  
  ja, das hört sich allerdings vernünftig an, werd ich das nächste mal machen!
  ueber diesem das inhaltsleere, von dir absolute positionierte #innertop drueber liegt.
  okay, danke für den Hinweis. Jetzt läuft es wieder.
  
  Was man im uebrigen mit FireBug auch ganz schnell rausfinden kann ...
  
  hmm, Firebug hat mir hier aber keine Fehler angezeigt!
  
  Viele Grüße
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Probleme mit CSS / Input-Feld nicht fokusierbar
    
    ChrisB 15.04.2008 20:38
    
    css
    
    – Informationen zu den Bewertungsregeln
    Hi,
    
    Was man im uebrigen mit FireBug auch ganz schnell rausfinden kann ...
    
    hmm, Firebug hat mir hier aber keine Fehler angezeigt!
    
    Es ist ja auch kein syntaktischer Fehler - sondern war einfach nur "gestalterischer Bloedsinn". Sowas kann ein Computer natuerlich nur schwer erkennen.
    
    Du solltest dort ja (nur) nicht nach Syntaxfehlern schauen, sondern damit das angezeigte Dokument "inspizieren", bzw. herausfinden, welches Element wo "liegt", und ggf. ueber welchen anderen.
    
    MfG ChrisB
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

skulli: Probleme mit CSS / Input-Feld nicht fokusierbar