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

Tabelle

Status
Für weitere Antworten geschlossen.
A

Alienuser

Neues Mitglied
Hallo an alle.

Ich bin ein bischen ein anfänger auf dem Gebiet von html, und bräuchte dringend eure hilfe !

Ich würde gerne eine Tabelle machen, nur weis ich nicht wie man die macht. Ich habe hier mal ein Link wie sie aussehen soll:
So


Mein Frage ist nun, ob mir irgentjemand so eine Tabelle machen könnte, wenn cih demjenigen die Bilder zur verfügung stelle ?

Währe echt super !

Danke
 
ja ich weis, ich mache ja tabellen auch selber, mein problem ist nur, das mit dem ganzen verschachteln von tabellen tags, und darum wolte ich einfach, das mir einer von euch profis hilft :-).
 
Das ist ganz einfach, dafür musst du das Bild wie auf folgendem Screen markiert teilen:
» http://verhueterli.ve.funpic.de/index/hilfe_manuell/grafiken/alienuser_tabelle.bmp

Dann baust du die Einzelteile mittels folgendem Code zusammen:
HTML: 
<table cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <img src="[BILD 1 (links)]" alt="" />
        </td>
        <td>
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <td>
                        <img src="[BILD 2 (rechts oben)]" alt="" />
                    </td>
                </tr>
                <tr>
                    <td>
                        [INHALT (rechts mitte)]
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="[BILD 3 (rechts unten)]" alt="" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
Hinweis: Dieser Code wurde nicht getestet, sollte aber funktionieren (keine Garantie).
 
Zuletzt bearbeitet:
danke ersteinmal ich werde ihn mal ausprobieren und sage dann bescheid !

EDIT: ok also klappen tut es schon mal, aber ich wollte das das halt dann so geht (andere aufteilung)
So


Also sprich das ich ganz oben ein Bild habe, dann darunter ein Bild habe. DAnn liks unter den oberen zwei ein bild habe unr rechts von dem (artikel bild) dann den Text habe und unter dem Text und unter dem Bild dann die leiste mit den Comments und den doppelpfeil !

Kannst du mir auch sowas machen ? Währe super !:-D
 
Zuletzt bearbeitet von einem Moderator:
Das sollte so oder so nur eine Anregung sein, keine Komplettlösung.

Und da du gesagt hast, dass es funktioniert, sehe ich auch keinen Grund, das ganze noch mal kompliziert zu machen.

Vielleicht wäre ein Link zu dem jetzigen Ergebnis mit meinem Code ganz nützlich. Dann kann man vielleicht besser verstehen, was dir an der aktuellen Lösung nicht gefällt.
 
ok hier ist der link mit dem was du mir gemacht hast:
http://home3000.ho.funpic.de/Lars Probst/so.html

Ich wollte aber gerne, das die bilder oben (das schwarz-braune und das das so wie feuer aussiehst) über dem bild links sind und das die bilder unten (comments und doppelpfeil) weiter unten abschließen sprich das sie nicht variabel sind sonder immer da unten bleiben wie sie auf dem Bild sind.

Gruß
 
Also links kann ich dir nicht helfen, das musst du mittels Grafiken lösen, sprich das Bild und die beiden Grafiken für oben und unten zusammenfügen und daraus eine Grafik machen.

Rechts musst du dem Inhalt eine feste Höhe geben, was du mittels height in CSS erreichst.

Rechts unten musst du der Tabellenspalte die entsprechende Hintergrundfarbe geben, was du mittels background-color in CSS erreichst, und folgende Zeilen durch die Darauffolgenden ersetzen.
HTML: 
<td>
    <img src="[BILD 3 (rechts unten)]" alt="" />
</td>
HTML: 
<td>
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td style="width:70%; text-align:left;">
                <img src="[BILD (comments)]" alt="" />
            </td>
            <td style="width:30%; text-align:right;">
                <img src="[BILD (doppelpfeil)]" alt="" />
            </td>
        </tr>
    </table>
</td>

» height [CSS] bei css4you
» background-color [CSS] bei css4you
 
jetzt habe ich das mal so geschrieben:

HTML: 
<table cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <img src="newsbild.jpg" alt="" />
        </td>
        <td>
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <td>
                        <img src="top.gif" alt="" />
                    </td>
                </tr>
                <tr>
                    <td>
                        [DAs hier ist der Text
                    </td>
                </tr>
                <tr>
<td>
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td style="width:70%; text-align:left;">
                <img src="comments.gif" alt="" />
            </td>
            <td style="width:30%; text-align:right;">
                <img src="doppelpfeil.gif" alt="" />
            </td>
        </tr>
    </table>
</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

und das hier kommt raus:
http://home3000.ho.funpic.de/Lars Probst/so.html

PS: Ich habe jetzt die beiden Bilder (banner oben) zusammengefügt ist jetzt nur noch ein Bild ^^
 
Zuletzt bearbeitet von einem Moderator:
Ich habe mal noch ein bißchen an dem Code rumgetüfftelt und bin zu einem Ergebnis gekommen:
HTML: 
<table cellspacing="0" cellpadding="0" border="1">
    <tr>
        <td>
            <img src="newsbild.jpg" alt="" />
        </td>
        <td>
            <table cellspacing="0" cellpadding="0" style="height:138px;">
                <tr>
                    <td style="vertical-align:top;">
                        <img src="top.gif" alt="" />
                    </td>
                </tr>
                <tr>
                    <td>
                        DAs hier ist der Text
                    </td>
                </tr>
                <tr>
					<td style="vertical-align:bottom;">
    					<table cellspacing="0" cellpadding="0" style="background-color:#DDDDDD; width:540px;">
        					<tr>
            					<td style="width:70%; text-align:left;">
                					&nbsp;<img src="comments.gif" alt="" />
            					</td>
            					<td style="width:30%; text-align:right;">
                					<img src="doppelpfeil.gif" alt="" />&nbsp;&nbsp;
            					</td>
       						 </tr>
    					</table>
					</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
[Diese dummen Tab-Einrückungen]

Jetzt musst du das Bild nur noch richtig einteilen (slicen), sprich so wie es auf meinem Screen angezeigt wird, und dann sollte es funktionieren.

Wenn du es überhaupt nicht hinkriegst, schick mir das Originalbild (das erste, wo abgebildet war, wie es aussehen soll) und ich schick dir den fertigen Code.
 
ok also so soll es aussehen:
http://home3000.ho.funpic.de/Lars Probst/so.bmp


und das hier sind die Bilder die reinsollen:

Das linke Bild (Newsbild):
http://home3000.ho.funpic.de/Lars Probst/newsbild.jpg

Die zwei Bilder die ganz nach oben sollen:
Flammenbild: http://home3000.ho.funpic.de/Lars Probst/flammen.gif
Das braune: http://home3000.ho.funpic.de/Lars Probst/braun.gif

Die Bilder ganz unten:
Comments: http://home3000.ho.funpic.de/Lars Probst/comments.gif
Doppelpfeil: http://home3000.ho.funpic.de/Lars Probst/doppelpfeil.gif

Das Bild ganz unten zum Abschluss:
http://home3000.ho.funpic.de/Lars Probst/abschluss.gif

Vielen Vielen Dank nochmal das du das mir machst.

EDIT: wo schreibst du den Code dann hin ?
 
Zuletzt bearbeitet von einem Moderator:
So, das war zwar eine echte Herausforderung, aber nach weiterem Rumtüffteln bin ich, glaube ich, zu einem akzeptablen Ergebnis gekommen, hier der Code dafür:
HTML: 
<table cellspacing="0" cellpadding="0" style="width:541px;">
    <tr>
        <td colspan="2" style="width:100%; height:15px; background-image:url('top.gif'); background-repeat:no-repeat; color:#B1B1B1; font-weight:bold; padding-left:2%; font-family:Verdana; font-size:11px;">
			Highlight Artikel
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="flammen.gif" alt="" />
		</td>
	</tr>
	<tr style="width:100%;">
		<td style="width:196px; height:153px; background-image:url('braun.gif'); background-repeat:repeat-x; background-color:#E5E5E5; text-align:right; vertical-align:top; padding-top:5px;">
			<img src="newsbild.jpg" alt="" />
		</td>
		<td style="background-color:#FFFFFF; height:153px; vertical-align:top;">
			<img src="braun.gif" style="width:345px; height:11px;" alt="" />
			<br>
			<div style="height:127px;">
				<!-- Inhalt -->
			</div>
			<div style="height:15px; background-color:#E5E5E5;">
				<table cellspacing="0" cellpadding="0" style="width:100%;">
					<tr>
						<td style="width:70%; text-align:left;">
							&nbsp;<img src="comments.gif" alt="" />
						</td>
						<td style="width:30%; text-align:right;">
							<img src="doppelpfeil.gif" alt="" />&nbsp;&nbsp;
						</td>
					</tr>
				</table>
			</div>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="abschluss.gif" alt="" />
		</td>
	</tr>
</table>
» http://verhueterli.ve.funpic.de/index/hilfe_manuell/alienuser_tabelle/index.html
 
ok danke ich teste es gleich mal !

EDIT: ok super klappt, kannst du mir noch ienen gefallen machen?
Also kanst du mir die ganze Tabelle also alles auf eine höchste größe von 454px setzen, das sie nicht größer ist als das (also die ganze Tabelle meine ich)

Danke
 
Zuletzt bearbeitet von einem Moderator:
hmm schei.. und wie kann man das denn sonst noch machen ? denn sonst passt das nicht zum layout

oder kann ich einfach die Bilder kleiner machen (zusammenschieben)
 
Zuletzt bearbeitet von einem Moderator:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben