zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Formular mit fieldset gestalten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 03.04.2013, 23:26
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

danke für die tollen tipps hab's nun mit zwei Klasse gelöst:

Code:
#myform label.anrede, #myform .radio{
float:left;
}

#myform label.anrede{
width:8em;
text-indent: 0.5em;
}
HTML-Code:
<fieldset>
           <legend>Kontakformular:</legend>
           <label for="anrede">Anrede</label>
           <label for="frau" class="anrede"><input class="radio" id="frau" name="anrede" type="radio" value="" />Frau</label>
           <label for="mann" class="anrede"><input class="radio" id="mann" name="anrede" type="radio" value="" />Herr</label>
           <label for="firma">Firma<input id="firma" name="firma" type="text" value="" /></label>
           <label for="vornachname">Name*<input id="vornachname" name="vornachname" type="text" value="" /></label>
           <label for="strassehausnr">Stra&szlig;e und Haus-Nr.<input id="strassehausnr" name="strassehausnr" type="text" value="" /></label>
           <label for="plzort">PLZ und Ort<input id="plzort" name="plzort" type="text" value="" /></label>
           <label for="telefon">Telefon<input id="telefon" name="telefon" type="text" value="" /></label>
           <label for="email">E-Mail*<input id="email" name="email" type="text" value="" /></label>
           <label for="anfrage">Ihre Anfrage:</label>
           <label for="anfrage"><textarea></textarea></label>
          </fieldset>
bedauerlicherweise schießt mir das Label Firma nach oben durch das float:left. Leider funktioniert clear:left nicht
TESTSEITE

Geändert von seeadler (03.04.2013 um 23:30 Uhr)
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 03.04.2013, 23:38
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

Doch, genau das löst dein Problem, clear: left; für das Label von „Firma“.
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 03.04.2013, 23:54
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

perfekt; hätte einfach den tab aktualisieren sollen

Könnte ich eigentlich die id im <input> Tag auch weglassen?
Mit Zitat antworten
  #14 (permalink)  
Alt 04.04.2013, 00:08
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

Ja könntest du, allerdings ist dann das Label in älteren IEs nicht mehr klickbar.
Mit Zitat antworten
  #15 (permalink)  
Alt 04.04.2013, 23:12
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

kann mir jemand sagen warum die Breiten der Textboxen im Vergleich zu Textarea, obwohl ich für beide 20em definiert habe, dennoch unterschiedlich von der Breite sind?
TESTSEITE
Mit Zitat antworten
  #16 (permalink)  
Alt 05.04.2013, 00:05
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Warum das bei der Einheit em so ist kann ich nicht sagen, aber den Effekt habe ich auch schon festgestellt. Ich vergebe dann für die Textarea immer ein bisschen mehr Breite bis es optisch passt oder ich nehme für feste Breiten Pixel, ist aber unschön wenn jemand den Text zoomt.
Du müsstet also in der Textarea 20.5em nehmen.

Übrigens, wenn man auf der Seite zoomt fällt sie auseinander.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #17 (permalink)  
Alt 05.04.2013, 09:40
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

das mit dem zoom habe ich auch schon festgestellt - sieht schrecklich aus...........wie kann man das am effektivsten unterbinden?
**liegt es vielleicht daran, dass ich mit auch die einheit Pixel (px) definiert habe?**
Ist es zu empfehlen, nur mit (em) zu arbeiten?

hier mein kompletter CSS-Code:
Code:
*
{
margin: 0px; padding:0px; border: 0px;
/*margin: 10px 0; 24px=oben,unten - 0=recht,links*/
}



html
{
height: 100.3%;
font-style: normal;
font-size: 0.9em;
font-family: Tahoma;
color: #808080;
}

body
{
background-image: url(../images/body_background.jpg);
text-align: center;
}

h1
{
background: url(../images/logo1.png) no-repeat;
height:94px;
text-indent:-999px;
margin-top: 24px;
margin-left: 24px;
}

h2, h3, h4, h5, h6
{

}

a  {}
a:link {
text-decoration: none;
}
a:visited{}
a:hover{}
a:active{}

div#wrapper {
width: 800px;
margin: 20px auto;
text-align: left;
}
div#header {
background: url(../images/header.png);
height:321px;
border: 1px solid #ffffff;   /*border wegen collapsing margins*/
}

div#navigation {
/*
background-color: ;
background-image: url();
background-repeat: repeat-x;
background-attachment: scroll;
background-position: right;
 */
background: url(../images/nav_bg.png) repeat-y;
width: 200px;
float:left;
margin-top: 55px;
margin-left: 80px;
}

div#navigation ul {
      list-style-type: none;
}

div#navigation li {
border-bottom: dotted;
border-width: 1px;
border-color: #808080;
padding: 6px 0px;
padding-left:8px;
}

div#navigation li.noborder {
border:none;
}


div#navigation li a {
color: #808080;
}

div#navigation li a:link
{
color:#808080;
}


div#navigation li a:visited
{

color:#808080;
}


div#navigation li a:hover
{
color:#a80000;
}

#container { position: relative; width: 420px; float:left;}
#rotating-elements { background: #333; border: #678; z-index: 5; padding: 0px; height: 200px; }
.element-rotated { height: 200px; color: #fff; width: 100%; }
.sideswap_nav { position: absolute; cursor: pointer; }
.sideswap_next { bottom: 50%; right: 0px; z-index: 1000; }
.sideswap_previous { bottom: 50%; left: 0px; z-index: 1000; }





div#wrapcontent {
background: url(../images/content_bg.png) repeat-x;
height: 300px;
}


div#sidebar {
background: url(../images/adresse_bg.png) no-repeat;
color: #ffffff;
height: 320px;
width: 280px;
float:left;
}

div#sidebar ul {
margin-top: 40px;
list-style-type: none;
}

div#sidebar li {
margin-left: 60px;
}

div#maintext {
background: #F7F7F7;
height: 520px;
width: 480px;
float: left;
padding-top: 15px;
padding-left: 15px;
}

#myform fieldset, #myform input, #myform textarea {
    border: 1px solid #cccccc;
}

#myform fieldset, #myform label, #myform input
{
display:block;
}

#myform fieldset {
width: 28em;
margin: 0em 0em 0em 0em;
padding-top: 1em;
padding-right: 3em;
padding-bottom: 1em;
padding-left: 1.1em;
}

#myform label {
margin-bottom: 1em;
text-indent: 0.1em;
}

#myform label.anrede, #myform .radio{
float:left;
}

#myform label.anrede{
width:10em;
line-height:0.8em;
text-indent: 0.5em;
}
#myform .radio
{

}
#myform label.firma {
clear:left;
}

#myform input.breiteretextbox {
width: 20em;
}

#myform textarea.breiteretextarea {
width: 20em;
margin-top: -0.8em;
}


div#footer {
background: url(../images/footer_bg.png) repeat-x;
text-align: right;
height: 150px;
font-size: 0.75em;
color: #ffffff;
}


div#footer ul {
padding-right:25px;
list-style-type: none;
}

div#footer li {
display:inline;

}

Geändert von seeadler (05.04.2013 um 12:18 Uhr)
Mit Zitat antworten
  #18 (permalink)  
Alt 05.04.2013, 13:43
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von seeadler Beitrag anzeigen
**liegt es vielleicht daran, dass ich mit auch die einheit Pixel (px) definiert habe?**
Ist es zu empfehlen, nur mit (em) zu arbeiten?
nein, es liegt am Design der Seite, also am HTML-Layout und natürlich float, sowie deinen Hintergrundbildern.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #19 (permalink)  
Alt 05.04.2013, 13:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von seeadler Beitrag anzeigen
kann mir jemand sagen warum die Breiten der Textboxen im Vergleich zu Textarea, obwohl ich für beide 20em definiert habe, dennoch unterschiedlich von der Breite sind?
TESTSEITE
Weil die Schriftgrößen nicht gleich sind. Bei Formularelementen handhaben die Browser die Vererbung unterschiedlich. Wenn man gleiche Schriftgröße (und -familie) will muss man das angeben.
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 05.04.2013, 15:20
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard gelöst

@fricca Danke für den Hinweis, das hätte ich nicht gedacht, aber gut zu wissen.

@seeadler
Folgende Änderungen würde ich im CSS Vornehmen.
HTML bleibt unverändert.

html height:100,3% entfernen, warum ist da überhaupt eine Höhe festgelegt?

Oberer Teil
Div header auf position relative umstellen, damit Kindelemente relativ positioniert werden können.
Code:
div#header {
    background: url("../images/header.png") repeat scroll 0% 0% transparent;
    border: 1px solid rgb(255, 255, 255);
    height: 321px;
    position: relative;
}

Navigation umstellen auf Position relative und Divs relativ positionieren anstatt wie vorher floaten
Code:
div#navigation {
    width: 200px;
    position: relative;
    top: 55px;
    left: 79px;
}
Div Container enthält rotierende Bilder, float raus und relativ positionieren
Code:
#container {
    position: relative;
    width: 420px;
    left: 280px;
    top: -150px;
}
Unterer Teil

Div Wrapcontent
Feste Höhe raus, somit automatische Höhenanpassung, Footer ordnet sich jetzt richtig an, Hintergrundbild wiederholen lassen
Code:
div#wrapcontent {
    background: url("../images/content_bg.png") repeat scroll 0% 0% transparent;
}
Div Sidebar ist nach links gefloatet, bleibt so, keine Änderung.

Div Maintext: float raus, feste Höhe raus, evtl min-high, wenn nötig,
Padding zusammenfassen, Padding unten hinzugefügt, margin-left in der Breite der Sidebar zugefügt
Code:
div#maintext {
    padding: 15px 0 15px 15px;
    margin-left: 280px;
    background: none repeat scroll 0% 0% rgb(247, 247, 247);
}
Wenn ich jetzt nichts vergessen habe müsste es das sein.

Man kann zoomen und die Elemente bleiben in Position. Das die Navigation bei einigen Zoomstufen um 1-2 Pixel in den unteren Bereich rein ragt, liegt wohl an Rundungsfehlern. Bei 5 li Elementen kommt es unweigerlich dazu, dass Kommawerte im Pixelbereich auftreten. Da es kein Pixel mit 0.3 gibt muss entweder eins dazu oder eins weg, jeder Browser macht das hier etwas anders.

Sicherlich kann man das vielleicht noch eleganter lösen, aber ich denke so gehts auch.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
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
Problem bei Formular layout. cooky79 CSS 0 30.05.2011 21:54
Formular gestalten/ positionieren BoFiaZ CSS 1 16.10.2008 15:14
Deaktiviertes Formular gestalten? tscho CSS 2 15.08.2008 10:52
fieldset ohne formular .robert (X)HTML 5 30.01.2007 19:10
Formular benutzerfreundlicher gestalten Geronimo Barrierefreiheit 2 26.09.2006 21:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:40 Uhr.