|
|||
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ß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> TESTSEITE Geändert von seeadler (03.04.2013 um 23:30 Uhr) |
Sponsored Links |
|
|||
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 |
|
|||
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. |
|
|||
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) |
|
|||
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. |
|
|||
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
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; } Code:
#container { position: relative; width: 420px; left: 280px; top: -150px; } 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 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); } 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. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |