zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Tabelle formatieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.07.2008, 18:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2008
Beiträge: 5
mondy befindet sich auf einem aufstrebenden Ast
Reden Tabelle formatieren

Hallo,

ich bin mittlerweile der Verzweiflung nahe...

Ich habe meine Formulare früher immer mit Tabellen formatiert.
Das hat auch immer gut funktioniert.

Naja, da ich mich auch etwas weiter entwickeln möchte, wollte ich zu Testzwecken jetzt einmal ein Formular mit CSS formatieren.

Die Feldbeschreibung soll über den Feldern linksbündig stehen.
Die Anordnung soll so sein:

[Vorname] [Nachname]
[Strasse]
[Plz] [Ort]
[Bemerkung]

Code:
<form id="adresse" name="adresse" method="post" action="">
  <label for="textfield">Vorname</label>
  <input name="vorname" type="text" id="vorname" size="15" maxlength="25" />
  <label for="label">Nachname</label>
  <input name="nachname" type="text" id="label" size="30" />
  <label for="textfield">Strasse</label>
  <input name="strasse" type="text" id="strasse" size="30" />
  <label for="textfield">Plz</label>
  <input name="plz" type="text" id="plz" size="6" maxlength="6" />
  <label for="textfield">Ort</label>
  <input name="ort" type="text" id="ort" size="30" />
  <label for="textfield">Bemerkung:</label>
  <textarea name="textfield" cols="30" rows="5" id="textfield"></textarea>
</form>
Kann mir bitte jemand einen Gefallen tun, und mir schreiben, wie ich das hin bekomme? Ich bin mittlerweile schon so weit, dass ich das wieder mit Tabellen mache

Danke!!!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.07.2008, 20:16
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Du brauchst die CSS-Eigenschaften float (um die Elemente jeweils nebeneinander zu setzen) und clear (um dieses Nebeneinandersetzten für die nächste Zeile neu zu setzen).
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.07.2008, 21:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2008
Beiträge: 5
mondy befindet sich auf einem aufstrebenden Ast
Standard

Ich habe mir jetzt im Schweiße meines Angesichtes etwas zusammen gebastelt.
Ich kann mir aber nicht vorstellen, dass das so richtig ist. Scheint mir viel zu kompliziert.

Kann mir da bitte noch mal jemand helfen.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
label {
	clear: left;
	float: left;
	width: 50px;
}
input {
	text-align:left;
	top:18px;
	position:fixed;
	float: left;
	clear: left;
}
.name {
	float: left;
	clear: none;
	position: relative;
	left: 90px;
}
.namefield {
	color: #FF3300;
	float: left;
	clear: none;
	position: relative;
	left: 40px;
}
.ort {
	clear: none;
	float: left;
	position: relative;
	left: -265px;
	top: 75px;
}
.ortfield {
	float: left;
	clear: left;
	position: relative;
	left: 110px;
	top: -22px;
}
form {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
-->
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <label for="vorname" class="vorname">vorname</label>
  <input name="vorname" type="text" id="vorname" size="15" />
  <label for="name" class="name">name</label>
  <input name="name" type="text" id="name" size="40" class="namefield"/>
  <label for="strasse">strasse</label>
  <input type="text" name="strasse" id="strasse" />
  <label for="plz">plz</label>
  <input name="plz" type="text" id="plz" size="10"/>
  <label for="ort" class="ort">ort</label>
  <input name="ort" type="text" class="ortfield" id="ort" />
</form>
</body>
</html>
Mit Zitat antworten
  #4 (permalink)  
Alt 02.07.2008, 22:36
Benutzerbild von Fanatic
Veritas Aequitas
neuer user
 
Registriert seit: 02.07.2008
Beiträge: 8
Fanatic befindet sich auf einem aufstrebenden Ast
Standard

Das habe ich jetzt mal auf die schnelle hingebastelt. Ist nicht perfekt, aber kommt glaube ich dem nahe, was du haben willst.
Es kann sein, das es im IE nicht richtig angezeigt wird, aber ich kann das nicht testen, da ich unter linux arbeite und IE nicht auf meinen Rechner kommt. Ich hoffe ich konnte dir damit ein wenig helfen.

mfg, Fanatic

Code:
<html>
<head>
<title></title>
<style type="text/css">

#inputs
{
float:left;
margin:0;
padding:0;
margin-left:0;
margin-top:0;
}


#labels
{
float:left;
width:100px;
}

</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <div id="labels">
  <label for="vorname" class="vorname">vorname</label><br>
  <label for="name" class="name">name</label><br>
  <label for="plz">plz</label><br>
  <label for="strasse">strasse</label><br>
  <label for="ort" class="ort">ort</label><br>
  </div>
  <div id="inputs">
  <input name="vorname" type="text" id="vorname" size="15" /><br>
  <input name="name" type="text" id="name" size="40" class="namefield"/> <br>
  <input type="text" name="strasse" id="strasse" /><br>
  <input name="plz" type="text" id="plz" size="10"/><br>
  <input name="ort" type="text" class="ortfield" id="ort" /><br>
  </div>
</form>
</body>
</html>
Mit Zitat antworten
  #5 (permalink)  
Alt 02.07.2008, 23:35
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Ein möglicher Lösungsansatz wäre folgender:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>form</title>
    <style type="text/css">
        form p {
            clear: both;
        }
        label {
            float: left;
            padding: 0 1em .5em 0;
        }
        input,
        textarea {
            display: block;
        }
    </style>
</head>

<body>
    <form method="post" action="" id="form1">
        <p>
            <label for="firstname">
                Vorname
                <input type="text" name="firstname" id="firstname" />
            </label>
            <label for="name">
                Name
                <input type="text" name="name" id="name" />
            </label>
        </p>
        <p>
            <label for="street">
                Straße
                <input type="text" name="street" id="street" />
            </label>
        </p>
        <p>
            <label for="zip">
                PLZ
                <input type="text" name="zip" id="zip" />
            </label>
            <label for="city">
                Ort
                <input type="text" name="city" id="city" />
            </label>
        </p>
        <p>
            <label for="comment">
                Bemerkung
                <textarea name="comment" cols="39" rows="5" id="comment"></textarea>
            </label>
        </p>
    </form>
</body>
</html>
Mit Zitat antworten
  #6 (permalink)  
Alt 03.07.2008, 03:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

@Inta: dein Beispielcode ist nicht valide. So wäre es besser:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>form</title>
    <style type="text/css">
        form div {
            clear: both;
        }
        label {
            float: left;
            padding: 0 1em .5em 0;
        }
        input,
        textarea {
            display: block;
        }
    </style>
</head>

<body>
    <form method="post" action="" id="form1">
        <div>
            <label for="firstname">Vorname</label>
            <input type="text" name="firstname" id="firstname" />
            <label for="name">Name</label>
            <input type="text" name="name" id="name" />
        </div>
        <div>
            <label for="street">Straße</label>
            <input type="text" name="street" id="street" />
        </div>
        <div>
            <label for="zip">PLZ</label>
            <input type="text" name="zip" id="zip" />
            <label for="city">Ort</label>
            <input type="text" name="city" id="city" />
        </div>
        <div>
            <label for="comment">Bemerkung</label>
            <textarea name="comment" cols="39" rows="5" id="comment"></textarea>
        </div>
    </form>
</body>
</html>
Mit Zitat antworten
  #7 (permalink)  
Alt 03.07.2008, 09:05
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Zitat:
Zitat von threadi Beitrag anzeigen
@Inta: dein Beispielcode ist nicht valide. So wäre es besser:
Natürlich ist mein Beispiel valide.

Warum sollte ein Div besser sein als ein P? Divs haben keine semantische Bedeutung, wenn du es austauschen möchtest, dann gegen ein Fieldset.
Mit Zitat antworten
  #8 (permalink)  
Alt 03.07.2008, 11:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2008
Beiträge: 5
mondy befindet sich auf einem aufstrebenden Ast
Standard

Super!!!
Das ist genau das was ich suchte

Gibt es ein zu empfehlendes Einsteiger Tutorial?

Danke noch einmal an alle!
Mit Zitat antworten
  #9 (permalink)  
Alt 03.07.2008, 14:00
Benutzerbild von Hallenkicker
Fußballgott ;-)
neuer user
 
Registriert seit: 26.07.2006
Ort: Gelsenkirchen-Buer
Beiträge: 46
Hallenkicker befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von inta Beitrag anzeigen
Natürlich ist mein Beispiel valide.

Warum sollte ein Div besser sein als ein P? Divs haben keine semantische Bedeutung, wenn du es austauschen möchtest, dann gegen ein Fieldset.
Wenn ich das richtig sehe, dann geht es wohl eher darum, dass Du die Input-Felder durch die Label-Tags umschliesst

Code:
            <label for="firstname">
                Vorname
                <input type="text" name="firstname" id="firstname" />
            </label>
            <label for="name">
                Name
                <input type="text" name="name" id="name" />
            </label>
während bei ihm die Input-Felder nach den Label-Tags folgen, so wie es auch in sämtlichen Dokumentationen vermerkt ist.

Code:
            <label for="firstname">Vorname</label>
            <input type="text" name="firstname" id="firstname" />
            <label for="name">Name</label>
            <input type="text" name="name" id="name" />
P oder DIV ist da wohl weniger der Kritikpunkt.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.07.2008, 14:05
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Zitat:
Zitat von Hallenkicker Beitrag anzeigen
Wenn ich das richtig sehe, dann geht es wohl eher darum, dass Du die Input-Felder durch die Label-Tags umschliesst
Achso, das hab ich völlig übersehen. Es ist aber absolut legitim Inputs und dergleichen mit dem Label zu umschließen.

Zitat:
Zitat von Hallenkicker Beitrag anzeigen
während bei ihm die Input-Felder nach den Label-Tags folgen, so wie es auch in sämtlichen Dokumentationen vermerkt ist.
Ist das so in sämtlichen Dokumentationen vermerkt?
Das wär mir neu, hier zum Beispiel sind beide Wege aufgezeigt:
Forms in HTML documents
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Tabelle mit H1 oder ähnlichen formatieren möglich? basillio CSS 2 08.11.2010 22:53
Tabelle mit CSS Formatieren? manolo CSS 1 28.05.2009 15:49
Tabelle formatieren mike-loewe CSS 1 10.04.2008 18:54
Tabelle als .css formatieren Meralus CSS 1 14.03.2008 11:31
Tabelle mit CSS formatieren escholz CSS 1 07.03.2007 10:12


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:56 Uhr.