Zum Inhalt springen

Buttons ausrichten

Commander_COM

Von Commander_COM
in Webdesign

 Teilen

Empfohlene Beiträge

Commander_COM

Commander_COM

Geschrieben
Geschrieben

hi,

habe in einer Tabellenzeile mehrere Buttons, nun will ich, dass die eine hälfte der buttons linksbündig in der zeile liegt und die andere rechtsbündig.


<span align=left>linke BUTTONS HIER</span>

<span align=right>rechte BUTTONS HIER</span

geht nicht und im Netz find ich nix... hat Jemand auf Anhieb ne Idee?

Link zu diesem Kommentar
Auf anderen Seiten teilen
Mulla

Mulla

Geschrieben
Geschrieben

ehm... bist sicher dass er nicht meint er will eine tabelle haben, wo in einer zeile buttons sind, wo ein paar links ausgerichtet und ein paar rechts augerichtet sind ?

falls das der fall sein sollte kann ich dir helfen

deine tabellenzeile/zelle


[...]

<tr>

	<td>

		<!-- Das Zeug um deine Zelle zu Teilen -->


		<table border="0" cellspacing="0" cellpadding="0" width="100%">

		<tr>

			<td align="left" width="50%">

				<!-- Hier die eine Hälfte deiner Buttons.(Hier drunter den Inhalt) -->

			</td>

			<td align="right" width="50%">

				<!-- Und hier die Andere.(Hier drunter den Inhalt) -->

			</td>

		</tr>

		</table>


	</td>

</tr>

[...]

müsst so ca hinhauen ^^

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben
ehm... bist sicher dass er nicht meint er will eine tabelle haben, ...

Ja, sonst hätte er nämliche keine spans sondern tds da stehen gehabt ;) Tabellen zum Layout sind bäääh. :D

Noch ein kleiner hinweis zum <span align="left">. Erstens sollte man die Werte der Attribute in "" schreiben ;) und zweitens ist span ein Inline-Element. Als solches hat besitzt es keine Breite o.ä. sondern ist immer nur so breit wie der Inhalt (<span style="width: 500px;"> == <span>). Selbst wenn das align als Attribut da erlaubt ist (was ich nicht glauben kann), bringt es absolut nix ;)

Link zu diesem Kommentar
Auf anderen Seiten teilen
Commander_COM

Commander_COM

Geschrieben
  • Autor
Geschrieben

erm... die buttons befinden sich in einer tabellenzeile. die eine hälfte der buttons soll in der linken hälfte der zeile stehen, die anderen in der rechten

hmm, wenn ich das mit dem td teile, zerhauts mir die ganze formatierung. ich muss in der urspünglichen einen zeile <td> button1 button2 button3 button4</td> bleiben, nur die ausrichtung soll halt einmal links bis button2 und auf der rechten seite der zeile button 3-4 sein... *grübel*

Link zu diesem Kommentar
Auf anderen Seiten teilen
azett

azett

Geschrieben
Geschrieben

Hm...mach ichs mir da zu einfach im Denken...oder meint ers anders?

Im CSS:

input.links {float:left;}

input.rechts {float:right;}
Im HTML: 
<td>

 <input type="submit" class="links">

 <input type="submit" class="links">

 <input type="submit" class="rechts">

 <input type="submit" class="rechts">

</td>

Link zu diesem Kommentar
Auf anderen Seiten teilen
Mulla

Mulla

Geschrieben
Geschrieben

codet doch mal nen beispiel mit dem float... hab ich noch nie benutzt... würd ich auch gern mal sehen

@comm

wenn du das mit der tabelle machen willst, dann kannste das verschachteln. alles was jetzt bei dir in der Tabellenzeile steht: "button1 button2 button3 button4" wird durch die komplette tabelle ersetzt. die sieht man hinterher nicht... ist halt nur zur einteilung

edit:

habs selbst mit dem float teil mal gemacht:


<html>

	<head>

		<title>bla</title>

	</head>

	<body>

		<div>

			<input type="button" style="float:left;" value="button1">

			<input type="button" style="float:left;" value="button2">

			<input type="button" style="float:right;" value="button3">

			<input type="button" style="float:right;" value="button4">

		</div>

	</body>

</html>

Link zu diesem Kommentar
Auf anderen Seiten teilen
Commander_COM

Commander_COM

Geschrieben
  • Autor
Geschrieben
codet doch mal nen beispiel mit dem float... hab ich noch nie benutzt... würd ich auch gern mal sehen

@comm

wenn du das mit der tabelle machen willst, dann kannste das verschachteln. alles was jetzt bei dir in der Tabellenzeile steht: "button1 button2 button3 button4" wird durch die komplette tabelle ersetzt. die sieht man hinterher nicht... ist halt nur zur einteilung

edit:

habs selbst mit dem float teil mal gemacht:


<html>

	<head>

		<title>bla</title>

	</head>

	<body>

		<div>

			<input type="button" style="float:left;" value="button1">

			<input type="button" style="float:left;" value="button2">

			<input type="button" style="float:right;" value="button3">

			<input type="button" style="float:right;" value="button4">

		</div>

	</body>

</html>

das problem ist, dass man die tabelle sieht und die nicht nur unsichtbar ist. sobald ich ein div einfüge, macht das je nen absatz und gleich aus einer tabelle zeile zwei zeilen. das will ich aber nicht. es soll eine zeile bleiben, daher mein früherer versuch mit span, ging ja leider nicht.

das beispiel von azett triffts wohl am ehesten, ich kam bloß nicht darauf, weil ich absolut keine ahnung von css habe.

Kannst du mir da noch weiterhelfen, wie ich das einbinde?

Was CSS grob ist, weiß ich ungefähr...

oder kennst du ne möglichkeit, dass ohne css zu machen?

Link zu diesem Kommentar
Auf anderen Seiten teilen
azett

azett

Geschrieben
Geschrieben
Kannst du mir da noch weiterhelfen, wie ich das einbinde?
Du kannst das CSS direkt in den HTML-Code einbinden:

<td>

<input type="submit" style="float:left;" ... />

<input type="submit" style="float:left;" ... />

<input type="submit" style="float:right;" ... />

<input type="submit" style="float:right;" ... />

</td>
(siehe http://www.css4you.de/wscss/css02.html#tag) ...oder die CSS-Klassen im Head deiner HTML-Datei definieren und im Body aufrufen: 
...

<head>

<style type="text/css">

	input.links {float:left;}

	input.rechts {float:right;}

</style>

</head>

...

<body>

...

<td>

	<input type="submit" class="links" ... />

	<input type="submit" class="links" ... />

	<input type="submit" class="rechts" ... />

	<input type="submit" class="rechts" ... />

</td>

...

</body>

...
(siehe http://www.css4you.de/wscss/css02.html#head) ...oder, was ich persönlich für am übersichtlichsten und vor allem am vorteilhaftesten für spätere Veränderungen halte, die Layout-Informationen komplett in eine externe CSS-Datei auslagern: 
...

<head>

	...

	<link rel="stylesheet" type="text/css" href="style.css">

	...

</head>

<body>

...

<td>

	<input type="submit" class="links" ... />

	<input type="submit" class="links" ... />

	<input type="submit" class="rechts" ... />

	<input type="submit" class="rechts" ... />

</td>

...

</body>

...
style.css dazu: 
	input.links {float:left;}

	input.rechts {float:right;}

(siehe http://www.css4you.de/wscss/css02.html#ext)

www.css4you.de ist meine Online-Bibel, wenns um CSS geht. Sollte in die Bookmarks! ;)

oder kennst du ne möglichkeit, dass ohne css zu machen?
Wenn du einmal fit in CSS bist, wirst du nicht mehr ohne können (oder wollen ;) ).

Haph phun..

..Arvid

Link zu diesem Kommentar
Auf anderen Seiten teilen
  • 2 Wochen später...
azett

azett

Geschrieben
Geschrieben
style="float:right;" wie oben angegeben erzeugt dummerweise einen zeilenumbruch in der tabellenzeile beim formatieren, der button klebt zwar korrekterweise am rechten rand der tabellenzeile, leider eine zeile tiefer als die linken buttons!
Bei mir funktionierts ohne Probleme - stell mal bitte nen Screenshot und die betreffende Quelltextstelle online :)

Ähm Leute, entweder float: left oder float: right, aber beides zusammenschmeißen ist Murks!
Warum? Zwei Buttons floaten links, zwei rechts...wo ist das Problem?

Dann: float benötigt per Definition eine Breite!
Öhm...wie meinen? Float ist doch nur ein CSS-Attribut. Wie meinst du das mit der Breite?

Damit's dann keinen Zeilenumbruch gibt, benötigt man clear.
Clear sorgt nur dafür, daß das Element floatende Elemente nicht mehr umfließt. Es zu verwenden wäre hier genau das Verkehrte - die Buttons sollen ja nebeneinander"fließen".

Schönes Wochenende :)

Link zu diesem Kommentar
Auf anderen Seiten teilen
FMG

FMG

Geschrieben
Geschrieben
Warum? Zwei Buttons floaten links, zwei rechts...wo ist das Problem?

Wenn du vier Elemente hast brauchen nur drei davon zu floaten (und zwar normalerweise einseitig, d.h. nur left oder nur right) - das vierte float ist hier überflüssig.

Öhm...wie meinen? Float ist doch nur ein CSS-Attribut. Wie meinst du das mit der Breite?

Bei CSS V1 ist es so, dass das floatende Element eine Breite benötigt.Schau dir mal den QT dieser Seite an.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...