Ausrichtung einer Form innderhalb eines DIVs (Opera mag's nicht)

[Roman]

Hallo Leute,

ich habe folgendes Problem:

Ich möchte ein INPUT-Feld und ein OK-Feld innerhalb eines DIVs vertikal und horisontal zentriert mit CSS darstellen.

Folgendes habe ich schon ausprobiert

Das ist das Class für DIV-Tag

#header_right{
 height: 28px;
 min-height: 28px;
 width:100%;
 min-width:184px;
 /*float:left;*/
 text-align: center;
 vertical-align: top;
 margin-left: 0px;
 margin-right: 0px;
 margin-top:0px;
 margin-bottom: 0px
 padding-top:0px;
 background-color:#006c48;
 border:1px solid #FFFFFF;
 position: relative;
}

Classes für Inputform und Ok-form

(Nachdem ich in diese beiden Calasses margin-top:5px; eingefügt habe, zeigt mir es jetzt Firefox 0.8, Mozilla1.7, Konqueror3.1.3 (ausser Opera [IE kann ich leider nicht testen]) ganz gut...

}
.formSuche {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 background-color: #7FB5A3;
 width: 100px;
 height: 15px;
 border: 1px solid #000000;
 vertical-align: top;
 margin-top:5px;

}
.formOK {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 background-color: #006C48;
 color: #FFFFFF;
 width: 60px;
 height: 18px;
 border: 1px solid #000000;
 vertical-align: top;
 margin-top:5px;
}

Vorher habe ich auch mit "vertikal-align:middle" probiert (auch im Div-Class), vergebens. Das Ding rutschte wie es mochte.

Kann mir jemand ein Tip geben?

Thx
Roman
PS: die Grafik zeigt die Darstellung von Opera v7.23

[MudGuard]

Hi,

#header_right{

Vermeide Unterstriche in id/class - die wurden in CSS 2 vergessen und erst in den Errata zugelassen ==> ggf. Probleme.

[viel CSS-Sourcecode]
}

CSS Source Code ist relativ wertlos, wenn Du nicht auch die zugehörigen HTML-Elemente verrätst.

Vorher habe ich auch mit "vertikal-align:middle" probiert (auch im Div-Class), vergebens. Das Ding rutschte wie es mochte.

vertical-align schreibt sich ja auch mit c, nicht mit k.

cu,
Andreas

[Roman]

Hi Andreas, *,

Vermeide Unterstriche in id/class - die wurden in CSS 2 vergessen und erst in den Errata zugelassen ==> ggf. Probleme.

ok!

[viel CSS-Sourcecode]
}

CSS Source Code ist relativ wertlos, wenn Du nicht auch die zugehörigen HTML-Elemente verrätst.

<div id="header_right">
<form method="get" action="http://meinedomain.de....">
<input name="Terms" class="formSuche" size="15" />
<input name="submit" type="submit" class="formOK" value="Suche" />
</form>
</div>

ich denke mal die übergeordneten DIVs spielen keine Rolle hier, oder?
hier ist die Datei:http://www.ec-thueringen.de/new_template/alpha_0_1.html

vertical-align schreibt sich ja auch mit c, nicht mit k.

sorry... im css-script steht es aber mit c.

[Badboy46]

Hallo,

hier ist die Datei:http://www.ec-thueringen.de/new_template/alpha_0_1.html

kann es sein, dass die Seite im IE schrottig aussieht?

[Roman]

Hi!

hier ist die Datei:http://www.ec-thueringen.de/new_template/alpha_0_1.html

kann es sein, dass die Seite im IE schrottig aussieht?

es kann sein.... ich hab kein IE
ich werd es aber demnächst testen
Was für Version, Screenshot?

Danke!
Roman

[nag]

Hallo,

kann es sein, dass die Seite im IE schrottig aussieht?

es kann sein.... ich hab kein IE

Bevor deine Seite irgendwann online geht, solltest du sie mit dem IE testen. Denn er ist leider noch nicht zu vernachlässigen.

<img src="http://www.stud.uni-giessen.de/~su6690/selfhtml/optik.gif" border="0" alt="">

mfg NAG

[Roman]

Hi Nag

Bevor deine Seite irgendwann online geht, solltest du sie mit dem IE testen. Denn er ist leider noch nicht zu vernachlässigen.

Es ist mir klar....

<img src="http://www.stud.uni-giessen.de/~su6690/selfhtml/optik.gif" border="0" alt="">

ich bin schon bald am verzweifeln...
mal geht das mal geht das nicht....
naja, malguckn

Ich danke dir!

[Badboy46]

Hallo

jo so sieht das bei mir auch aus im IE 6.

[Detlef G.]

Hallo Roman

Wird wohl keine Hilfe für dein Problem sein, sprang mir aber ins Auge.

#header_right{
height: 28px;
min-height: 28px;

Wozu min-height, wenn height angegeben ist?
Warum in px? Weißt du wie groß die Schrift beim Benutzer ist?

width:100%;
min-width:184px;

Wozu min-width in px?
(siehe oben)

/*float:left;*/
text-align: center;
vertical-align: top;
margin-left: 0px;
margin-right: 0px;
margin-top:0px;
margin-bottom: 0px
padding-top:0px;
background-color:#006c48;
border:1px solid #FFFFFF;
position: relative;

Wozu position:relative? Du positionierst doch nichts.

.formSuche {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;

Erschwert die Schriftgrößenverstellung im IE und gibt dir nur eine scheinbare Schriftgrößensicherheit.

background-color: #7FB5A3;
width: 100px;
height: 15px;

Wieder schriftgrößenabhängige Maße in px.

border: 1px solid #000000;
vertical-align: top;
margin-top:5px;

Kann mir jemand ein Tip geben?

Leider fällt mir im Moment nichts zu dem genannten Problem ein.
Mir ist aber noch ein anderes aufgefallen.
Schau dir deine Seite einmal im Mozilla (1.6) an und vergrößere die Schrift auf 150% oder 200%.

Auf Wiederlesen
Detlef

[Roman]

Hi Detlef,

#header_right{
height: 28px;
min-height: 28px;

Wozu min-height, wenn height angegeben ist?
Warum in px? Weißt du wie groß die Schrift beim Benutzer ist?

Hier geht es nicht um Schrift!

Wozu position:relative? Du positionierst doch nichts.

ein DIV siehe URL

Schau dir deine Seite einmal im Mozilla (1.6) an und vergrößere die Schrift auf 150% oder 200%.

Und? Sieht schön groß aus, ge? ;-)

[Detlef G.]

Hallo Roman

Wozu min-height, wenn height angegeben ist?

Warum in px? Weißt du wie groß die Schrift beim Benutzer ist?

Hier geht es nicht um Schrift!

Was kommt denn da rein?

Wozu position:relative? Du positionierst doch nichts.

ein DIV siehe URL

Was hat das damit zu tun?

Schau dir deine Seite einmal im Mozilla (1.6) an und vergrößere die Schrift auf 150% oder 200%.

Und? Sieht schön groß aus, ge? ;-)

Hast du es gemacht?
http://d-graff.de/demos/selfhtml/roman.png

Auf Wiederlesen
Detlef

[Roman_L]

Hier geht es nicht um Schrift!
Was kommt denn da rein?

nur dieses Suche-Formular

Was hat das damit zu tun?

wieso?

Hast du es gemacht?
http://d-graff.de/demos/selfhtml/roman.png

ja hab ich. ok!

[Detlef G.]

Hallo Roman,

Hier geht es nicht um Schrift!
Was kommt denn da rein?

nur dieses Suche-Formular

OK, das enthält nur Bauklötze. ;)
(kein Eingabefeld, wo etwas eingetragen wird und auch keinen Button mit der Schrift "Suchen")

position: relative;
Wozu position:relative? Du positionierst doch nichts.
Was hat das damit zu tun?
wieso?

Du schreibst position:relative; wodurch du ein Element um den bei left, top, right oder bottom angegeben Wert verschiebst (relativ positionierst).
Wenn _kein_ solcher Wert angegeben ist, positionierst du nichts.

Auf Wiederlesen
Detlef

[MudGuard]

Hi,

Du schreibst position:relative; wodurch du ein Element um den bei left, top, right oder bottom angegeben Wert verschiebst (relativ positionierst).
Wenn _kein_ solcher Wert angegeben ist, positionierst du nichts.

Doch. Es wird auf die Initial-Werte von left, top, right, bottom positioniert.
Daß dies im Normalfall auf eine Verschiebung um 0,0 rausläuft, ist halt so.

Außerdem hat das position:relative noch eine andere Auswirkung.
Wenn z.B. Nachfahren-Elemente eine absolute Positionierung besitzen, wird mit position:relative ein neuer Koordinatenursprung gesetzt.

cu,
Andreas

[Detlef G.]

Hallo Andreas

Doch. Es wird auf die Initial-Werte von left, top, right, bottom positioniert.

Ich spalte auch gern Haare ;)

Außerdem hat das position:relative noch eine andere Auswirkung.
...

Andreas, das ist mir natürlich bewusst, und in diesem Zusammenhang ist deine Berichtigung oben auch zutreffend.

Ich hatte Roman (vielleicht nicht optimal ausgedrückt) darauf hinweisen wollen, das position:absolute an der verwendeten Stelle für seine Seite keinen Sinn ergibt.

Wie oft sehen wir hier Seiten, die nicht so aussehen, wie der Fragende es wünscht, bei denen das CSS voller unnötiger und sich teilweise widersprechender Eigenschaften ist. Dort wurden dann oft viele Eigenschaften pauschal oder beim Probieren zusätzlich eingefügt und nicht wieder gelöscht oder auskommentiert, bis jeglichen Überblick verloren gegangen war.

Auf Wiederlesen
Detlef

[molily]

Hallo,

Suchst du vielleicht form {margin:0;}?

Mathias