Position Button

[paulmorgan]

Hallo!

Wie kann man den Button rechts unten, direkt neben das Ende der mittleren DIV-Box positionieren und nicht an der Kante oben?

Danke schon mal für die Hilfe!

<form action="verarbeite.php">
	<select name="top10" size="1">
	<option selected >erster Eintrag</option>
	<option>zweiter Eintrag</option>
	<option>dritter Eintrag</option>
	</select>
	</form>
	
	<select name="top10" size="10" style="float:left;width:10%;">
	<option selected >erste Datei</option>
	<option>zweite Datei</option>
	<option>dritte Datei</option>
	</select>
	
	<div style="width:8%;float:right;">
	<button type="button" id="execute" >-> SQL ausführen</button>
	</div>

	<div style="border: 1px solid;margin-left:12%;padding:3px;width:78%;">
	 Datei-Inhalt<br>
	  drgfh<br>
	  dfgfdgf<br>
	  dfgdfgfdg<br>	  
	</div>

[MrMurphy1]

Hallo

du musst die mittlere Box und den Button in einen Container stecken und beide darin unten ausrichten. Der Button selbst braucht wahrscheinlich keinen Container.

Gruss

MrMurphy

[paulmorgan]

Servus MrMurphy,

habs mit den Div's nicht so recht hinbekommen..., hier mit Tabellen. Hast Du nen Vorschlag für Div's?

<div style="vertical-align:bottom;border:0px solid;width:80%;float:right;">	
	  <table style="width:100%">
	   <tr>
	    <td style="border:1px solid;width:80%;">
	     <div>
		 Datei-Inhalt<br>
		 Zeile 1<br>
		 Zeile 2<br>
		 Zeile 3
	     </div>
		</td>
		<td style="vertical-align:bottom">
		  <button type="button" id="execute">-> SQL ausführen</button>
		</td>
	   </tr>
	  </table>
	</div>

[quincunx]

Hallo Paul,

das geht ganz ohne div

siehe: http://codepen.io/quincunx/pen/RrWdGG?editors=110

beste gruesse qx

[Camping_RIDER]

Aloha ;)

Wie kann man den Button rechts unten, direkt neben das Ende der mittleren DIV-Box positionieren und nicht an der Kante oben?

Versuchs doch mal mit flexbox statt mit float-Lösung, falls das für dich in Frage kommt (im Großen und Ganzen hat da nur der Internet Explorer, der ja für neue Geräte durch Edge abgelöst wird, Probleme - und keine zu großen). Du kannst hier mit flex-direction:row und entsprechender Nutzung von align-self diesen Effekt erreichen - vgl. dazu auch das Beispiel im entsprechenden Wiki-Artikel.

Sollte flexbox nicht in Frage kommen, würde ich dir dazu raten, display:table-* zu verwenden - damit kannst du das, was bei dir in Tabelle optisch schon funktioniert, auch semantisch sinnvoll ohne Einsatz einer tatsächlichen HTML-Tabelle umsetzen; zur Gestaltung stehen damit alle Möglichkeiten offen, die auch in einer Tabelle möglich sind.

Allerdings: Zukunftssicherer und - vor allem im Hinblick auf Mobilgeräte oder anderweitig unterschiedliche Bildschirmgrößen - flexibler einsetzbar dürfte flexbox sein.

Grüße,

RIDER

[Gunnar Bittersmann]

@@Camping_RIDER

flexibler einsetzbar dürfte flexbox sein.

Sonst hieße sie ja stiffbox.

Was für eine Binsenweisheit! ;-)

LLAP 🖖

[Camping_RIDER]

Aloha ;)

flexibler einsetzbar dürfte flexbox sein.

Sonst hieße sie ja stiffbox.

Was für eine Binsenweisheit! ;-)

Hehe, ja, ich hatte schon während dem Schreiben das Gefühl, dass diese Aussage vielleicht ein bissl dämlich ist - ein Fall für

Grüße,

RIDER

[marctrix]

Hej Camping_RIDER,

Versuchs doch mal mit flexbox statt mit float-Lösung, falls das für dich in Frage kommt (im Großen und Ganzen hat da nur der Internet Explorer, der ja für neue Geräte durch Edge abgelöst wird, Probleme - und keine zu großen). Du kannst hier mit flex-direction:row und entsprechender Nutzung von align-self diesen Effekt erreichen - vgl. dazu auch das Beispiel im entsprechenden Wiki-Artikel.

Sollte flexbox nicht in Frage kommen, würde ich dir dazu raten, display:table-* zu verwenden

Oder display: inline-box; passt für diesen Fall wunderbar.

Allerdings: Zukunftssicherer

Wann wird die Unterstützung von display: table-* denn eingestellt ;-)

und - vor allem im Hinblick auf Mobilgeräte oder anderweitig unterschiedliche Bildschirmgrößen - flexibler einsetzbar dürfte flexbox sein.

Das auf jeden!

Marc

[Camping_RIDER]

Aloha ;)

Allerdings: Zukunftssicherer

Wann wird die Unterstützung von display: table-* denn eingestellt ;-)

und - vor allem im Hinblick auf Mobilgeräte oder anderweitig unterschiedliche Bildschirmgrößen - flexibler einsetzbar dürfte flexbox sein.

Das auf jeden!

Das meinte ich mit der Bezeichnung Zukunftssicherer ;) display: table-* wird vielleicht nicht eingestellt, ist aber einfach nicht mehr zeitgemäß. Tabellen - auch wenn sie nur so dargestellt werden und keine echten sind - bringen viele Beschränkungen mit sich, gerade in punkto Flexibilität. Das mag bei richtigen Tabellen (also mit tabellarischen Daten) wünschenswert sein (da scrollt man lieber ein bisschen mehr als nachher durch flexiblere Darstellungen irgendein unverständliches/umständliches Chaos zu haben), bei Designs aber eher nicht.

Grüße,

RIDER

P.S.: Ich weiß, dass du das auch weißt, ich wollts nur fürs Protokoll mal gesagt haben ;)

[marctrix]

Hej Camping_RIDER,

Allerdings: Zukunftssicherer

Wann wird die Unterstützung von display: table-* denn eingestellt ;-)

und - vor allem im Hinblick auf Mobilgeräte oder anderweitig unterschiedliche Bildschirmgrößen - flexibler einsetzbar dürfte flexbox sein.

Das auf jeden!

Das meinte ich mit der Bezeichnung Zukunftssicherer ;) display: table-* wird vielleicht nicht eingestellt, ist aber einfach nicht mehr zeitgemäß. Tabellen - auch wenn sie nur so dargestellt werden und keine echten sind - bringen viele Beschränkungen mit sich, gerade in punkto Flexibilität. Das mag bei richtigen Tabellen (also mit tabellarischen Daten) wünschenswert sein (da scrollt man lieber ein bisschen mehr als nachher durch flexiblere Darstellungen irgendein unverständliches/umständliches Chaos zu haben), bei Designs aber eher nicht.

Ich setze die gerne hin und wieder ein. Soll ein horizontales Menü einen vorgegebenen Bereich (Elternelement) ausfüllen, bei dem die Buttons in Relation zur Beschriftungslänge stehen, geht nichts schneller als:

ul {
	display: table;
	width: 100%;
}
li {
	display: table-cell;
}

Das benötigt wesentlich weniger Platz als ein Menü mit gleich breiten Buttons, die sich natürlich nach dem längsten "richten" müssen. Für Bildschirme, die trotzdem nicht breit genug sind, kann man - gerade weil es CSS-Tabellen sind - ja dann eine andere Darstellungsform wählen (muss man aber egal mit welcher Technik man die Liste horizontal anordnet)...

Wobei man sich natürlich ERST um die schmalen Displays kümmern sollte - fürs Protokoll ;-)

P.S.: Ich weiß, dass du das auch weißt, ich wollts nur fürs Protokoll mal gesagt haben ;)

Ich wollte dich auch nur ein bisschen zanken ;-)

Marc

[Gunnar Bittersmann]

@@marctrix

Ich setze die gerne hin und wieder ein. Soll ein horizontales Menü einen vorgegebenen Bereich (Elternelement) ausfüllen, bei dem die Buttons in Relation zur Beschriftungslänge stehen,

Warum sollte man das wollen? Warum sollte bei kurzem Text weniger Leerraum dazukommen als bei langem? Das sieht richtig ████ blöd aus: Pen 1

geht nichts schneller als:

ul {
	display: table;
	width: 100%;
}
li {
	display: table-cell;
}

Stimmt nicht. Das geht mindestens genauso schnell:

ul
{
	display: flex;
	justify-content: space-between;
	list-style: none;
	padding: 0;
}

und sieht auch nach was aus: Pen 2

Das benötigt wesentlich weniger Platz als ein Menü mit gleich breiten Buttons, die sich natürlich nach dem längsten "richten" müssen. Für Bildschirme, die trotzdem nicht breit genug sind, kann man - gerade weil es CSS-Tabellen sind - ja dann eine andere Darstellungsform wählen

Denkfehler. Man weiß nicht, was „breit genug“ wäre. Man kann einen Breakpoint finden, der für manche Geräte passt, für andere aber zu groß gewählt ist, für wieder andere zu klein. Weil man eben nicht wissen kann, wieviel Platz die längste Beschriftung denn nun genau braucht.

(muss man aber egal mit welcher Technik man die Liste horizontal anordnet)...

Auch das stimmt nicht.

Bei Flexbox muss man keine andere Darstellungsform wählen. Die Mehrzeiligkeit erreicht man ganz einfach per flex-wrap: wrap oder flex-flow: row wrap (in Pen 2 bereits drin).

LLAP 🖖

[Camping_RIDER]

Aloha ;)

Bei Flexbox muss man keine andere Darstellungsform wählen. Die Mehrzeiligkeit erreicht man ganz einfach per flex-wrap: wrap oder flex-flow: row wrap (in Pen 2 bereits drin).

Fürs Protokoll: du musst vergessen haben zu speichern, Pen 2 ist bei mir zu Pen 1 identisch. Wollte das nur gesagt wissen ;)

Grüße,

RIDER

[Gunnar Bittersmann]

@@Camping_RIDER

Fürs Protokoll: du musst vergessen haben zu speichern, Pen 2 ist bei mir zu Pen 1 identisch. Wollte das nur gesagt wissen ;)

Fixed. Danke.

LLAP 🖖