✔ Runde Ecken bei einem Input

[Warper]

Nein, in div id="content", innerhalb der div id="statusbox". Das ganze befindet sich in basemod.css.

Grüße,
Steffen

 

[Kalma]

Ah ok, jetzt wird das schonmal richtig gemacht.


Allerdings, die Objekte isnd ja mit einem "float:left;" ausgestattet, was mir verhindert, z.b. Buttons mittig auszurichten, oder z.b. Leerzeihcen zwischen den Buttons zu machen.


Das ist natürlich problematisch.

 

[Warper]

Leerzeichen? Dafür kannst du margin benutzen, in deinem Fall müsstest du aber das margin auf die Runde-Ecken-Grafik aufschlagen, auf der vom Input Feld abgeneigten Seite.

Zentriert ausrichten? Einfach:

<div style="margin-left: auto; margin-right: auto">
inputs
</div>

Dem div musst du vielleicht noch eine Breite geben, bin mir da grad nicht richtig sicher.

Grüße,
Steffen

 

[Kalma]

Und was, wenn ich wie bei der Suche dort, folgendes machen will?


[Suchfeld......] suche in [Kategorie]

?

Das geht nämlich nicht, da der Text nicht gefloatet ist, und ich will nicht unbedingt alles floaten.


Gibts da tatsächlich keine andere Möglichkeit?


Danke,
David

 

[Warper]

Unangenehmer Weise nein, zumindest keine die mir bekannt wäre. Aber dein Text kannst du einfach in ein div packen, dass du dann auch floatest.

Grüße,
Steffen

 

[Kalma]

Könnte man das ganze nicht ein Label/Div packen?

Und den Div nicht floaten, sondern nur die Elemente dadrin?

Oder würde der Div oder das Label dann automatisch trotzdem nach links gefloatet werden?!

 

[Maik]

Hi,

hast du schonmal in Erwägung gezogen, anstelle dieses Markups

<img src="links.png"  />
<input type="text" name="test" />
<img src="rechts.png" />

dein Vorhaben mit einer praxiserprobten CSS-Technik umzusetzen?

• 25 Rounded Corners Techniques with CSS
• CSS Rounded Corners 'Roundup'

Diese Variante nutzt die "Sliding Doors"-Technik:

<ul>
    <li><div><input type="submit" value="submit"></div></li>
    <li><div><input type="text" value="text"></div></li>
</ul>

ul {
list-style:none;
margin:0;
padding:0;
}
ul li {
float:left;
margin:0 2px;
}
ul li div {
background:url(border-right.png) no-repeat right top;
height:24px;
float:left;
}
ul li div input {
background:url(border-left.png) no-repeat left top;
float:left;
height:24px;
border:0;
}

mfg Maik