1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

Form Positionierung mit CSS

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von newmacuser24, 21.02.08.

  1. newmacuser24

    newmacuser24 Antonowka

    Dabei seit:
    27.12.05
    Beiträge:
    355
    Hallo,

    des Webdesigners Pain sind die verschiedenen Browser und ihre Tücken ;) - zumindest empfinde ich das so, obwohl ich nichtmal ein Webdesigner bin...

    Arbeite an einem Formular, das ich mit ein paar Photoshop-Grafiken ansprechend gestalten möchte. Nach langem hin und her und erfolglosen Versuchen mit Tabellen, habe ich mich ein wenig in CSS eingearbeitet, was mir von Anfang an besser als Tabellenlayout gefallen hat.

    Die Website ist wie folgt aufgebaut:

    In die HTML-Seite ist die Datei master.css eingebunden, in der ich die CSS-Bedingungen festlege:

    html, body {
    margin: 0;
    padding: 0;
    }

    #page-container {
    background: transparent;
    margin-top: 0px;
    margin:auto;


    }

    #page-formularlayout
    background: transparent;
    margin:auto;
    width:800px;
    height:600px;
    background-image:url(../images/formular.png);
    }

    p.oi_userinfo label{
    clear:left;
    float:left;
    display:block;
    margin-top:45px;
    padding-left: 50px;
    width: 400px;
    }


    p.oi_userinfo input {
    clear:right;
    float: right;
    margin-top:45px;
    padding-right:80px;
    width: 40px;
    }

    -----

    In index.html rufe ich dann die zuvor definierten Elemente auf:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>CompanyName - PageName</title>
    <meta http-equiv="Content-Language" content="en-us" />

    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />

    <meta name="description" content="Description" />
    <meta name="keywords" content="Keywords" />

    <meta name="author" content="Test Site" />

    <style type="text/css" media="all">@import "css/master.css";</style>
    </head>

    <body>
    <div id="page-container">
    <form name="form1" method="post" action="">

    <div id="page-formularlayout">

    <p class="oi_userinfo">
    <label>Username:</label>
    <input name="username" type="text" />

    </div>
    </form>
    </div>
    </body>
    </html>
    -----

    Zusammengefasst geht es also darum, innerhalb 'div id="page-formularlayout"' mehrere Elemente (input, checkbox, list, submit, etc...) zu positionieren.

    Die sollen exakt über der dafür angefertigten Grafik liegen. Jetzt teste ich also diese Seite mit Safari, FireFox(Mac), Opera(Mac), InternetExplorer(WinXP), FireFox(WinXP) und die Probleme beginnen. Ausser IE verschieben alle Browser das gesamte 'div id="page-formularlayout"' um 1-2 Zentimeter nach unten, was wiederum dazu führt, dass die Elemente nicht korrekt ausgerichtet sind. Würde das auch der IE machen, wärs kein Problem, denn dann könnte ich die Positionen einfach in der .css Datei anpassen und alles wäre gut. IE kocht aber sein eigenes Süppchen und verschiebt das 'div id="page-formularlayout"' nicht.

    Jetzt liegt mein Problem also darin entweder auch alle anderen Browser dazu zu bringen das 'div id="page-formularlayout"' nicht zu verschieben (was mir lieber wäre) oder eben dies auch beim IE auszulösen.

    Vermutlich denke ich aber auch völlig in die falsche Richtung und es gibt eine elegantere Methode Elemente innerhalb eines div zu positionieren?

    Wie auch immer, für jede Anregung wär ich äusserst dankbar!
     
  2. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    Kannst du bitte mal das Hintergrundbild posten? In Originalgröße! Dann kann man es sich mal ansehen.
     
  3. newmacuser24

    newmacuser24 Antonowka

    Dabei seit:
    27.12.05
    Beiträge:
    355
    Sorry, hab Probleme mit dem Upload. Das Bild ist im Moment eigentlich ganz simpel: 800 x 600 Pixel, weiss mit blauem Rand.
    Wäre es vielleicht möglich einfach verschiedene Versionen der Website zu programmieren und abzufragen welcher Browser verwendet wird und danach dann die entsprechende Version anzuzeigen?
     
  4. Kenso

    Kenso Pomme au Mors

    Dabei seit:
    05.12.07
    Beiträge:
    869
    Du willst etwas Pixelgenau über ein Hintergrundbild positionieren? Mh, ich würde dir an sich schon empfehlen, das grundsätzlich anders anzugehen, man positioniert auf Webseiten nichts pixelgenau.

    Aber egal, ohne Hintergrundbild kommen wir jedenfalls nicht weiter. Wir müssen einfach mal sehen, wie das aussehen soll... Vielleicht können wir dir dann sogar helfen, das ganze ohne pixelgenaues Positionieren hinzubekommen^^ :p

    btw: browserweichen sind möglich, ja, aber denke daran, dass das nicht sicher funktioniert, da die Verfahren darauf beruhen, die Informationen über den Browser vom Besucher zu bekommen (woher auch sonst) und dir der Besucher senden kann, was er will! (Mit Opera z.B. kann man sich selbst als unerfahrener Nutzer als IE ausgeben!) Außerdem basieren viele auf Javascript, d.h. sie sind vom Nutzer sowieso problemlos ausschaltbar!
     
  5. newmacuser24

    newmacuser24 Antonowka

    Dabei seit:
    27.12.05
    Beiträge:
    355
    Sorry wegen dem Upload...Mein neuer DSL-Provider bekommt keine stabile Verbindung gebacken und deshalb muss ich mich mit GPRS-Internet (via Handy) trösten. Hab gerade Geschwindigkeitserlebnisse anno 1995 :)
    OK, dann werd ich mal ne neue Taktik versuchen. Dachte schon, dass es ein Problem darstellt, Elemente wie buttons, etc. pixelgenau zu positionieren. Denke es wird im Netz diverse CSS-Formularstyling-Tutorials geben...sofern ich mal wieder DSL hab :)
    Danke jedenfalls für die Hilfe!
     

Diese Seite empfehlen