Problem mit DIV in einem td einer Tabelle

[pa-alex]

Hallo,
ich habe bereits ein fertiges Layout fuer ein Artikelangebot in Ebay mit Hilfe einer Tabelle erstellt, jedoch taucht ein Problem auf.
Ich arbeite mit Dreamweaver CS5 und die Inspect Funktion zeigt mir an, dass obwohl das in der td liegende kleinere div, vom breiteren td uebertroffen wird. Das, obwohl ich fuer das td keine Breite angegeben habe.
Die Tabelle besteht aus 3 Hauptspalten, und alle divs inklusive td, die sich in der mittleren Spalte befinden, weisen dieses Problem auf.
Und dazu kommt, dass das Problem nur zur rechten Seite hin passiert.

Rechts im Bild, zeigt der Inspector das blau markierte DIV mit dem gelben TD Ueberschuss an
Dadurch wird das gesamte Ebay Layout von der Mitte zum rechten Rand hin verschoben, das passiert mit jedem Element bis zum Boden hin.

[ChrisB]

Hi,

Ich arbeite mit Dreamweaver CS5 und die Inspect Funktion zeigt mir an, dass obwohl das in der td liegende kleinere div, vom breiteren td uebertroffen wird.

Gibt's den Satz auch in sinnvoll?

MfG ChrisB

[pa-alex]

Gibt's den Satz auch in sinnvoll?

MfG ChrisB

Okay, nochmal:
In einem <td> Element liegt ein <div>.
Ich habe dem <td> Element keine Breite gegeben, nur dem <div>.
Das <td> wird aus einem mir nicht bekannten Grund nach rechts hin breiter.

Ich hoffe so ist es besser.

[Felix Riesterer]

Lieber pa-alex,

Ich hoffe so ist es besser.

grammatisch schon, inhaltlich nicht. Du verschweigst, in welchen Browsern (und welchen Versionen davon) das von Dir beobachtete Problem auftritt. Außerdem sehen wir hier weder einen Link zu einer Beispielseite, noch den relevanten Code (als Text!) gepostet.

Dein Bildchen ist leider nicht zielführend. Da kann man Dir so nicht helfen. Siehe auch </hilfe/charta.htm#tipps-fuer-fragende>

Man kann auch fragen welchen Sinn es haben soll, in einem <td>-Element ein <div>-Element unterzubringen. Nach semantischen Gesichtspunkten fällt es äußerst(!) schwer, einen vernünftigen Grund zu finden. Wozu also dieser Unsinn?

Liebe Grüße,

Felix Riesterer.

[pa-alex]

Lieber pa-alex,

Ich hoffe so ist es besser.

grammatisch schon, inhaltlich nicht. Du verschweigst, in welchen Browsern (und welchen Versionen davon) das von Dir beobachtete Problem auftritt. Außerdem sehen wir hier weder einen Link zu einer Beispielseite, noch den relevanten Code (als Text!) gepostet.

Dein Bildchen ist leider nicht zielführend. Da kann man Dir so nicht helfen. Siehe auch </hilfe/charta.htm#tipps-fuer-fragende>

Man kann auch fragen welchen Sinn es haben soll, in einem <td>-Element ein <div>-Element unterzubringen. Nach semantischen Gesichtspunkten fällt es äußerst(!) schwer, einen vernünftigen Grund zu finden. Wozu also dieser Unsinn?

Liebe Grüße,

Felix Riesterer.

Musste gerade eben feststellen, dass das Problem nur im Google Chrome auftritt, in anderen Browsern wird die komplette Seite verschoben dargestellt.
Ich werde wohl auf deinen Tip hoeren und die <div>-Elemente weglassen.

Mein Problem ist im Grunde folgendes: ich kann das Layout, was ich in Photoshop erstellt und bereits gesliced habe, nicht codieren, obwohl ich mittlere Kenntnisse von HTML habe.
Aber das Layout ist nicht fuer eine Website, sondern fuer ein Ebay Artikelangebot.
Im Internet gibt es dazu nicht sondelich viele Anleitungen.

[ChrisB]

Hi,

Mein Problem ist im Grunde folgendes: ich kann das Layout, was ich in Photoshop erstellt und bereits gesliced habe, nicht codieren, obwohl ich mittlere Kenntnisse von HTML habe.
Aber das Layout ist nicht fuer eine Website, sondern fuer ein Ebay Artikelangebot.

Auf eBay interessieren mich die Daten und Fakten des zum Verkauf stehenden Artikels - und nicht, was du in Photoshop ggf. kannst (und in HTML nicht) ...

MfG ChrisB

[pa-alex]

Hi Chris,

Auf eBay interessieren mich die Daten und Fakten des zum Verkauf stehenden Artikels - und nicht, was du in Photoshop ggf. kannst (und in HTML nicht) ...

ich moechte dennoch einen neuen Ansatz gehen und die Praesentation des Angebots verbessern.

MfG

[Felix Riesterer]

Lieber pa-alex,

bitte zitiere sinnvoll und nicht einfach alles. Danke.

Mein Problem ist im Grunde folgendes: ich kann das Layout, was ich in Photoshop erstellt und bereits gesliced habe, nicht codieren, obwohl ich mittlere Kenntnisse von HTML habe.

Man erstellt Webseiten auch nicht mit einer Bildbearbeitung. Autos werden auch nicht zuerst aus Knet gebastelt.

Aber das Layout ist nicht fuer eine Website, sondern fuer ein Ebay Artikelangebot.

Mir ist völlig egal wofür ein HTML-Dokument gedacht ist. Für mich zählt zuallererst der handwerkliche Aspekt, besonders die Semantik. Die Inhalte sind das, was letztlich darüber entscheidet, wie der Code aussehen wird. Ist das nicht so, dann ist da etwas sehr im Argen.

Im Internet gibt es dazu nicht sondelich viele Anleitungen.

Und das ist gut so. Wenn Du eine vernünftige Seite machen willst, ist Dein Ansatz von vornherein der falsche. Deshalb sind Anleitungen dazu hoffentlich genauso selten wie dieser Ansatz schlecht ist.

Bei SELFHTML kannst Du im Detail nachlesen wie man es besser machen kann. Aber wie mir scheint, willst Du das vielleicht garnicht... ;-)

Liebe Grüße,

Felix Riesterer.

[pa-alex]

Hallo Herr Riesterer,

Bei SELFHTML kannst Du im Detail nachlesen wie man es besser machen kann. Aber wie mir scheint, willst Du das vielleicht garnicht... ;-)

ich will es aber besser machen. ;-)
Nur leider weiss ich nicht, welchen Ansatz ich gehen soll.

Ich habe folgende 2 auf meinem Gewissen:

1. In der Tabelle auf folgende Elemente zugreifen: http://de.selfhtml.org/css/eigenschaften/anzeige/left.htm

2. Das erstellte Bild als png einbinden, kein auswaehlbarer Text vorhanden, nur die Links sind verknuepft: http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren

Ich denke aber, dass beides nicht das Richtige fuer meine Arbeit sind.
Welchen Weg wuerdest du gehen?

MfG

[Felix Riesterer]

Lieber pa-alex,

ich will es aber besser machen. ;-)

prima! Das klingt ja vielversprechend.

Nur leider weiss ich nicht, welchen Ansatz ich gehen soll.

Baue ein simples HTML-Dokument, in welchem Deine Informationen sinnbehaftet ausgezeichnet werden. Sowie Du das hast, kann man daran gehen, mittels CSS Deine Inhalte zu gestalten.

Im SELFHTML-Wiki ist ein "Einsteiger-Tutorial", in dem dieser Prozess sehr anschaulich vermittelt wird. Noch ist es jedoch nicht fertig - aber um anzufangen ist es sehr lesenswert! Beginne doch gleich mit dem zweiten Schritt. Wenn Du den ersten brauchst, kannst Du ihn ja nachholen.

Ich habe folgende 2 auf meinem Gewissen:

Du bist an einer Stelle gelandet, an der Du die notwendigen Grundlagen bräuchtest, um zu erkennen, dass Du an der falschen Stelle gelandet bist.

Ich denke aber, dass beides nicht das Richtige fuer meine Arbeit sind.

Dein Instinkt ist richtig.

Welchen Weg wuerdest du gehen?

Wenn Du die erste Hälfte des Tutorials im Wiki einigermaßen verstanden und ein erstes HTML-Dokument mit Deinen Informationen angelegt hast, dann reden wir weiter.

Deal?

Liebe Grüße,

Felix Riesterer.

[pa-alex]

Hallo Herr Riesterer,

Wenn Du die erste Hälfte des Tutorials im Wiki einigermaßen verstanden und ein erstes HTML-Dokument mit Deinen Informationen angelegt hast, dann reden wir weiter.

Hab ich gemacht,

Deal?

Deal.

Aber es tauchen trotzdem Probleme auf, die komplette Tabelle wird viel zu breit, obwohl ich den colgroups keine Eigenschaften gegeben habe.
Die Texte habe ich noch vorerst weggelassen.

  
<html>  
  
  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">  
</head>  
  
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  
  
<table id="Tabelle" width="945" border="0" cellpadding="0" cellspacing="0">  
	  
    <tr>  
		<td width="945" height="24" colspan="16"></td>  
	</tr>  
	<tr>  
		<td width="945" height="328" colspan="2" rowspan="10"></td>  
		<td colspan="3" rowspan="6">  
			<img src="bilder/p1.png" width="176" height="231" alt="device"></td>  
		<td width="37" height="328" colspan="3" rowspan="10"></td>  
		<td colspan="5">  
			<img src="bilder/p2.png" width="468" height="41" alt="title-field"></td>  
		<td width="231" height="60" colspan="3" rowspan="2"></td>  
	</tr>  
	<tr>  
		<td width="665" height="19" colspan="5"></td>  
	</tr>  
	<tr>  
		<td colspan="5" rowspan="6">  
			<img src="bilder/p3.png" width="468" height="234" alt="basis-field"></td>  
		<td width="231" height="550" rowspan="12"></td>  
		<td>  
			<img src="bilder/p4.png" width="162" height="42" alt="allgemein-notice"></td>  
		<td width="34" height="2468" rowspan="39"></td>  
	</tr>  
	<tr>  
		<td width="162" height="18"></td>  
	</tr>  
	<tr>  
		<td>  
			<img src="bilder/p5.png" width="162" height="70" alt="moreinformation-notice"></td>  
	</tr>  
	<tr>  
		<td width="162" height="126" rowspan="4"></td>  
	</tr>  
	<tr>  
		<td colspan="3">  
			<img src="bilder/p6.png" width="176" height="51" alt="picture-description"></td>  
	</tr>  
	<tr>  
		<td width="878" height="46" colspan="3" rowspan="3"></td>  
	</tr>  
	<tr>  
		<td width="665" height="22" colspan="5"></td>  
	</tr>  
	<tr>  
		<td colspan="5" rowspan="4">  
			<img src="bilder/p7.png" width="468" height="267" alt="detailsdevice-field"></td>  
		<td rowspan="2">  
			<img src="bilder/p8.png" width="162" height="52" alt="details-notice"></td>  
	</tr>  
	<tr>  
		<td width="945" height="2200" rowspan="31"></td>  
		<td colspan="6" rowspan="2">  
			<img src="bilder/p9.png" width="232" height="206" alt="device-animation"></td>  
		<td width="7" height="339" rowspan="6"></td>  
	</tr>  
	<tr>  
		<td width="162" height="242" rowspan="3"></td>  
	</tr>  
	<tr>  
		<td width="26" height="1994" rowspan="29"></td>  
		<td colspan="3">  
			<img src="bilder/p10.png" width="176" height="49" alt="picturedescription-field"></td>  
		<td width="37" height="133" colspan="2" rowspan="4"></td>  
	</tr>  
	<tr>  
		<td width="878" height="141" colspan="3" rowspan="4"></td>  
		<td width="665" height="27" colspan="5"></td>  
	</tr>  
	<tr>  
		<td colspan="7">  
			<img src="bilder/p11.png" width="665" height="42" alt="details2-notice"></td>  
	</tr>  
	<tr>  
		<td width="665" height="15" colspan="7"></td>  
	</tr>  
	<tr>  
		<td width="37" height="57"></td>  
		<td colspan="2" rowspan="5">  
			<img src="bilder/p12.png" width="27" height="516" alt="included"></td>  
		<td colspan="7" rowspan="7">  
			<img src="bilder/p13.png" width="665" height="700" alt="details2-field"></td>  
	</tr>  
	<tr>  
		<td colspan="4">  
			<img src="bilder/p14.png" width="186" height="115" alt="costs-field"></td>  
	</tr>  
	<tr>  
		<td width="878" height="58" colspan="4"></td>  
	</tr>  
	<tr>  
		<td colspan="2">  
			<img src="bilder/p15.png" width="161" height="114" alt="help-field"></td>  
		<td width="25" height="885" colspan="2" rowspan="10"></td>  
	</tr>  
	<tr>  
		<td width="878" height="771" colspan="2" rowspan="9"></td>  
	</tr>  
	<tr>  
		<td width="692" height="17" colspan="2"></td>  
	</tr>  
	<tr>  
		<td colspan="2">  
			<img src="bilder/p16.png" width="27" height="167" alt="optional-field"></td>  
	</tr>  
	<tr>  
		<td width="692" height="36" colspan="9"></td>  
	</tr>  
	<tr>  
		<td width="692" height="379" colspan="2" rowspan="5"></td>  
		<td colspan="5" rowspan="2">  
			<img src="bilder/p17.png" width="468" height="269" alt="bedingungen-field"></td>  
		<td width="231" height="775" rowspan="13"></td>  
		<td>  
			<img src="bilder/p18.png" width="162" height="42" alt="bedingungen-notice"></td>  
	</tr>  
	<tr>  
		<td width="162" height="260" rowspan="2"></td>  
	</tr>  
	<tr>  
		<td width="665" height="33" colspan="5"></td>  
	</tr>  
	<tr>  
		<td colspan="5" rowspan="3">  
			<img src="bilder/p19.png" width="468" height="177" alt="delivered-field"></td>  
		<td>  
			<img src="bilder/p20.png" width="162" height="41" alt="deliveredincluded-notice"></td>  
	</tr>  
	<tr>  
		<td width="162" height="196" rowspan="4"></td>  
	</tr>  
	<tr>  
		<td width="878" height="160" rowspan="3"></td>  
		<td colspan="5" rowspan="2">  
			<img src="bilder/p21.png" width="78" height="129" alt="delivered2-field"></td>  
	</tr>  
	<tr>  
		<td colspan="4">  
			<img src="bilder/p22.png" width="423" height="29" alt="delivered3-field"></td>  
		<td width="45" height="60" rowspan="2"></td>  
	</tr>  
	<tr>  
		<td width="501" height="31" colspan="9"></td>  
	</tr>  
	<tr>  
		<td colspan="11" rowspan="2">  
			<img src="bilder/p23.png" width="681" height="122" alt="fussnoten-field"></td>  
		<td>  
			<img src="bilder/p24.png" width="162" height="41" alt="fussnoten-notice"></td>  
	</tr>  
	<tr>  
		<td width="162" height="195" rowspan="4"></td>  
	</tr>  
	<tr>  
		<td width="878" height="29" colspan="11"></td>  
	</tr>  
	<tr>  
		<td colspan="8">  
			<img src="bilder/p25.png" width="266" height="58" alt="shippingfree-field"></td>  
		<td width="415" height="85" colspan="3" rowspan="2"></td>  
	</tr>  
	<tr>  
		<td width="878" height="27" colspan="8"></td>  
	</tr>  
	<tr>  
		<td colspan="13">  
			<img src="bilder/p26.png" width="878" height="157" alt="conclusion-field"></td>  
	</tr>  
	<tr>  
		<td width="878" height="63" colspan="13"></td>  
	</tr>  
	<tr>  
		<td colspan="7">  
			<img src="bilder/p27.png" width="216" height="42" alt="logo"></td>  
		<td width="329" height="130" colspan="2" rowspan="2"></td>  
		<td colspan="4">  
			<img src="bilder/p28.png" width="333" height="42" alt="goodluck"></td>  
	</tr>  
	<tr>  
		<td width="878" height="88" colspan="7"></td>  
		<td width="333" height="88" colspan="4"></td>  
	</tr>  
</table>  
  
</body>  
</html>  
  

[Felix Riesterer]

Lieber pa-alex,

Dein Code ist auf den ersten Blick völliger Müll. Welche _Informationen_ willst Du transportieren? Danach entscheidet sich, ob eine Tabelle überhaupt das Mittel der Wahl ist.

Auch wenn das ein Ebay-Angebot werden soll wirst Du nicht umhin kommen, ein Bisschen Deiner Texte hier zu verraten, denn sonst kommen wir hier nicht weiter. Auch die Bildelemente sind zunächst nichtssagende URLs. Wozu brauchst Du da Bilder? Und warum sollten die in einer Tabelle stehen?

Ich habe den ganz starken Verdacht, dass Du die Tabelle zu Layoutzwecken missbrauchst. Deswegen stehen da auch all die schönen Layout-Anweisungen à la "border", "leftmargin", "topmargin", "marginwidth", "marginheight" und dergleichen.

Schmeiß das alles raus, entferne die Tabelle und poste _Inhalte_!

Liebe Grüße,

Felix Riesterer.

[pa-alex]

Lieber pa-alex,

Ich habe den ganz starken Verdacht, dass Du die Tabelle zu Layoutzwecken missbrauchst.

Schmeiß das alles raus, entferne die Tabelle und poste _Inhalte_!

Wie soll man sonst ein Ebaylayout erstellen, ohne dass alles auf der Ebay Seite verschoben wird? Ich habe mich an anderen Ebayern orientiert, die machen das Layout fast alle mit Hilfe von Tabellen.

Ich habe dir eine Email mit dem Bild geschickt (Betreff: "SelfHTML pa-alex Layout"), wie das ganze im Internet dann aussehen soll.

MfG

[Felix Riesterer]

Lieber pa-alex,

Wie soll man sonst ein Ebaylayout erstellen, ohne dass alles auf der Ebay Seite verschoben wird? Ich habe mich an anderen Ebayern orientiert, die machen das Layout fast alle mit Hilfe von Tabellen.

Du musst es nicht sinnvoll machen. Wenn es ein kommerzielles Angebot ist, dann mach es halt so wie alle anderen auch. Du weißt ja, Millionen von Fliegen...

Ich habe dir eine Email mit dem Bild geschickt (Betreff: "SelfHTML pa-alex Layout"), wie das ganze im Internet dann aussehen soll.

Ja, ohne jeglichen Text dazu, geschweige denn mit Anrede und Grußformel. Solche Mails sind mir die herzallerliebsten. Da Du da etwas kommerzielles machst, kann ich Dir nicht helfen, denn ein semantisches Dokument mit Wunschlayout bastle ich Dir nicht gratis, und gegen Geld biete ich solche "Dienste" nicht an.

Liebe Grüße,

Felix Riesterer.

[pa-alex]

Lieber Felix,

»»Da Du da etwas kommerzielles machst, kann ich Dir nicht helfen, denn ein semantisches Dokument mit Wunschlayout bastle ich Dir nicht gratis, und gegen Geld biete ich solche "Dienste" nicht an.

ich habe Dir ja auch nichts von gratis, geschweige denn von machen gesagt.

Durch Deine Mithilfe hast Du mir bereits einiges an Zeit und Geld gegeben, wofuer ich Dir sehr dankbar bin.

Aber da Du in dieser Programmiersprache mir um jahrzehnte voraus bist, wuerde ich mich sehr ueber einen Ansatz freuen, wie ich das Projekt zum Ende bekomme.
Mit welchen Mitteln wuerdest Du an diese Thematik angehen?
Absolute divs wuerden das Layout bei Ebay nur zerbrechen, eine Tabelle fuer das Layout ist zu aufwendig.

Liebe Gruesse,

pa-alex