layout erstellt im GoLive wird im IE falsch dargestellt

Duggu · 17.01.2008, 19:20

Hallo,

ich habe im GoLive ein Tabellenlayout erstellt. Ich weiß, das es nicht mehr so gern gesehen wird, aber ich wollte dieses Layout unbedingt so haben.

Mein Problem ist jezt. Die Box 7 wird im IE Explorer ganz schmal dargestellt, dabei soll sie genaus wie Box 8 Sein (die im IE auch falsch dargestellt ist)

Hier mein Layout und die dazugehörige CSS.

http://www.aamir-khan.de/aamir.html
http://www.aamir-khan.de/aamir.css

Wisst ihr wie ich die Box 7 und 8 wieder gleichgroß für IE darstellen kann?

Mein Standardbrowser ist sonst Firefox, da wird es richtig angezeigt.

Über eure Hilfe wäre ch euch sehr dankbar

Lg Duggu

UweB · 17.01.2008, 20:11

Hallo Duggu,
wenn du unbedingt mit Tabellen arbeiten willst, solltest du auch alle Zellen-Größen in der Tabelle (nicht in der CSS-Datei) angeben. Dann würde dir GoLive auch sofort anzeigen, dass deine Größen nicht zusammenpassen. So sind deine Tabellen immer mit 800px angegeben, alle Zeilen aber mit mindestens 820px und teilweise mehr (die Breite der Zellen ergibt sich aus "width"+"padding-left").
Im FireFox mag die Darstellung derzeit besser sein, "richtig" ist sie aber auch nicht.
Im Moment behandelst du die Tabellenzellen wie div-Boxen. So vereinst du meiner Meinung nach einige Nachteile beider Lösungen.

Gruß
Uwe

Duggu · 18.01.2008, 00:03

Ich hab jetzt mal padding rausgenommen, aber jetzt werden mir die größen ja total auseinander gezogen.

Habe dann die Werte direkt in die tabellen geschrieben. Da ist die tabellen zwar wieder schön zusammen, aber Box 7 ist im IE immer noch so schmall.

Wenn ich die Boxen (width) zusammenrechne kommen ich immer auf 800px.

1. Tabelle (für die Boxen)
1. Zeile: box 1-3 = 800px
2. Zeile: Box 4 und 3 = 800px

2. Tabelle (für die Boxen)
1. Zeile Box 5+6 = 800px
2. Zeile box 5+7+8= 800px

Hab ich entwa einen logischen Denkfehler drin?

Duggu

UweB · 18.01.2008, 08:14

Ganz stimmt die Rechnung noch nicht. Deine Zellen haben ja noch Ränder.
Warum lässt du GoLive nicht diese Berechnungen machen? Der Tabelleninspektor kann da eine große Hilfe sein.
Dein größtest Problem liegt aber glaube ich in zu vielen (unnötigen) Spalten.

Tausche deine Tabelle mal gegen diese aus:

Code:

<table align="center" width="800" border="1" cellpadding="0" cellspacing="0">
	<tr>

		<td id="box5" rowspan="2" width="246" height="554">Box5</td>
		<td id="box6" colspan="2" width="546" height="276">box6</td>
	</tr>
	
	<tr> 
		<td id="box7" colspan="1" width="272" height="249">box7 </td>
		<td id="box8" colspan="1" width="272"  height="249">box8</td>
	</tr>	
	
	</table>

Nun müsste es funktionieren.

Gruß
uwe

Duggu · 18.01.2008, 13:48

Danke schön, es funktioniert jetzt.

Wo genau finde ich diesen Tabelleninspektor. Ich kann ihn einfach nicht finden. Unter Spezial Tabellen ist nur die Funktion geben Zeilen oder spalten einzufügen das andere ist grau hinterlegt Werte kann ich aber nirgends eingeben und berechnungen auch nicht.

Lg Duggu

UweB · 18.01.2008, 14:00

Wenn du im Layout-Fenster in der Tabelle bist, sollten im Inspektor-Fenster die Reiter Tabelle, Zeile, Zelle und Text erscheinen. Um auf einzelne Zellen zugreifen zu können ist es sinnvoll zusätzlich das Fenster "Tabelle und Felder" mit dem Reiter "Auswahl" offen zu haben. In diesem Fenster werden alle Zellen inkl. ihrer Größe dargestellt. Werte, die nicht möglich sind erscheinen rot. Zum automatischen Ändern markierst du die Zelle und stellst im Inspektorfenster im Reiter Zelle den Wert der betroffenen Größe auf Auto und danach wieder auf Pixel. GoLive setzt nun den Wert ein, der zur aktuellen Layoutansicht passt. Wenn das Layout durch das hin und her stellen nicht verändert wurde, kann der Wert so bleiben. Anderenfalls liegt wahrscheinlich ein weiterer Fehler vor.

Gruß
Uwe

Duggu · 20.01.2008, 00:34

Vielen vielen dank, es hat geklappt. Das layout steht. Jetzt muss ich nur noch die "border" anpassen, sonst sieht man sie doppelt (da wo die einzelnen Tabellen sind), aber das kann man ja im Css dann regeln mit Border-top, Border-Bottom und so oder?

Lg Duggu

koenixblau · 20.01.2008, 09:51

Oder direkt im Tabellen-Tag:

HTML-Code:

<table width="560" border="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Ohne Zellabstand und Auffüllung:

HTML-Code:

<table width="560" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Desweiteren wäre es noch empfehlenswert sich mit einigen Grundkenntnissen zu beschäftigen.

UweB · 20.01.2008, 11:03

@koenixsblau
ich glaube, das hat Duggu nicht gemeint.

es geht darum, dass die Tabellen einen Rahmen haben sollen, aber dort, wo zwei Tabellen aufeinander treffen keiner angezeigt werden soll.

@Duggu
Das kannst du mit CSS machen.

Gruß
Uwe

koenixblau · 20.01.2008, 11:16

Zitat:

Zitat von UweB

@koenixsblau
ich glaube, das hat Duggu nicht gemeint.

es geht darum, dass die Tabellen einen Rahmen haben sollen, aber dort, wo zwei Tabellen aufeinander treffen keiner angezeigt werden soll.

@Duggu
Das kannst du mit CSS machen.

Gruß
Uwe

Hm, sorry hatte noch nicht meine morgenliche Portion Kaffee intus.

Wobei "anpassen" weitläufig ist.

Das er das mit CSS machen kann hat er schon erkannt.

Nur was er konkret anpassen bzw. wie anpassen möchte ist mir nicht klar.

UweB · 20.01.2008, 12:23

Ja, das hat er/sie im Prinzip erkannt. Trotzdem steht hinter dieser Erkenntnis ein Fragezeichen. Daher mein Hinweis, ohne weitere Erklärung, dass es so gehen wird.
Worum es geht? Um einen Rand um mehrere Tabellen gleichzeitig, so dass der Eindruck entsteht es wäre nur eine Tabelle.

Ganz am Ende könnte noch die Erkenntnis stehen, dass es ohne Tabellen, besser gegangen wäre. warten wie es ab....

Gruß
Uwe

Duggu · 21.01.2008, 13:47

Hallo,

welche Möglichkeite gibt es, mein layout ohne Tabellen darzustellen? Mein Layout soll nähmlich diese Boxen haben.

Lg Duggu (weiblich)

UweB · 21.01.2008, 14:28

Hallo Duggu,
das ist ein großes Thema.
Du müsstest die da in CSS-Layouts einarbeiten.

Beispiele gibt es z.B. hier und hier.

Gruß
Uwe

Duggu · 21.01.2008, 19:03

Hallo,

aber ich hatte doch meine boxen in css gehabt. Da wurde mir gesagt, dass ich die weite und so lieber ins html nehmen soll.

Verstehe jetzt grad gar nix mehr. Ich bleibe jetzt bei den tabellen und verweise per id zur Css.

Was noch nciht klappt ist, dass der Tabellenrand bei zwei aneinanderfolgenden Tabellen noch doppelt ist.

Geht das nur über Css? Denn so richtig klappt es da nicht.

Was auch nicht so ganz klappt. Wenn ich mein bild vom Banner über Css definiere (per ID) dann ist der rechte Rand und der unterre Rand ganz dünn. Wenn ich in de Tabelle für den Banner das bild einfüge und nicht auf die Css dafür zugreife ist der Rand richtig zu sehen. Woran liegt das?

Lg Duggu

UweB · 21.01.2008, 22:25

Zitat:

aber ich hatte doch meine boxen in css gehabt.

Das ist ein Misverständnis des Begriffes CSS-Layout.
Es geht dabei nicht nur um CSS, sondern um den Einsatz von DIV-Boxen an stellen von Tabellen. Die DIV-Elemente (und auch alles andere) werden dann mit CSS formatiert.
Du hattest keine Boxen sondern Tabellenzellen mit CSS formatiert. Dadurch behältst du die Nachteile von Tabellen und bekommst meiner Meinung nach zusätzlich die (wenigen) Nachteile von CSS-Formatierung. Deshalb mein Rat die Zellengrößen nicht mit CSS festzulegen.

Es geht nicht darum möglichst viel mit CSS zu machen, sondern das "Richtige".
Bilder z.B. lassen sich mit CSS nur als Hintergrundbilder einfügen. Wenn die obere Zelle jedoch nur dieses Bild beinhaltet ist es meistens sinnvoll dieses nicht als Hintergrund, sondern ganz normal als HTML-Element einzufügen.
Im Bezug auf Tabellen ist CSS auch nur da sinnvoll, wo es Lösungen bietet, die auf anderem Wege nicht erreicht werden können. Ein nicht durchgehender Rand ist so ein Fall. Nur musst du dann natürlich die "normalen" Tabellenränder ausschalten.

Zitat:

Ich bleibe jetzt bei den tabellen

Das würde ich dir zum jetzigen Zeitpunkt auch empfehlen. Ein CSS-Layout benötigt viel Einarbeitung. Das solltest du dir für später aufheben.

Gruß
Uwe