• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text hängt über Tabellenrand heraus

Status
Für weitere Antworten geschlossen.
r-ene

r-ene

Neues Mitglied
Hi Leute,
habe folgenden Code:
Code: 
<html>

<head>
<style type="text/css">
.tablei
	{
	border: 1px solid #000000;
	}
.tablei td
	{
	padding: 0px;
	}
.abstand
	{
	padding: 10px;
	}
</style>
</head>

<body>

<table cellspacing="0" cellpadding="0" width="500" class="tablei">
	<tr>
		<td width="150">
		<img border="0" src="blubb.gif" alt="Blubb" width="150" height="110"></td>
		<td>
		<div class="abstand">
			<table cellspacing="0" cellpadding="0" width="100%">
				<tr>
					<td>la text bla blubb text bla blubb text bla blubb text bla 
					blubb text bla blubb text bla blubb text bla blubb text bla 
					blubb text bla blubb text bla blubb text bla blubb text bla 
					blubb</td>
				</tr>
			</table>
		</div>
		</td>
	</tr>
</table>

</body>

</html>
Im Firefox wird das so angezeigt, wie ich will.
Im IE hängt der Text nicht sichtbar über den Tabellenrand hinaus.

Wieso ist das so? Wie kann ich das am besten lösen?
 
Werbung:
Werbung:
r-ene schrieb:
Wie mach ich das ohne Tabelle?
Zum Vergrößern anklicken....
Mit semantisch korrektem HTML. Mit HTML, wie es gedacht ist: Zeichne Deinen Inhalt logisch aus. Zeichne Überschriften als solche aus (Tags <h1> bis <h6>), zeichne Textabsätze als solche aus (Tag <p>), zeichne wichtige Textabschnitte als solche aus (Tag <em>), zeichne tabellarische (zweidimensionale) Daten als solche aus (Tag <table>) usw. HTML ist nur für die logische Auszeichnung da.

Alles, was Aussehen, Layout und Design ist, wird mit CSS gemacht.

Verfalle außerdem nicht in divitis: Wozu Du ein div um die table drum gemacht hast, ist mir absolut unverständlich, Du hättest den Abstand genausogut der Tabelle geben können. div verwendet man nur zum Gruppieren mehrerer Elemente zwecks gemeinsamer Formatierung.

Gruß,
-Efchen
 
Werbung:
r-ene schrieb:
Ach, ich kenn mich mit divs halt gar nicht aus.
Zum Vergrößern anklicken....
Davon redet ja auch keiner. Layout macht man nicht mit Tabellen, Layout macht man auch nicht mit divs. Ich hab was anderes geschrieben.

muss ich mal lernen.
Zum Vergrößern anklicken....
Das hat Vorteile für Dich und Vorteile für Deine Nutzer.

Würdet ihr die komplette Seite (R-ene.de - Lustige Spiele, Spaß und Unterhaltung - Das ist lustig) aus divs aufbauen? Ist das möglich?
Zum Vergrößern anklicken....
Nein, das ist Quatsch. Lies bitte, was ich geschrieben habe!

Aber Layout mit CSS? ja, das geht. Natürlich mit jeder Seite.
 
Also wär es am besten, dass Grundgerüst mit einer Tabelle zu bauen und für den Rest divs nehmen?
Oder was denkt ihr?
 
r-ene schrieb:
Also wär es am besten, dass Grundgerüst mit einer Tabelle zu bauen und für den Rest divs nehmen?
Zum Vergrößern anklicken....
das ist beides Quatsch.

Tabellen sind dazu da, tabellarische Daten auszuzeichnen. divs sind dazu da, mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren.

Als Basis verwendest Du HTML. HTML als Strukturbeschreibungssprache ist dazu da, Deinem Inhalt eine Bedeutung zu geben. Lies-meinen-Beitrag auf Deine Frage "Wie mach ich das ohne Tabellen". Dann können wir weiter reden.

Außerdem kann ich noch das hier empfehlen:
Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten

Nicht verkehrt wäre außerdem, HTML zu lernen: SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

Gruß,
-Efchen

P.S.: Es ist nicht immer alles einfach. Der Umstieg von Tabellenmissbrauch ist für manche schwer. Hier kriegst Du Hilfe, aber im Moment bin ich mir nicht sicher, ob Du meine Ausführungen überhaupt liest. Auf der Basis kann ich natürlich nicht weiter machen, ich muss ja nicht alles mehrmals sagen. Also langsam eines nach dem anderen, dann schaffen wir das schon :-)

Im Thread http://www.html.de/html-und-xhtml/20606-scrollbares-td.html erkläre ich übrigend gerade das selbe, vielleicht schaust Du da auch mal rein.
 
Werbung:
Daran liegt es nicht. :( Ich hasse divs... und liebe Tabellen :-D
Okay, jetzt ist es etwas besser: Neue Seite 1
Wie krieg ich es hin, dass das Menü und der Inhalt bis nach ganz unten grau heruntergeht?
Wie kann ich das mit den weißen Abständen besser machen?
 
Zuletzt bearbeitet:
Werbung:
r-ene schrieb:
Ah, jetzt hab ichs verstanden.
Zum Vergrößern anklicken....
Noch nicht ganz:
1. Dein Code ist eklige div-Suppe. Eines Deiner größten Probleme scheint zu sein, dass Dir nicht klar ist, dass Du jede CSS-Eigenschaft auf jedes HTML-Element anwenden kannst und nicht erst ein div erzeugen musst. Nur so erkläre ich mir die zahlreichen, sinnlosen div.abstand.
2. Deine Seite beginnt mit einer Überschrift dritten Grades. Ohne eine Überschrift 1. und 2. Grades? Das geht nicht. Schon in der ersten Klasse lernt man, dass man bei 1 beginnt, zu zählen :-)
3. Warum div#header? Warum ein allgemeines Block-Element nehmen und das als "Überschrift" benennen? Warum nicht gleich eine Überschrift draus machen? Statt <div id="header"> nimm doch <h1 id="header">. Sind beides Block-Elemente, nur dass das h1 den Inhalt auch als Überschrift auszeichnet. Das div sagt nur "Hab hier Inhalt, hab aber keine Ahnung, was das darstellen soll".
4. Da ist noch ein HTML-Attribut "border" im img-Tag, das mit CSS abgebildet werden sollte. Trennung in Inhalt und Layout.
5. Oh, jetzt kommt doch noch eine Überschrift 1. Grades. Nun gut. Die Überschrift zweiten Grades fehlt dennoch.
6. IMHO sollte auch der div#footer zumindest ein p#footer sein. Warum hier wieder ein Element verwenden, das nichts über den Inhalt aussagt und für gewöhnlich zum Gruppieren verwendet wird? Warum nicht den Footer als Textabsatz auszeichnen, ist doch einer!

Jetzt hab ich da Stunden rumgewerkelt und im IE siehts super aus, im Firefox kann ich nichts erkennen...
Zum Vergrößern anklicken....
Es ist keine gute Idee, zuerst mit dem IE zu testen. Der ist zu vielem nicht fähig und verscuht manche Fehler zu korrigieren. Das macht es aber leider schwerer, Fehler wirklich zu finden. Du solltest Dir angewöhnen, immer mit einem wirklich modernen Browser (quasi alles außer IE :)) zu testen, ideal ist Firefox. Außerdem hast Du immer noch keinen geeigneten Doctype, es muss einer sein, der alle Browser in den Standards Mode versetzt, denn sonst gibt es Darstellungsunterschiede zwischen allen Browsern.
LANtastic’s Artikel » DTD - Document Type Declaration - Das richtige Doctype
Außerdem solltest Du Deinen HTML-Code validieren: The W3C Markup Validation Service Dann siehst Du bei Deiner Seite, dass Du beim meta-Tag für den Zeichensatz die XHTML-Schreibweise verwendet hast und das Tag geschlossen hast, was bei HTML 4.01 Transitional (was Du verwendest, s. Doctype) nicht erlaubt ist.

r-ene schrieb:
Ich hasse divs... und liebe Tabellen
Zum Vergrößern anklicken....
Die divs können nichts dafür, die haben nicht so eine große Stellung, wie Du immer noch glaubst. Etliche Deiner divs können noch verschwinden. Was Du gerade versuchst ist CSS-Design, nicht div-Design. Also bitte nicht die unschuldigen divs irgendwie verurteilen :-) Und Tabellen liebe ich auch, weil sie das einzige Mittel sind, tabellarische Daten auszuzeichnen.

Wie krieg ich es hin, dass das Menü und der Inhalt bis nach ganz unten grau heruntergeht?
Zum Vergrößern anklicken....
Mit Elementen, die sich wie Tabellenzellen verhalten. Aber das kann der IE nicht. Also muss man sich behelfen mit einem entsprechenden Hintergrundbild, das sich über alle Spalten zieht. Faux Columns nennt man das wohl, dazu findest Du sicher hier im Forum über die Suchfunktion auch einen Link.

Wie kann ich das mit den weißen Abständen besser machen?
Zum Vergrößern anklicken....
Definiere "besser"!

Wird schon! :-)

Gruß,
-Efchen
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
1. Dein Code ist eklige div-Suppe. Eines Deiner größten Probleme scheint zu sein, dass Dir nicht klar ist, dass Du jede CSS-Eigenschaft auf jedes HTML-Element anwenden kannst und nicht erst ein div erzeugen musst. Nur so erkläre ich mir die zahlreichen, sinnlosen div.abstand.
Zum Vergrößern anklicken....
Okay das habe ich jetzt verstanden. Ich weiß halt nicht, wenn ich einfach einen weißen Abstand halten möchte (5px hoch, diese weißen Striche), soll ich dann ein transparentes Bild einfügen?
Oder dieser Übergang von dem weiß in das grau (ganz links und ganz rechts) habe ich im Moment auch mit einem leeren div definiert, weil ich nicht weiß, was ich dafür sonst nehmen sollte.

2. Deine Seite beginnt mit einer Überschrift dritten Grades. Ohne eine Überschrift 1. und 2. Grades? Das geht nicht. Schon in der ersten Klasse lernt man, dass man bei 1 beginnt, zu zählen
Zum Vergrößern anklicken....
Also soll ich die Überschriften über dem Navigationsmenü einfach als Textabsatz definieren?

Warum div#header? Warum ein allgemeines Block-Element nehmen und das als "Überschrift" benennen? Warum nicht gleich eine Überschrift draus machen? Statt <div id="header"> nimm doch <h1 id="header">. Sind beides Block-Elemente, nur dass das h1 den Inhalt auch als Überschrift auszeichnet. Das div sagt nur "Hab hier Inhalt, hab aber keine Ahnung, was das darstellen soll".
Zum Vergrößern anklicken....
Naja, weil im Header ja das Logo drinne ist. Das ist keine Überschrift, außerdem soll über und unter dem Logo ein Abstand von 5px sein. Deswegen habe ich ein div genommen. Was soll ich da am besten nehmen?

Da ist noch ein HTML-Attribut "border" im img-Tag, das mit CSS abgebildet werden sollte. Trennung in Inhalt und Layout.
Zum Vergrößern anklicken....
Oh stimmt, okay danke!
IMHO sollte auch der div#footer zumindest ein p#footer sein. Warum hier wieder ein Element verwenden, das nichts über den Inhalt aussagt und für gewöhnlich zum Gruppieren verwendet wird? Warum nicht den Footer als Textabsatz auszeichnen, ist doch einer!
Zum Vergrößern anklicken....
Hab ich jetzt...

Puh... anstrengend ;)
Danke für die Hilfe!
 
r-ene schrieb:
wenn ich einfach einen weißen Abstand halten möchte, soll ich dann ein transparentes Bild einfügen?
Zum Vergrößern anklicken....
Bilder sind Bilder. Sie sollen etwas zeigen, etwas darstellen, Leben in den Text bringen.
Um Abstände zu machen, gibt es CSS. Da gibts die Eigenschaft "margin" (Außenabstand) oder "padding" (Innenabstand). Rahmen macht man mit "border".

Oder dieser Übergang von dem weiß in das grau (ganz links und ganz rechts) habe ich im Moment auch mit einem leeren div definiert, weil ich nicht weiß, was ich dafür sonst nehmen sollte.
Zum Vergrößern anklicken....
Wenn es ein flexibles Layout ist, dann passt das schon so. Wäre es ein fixes, würde man ein Hintergrundbild unter alles legen. Aber so ist auch das div ganz gut gewählt, weil ja kein weiterer Inhalt drin steht. Den Rahmen dann als background-image und gut ist.

Also soll ich die Überschriften über dem Navigationsmenü einfach als Textabsatz definieren?
Zum Vergrößern anklicken....
Du brauchst Dir nur Deine Frage wörtlich durchlesen, dann weißt Du die Antwort.
Ist Überschrift == Textabsatz? Nein, eine Überschrift ist eine Überschrift. Die kann kein Textabsatz sein.
Aber eine Seite beginnt immer mit einer Überschrift ersten Grades, danach kommt immer mindestens eine Überschrift zweiten Grades usw. Eine Überschrift 6. Grades kann nur vorkommen, wenn die 5 Grade vorher schon vorhanden sind. In einem Buch kommt auch immer erst Kapitel 1. Nur Star Wars fängt mit Episode 4 an :-)

Naja, weil im Header ja das Logo drinne ist. Das ist keine Überschrift, außerdem soll über und unter dem Logo ein Abstand von 5px sein. Deswegen habe ich ein div genommen. Was soll ich da am besten nehmen?
Zum Vergrößern anklicken....
Wenn Du nur ein <img> hast, dann musst Du das nicht weiter in ein <div> packen. Die Frage ist, was ist das für ein Logo? Nur ein Bild? Steht da Text drin? Ist es eigentlich Content oder nur verzierendes Beiwerk? Wenn es das Logo einer Firma ist, z.B., dann ist es Content. Im alt-Attribut des <img>-Tags sollte dann der Name der Firma auftauchen, wenn der nicht woanders vorkommt. Das ganze bietet sich dann an, als Überschrift 1. Grades eingebaut zu werden. Ist es nur Zierde, dann sollte es besser als background-image eingebaut werden, dann ist das <div> okay.

Und, einen Abstand kann man auch dem <img>-Tag geben!
 
Bilder sind Bilder. Sie sollen etwas zeigen, etwas darstellen, Leben in den Text bringen.
Um Abstände zu machen, gibt es CSS. Da gibts die Eigenschaft "margin" (Außenabstand) oder "padding" (Innenabstand). Rahmen macht man mit "border".
Zum Vergrößern anklicken....
Danke, die Abstände hab ich so hingekriegt.

Okay, dann bin ich fast fertig.
Mit der Überschrift ist es halt so, dass mir eigentlich die jetztige <h3> Überschrift am wichtigsten für die jeweiligen Seiten ist.
 
Werbung:
r-ene schrieb:
Mit der Überschrift ist es halt so, dass mir eigentlich die jetztige <h3> Überschrift am wichtigsten für die jeweiligen Seiten ist.
Zum Vergrößern anklicken....
Die wichtigste Überschrift ist immer eine Überschrift 1. Grades. Darum ja erster Grad. Also spricht nichts dagegen, statt h3 einfach h1 zu nehmen.

Naja, aber Dein Header schreit ja auch geradezu nach <h1>. Insbesondere mit dem alt-Attribut. Gut! So wies jetzt ist, passt das schon. Kein <h3>.

So, nun weiter mit den unangenehmen Sachen :-)

Mir gefällt die Schriftgröße nicht.
1. Du hast eine Einheit (px) benutzt, bei der der IE nicht in der Lage ist, sie durch den Nutzer zu skalieren. Das ist schlecht. Wer Deine Schrift nicht lesen kann, kann Deine Site nicht nutzen, weil er die Schriftgröße nicht ändern kann.
2. Du solltest Fließtext immer 1em groß machen. Das ist die Einstellung, die jeder Nutzer in seinem Browser als für ihn optimal eingestellt hat. So wird Schrift nie zu groß oder zu klein.
3. Wenn man bei Dir die Schrift vergrößert, platzt das Layout auseinander. Dem kannst Du entgegen wirken, indem Du Größen Deiner Elemente über die Einheit "em" definierst. em bezieht sich immer auf die aktuelle Schriftgröße.
4. Und wenn wir schon dabei sind, Deine Seite passt sich auch nicht an den verfügbaren Platz im Fenster (= Viewport) an. Außerdem hast Du die Seite falsch horizontal zentriert, macht man das Fenster kleiner, als Deine Seite breit ist, verschwindet alles links aus dem Browser und kann von dort nicht wieder hergeholt werden. Horizontales Zentrieren von Block-Elementen geht mit "margin:0 auto;".

Grüße,
-Efchen
 
Zuletzt bearbeitet von einem Moderator:
Efchen schrieb:
Die wichtigste Überschrift ist immer eine Überschrift 1. Grades. Darum ja erster Grad. Also spricht nichts dagegen, statt h3 einfach h1 zu nehmen.

Naja, aber Dein Header schreit ja auch geradezu nach <h1>. Insbesondere mit dem alt-Attribut. Gut! So wies jetzt ist, passt das schon. Kein <h3>.
Zum Vergrößern anklicken....

Das allerdings verwendet er zur Zeit für den Header. Er bezieht sich, glaube ich, auf die rechte Spalte, in der jetzt oben "Überschrift" steht. Diese wird im Moment mit h3 ausgezeichnet. Ich halte h2 für sinnvoller, wie bei den Zwischenüberschriften der Navigation.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben