[CSS] 3x Fragen

[Payne_of_Death]

Hey,

hab im Moment 2 Fragen die mich gerade beschäftigen. Hab schon verschiedene Sachen versucht, die dann wiederrum neue Darstellungsprobleme in Firefox, Opera oder IE geschaffen haben.

Situation:
Ist:
Hab ein Div Layer welcher eine feste Breite hat. Höhe ist variabel und in Abhängigkeit zum Inhalt. Darin werden
-> 1 Grafik
-> 1 Input Feld
-> 1 Input Feld
-> 1 Grafik
-> 1 Grafik
angezeigt.


1. Soll (teilweise erfüllt)
- Die Input Felder haben via CSS eine Hintergrundgrafik zugeordnet bekommen. Daneben habe ich um das Inputfeld an die Vorgabe des Hintergrundbildes anzupassen ensprechend die Eigenschaft Height und Width gegeben.

Prob:
Opera zeigt das optimal an bei IE und Firefox dagegen hat die width und height Eigenschaft keine Auswirkung.

Jemand eine Idee was man machen könnte?


2. Soll (keine wirkliche Lösung)
Innerhalb dieses Div Layers sollen die Inhalte rechtsbündig angeordnet sein und zum Rand hin ca. 4 pixel haben.
Rechtsbündig ist kein Problem nur der Rand....

Hab schon versucht ein weiteres Div Layer anzulegen und dann via margin-right es entsprechend anzuordnen als auch über padding leider aber sprengte es immer das Design und machte das erstere Layer größer als die übrigen.

Hab im Moment keine Ahnung


3.) Frage:
Ist es möglich in einem Formular mehrere Buttons des Typs Images zu haben, die allesamt handlebar sind, d.h. wenn ich button1 drücke übergib value x.
Drücke Button2 value y usw.....
alleinig mit HTML wenn möglich....
name und value Tag hat hier keine Auswirkung ist auch nicht in SelfHTML vorgesehen.

Hab es versucht und im $_POST taucht nichts dergleichen auf.

-> Ich such nochmal im Forum zu meiner besagten Frage......

Vielen Dank für eure Hilfe

[wahsaga]

Re: [CSS] 3x Fragen

Original geschrieben von Payne_of_Death
Opera zeigt das optimal an bei IE und Firefox dagegen hat die width und height Eigenschaft keine Auswirkung.

code ...?

Innerhalb dieses Div Layers sollen die Inhalte rechtsbündig angeordnet sein und zum Rand hin ca. 4 pixel haben.

<div style="text-align:right; padding:4px;"> ... </div>
...?

Ist es möglich in einem Formular mehrere Buttons des Typs Images zu haben, die allesamt handlebar sind

bei image-buttons wird (je nach browser) kein value übertragen - dafür aber die klick-koordinaten.
diese stehen dann in PHP unter buttonname_x und buttonname_y zur verfügung (entsprechende einträge in $_GET bzw. $_POST natürlich).

[Payne_of_Death]

aha ich verstehe hab mich schon immer gefragt was das für X und Y sind.

Danke

was das padding angeht würde es denke ich nichts bringen wenn ich dir den code des layers nenne.

aber vielleicht siehst du da ja was...

die url

der betreffende Layer

#LoginBody {
    text-align:right;
	padding:-4px; 
	padding-top:4px;
    padding-bottom:4px; 
	width: 750px;
	background-color:#72D3D3;
}

hab es hier mal mit dem Minus versucht....


Zu dem Background Image des Input Feldes hast keine Idee?

EDIT:

---

die Input Felder:

.username {
  width:112px;
  height:17px;
  background-repeat:no-repeat;
  background-image:url(design/dwh_style1/username.gif); 
}
.pw {
  width:112px;
  height:17px;
  background-repeat:no-repeat;
  background-image:url(design/dwh_style1/passwort.gif); 
}

---

[wahsaga]

Original geschrieben von Payne_of_Death
padding:-4px;
hab es hier mal mit dem Minus versucht....

padding kann keine negativen werte annehmen.

Zu dem Background Image des Input Feldes hast keine Idee?

genau dazu wollte ich ja auch code sehen, nicht zu dem padding-problem.

oben war es noch ein width-/heigth-problem, und jetzt was mit dem hintergrundbild ...?


du hast dich doch schon ausführlich darüber ausgelassen, was man beim beschreiben von problemstellungen beachten sollte, damit diese nachvollziehbar sind.

also setze das doch bitte auch selber mal adäquat um, derzeit ist mir nämlich nicht klar, was für probleme du mit deinem layout nun genau hast.

[Payne_of_Death]

Ich denke du hast mein edit noch nicht gelesen....

Also Ich hab ein Background was ich in der CSS Class username und pw definiert habe.
darin ist u.A. auch die width und die height eigenschaft definiert.......

Da das Background nicht der Standardvorgabe der Browser entspricht, habe ich die Attributwerte HohexBreite dem Input Tag gegeben damit es genau ausgefüllt ist....

Und diese Angabe ignoriert Firefox und IE aber Opera macht es richtig....



Zum padding:
- possitiv Wert verschiebt es nach rechts (umgekehrten weg von rechts nach links)
- negativ Wert:
war ein verzweifelter Versuch.....

[wahsaga]

Original geschrieben von Payne_of_Death
Und diese Angabe ignoriert Firefox und IE aber Opera macht es richtig....

das muss ich mir ggf. später mal ansehen, habe im moment keine vergleichsmöglichkeiten.

Zum padding:
- possitiv Wert verschiebt es nach rechts (umgekehrten weg von rechts nach links)

ist dir klar, was padding ist? innenabstand. und genau so einen wolltest du doch haben, wenn ich dich richtig verstanden habe, oder? die elemente im div sollen von dessen rand einen abstand einhalten.
wenn ja, ist padding das, was du brauchst. wenn nicht ... was willst du dann ...?

[Payne_of_Death]

Original geschrieben von wahsaga
ist dir klar, was padding ist? innenabstand. und genau so einen wolltest du doch haben, wenn ich dich richtig verstanden habe, oder? die elemente im div sollen von dessen rand einen abstand einhalten.
wenn ja, ist padding das, was du brauchst. wenn nicht ... was willst du dann ...?

Ja es ist mir klar das es ein Innenabstand ist

Und ja du liegst richtig ich benötige einen rechten Innenabstand.

Dieser wird auch eingehalten mit einem nebeneffekt.
Die ursprüngliche Breite von 750px wird wird auf den Paddingwert ausgedehnt.

Mit anderen Worten alle Anderen Divs haben 750px und dieses besagte hat dann z.B. 755px (5px padding).

Ich habe eigentlich erwartet das bei einem text-align:right; und einem padding-right:5px. entsprechend eingerückt wird.

Das trifft nun leider nicht zu......

[wahsaga]

Original geschrieben von Payne_of_Death
Dieser wird auch eingehalten mit einem nebeneffekt.
Die ursprüngliche Breite von 750px wird wird auf den Paddingwert ausgedehnt.

Mit anderen Worten alle Anderen Divs haben 750px und dieses besagte hat dann z.B. 755px (5px padding).

works as designed.

nach dem box model ergibt sich die breite eines elementes nun mal aus width plus border-width plus padding.

[Payne_of_Death]

Original geschrieben von wahsaga
works as designed.

nach dem box model ergibt sich die breite eines elementes nun mal aus width plus border-width plus padding.

und was mach ich dann falsch

Nebenfrage hab in einer Table min. 4 Buttons pro Zeile

Die Koordinaten logisch unterzubringen macht mir gerade sorgen. Ich versuche einen passenden Algorythmus zu finden um es dynamisch prüfen zu können....

[wahsaga]

Original geschrieben von Payne_of_Death
und was mach ich dann falsch

du wunderst dich über

Mit anderen Worten alle Anderen Divs haben 750px und dieses besagte hat dann z.B. 755px (5px padding).

obwohl ich dir doch gerade erklärt habe, warum das so ist.

Nebenfrage hab in einer Table min. 4 Buttons pro Zeile

Die Koordinaten logisch unterzubringen macht mir gerade sorgen. Ich versuche einen passenden Algorythmus zu finden um es dynamisch prüfen zu können....

was willst du mit den koordinaten?

du willst doch im script nur wissen, ob der button gedrückt wurde.
also reicht es doch vollkommen aus, abzufragen ob $_POST['buttonname1_x'] übergeben wurde. ob da 3 oder 815 drinsteht, ist doch in den allermeisten fällen wurscht.
siehe auch http://dclp-faq.de/q/q-formular-image.html

[Payne_of_Death]

naja stehe im Moment ein bisschen heftig auf dem Schlauch

Ich hab bei den Image Buttons nicht in diese Bahn gedacht...Wenn ich so überlege hab ne Table pro Datensatz 4 Buttons.

Jede Zeile ist ein Formular und liefert über ein Type Hidden die Record ID....Dann reicht es mit dem isset();

Wunderbar


Aber wie ich sinnvoll mein Design Problem angehe weiss ich leider noch immer nicht.....

[wahsaga]

Re: [CSS] 3x Fragen

Original geschrieben von Payne_of_Death
Opera zeigt das optimal an bei IE und Firefox dagegen hat die width und height Eigenschaft keine Auswirkung.

OK, jetzt hab ich mir das problem auch mal in einem aktuellen IE und im firefox ansehen können.

kuck dir mal an, wie groß die schrift ist, wenn du in die inputfelder was eintippselst - kein wunder, wenn die die inputfelder höher machen, als du es angegeben hast.


also versuch mal, die schriftgröße und ggf. auch noch die zeilenhöhe (line-height) für diese inputs kleiner zu definieren, dann sollten sie sich auch an die vorgegebene gesamthöhe halten.

(zur not mal mit 3 oder 4 px anfangen, und dann kucken, wie hoch du gehen kannst ...)

[Payne_of_Death]

thx @ wahsaga.
werde ich mal versuchen.

Nur wie soll ich mein prob mit dem Padding angehen

Hier bin ich ratlos

[Abraxax]

Original geschrieben von Payne_of_Death
Nur wie soll ich mein prob mit dem Padding angehen

breite ohne padding : w
padding : p
border: b
neue breite mit padding- und border berücksichtigung: wpb

wpb = w - 2b - 2p

wo ist denn das problem? wahsaga hat doch schon gesagt, woran du bist.

[Payne_of_Death]

Original geschrieben von Abraxax
breite ohne padding : w
padding : p
border: b
neue breite mit padding- und border berücksichtigung: wpb

wpb = w - 2b - 2p

wo ist denn das problem? wahsaga hat doch schon gesagt, woran du bist.

Ich habs verstanden und erfolgreich umgesetzt. Kaum hat man mal richtig ausgeschlafen fällt alles gleich vom Himmel

Ach ja das mit den input Boxen:
das Problem konnte weder mit line-height noch font-size behoben werden.
Aber mit padding:0px; hat es auch der dumme IE schließlich mal einsehen müssen !