Dreiecksanordnung für Datumskomponente per CSS?

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich bastele gerade an einem Texteingabefeld, welches
ich mit einem kleinen Pfeil-nach-oben- und einem Pfeil-nach-unten-
Icon versehen möchte, um damit das Datum hoch- und runterblättern
zu können.

Letztlich geht es also darum 3 Komponenten im Dreieck anzuordnen:

 -------------------
 ---------- | NACH-OBEN-PFEIL | 
| TEXTFELD | -------------------
 ----------- -------------------
 | NACH-UNTEN-PFEIL |
 -------------------

Das ganze soll sich wie eine Komponente verhalten,
dass heisst ich möchte dieses Datumsfeld irgendwo
in einer Seite platzieren können, ohne dass das
Dreiecks-Layout zerstört wird.

Nach der alten HTML-Schule würde ich das über eine Tabelle
lösen, wobei TEXTFELD sich per rowspan über 2 Zeilen erstreckt
und die Pfeile in je einer Zeile stecken.

Nur wie mache ich das in CSS? Meine bisherigen Versuche
funktionieren nur im Firefox, nicht aber im IE …

Fragende Grüße,
-Andreas.

#2

Hallo.

Hier ein erster Versuch, welcher nicht auf allen Browsern getestet wurde (nur FF und IE7):

Für w-w-w
div.dreieck {
 width: 180px;
 background-color: #F0F8FF;
}
div.dreieck img {
 display: block;
 margin: 0;
 padding: 0 0 0 10px;
}
div.dreieck input {
 display: block;
 float: left;
 width: 120px;
 margin: 10px 0 0 10px;
}

Die Bilder haben eine Größe von 20x20px.

Schöne Grüße

Leo

#3

Hallo Leo.

Hier ein erster Versuch, welcher nicht auf allen Browsern
getestet wurde (nur FF und IE7):

Das ist schon sehr nah an dem, wie ich mir das
vorgestellt habe, danke für den Code!

Im IE6 fällt der Abstand zwischen Icon und Textfeld
etwas größer aus als im FF und IE7, aber damit kann
ich leben.

Etwas fehlt mir aber noch zum glücklich werden:

Kann man auch mehrere dieser Datumskomponenten nebeneinander
anordnen? Bisher erscheinen sie alle untereinander, wahrscheinlich
weil das dreieck-div ein Bockelement ist. Ein

div.dreieck {
 display: inline;
 width: 180px;
 background-color: #F0F8FF;
}

bringt leider keine Besserung …

Hast Du eine Idee?

Gruß,
-Andreas.

#4

Lösung: float: left;
Hallo.

Leider kann ich zur Zeit nur mit IE7 und FF testen; aber schön, dass ich helfen konnte.

Für die Anordnung nebeneinander:

Für w-w-w
div.dreieck {
 width: 180px;
 background-color: #F0F8FF;
 \<B\>float: left;\</B\>
 margin-right: 15px;
}
div.dreieck img {
 display: block;
 margin: 0;
 padding: 0 0 0 10px;
}
div.dreieck input {
 display: block;
 float: left;
 width: 120px;
 margin: 10px 0 0 10px;
}

Dies ist nur eine schnell geschriebene Lösung, Du musst mal schauen, ob es so funktioniert.

Noch einen schönen Sonntagabend,

Leo

1 Like
#5

Hallo Leo,

danke für die Korrektur. Jetzt klappt es zu
meiner vollen Zufriedenheit. Text, der in
die gleiche Zeile wie das Datumseingabefeld
soll, muss ich nun allerdings auch in ein links
fliessendes div packen, wie ich festgestellt habe.

Hier meine Endversion:

Für w-w-w
div.dreieck {
 float: left;
 width: 180px;
 background-color: #F0F8FF;
}
div.dreieck img {
 display: block;
 margin: 0;
 padding: 0 0 0 0px;
}
div.dreieck input {
 display: block;
 float: left;
 width: 120px;
 margin: 10px 0 0 10px;
}
div.text {
 float: left;
}

Von:

Bis:

Leider kann ich zur Zeit nur mit IE7 und FF testen

Mein Geheimtipp, um HTML-Seiten unter verschiedenen IE-Versionen
einfach testen zu können:

http://tredosoft.com/Multiple_IE

Damit kannst Du alle IEs gleichzeitig installieren!

Gruß,
-Andreas.