[Floele]

Richtig, man kann JEDES Element mit CSS formatieren, sogar head. Schonmal

head,title {display:block;}

ausprobiert?

Das mann es "sooft man will" benutzen kann habe ich schon gesagt

[Slayer]

Alles klar... Dankeschön!
Was soll diese Formation für head bringen

[Floele]

Dass man den Titel sieht, was denn sonst

[Slayer]

Einen Sinn macht das zwar nicht, habe jetzt habe ich verstanden was du mir damit vermitteln willst

Wir sollten nicht zu weit vom Thema abweichen...

[evo2]

So, da bin ich wieder

Wollte jetzt in den Content ein Formular einbauen mit Hilfe von CSS.
Hab das nach folgender Anleitung gemacht:
http://www.einfach-f...formulare/tag1/

Aber irgendwie verschiebt sich dann alles bei mir. Hab auch verschiedene Sachen ausprobiert, aber nix wollte so richtig funktionieren.
Nach dem ersten Input ist alles weit nach unten verschoben. (Siehe Anhang)

CSS:(nicht komplett, nur die Dinge, wo ich denke das sie wichtig sind

#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;
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:        5em;
 margin-right: .3em;
}
input[type=text], select {
 float:        left;
}
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;
}

HTML

<!-- MAINPAGE START -->

        <div id="content">

        <!-- FORMULAR Start-->
            
            <form action="foo.php">

 <fieldset>

  <legend>Beispielformular</legend>

   <label class="left">Text:</label>

   <input type="text" size="20" /><br />

   <label class="left">Auswahl:</label>

   <select size="1">

    <option value="auswahl1">Auswahl 1</option>

    <option value="auswahl2">Auswahl 2</option>

   </select><br />

   <input type="radio" name="rb" value="ja" class="right" />

   <label>Entweder</label><br />

   <input type="radio" name="rb" value="nein" class="right" />

   <label>Oder</label><br />

   <input type="checkbox" value="sowohl" class="right" />

   <label>Sowohl</label><br />

   <input type="checkbox" value="alsauch" class="right" />

   <label>Als auch</label><br />

   <input type="submit" value="Bestellen" class="right" />

 </fieldset>

</form>
            
        <!-- FORMULAR Ende-->
        
        </div>

<!-- MAINPAGE END -->

Mfg
evo2

Angehängte Miniaturbilder

• 

[Slayer]

Oh je, mache das Forumlar bitte nicht so, wie es in dem Tutorial steht.
Lösche mal den Inhalt und füge für ein Formular mal folgendes ein:

<form action="auswertung.php" method="post">

Benutzername: <input type="text" name="Benutzername" length="15"><br>
 Passwort: <input type="password" name "Passwort" length="15"><br>

<input type="submit" value="Abschicken">

</form>

Das ist jetzt allerdings nur ein Beispiel, wie so ein Formular aufgebaut sein sollte. Das musst du natürlich noch entsprechend ändern. Aber du brauchst keine Labels und Legends für ein Formular.

Teste es einfach mal

Ach ja und wegen deinen Abständen und dem leeren Platz, das liegt alles an dem CSS-Code. Habe es mir mal angesehen und da sind viele padding's und margin's drin. Also ändere das auch mal.

Dieser Beitrag wurde von Slayer bearbeitet: 15. Juni 2005 - 12:23

[Floele]

Zitat

Aber du brauchst keine Labels und Legends für ein Formular.

*hust*
Doch, die braucht (normalerweise) jedes gute Formular. An deiner Stelle würde ich mich erstmal informieren bevor du anderen Ratschlägen über solche Themen gibst. Das ist eine Sache der "Accessibility" und die Benutzung von Labels hat u.a. auch den Vorteil dass man ein Textfeld (oder eine Checkbox) durch den Text und nicht nur das Feld selber anklicken kann. Das Tutorial erzählt hier also keineswegs Mist.

Dein Formular dagegen ist eher ein Beispiel dafür wie man es nicht machen sollte

Edit: Was mir grade übrigens auffällt: Die Labels in dem obigen Code sind nicht mit den Formularfeldern verknüpft. Das sollte noch geändert werden sonst bringt es nicht viel.

<label for="mein-input">Beschriftung</label>
<input type="text" id="mein-input" name="test" />

Dieser Beitrag wurde von Floele bearbeitet: 15. Juni 2005 - 13:15

[evo2]

Hi.

Hab jetzt die ganze Zeit probiert, daß die input Felder nach oben kommen. Aber ich finde den Fehler nicht.
Die bleiben da unten
Ausgerichtet sind sie ja schön, nur halt an der falschen Stelle.

[QUOTE]
Edit: Was mir grade übrigens auffällt: Die Labels in dem obigen Code sind nicht mit den Formularfeldern verknüpft. Das sollte noch geändert werden sonst bringt es nicht viel.
[QUOTE]

Die sind bis jetzt nur zum testen da, also zum Ausrichten usw.

Hier jetzt mal meine ganze css und html datei:
css:

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;
 margin-right: .3em;
}
input[type=text], select {
 float:        left;
}
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;
}

HTML

<?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>

<!-- HEADER & BANNER START -->
   
        <div class="header">
            <img src="pics/logo_klein.jpg" alt="logo" />
        

        <div class="banner">
            <img src="pics/logo_klein.jpg" alt="logo" />
        </div></div>
        
<!-- HEADER & BANNER END -->
<!-- TOPNAV START -->

        <div class="topnav">
            <ul id="menu">|
            <li><a href="index.php">Section1</a></li>|
            <li><a href="index.php">Section2</a></li>|
            <li><a href="index.php">Section3</a></li>|
            <li><a href="index.php">Section4</a></li>|
            <li><a href="index.php">Section5</a></li>|
            <li><a href="index.php">Section6</a></li>|
            </ul>
        </div>

<!-- TOPNAV END -->
<!-- LEFTMENU START -->

        <div id="leftmenu">
            
            <div>
                <h4>Sections</h4>
                <ul>
    <li><a href="index.php">Section1</a></li>
                <li><a href="index.php">Section2</a></li>
     	 <li><a href="index.php">Section3</a></li>
       	 <li><a href="index.php">Section4</a></li>
          <li><a href="index.php">Section5</a></li>
                <li><a href="index.php">Section6</a></li>
                <li><a href="index.php">Section7</a></li>
                <li><a href="index.php">Section8</a></li>
                <li><a href="index.php">Section9</a></li>
                <li><a href="index.php">Section10</a></li>
       </ul>
            </div>
            
            <div>
                <h4>Sections2</h4>
                <ul>
    <li><a href="index.php">Section1</a></li>
                <li><a href="index.php">Section2</a></li>
                <li><a href="index.php">Section3</a></li>
                <li><a href="index.php">Section4</a></li>
          </ul>
            </div>
            
            <div>
                <h4>Sections3</h4>
                <ul>
    <li><a href="index.php">Section1</a></li>
                <li><a href="index.php">Section2</a></li>
                <li><a href="index.php">Section3</a></li>
                <li><a href="index.php">Section4</a></li>
          </ul>
            </div>
            
        </div>

<!-- LEFTMENU END -->
<!-- MAINPAGE START -->

        <div id="content">

        <!-- FORMULAR Start-->
            
            <form action="foo.php">

            <fieldset>

              <legend>Beispielformular</legend>
               <br />
               <label class="left">Text:</label>
               <input type="text" size="20" /><br />
               <label class="left">langer Text:</label>
               <input type="text" size="20" /><br />
               <label class="left">noch längerer Text:</label>
               <input type="text" size="20" /><br />
               <input type="submit" value="Test" class="right" />
             </fieldset>

            </form>
            
        <!-- FORMULAR Ende-->
        
        </div>

<!-- MAINPAGE END -->
<!-- FOOTER START -->
        
        <div class="footer">
            Content Management System Version 0.1alpha. (C) 2005 by evo2
            - All Rights Reserved.<br />
<!-- VALID -->

        </div>
        
<!-- FOOTER END -->
        
   </body>
</html>

Mfg
evo2

[Slayer]

Dein Problem mit den Abständen ist Folgendes:

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

label.left {
float:        left;
text-align:   right;
width:        10em;
margin-right: .3em;
}

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;
}

Du hast nach links und rechts immer sehr große Abstände. Aber ich finde nichts, warum du nach oben so viel Abstand hast.

[Floele]

So ist es richtiger. Du musst einfach die Ränder der Inputs/Labels anpassen.

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;
}

[evo2]

Hi.

Erstmal danke nochmal.
Aber ich glaub wir haben uns ein bißchen falsch verstanden.
Ich will das das ganze Formular mit Button höher kommt.
Also einfach da ganz oben hin.
(siehe Screenshot)

Mfg
evo2

Angehängte Miniaturbilder

• 

[Floele]

Achso...das habe ich gar nicht gesehen weil der "Fehler" weder im IE noch in FF auftritt. Naja, aber ich wüsste nicht was man dagegen tun kann, da es eigentlich sogar ein korrektes Verhalten ist.

Dieser Beitrag wurde von Floele bearbeitet: 15. Juni 2005 - 15:54