Computer Hardware Forum - TweakPC - html Problem bei der Tabelle! Hilfe!

Computer Hardware Forum - TweakPC (https://www.tweakpc.de/forum/)

- Programmiersprachen (https://www.tweakpc.de/forum/programmiersprachen/)

- - html Problem bei der Tabelle! Hilfe! (https://www.tweakpc.de/forum/programmiersprachen/19636-html-problem-bei-der-tabelle-hilfe.html)

Oh verdammt vergessen zu posten,sorry :lol: :lol: :lol:

[url=http://people.freenet.de/Team-Naomi/news.html]Team-Naomi[/url]

Sieht echt gut aus.

Aber anscheinend hast du mit den Tags noch irgendwo nen "Vertippsler" drinnen, denn links oben steht noch: [i]> G-Digital">[/i], was da denk ich mal nicht hingehört ;)

K.a wo du meinst,doch habs geändert .Besser :wink:

So jetzt noch eine Frage: :wink:
Die ich aber schlecht in Worten fassen kann :? Deswegen hier mal den Quelltext.

[code]<select name="bereich">
<option value=Events><a href="internevents.thml">Events-intern</a>
<option value=News><a href="intern.thml">News-intern</a>
</select>[/code]

Hoffe man erkennt was ich vorhatte, wollte das was eben zur Auswahl steht,wenn eines davon ausgewählt wird das man dann zu einer anderen Seite gelinkt wird.
Also so klappt es nicht,wäre auch zu schön gewesen :(

Also das erste, was mein kleiner firefox gemacht hat, als ich auf den Link geklickt hab, ist abstuerzen. Das ist natuerlich das schlimmste, was passieren kann.
Und im Mozilla sah die Seite dann so aus: [url=http://www.rzuser.uni-heidelberg.de/~krichte4/pics/extpics/Screenshot-21.jpg]klick mich[/url]. Auch net so doll.
Du arbeitest sehr viel mit absoluten Hoehen und Breitenangaben ( z.B. die Heoehe er News-Tabelle wird durch das uebereinanderstapeln der ganzen Randbilder erzeugt), hab ich festgesellt. Sobald da aber Text dazwischen ist, zerhaut es Dir das ganze Design (welches uebrigens sehr gut ist, kompliment!), da Text immer eine dynamische Hoehe uind breite hat. Du hast als Schriftart MSsans serif angegeben. das setzt aber voraus, das jeder, der die Seite anschauen will, genau diese Schriftart verwendet. Und ich mit meinem Linux System, wo natuerlich keine M$ Schriftarten drauf sind, kucke dann in die Roehre. Wenn ein sehbehinderter daherkommt, der ne besonders grosse Schrift braucht, um ueberhaupt was erkennen zu koennen, der schaut auch in die Roehre.

Du solltes versuchen, die ganze Sache etwas dunamischer zu gestalten. Ich habe mir mal die News-Tabelle vorgeknoepft, um Dir zu zeigen, wie man das am besten macht.
Du hast die Grafiken so aufgeteilt:
[img]http://www.rzuser.uni-heidelberg.de/~krichte4/pics/extpics/newsalt.jpg[/img]
wobei das gruene, das gelbe und das violette jeweils eigenstaendige Tabellen sind, die absolut nichts voneinander wissen (auch nicht die sehr wichtige Hoehe) - im schlimmsten Fall, siehe mein Screenie aus dem Mozilla, haben dann alle eine unterschiedliche Hoehe.
Besser waere folgende Aufteilung:
[img]http://www.rzuser.uni-heidelberg.de/~krichte4/pics/extpics/newsnew.jpg[/img]
Wobei das ganze dann in einer gemeinsamen Tabelle ist, die roten Pfeile zeigen dabei an, was dynamisch vergroesserbar ist. Dazu musst allerdings die Grafiken neu zerteilen, Ich habe mir mal erlaubt, genau das zu machen :D
In html saehe das dann so aus:
[code]
<table border='0' cellspacing='0' cellpadding='0'>
<tr>
<td><img src="linksoben.gif"></td>
<td><img src="mitteoben.gif"></td>
<td><img src="rechtsoben.gif"></td>
</tr><tr>
<td style="background-image:url(linksback.gif)" valign="top"><img src="linksmitte.gif"></td>
<td style="background-color:#efefef">



</td>
<td style="background-image:url(linksback.gif)" valign="bottom"><img src="rechtsmitte.gif"></td>
</tr><tr>
<td><img src="linksunten.gif"></td>
<td><img src="mitteunten.gif"></td>
<td><img src="rechtsunten.gif"></td>
</tr>
</table>
[/code]

Wenn Du die seitlichen Linien als Hintergrundbild definierst (mit style="background-image:url(linksback.gif)" im td-tag), weden die dann dunamisch immer genauso oft untereinander gepackt, wie die Hoehe der Tabelle das vorgibt.
So sieht das ganze dann aus:
winzige Schrift:
[img]http://www.rzuser.uni-heidelberg.de/~krichte4/pics/extpics/newnewswinzig.gif[/img]
riesige Schrift:
[img]http://www.rzuser.uni-heidelberg.de/~krichte4/pics/extpics/newnewsriesig.gif[/img]
und die Tabelle passt immer hervorragend drumrum. Selber mit der Schriftgroesse spielen kannst du [url=http://www.rzuser.uni-heidelberg.de/~krichte4/pics/extpics/newnews/]HIER[/url] (Schriftgroesse aendern geht bei mir mit Strg oder Shift + Mausrad - ich denke, unter Windows ists aehnlich.)
In den beiden Bildern siehst auch gleich, was ein US-OS mit US-Browser aus deutschen Umlauten macht, naemlich totales Kauderwelsch. Umlaute solle man daher in html 'maskieren'. Das geht folgendermassen:

[code]
&auml; ergibt ä
&ouml; ergibt ö
&uuml; ergibt ü
&Auml; ergibt Ä
&ouml; ergibt Ö
&uuml; ergibt Ü
&szlig; ergibt ß
[/code]
Damit hat dann auch kein Ami mehr irgendwelche Probeme, falls er sich mal auf Deine Seite verirren sollte.

Die ganze Seite koenntest Du dann folgendermassen dynamisch Zerlegen:

[img]http://www.rzuser.uni-heidelberg.de/~krichte4/pics/extpics/komplettneu.jpg[/img]

oder als Code:
[code]
<table>
<tr>
<td colspan='3'></td> <--rot
</tr>
<tr>
<td></td> <-- blau
<td valign='top' style="background-color:#efefef;"></td> <--gruen&gelb
<td></td> <-- aqua
</tr>
<tr>
<td></td> <-- orange
<td></td> <--schwarz
<td></td> <--violett
</tr>
</table>
[/code]
Der gelbe Bereich wird dabei automatisch mit der Hintergrundfarbe der Tabellenzelle ( style="background-color:#efefef;" ) ausgelegt.
Rote Pfeile heissen wieder: Das Bild als Hintergrund der Tabellenzelle definieren.

So, jetzt noch ein paar Sachen zu dem Waben-Hintergrunbild. Warum zum Teufel hast Du das denn als ein grosses Bild gemacht? Das kann man doch so schoen kacheln. Ist ja eigentlich Sinn des Hintergrundbildes, das man ein moeglichst kleines, platzsparendes Bildchen so oft neben und untereinander packt, bis es die ganze Seite ausfuellt. Wenn Du im Bad Fliesen verlegst, kaufst du ja auch nicht eine grosse Fliese, die fuer die ganze Wand reicht, sondern viele kleine, mit der Du die Wand dann auskleidest.
Dein Hintergrundbild laest sich reduzieren auf:
[img]http://www.rzuser.uni-heidelberg.de/~krichte4/pics/extpics/background1.jpg[/img]
Das ergibt, asl Hintergrund gesetzt, folgende Seite [url=http://www.rzuser.uni-heidelberg.de/~krichte4/pics/extpics/newnews/backtest.html]kllick mich[/url] - also genau das, was Du auch mit einer riesigen Grafik gemacht hast :D

EDIT: ich hab grade eben fesgestellt, das es genau das font face="MS sans serif" ist, was den Firefox abstuerzen laesst. Bitte bitte dringend aendern. Am besten durch css:
[code]
<style type="text/css">

</style>
[/code]
Einfach in jede Datei zwischen head und body packen. so kannst Du Dir die ganzen font-tags sparen, weil du die Farben und Schriftart/groesse so dateiweit festlegst.[/img]

So, das wars erstmal von mir :D
Hoffe, ich hab Dich nicht allzu sehr geschockt, vielleicht hilfts Dir ja, zum HTML-Meister aufzusteigen :lol:

Gruesse, kerri

sieht gut aus, aber ist imho ein wenig groß - die seite war bei mir fast 1,5MB

guck mal ob du die pics noch ein wenig komprimieren kannst oder weniger nimmst oder irgendwo sparst -

[quote=telepornos]sieht gut aus, aber ist imho ein wenig groß - die seite war bei mir fast 1,5MB

guck mal ob du die pics noch ein wenig komprimieren kannst oder weniger nimmst oder irgendwo sparst -[/quote]

Wie bereits geschrieben liegt das am HG Bild - das ist EIN einziges grosses Bild von weit ueber 1MB. Das kann man dabei doch noch so schoen Kacheln :D

Leo, zu der verweisliste, schau dir mal [url=http://de.selfhtml.org/javascript/beispiele/verweisliste.htm] das hier [/url] bei selfhtml an. Das ist AFAIK auch nur mit JavaScript loesbar. Im Beispiel von Selfhtml wird die ausgewaehlte Seite auch noch in nem anderen Frame geaden, mit ein wenig fummelei bekommt man die auch in der aktuellen Seite geladen.
Dabei muesstest Du die parent.frames[1].location ersetzen durch window.location.href, wenn mich meine JavaScript-Kenntnisse nicht ganz taeuschen :D

Gruesse, kerri

Ja das mit der Dynamik war auch so ne Sache wo ich lange am überlegen war.Bis ich mir dachte ich zerleg die Dinger so hab ich es teilweise dynamisch(was news Eintragen usw. angeht).Als ich dann die Größe eben auf groß gestellt habe ging das Desgin im Eimer deswegen auch oben"bitte in der Schriftgröße mittel darstellen lassen".Naja das mit der Schriftart oh man konnte ich nicht wissen.

Ja wie gesagt das Hintergrundbild ist 1Mb groß,doch mit kerris gutem Vorschlag wird sich das mal ändern.

Naja muss mal gucken wie ich das alles noch darein bringe*vielarbeit*

edit: jetzt wird es langsam kompliziert mit Javascript ect. da ich die Hp eigentlich nur mit html programmieren sollte.Da wir zu Javascript wohl nach der Kursarbeit kommen werden.

Also deine Vorschläge werd ich mir mal nach den ganzen Kursarbeiten zu Herzen nehmen.Doch was ich nicht vestehe,zwischen den drei Teilen ist ja jedes mal ein Strich durchgezogen,wie wird der denn automatisch erweitert :?

Nur so als Anmerkung,heute hat mein Infolehrer die Hp gesehen und wollte mir zuerst nicht glauben das ich die allein gemacht habe(lag weniger am Design hat sich kurz mal den Quelltext angeguckt und meinte "oh man,hast du das alle mit Hand eingetippt?" ok einmal eingetippt und dann eben kopiert nur dei Mitte geändert :wink: ,bis ich dem gesagt habe das ich fast die ganzen Ferien da dran saß.
Ok ich meine hilfe von einem Forum ist ja nicht verboten :wink:

Also der Strich an der Seite ist einfach nur dieses Bild:
[img]http://www.rzuser.uni-heidelberg.de/~krichte4/pics/extpics/newnews/linksback.gif[/img]
Was der Browser automatisch immer genuegend oft untereinander packt, da ich es mit style="background-image:url(rechtsback.gif)" im td-tag als Hintergrundbild definiert habe. obendrueber gelegt habe ich dann einfach dieses (natuerlich vorher auf die richtige groesse geschnittene) Bild:
[img]http://www.rzuser.uni-heidelberg.de/~krichte4/pics/extpics/newnews/rechtsmitte.gif[/img]
Per Valign="bottom" nach unten geschoben.
In der Tabellenzelle ist also nur ein einziges img-Element. Das andere ist ledigklich Hintergrund. Dabei wird die Breite der Zelle duch das breiteste Element festgelegt, in dem Fall 29 Pxl. Damit alles passt, sollte das HG Bild dann auch 29 Pxl Breite haben - und der Strich an der richtigen Stelle sein.
Speicher Dir am besten einfach die Seite, die ich zusammengebastelt habe, und spiele etwas damit rum, so lernt man meist am meisten ;)

Kann das sein, das Dir das Konzept von Hintergrundbildern noch nicht so ganz gelaeufig ist? Schau mal in selfhtml nach Hintergrundbildern.

So 100% per Hand hastes aber auch net gemacht, der HTML EDITOR phase 5.3 hat auch ein wenig geholfen ;)

Gruesse, kerri

@kerri - Wahnsinn ich bin ja beeindruckt! Endlich mal jemand der Ahnung von der Materie hat - auch wenn er scheinbar etwas von der bösen Seite der Macht (Linux) angezogen wird ;-)

[quote=Exit]@kerri - Wahnsinn ich bin ja beeindruckt! Endlich mal jemand der Ahnung von der Materie hat[/quote]
Danke fuer das Kompliment *rotwerd* ;)
[quote=Exit]auch wenn er scheinbar etwas von der bösen Seite der Macht (Linux) angezogen wird ;-)[/quote]
*Pssst* Unter uns: Linux ist gar nicht die beose Seite der Macht - das will uns nur die einzig wahre Boese M$eite der Macht glauben lassen. Aber *pssst* nicht weitererzaehlen ;)

Gruesse, kerri

Nach langer Phase ohne Probleme kommt jetzt wieder eins :cry:
Wie die Seite so überarbeiten wie kerri es Vorgelschlagen hat hab auch ein paar Seiten schon fertig doch die News Seite will nicht,hab den Quelltext bestimt 101mal durchgeguckt doch ich finde keinen Fehler.

[code]<html>
<head>
<title> -=]Noi[=- | Team Naomi </title>
<style type="text/css">
body,td
{font-family: sans-serif;
font-size: 11;
color:#7d7b7b}

a:link { font-weight:System; color:#7d7b7b; text-decoration:none }
a:visited { font-weight:Systen; color:#7b7d7d; text-decoration:none }
a:hover { font-weight:System; color:#FFfFFF; text-decoration:none }
a:active { font-weight:System; color:#7d7b7b; text-decoration:none }
</style>
</head>

<body background="haupt/background2.bmp">

<table cellpadding="0" cellspacing="0" vspace="0">
<tr><td colspan="3"><img src="haupt/Banner.gif" usemap="#main" border="0"></td></tr>
<tr><td style="background-image:url(haupt/linksbackground.bmp)" valign="top">



<table width="166" border="0" cellspacing="0" cellpadding="0" vspace="0">
<tr><td><img src="haupt/Leftframe_Picture1.jpg" usemap="#leftframe1" border="0"></td></tr>
<tr><td><img src="haupt/Leftframe_Picture2.jpg" usemap="#leftframe2" border="0"></td></tr>
<tr><td><img src="haupt/Leftframe_Picture3.jpg" usemap="#leftframe3" border="0"></td></tr>
<tr><td><img src="haupt/Leftframe_Picture4.jpg" usemap="#leftframe4" border="0"></td></tr>
<tr><td><img src="haupt/Leftframe_Picture5.jpg" usemap="#leftframe5" border="0"></td></tr>
<tr><td><img src="haupt/Leftframe_Picture_end.jpg" border="0"</td></tr>
</table>

<map name="main">
<area shape="rect" coords="1,129,153,150" href="news.html">
</map>

<map name="leftframe1">
<area shape="rect" coords="2,4,97,25" href="news.html">
<area shape="rect" coords="2,32,97,51" href="archiv.html">
<area shape="rect" coords="2,58,97,77" href="intern.html">
</map>

<map name="leftframe2">
<area shape="rect" coords="2,4,97,24" href="ligen.html">
<area shape="rect" coords="2,29,97,49" href="wars.html">
<area shape="rect" coords="2,54,97,75" href="fight_us.html">
</map>

<map name="leftframe3">
<area shape="rect" coords="2,4,97,24" href="member.html">
<area shape="rect" coords="2,29,97,49" href="trial_member.html">
<area shape="rect" coords="2,54,97,75" href="join_us.html">
</map>

<map name="leftframe4">
<area shape="rect" coords="2,4,97,24" href="media.html">
<area shape="rect" coords="2,29,97,49" href="steam.html">
<area shape="rect" coords="2,54,97,75" href="cs.html">
</map>

<map name="leftframe5">
<area shape="rect" coords="2,4,97,24" href="email.html">
<area shape="rect" coords="2,29,97,49" href="icq.html">
<area shape="rect" coords="2,54,97,75" href="links.html">
</map>



</td>
<td valign="top" style="background-color:#efefef;">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="member/linksoben.gif"></td>
<td><img src="News/news_mitte.JPG"></td>
<td><img src="member/rechtsoben.gif"></td>
</tr>
<tr><td style="background-image: url(member/linksback.bmp)" valign="top"><img src="member/linksmitte.gif"></td>
<td bgcolor="#efefef"><table bgcolor="858585" border="1" width="377">

<tr><td bgcolor="dbd9d9">Hompage ist Online</td></tr>
<tr><td bgcolor="dbd9d9" valign="top">
<table width="367" border="0" align="left" cellspacing="0" cellpadding="0" vspace="0">
<tr><td>15.09.2004</td>
<td align="right">von <a href="beutolomeus.html">co|d !c3</a>
</td></tr>
</table>
</td></tr>
<tr><td bgcolor="e7e7e7">
Unsere Homepage ist <font color="ee0000">Online</font>.<br>
Was mich viele Mühen, viel Geduld und viel Zeit gekostet hat. Doch was
tut man nicht alles für sein Team. So der einzigste Bereich der noch kaum
bearbeitet wurde ist der Bereich Member und Downloads.Wobei das auch noch
kommt. Wenn mir mal unser lieber Member Scharbe (<a href="schabrackenschakal.html">Schabrackenschakal</a>) hilft,
dann geht alles etwas schneller. Bald werde ich ein Gästebuch (kommt bald in Infomatik)
einbinden und ein ForumSystem ist auch in Arbeit. Also der rechte Teil der jetzt
noch leer aussieht der wird noch gefüllt im laufe der Zeit!
<br>
Zum Bereich Media werden wir dann immer ein paar Bilder von unseren Lans hochladen
wie es schon unser Member <a href="dick_tator.html">Dick_Tator</a> tut und natürlich auch ein paar Videos/Demos
<br><br>
Da die Homepage auch ein Schulprojekt ist, hoffe ich doch das sich die
Arbeit gelohnt hat.*zwei Fliegen mit einer Klappe geschlagen*
</td></tr>
<tr><td bgcolor="dbd9d9">Quelle:</td></tr>
</table>
</td>



<td style="background-image:url(haupt/rechtsbackground.bmp)"></td>
</tr>



<tr><td><img src="haupt/untenlinks.bmp"></td>
<td><img src="haupt/untenmitte.bmp"></td>
<td><img src="haupt/untenrechts.bmp"></td>
</tr>
</table>

</body>
</html>[/code]

Hoffe das sprengt das Forum nicht :lol:
Bitte wo ist da ein Fehler steh kurz davor meinen PC zusammen zuschlagen :cry:

Was funzt da nicht? Mal abgesen davon, dass es <meta name="xxx"> (ohne "-") heißt und es afaik kein copyright gibt find ich nix.

Es sieht so aus und so,soll es nicht aussehen :cry:
[img]http://people.freenet.de/Team-Naomi/prob.JPG[/img]

Kann einer helfen :cry:

Oh man habs ja fast vergessen !!!

[color=red][size=6][u][b]Frohe Weihnachten euch allen und ein gutes neues Jahr[/b][/u][/size][/color]

Keine Ahnung, ob das etwas damit zu tun hat, aber mein HTML-Editor hier ist etwas beleidigt mit dem Code, solange die Anzahl der Minus-Zeichen vor dem Kommentarende eine ungerade Zahl ist - der Parser erkennt so das Kommentar-Ende nicht. Ersatzweise kann man ein Leerzeichen vor die Kommentar-Ende-Zeichen setzen.

Ob das was damit zutun hat, dass es so aussieht naja :?

Ich glaub ich kann das Problem eingrenzen. Hatte gestern mit einen anderen Teil genau das selbe Problem und da hatte ich vergessen ein </tr> und </table> tag zu setzen. Jedoch beim News Teil find ich nichts :? :cry:

--:edit:--

Habs das Problem gefunden :lol: Hab vergessen einen Teil einzufügen :roll: Naja fehler sind menschlich :wink:

AW: html Problem bei der Tabelle! Hilfe!

So zum Abschluss wollte ich euch noch die Hp in überarbeiteter Form zeigen [url="http://www.team-naomi.de/"]http://www.Team-Naomi.de[/url] .
Kursarbiet info. über html waren auf 13MSSPunkte von daher noch mal einen großen Dank an alle die mir geholfen haben und vorallem an kerri da die die Seite "dynamisch" gemacht hat!

:-D :-D :-D