XHTMLforum - Einzelnen Beitrag anzeigen

evo2 · #1 (**permalink**) 15.06.2005, 17:24

Hi.

Hab erst vor ein paar Tagen mit CSS angefangen und wollte damit meine Seite gestalten.
Ging soweit auch alles ganz gut, aber jetzt wollte ich ein Formular in die Seite einfügen, was aber in Opera 8 zu weit unten angezeigt wird.
Im IE 6 hingegen wird das Formular an der richtigen Stelle angezeigt, aber dafür sind die anderen Boxen verschoben.

Kann mir einer sagen was ich falsch gemacht habe?

HTML

Code:

<?xml version="1.0" encoding="windows-1252"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//de"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

  <head>
     <title>TEST</title>
     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  </head>

  <body>


  
       <div class="header">
           [img]pics/logo_klein.jpg[/img]
       

       <div class="banner">
           [img]pics/logo_klein.jpg[/img]
       </div></div>
       



       <div class="topnav">
           <ul id="menu">|[*]Section1|[*]Section2|[*]Section3|[*]Section4|[*]Section5|[*]Section6|[/list]       </div>




       <div id="leftmenu">
           
           <div>
               <h4>Sections</h4>
               <ul>[*]Section1[*]Section2[*]Section3[*]Section4[*]Section5[*]Section6[*]Section7[*]Section8[*]Section9[*]Section10[/list]           </div>
           
           <div>
               <h4>Sections2</h4>
               <ul>[*]Section1[*]Section2[*]Section3[*]Section4[/list]           </div>
           
           <div>
               <h4>Sections3</h4>
               <ul>[*]Section1[*]Section2[*]Section3[*]Section4[/list]           </div>
           
       </div>




       <div id="content">

       
           
           <form action="foo.php">

           <fieldset>

             <legend>Beispielformular</legend>
              

              <label class="left">Text:</label>
              <input type="text" size="20" />

              <label class="left">langer Text:</label>
              <input type="text" size="20" />

              <label class="left">noch längerer Text:</label>
              <input type="text" size="20" />

              <input type="submit" value="Test" class="right" />
            </fieldset>

           </form>
           
       
       
       </div>



       
       <div class="footer">
           Content Management System Version 0.1alpha. (C) 2005 by evo2
           - All Rights Reserved.



       </div>
       

       
  </body>
</html>

CSS

Code:

body
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:0.8em;
  color:#000000;
}

a:link
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:0.8em;
  color:#000000;
  text-decoration:none;
}

a:visited
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:0.8em;
  color:#000000;
  text-decoration:none;
}

a:hover
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:0.8em;
  color:#FF090F;
  text-decoration:underline;
}

a:active
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:0.8em;
  color:#000000;
  text-decoration:none;
}

a:focus
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:0.8em;
  color:#000000;
  text-decoration:none;
}

div.header
{
  margin:10px 2% 0px 2%;
  border:1px solid #000000;
  border-bottom-width:0px;
  padding:10px;
  font-weight:normal;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
}

div.banner
{
  float:right;
}

#leftmenu
{
  float:left;
  width:14%;
  text-align:left;
  margin:10px 2% 10px 2%;
}

#leftmenu div
{
  min-height:80px;
  margin-bottom:5px;
  padding:5px;
  border:1px solid #000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
 
}

div.topnav
{
  margin:0px 2% 0px 2%;
  border:1px solid #000000;
  padding:10px;
  text-align:center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
}

#content
{
  min-height:500px;
  margin:10px 2% 10px 17%;
  border:1px solid #000000;
  padding:10px;
  text-align:left;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
}

#content div
{
  min-height:80px;
  margin-bottom:10px;
  padding:5px;
  border:1px solid #000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
}

div.footer
{
  clear:both;
  margin:10px 2% 0px 2%;
  border:1px solid #000000;
  padding:5px;
  text-align:center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
}
ul#menu
{
margin:0;
padding:0;
}

ul#menu li
{
padding:0 2% 0 2%;
margin:0;
list-style:none;
display:inline;
}

input
{
  border      : 1px solid #DDD;
  background  : #F4F4F4;
  padding:0 2% 0 2%;
  margin:5px;
}

input:focus
{
  border      : 1px solid #AAA;
  background  : #FFF;
}

textarea
{
  border      : 1px solid #DDD;
  background  : #F4F4F4;
  padding:0 2% 0 2%;
  margin:5px;
}

textarea:focus
{
  border      : 1px solid #AAA;
  background  : #FFF;
}

label.left {
float:        left;
text-align:   right;
width:        10em;
padding:0.5em 0.3em 0.5em 0;
}

input[type=text], select {
float:        left;
margin:0.4em 0;
}

input.right {
 float:        left;
 width:        auto;
 clear:        both;
 margin-left:  5.3em;
 margin-right: .3em;
}

input[type=checkbox].right,input[type=radio].right,input[type=submit].right {
 margin-left: 6.3em;
}

form br {
 clear:       both;
}

Mfg
evo2