Dartellung einer Profil Liste

Dr. Gore

Ich erstelle für eine Fußball Mannschaft eine Seite.

Jetzt bin ich grade dabei den Kader zu machen.

Gegliedert in die Positionen

Tor
Spielerprofile

Abwehr
Spielerprofile

Mittelfeld
Spielerprofile

Sturm
Spielerprofile

Es soll ein Bild und ein paar Infos zum jedem Spieler vorhanden sein. also Name, Alter und bisherige Vereine.

Ich bin da recht Ideenlos...
hier mal mein Versuch den ersten Torwart zu machen:

[Blockierte Grafik: http://i142.photobucket.com/albums/r119/Brain_Bug/screenshot-2.jpg]

Code

[size=10]
<h1>Kader</h1>
<p><b>Tor</b>
<br />


[/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]<img[/COLOR][/SIZE][/COLOR][/SIZE][size=10] [/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]alt[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]"Torwart"[/COLOR][/SIZE][/COLOR][/SIZE][size=10] [/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]src[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]"images/luda.jpg"[/COLOR][/SIZE][/COLOR][/SIZE][size=10] [/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]width[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]"175"[/COLOR][/SIZE][/COLOR][/SIZE][size=10] [/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]height[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]"130"[/COLOR][/SIZE][/COLOR][/SIZE][size=10] /[/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]>
[/COLOR][/SIZE][/COLOR][/SIZE][size=10]<p><u>Name:</u> Christopher S.
<br />
<u>Geboren:</u> 19...
<br />
<ul>
<li><span>Rot Wei[B][I]&szlig[/B][/I]; Seebach - F bis B Jugend</span></li>
<li><span>TuS Wachenheim A Jugend</span></li>


</ul>
</p>


</b>
 
</p>
[/SIZE]

Alles anzeigen

Hat jemand eine Idde wie ich das auf einfache weise optisch nett umsetzen kann ?

driver

also ich würd die steckbriefangaben in tabellenform machen.
denn genau dazu sind ja tabellen gemacht worden

Dr. Gore

Habe da schon einen Versuch gestartet.. sieht nicht soo toll aus...

[Blockierte Grafik: http://i142.photobucket.com/albums/r119/Brain_Bug/screenshot-3.jpg]

Habe table border auf "0" gesetzt. wie bekomme ich denn den text oben bündig mit dem Bild ?

Code

[size=10][COLOR=#008000][size=10][COLOR=#008000]<table[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]border[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]"0"[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]>[/COLOR][/SIZE]
[/COLOR][/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]<tr>[/COLOR][/SIZE]
[/COLOR][/SIZE]
[size=10][COLOR=#008000][size=10][COLOR=#008000]<td>[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]<img[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]alt[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]"Torwart"[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]src[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]"images/luda.jpg"[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]width[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]"150"[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]height[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]"105"[/COLOR][/SIZE][/COLOR][/SIZE][size=10] /[/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]>[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]</td>[/COLOR][/SIZE]
[/COLOR][/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]<td>[/COLOR][/SIZE][/COLOR][/SIZE][size=10]<center><br />[/SIZE]
[size=10]<b><u>Name:</u> Christopher S.</b>[/SIZE]
[size=10]<br />[/SIZE]
[size=10]<ul>[/SIZE]
[size=10]<li><span>Rot Wei[B][I]&szlig[/I][/B]; Seebach - F bis B Jugend</span></li>[/SIZE]
[size=10]<li><span>TuS Wachenheim A Jugend</span></li>[/SIZE]
 
[size=10]</ul>[/SIZE]
 
 
[size=10][COLOR=#008000][size=10][COLOR=#008000]</td>[/COLOR][/SIZE]
[/COLOR][/SIZE]
 
[size=10][COLOR=#008000][size=10][COLOR=#008000]</tr>[/COLOR][/SIZE]
[size=10][COLOR=#008000]</table>[/COLOR][/SIZE]
[/COLOR][/SIZE]

Alles anzeigen

driver

bündig würde es mit css gehen (vertical-align:top)
aber das bild schon rechts lassen.. etwa so

Code

<table>
<tr><td>Name:</td><td>gustav</td><td rowspan=4><img src="bild.jpg"></td></tr>
<tr><td>Geburtstag:</td><td>...</td></tr>
<tr><td>Wohnort:</td><td>...</td></tr>
<tr><td>Vereine:</td><td><ul><li>verein 1</li><li>verein 2</li></ul></td></tr>
</table>

oder alternativ oben das bild - zentriert.
darunter dann die tabelle...

Dr. Gore

Guck mal.. warum wird bei Vereine Verein 1 über dem Wort Vereine angezeigt ?

[Blockierte Grafik: http://i142.photobucket.com/albums/r119/Brain_Bug/screenshot-4.jpg]

Code

[size=10][COLOR=#008000][size=10][COLOR=#008000]<table>[/COLOR][/SIZE]
[size=10][COLOR=#008000]<tr><td>[/COLOR][/SIZE][/COLOR][/SIZE][size=10]Name:[/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]</td><td>[/COLOR][/SIZE][/COLOR][/SIZE][size=10]Christopher S.[/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]</td><td[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]rowspan[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]4[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]>[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]<img[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]alt[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]"Torwart"[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]src[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]"images/luda.jpg"[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]width[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]"150"[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]height[/COLOR][/SIZE][/COLOR][/SIZE][size=10]=[/SIZE][size=10][COLOR=#0000f0][size=10][COLOR=#0000f0]"105"[/COLOR][/SIZE][/COLOR][/SIZE][size=10] /[/SIZE][size=10][COLOR=#800000][size=10][COLOR=#800000]>[/COLOR][/SIZE][/COLOR][/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]</td></tr>[/COLOR][/SIZE]
[size=10][COLOR=#008000]<tr><td>[/COLOR][/SIZE][/COLOR][/SIZE][size=10]Geboren:[/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]</td><td>[/COLOR][/SIZE][/COLOR][/SIZE][size=10]...[/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]</td></tr>[/COLOR][/SIZE]
[size=10][COLOR=#008000]<tr><td>[/COLOR][/SIZE][/COLOR][/SIZE][size=10]Wohnort:[/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]</td><td>[/COLOR][/SIZE][/COLOR][/SIZE][size=10]...[/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]</td></tr>[/COLOR][/SIZE]
[size=10][COLOR=#008000]<tr><td>[/COLOR][/SIZE][/COLOR][/SIZE][size=10]Vereine:[/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]</td><td>[/COLOR][/SIZE][/COLOR][/SIZE][size=10]<ul><li>verein 1</li><li>verein 2</li></ul>[/SIZE][size=10][COLOR=#008000][size=10][COLOR=#008000]</td></tr>[/COLOR][/SIZE]
[size=10][COLOR=#008000]</table>[/COLOR][/SIZE]
[/COLOR][/SIZE]

Setze ich um das zu ändern im <ul> bei break wandert das Bild mit nach unten..

synaptic

grundlegend ist bei tabellen alls linksbündig und mittig eingetragen, wenn du jetzt in der linken spalte aber mehr platz hast als text und die spalte daneben voller wird, weil sie mehrere zeilen hat, dann kommt es zu diesem effekt

Dr. Gore

Na super ! Was kann ich dagegen tun ? Das sieht ja nicht grade toll aus wenn das so bleibt....

synaptic

mmmh also ich habs jetzt net probiert... aber mach mal im ersten feld eine liste, die so gross is wie die in der zweiten spalte... und ins ul-tag schreibste

Code

style="list-style:none;"

und in die li-tags dann ein  
also so ungefähr:

HTML

<table>
<tr><td>Name:</td><td>Christopher S.</td><tdrowspan=4><imgalt="Torwart"src="images/luda.jpg"width="150"height="105" /></td></tr>
<tr><td>Geboren:</td><td>...</td></tr>
<tr><td>Wohnort:</td><td>...</td></tr>
<tr><td><ul style="list-style:none; margin-left:0;"><li>Vereine:</li><li>&nbsp;</li></ul></td><td><ul><li>verein 1</li><li>verein 2</li></ul></td></tr>
</table>

Dr. Gore

Danke ... klappt !

Tags