Zum Inhalt springen

tabellen-tricks


bmg4ever

Empfohlene Beiträge

Hallo Leute,

Ich denke, dass ich wieder mal voll das billige HTML-Problem hab, aber ich kiregs halt nicht hin.

In der folgenden HTML-Datei hab ich mein Problem mal skizziert.


<html>

<head>

<style type="text/css">

	table {

		border-style: solid;

		border-width: 1px;

		border-color: #F00;

		border-collapse: collapse;

	}


	#header {

		height: 15px; 

		color: #FFF;

		background-color: #77F;

	}

	#picutre {

	}

	#kurztext {

		border-style: solid;

		border-width: 1px;

		border-color: #F00;

		border-collapse: collapse;


		width: 100%;

	}

	#button {

		text-align: right;

		vertical-align: bottom;


		border-style: solid;

		border-width: 1px;

		border-color: #F00;

		border-collapse: collapse;


	}

</style>

</head>


<body>


<table width="400px;" style="margin: 0px; padding: 0px;" cellspacing="0">

	<tr>

		<td colspan="2" id="header">

			ÜBERSCHRIFT

		</td>

	</tr>

	<tr>

		<td rowspan="2" id="picture">

			|____________|<br>

			|____B_______|<br>

			|__B_I_L_D___|<br>

			|____L_______|<br>

			|____D_______|<br>

			|____________|<br>

		</td>

		<td id="kurztext"> 

			TEXT

		</td>

	</tr>

	<tr>

		<td id="button">

			BUTTON

		</td>

	</tr>

</table>

</body>

</html>

Ich hätte nun gerne, dass das Feld "kurztext" immer so klein wie nötig und das Feld "Button" immer so groß wie möglich ist.

Wie mache ich das?

Link zu diesem Kommentar
Auf anderen Seiten teilen

sorry ich hab mich falsch ausgedrückt.

ich meine, dass das Textfeld in der höhe so klein wie möglich sein soll. und das Button-feld so hoch wie möglich.

see:

|________________________________________|

|HEADER__________________________________|

|________________________________________|

|____________| TEXT______________________|

|____B_______|___________________________|

|__B_I_L_D___|___________________________|

|____L_______|___________________________|

|____D_______|___________________________|

|____________|___________________BUTTON_|

Im obigen Code sind beide Zellen immer gleich hoch.

Link zu diesem Kommentar
Auf anderen Seiten teilen

schreib doch mal bei table

height="100%"
rein! dann schreibste bei allen td´s ausser beim button noch
height="1"
hinzu und bei dem td von bottun halt
height="*"

das müsste eigentlich funktionieren!

Man kann es natürlich auch in css übertragen, was ich aber persönlich nicht so bevorzuge!

mfg

Link zu diesem Kommentar
Auf anderen Seiten teilen

du solltest dich zunächst entscheiden ob du CSS oder HTML Formattierungen benutzen willst.

Mitlerweile wird CSS bevorzugt und ab XHTML 2 vermutlich die einzige Möglichkeit sein...von daher würde ich dir empfehlen alles im CSS zu definieren (soweit irgendwie möglich)

dein Button-Bereich sollte "Style: height:100%" bekommen,

der Textbereich overflow: visible;

habs nicht ausprobiert, aber laut selfhtml-Beispiel sollte da rauskommen was du haben willst.

welche HTML-Doctype version und welche CSS Version hast du definiert ?

Link zu diesem Kommentar
Auf anderen Seiten teilen

@Aiun:

Das ist mir alles klar.

Das obige Beispiel war auch nur ein beispiel-konstrukt, um vereinfacht zu zeigen, was ich meine.

Im echten Dokument ist alles CSS-formatiert. Zwar noch mit nem HTML 4.01 Strict Doctype, aber wenigstens alles CSS :).

Zu allen Tips:

Man bekommt es anscheinend nicht hin dieses "kurztext" gennante Tabellenfeld kleiner zu kriegen als die Hälfte des Bildes (zumindest im IE). Das liegt anscheinend an der rowspan-eigenschaft.

Ich habs jetzt einfach so gelöst. Ist eh viel einfacher:


	<tr>

		<td id="picture">

			|____________|<br>

			|____B_______|<br>

			|__B_I_L_D___|<br>

			|____L_______|<br>

			|____D_______|<br>

			|____________|<br>

		</td>

		<td height="100%" width="100%"> 

			<table height="100%" width="100%">

				<tr>

				<td id="kurztext"> <!-- mit height: 1em;-->

					TEXT

				</td>

				</tr>

				<tr>

				<td id="button"> <!-- mit height: 100%;-->

					BUTTON		

				</td>

				</tr>

			</table>

		</td>

	</tr>

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.

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.

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...