Tabellen frage

KingstonTown · 31. Januar 2008, 22:27

Hi zusammen,habe da ein Problem mit Tabellen

Unzwar habe ich eine Tabelle erstellt und möchte neben die Tabelle ein Foto haben,OHNE dass sich die linken Tabellenzellen sich vergrößern, (siehe Bild)

allerdings passiert bei mir folgendes:

hoffe ihr wisst was ich meine und könnt mir helfen

Dass Rote ist jetzt mal nen TestBild

::: EDIT :::

So lautet momentan der Quellcode:

PHP-Quellcode

<table border="0">
<colgroup>
<col width="150">
<col width="200">
</colgroup>
<tr>
<th><b><div align="left"><u>Vor dem Umbau:</u></b></th>
</tr>
<tr>
<td>Modell:</td>
<td>Golf 2 GT Special</td>
</tr>
<tr>
<td>Baujahr:</td>
<td>1990</td>
</tr>
<tr>
<td>Hubraum:</td>
<td>1781 cm<sup>3</sup></td>
</tr>
<tr>
<td>Leistung:</td>
<td>66/90 (KW/PS)</td>
</tr>
<tr>
<td>Kraftstoff:</td>
<td>Benzin</td>
<td><img src="Bilder\zanox.gif"></td>
</tr>
<tr>
<td>Getriebe:</td>
<td>Schaltgetriebe</td>
</tr>
<tr>
<td>Ausstattung:</td>
<td>Fire & Ice</td>
</tr>
<tr>
<td>Sound:</td>
<td>Kassettenradio</td>
</tr>
<tr>
<td>Farbe:</td>
<td>Oak Grün (von Porsche)</td>
</tr>
</table>

Alles anzeigen

reddi080 · 31. Januar 2008, 22:38

mach doch einfach noch eine Tabelle um beide Elemente herum.

<table border="0">
<tr>
<td>

<table border="0">
<colgroup>
<col width="150">
<col width="200">
</colgroup>

<tr>
<th><b><div align="left"><u>Vor dem Umbau:</u></b></th>

</tr>
<tr>
<td>Modell:</td>
<td>Golf 2 GT Special</td>
</tr>
<tr>
<td>Baujahr:</td>
<td>1990</td>
</tr>
<tr>
<td>Hubraum:</td>
<td>1781 cm<sup>3</sup></td>
</tr>
<tr>
<td>Leistung:</td>
<td>66/90 (KW/PS)</td>
</tr>
<tr>
<td>Kraftstoff:</td>
<td>Benzin</td>
</tr>
<tr>
<td>Getriebe:</td>
<td>Schaltgetriebe</td>
</tr>
<tr>
<td>Ausstattung:</td>
<td>Fire & Ice</td>
</tr>
<tr>
<td>Sound:</td>
<td>Kassettenradio</td>
</tr>
<tr>
<td>Farbe:</td>
<td>Oak Grün (von Porsche)</td>
</tr>
</table>

</td>
<td>
<td valign="center">
<img src="Bilder\zanox.gif">
</td>
</tr>
</table>

Muss natürlich angepasst werden, so würde ich das machen wenn du schon mit html arbeitest.

Mann könnte das ganze auch schön in eine Css. Datei bringen und blub ist alles am rechten Fleck

xtasy · 31. Januar 2008, 23:01

Tabellen sind nicht gerade die schlauste lösung und oft total veraltet um Elemente zu positionieren.

Hier Mein Lösungsvorschlag:

VORSCHLAG 1:

Du teilst deine Seite in 2 Hälften, die du mit <div> definierst. Das eine ist dein "left div" mit der Tabelle, das andere dein "right div" mit dem Picture. Die Breiten und Höhen kannst du natürlich beliebig wählen, das einzige, was hierbei zu beachten ist, ist, dass du die Elemente floaten (float ist der Textumfluss -> divs werden nebeneinander positioniert) lässt. Falls ich in Rätseln sprechen sollte :löl: hier ein Beispiel/Muster:

<div style="width:500px;height:1000px;float:left">

HIER DEINE TABELLE

</div>

<div style="width:500px;height:1000px;margin-left:500px">

HIER DEIN PIC

</div>

Ich hatte leider keine Zeit das zu testen, sollte aber ziemlich sicher klappen.

VORSCHLAG 2:

Die zweite Lösung wäre, einfach die Tabelle wie bis jetzt zu lassen und das Bild ein wenig zu modifizieren: Du positionierst es einfach absolut in deiner Seite, indem du die Abstände zum Rand definierst. Die absolute-Positionierung bewirkt hierbei, dass sich das Bild nicht in den Textfluss einfügt, sondern unabhängig positioniert werden kann.

Hier ein Muster:

<img src="testpic.png" style"position:abolute;margin-left:500px;margin-top:500px">

In diesem Fall wäre das Bild unabhängig vom Textfluss 500 Pixel vom linken und oberen Seitenrand positioniert.

Ich hoffe ich konnte dir ein wenig weiterhelfen.

Linux-Daemon · 6. Februar 2008, 19:01

Ich habe mir mal deinen obigen Code "geschnappt" und mir das einmal angeschaut.;)

Um dir das zu zeigen

bzw. um es dir zu verdeutlichen wie es mit einer großen Grafik aussieht

Fällt dir etwas auf?
Richtig, die Grafik ist innerhalb der Tabelle integriert.
Besser wäre es evtl. für die eine Tabellenzeile einen Höhenwert zu setzen (oder es so zu belassen) und die Grafik neben die Tabelle zu platzieren mittels CSS.;)

Nur ein Denkanstoß.:)

Edit:
So, hier haste nun ein Beispiel.;)

Das kann man mit Sicherheit noch "verfeinern"!

HTML-Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="i dont know" />
<title>Golf</title>
<style type="text/css" media="all" />
img {margin-left: 300px;
margin-top: -180px;
float: left}
</style>
</head>
<body>
<table width="350" border="0" cellspacing="2" cellpadding="0">
<tr>
<td>Modell:</td>
<td>Golf 2 GT Special</td>
</tr>
<tr>
<td>Baujahr:</td>
<td>1990</td>
</tr>
<tr>
<td>Hubraum:</td>
<td>1781 cm</td>
</tr>
<tr>
<td>Leistung:</td>
<td>66/90 (KW/PS)</td>
</tr>
<tr>
<td>Kraftstoff:</td>
<td>Benzin</td>
</tr>
<tr>
<td>Getriebe:</td>
<td>Schaltgetriebe</td>
</tr>
<tr>
<td>Ausstattung:</td>
<td>Fire & Ice</td>
</tr>
<tr>
<td>Sound:</td>
<td>Kassettenradio</td>
</tr>
<tr>
<td>Farbe:</td>
<td>Oak Grün (von Porsche)</td>
</tr>
</table>
<img src="tabgfx.jpg" alt="" height="147" width="140" border="0" />
<p></p>
</body>
</html>

Alles anzeigen

Mit Border (Rahmen für Tabelle) sieht es folgendermaßen aus:

Jetzt sieht man den Unterschied besser.;)

KingstonTown · 6. Februar 2008, 21:40

So Jungs,dass hat ja schonmal prima funktioniert nun dass nächste

Nun wird mein Bild da angezeigt,wo es angezeigt werden soll,und wie bekomme ich nun folgendes hin:

(Bild 1,2,3,4,...... sollen im großen Feld angezeigt werden,welches in meinem Fall der Platz ist,wo da jetzige Bild von iben platziert ist)

Wäre super,wenn die 1,2,3,4,......Leiste sich bewegen würde,damit man noch mehr Bilder einfügen kann.

Linux-Daemon · 7. Februar 2008, 14:27

Wäre nett wenn du sagen könntest mit welchem Code, also von wem, du das jetzt genommen und realisiert hast.;)

Zum neuen Problem von dir:
Hmm, da wäre es vielleicht besser, wenn du die Bilder alle unten nebeneinander machst und wenn man mit der Maus über ein Bild geht sich dieses vergrößert unten aufpoppt.;)

Ein Beispiel dazu findest du hier - einfach mit der Maus über eines der Bilder fahren.;)

Ein Thread in dem dazugehörigen Forum bei dem das behandelt wird mittels CSS.;)

Ist halt die Frage was jetzt leichter zu realisieren ist.:rolleyes:

Edit:
Habs mal probiert, es müssen aber die Bilder einmal verkleinert und einmal vergößert vorliegen!

HTML-Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="I dont know!" />
<title>Golf</title>
<style type="text/css" media="all" />
/* zoom image */
#zoom a {
float: leftt;
margin: 0 0 10px 10px;
border: 1px solid #000;
text-indent: 10em; /* hide the link text */
overflow: hidden;
display: block;
width: 90px; /* show only thumbnail */
height: 90px;
background: url(tabgfx-90x90.jpg) no-repeat top left;
}
#zoom a:hover {
width: 140px; /* adjust size to zoomed photo */
height: 147px;
background-position: 0 0px; /* move the image so only the big one shows */
background: url(tabgfx.jpg)
}
</style>
</head>
<body>
<p><div id="zoom">
<a href="tabgfx.jpg" alt="" height="140" width="147" border="0" /></a></div></p>
</body>
</html>

Alles anzeigen

Meine Bilder zu diesem Zweck waren:
Als Thumbnail 90x90 und original 140x147 Pixel groß.:)

KingstonTown · 7. Februar 2008, 18:59

Also Dein Bespiel ist nicht schlecht,gefällt mir,nu muß ich nur noch die Bilder im groß Form dazu haben

na schaue ich mal,ob ich was finde.

WO kann ich noch mehr Bilder einfügen ?
Muß ich dazu jedesmal den ganzen Code eingeben ?

Linux-Daemon · 9. Februar 2008, 11:37

Du kannst die Bilder ja mit z.B. Photoshop vergrößern.;)

Um mehrere Bidler nebeneinander zu platzieren:

HTML-Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="I dont know!" />
<title>Golf</title>
<style type="text/css" media="all" />
table {margin: 20px 30px 40px 50px;
width: 200px;}
/* zoom image */
#zoom a {
float: leftt;
margin: 0 0 10px 10px;
border: 1px solid #000;
text-indent: 10em; /* hide the link text */
overflow: hidden;
display: block;
width: 90px; /* show only thumbnail */
height: 90px;
background: url(tabgfx-90x90.jpg) no-repeat top left;
}
#zoom a:hover {
width: 140px; /* adjust size to zoomed photo */
height: 147px;
background-position: 0 0px; /* move the image so only the big one shows */
background: url(tabgfx.jpg)
}
#zoom1 a {
float: leftt;
margin: 0 0 10px 10px;
border: 1px solid #000;
text-indent: 10em; /* hide the link text */
overflow: hidden;
display: block;
width: 90px; /* show only thumbnail */
height: 90px;
background: url(tabgfx-90x90.jpg) no-repeat top left;
}
#zoom1 a:hover {
width: 140px; /* adjust size to zoomed photo */
height: 147px;
background-position: 0 0px; /* move the image so only the big one shows */
background: url(tabgfx.jpg)
}
#zoom2 a {
float: leftt;
margin: 0 0 10px 10px;
border: 1px solid #000;
text-indent: 10em; /* hide the link text */
overflow: hidden;
display: block;
width: 90px; /* show only thumbnail */
height: 90px;
background: url(tabgfx-90x90.jpg) no-repeat top left;
}
#zoom2 a:hover {
width: 140px; /* adjust size to zoomed photo */
height: 147px;
background-position: 0 0px; /* move the image so only the big one shows */
background: url(tabgfx.jpg)
}
</style>
</head>
<body>
<p>
<table>
<tr height="200" width="200">
<td id="zoom" width="200" height="100">
<a href="tabgfx.jpg" alt="" height="140" width="147" border="0" ></a></td>
<td id="zoom1" width="200" height="100">
<a href="tabgfx.jpg" alt="" height="140" width="147" border="0" ></a></td>
<td id="zoom2" width="200" height="100">
<a href="tabgfx.jpg" alt="" height="140" width="147" border="0" ></a></td>
</tr>
</table>
</body>
</html>

Alles anzeigen

Ich habe wie man sehen kann jetzt 3 ID's angelegt mit jeweils demselben Inhalt. Du müsstest jetzt hergehen und halt die Bilder anpassen!
Einziger Nachteil den ich feststellen musste ist, das immer die nachfolgenden Bilder auf denen man nicht mit der Maus ist etwas nach rechts verschoben werden.

Wer einen einfacheren CSS-Code als den obigen hat bzw. weiß, der soll doch bitte mal posten und uns nicht im dunkeln stehen lassen.;)

Edit:
Andernfalls schau dir mal den Code hier näher an.
Musst halt mal ein wenig ausprobieren.:D
Solltest du es hinbekommen haben, dann lass mich am Resultat bitte teilhaben.;)

Edit2:
Ich habs!!!:D

Dank des zuvor geposteten Links von mir.;)

HTML-Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="I dont know" />
<title>Golf</title>
<style type="text/css" media="all" />
table {margin: 20px 30px 40px 50px;
width: 400px;}
/* Test */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
</head>
<body>
<p>
<table height="200" width="800">
<tr>
<td>
<a class="thumbnail" href="#thumb"><img src="tabgfx-90x90.jpg" width="90px" height="90px" border="0" /><span><img src="tabgfx.jpg" /><br />Simply beautiful.</span></a></td>
<td><a class="thumbnail" href="#thumb"><img src="tabgfx-90x90.jpg" width="90px" height="90px" border="0" /><span><img src="tabgfx.jpg" /><br />Simply beautiful.</span></a></td>
<td><a class="thumbnail" href="#thumb"><img src="tabgfx-90x90.jpg" width="90px" height="90px" border="0" /><span><img src="tabgfx.jpg" /><br />Simply beautiful.</span></a></td>
</tr>
</table>
</body>
</html>

Alles anzeigen

Die Position des anzuzeigenden großen Bildes kannst du hoffe ich mal selber noch ändern.;)
Für weitere Bilder musst du nur den Html-Code entsprechend erweitern und natürlich die Bildnamen ändern.:)

MeX · 20. März 2008, 13:27

keine reaktion des themenstarters!? :confused:

:mad:

~ C L O S E D ~

ceeyaa.mex

PHP-Quellcode

HTML-Quellcode

HTML-Quellcode

HTML-Quellcode

HTML-Quellcode

Teilen