Supportnet / Forum / Webseiten/HTML

Hi Leute....... Ich hab da mal ne Frage, nämlich wie kann ich die Grafiken auf meiner HP irgendwie nach recht oder nach Links verschieben, Geht das überhaupt mit HTML oder muss das mit CSS gemacht werden? Dank schon im voraus. [*][sup][i] *Threadedit* 15:49:19 Admininfo: Führ bitte einen Thread nicht fort indem du Weitere eröffnest, und vermeide Mehrfachanfragen. Die Datenbank und User werden es dir danken. Siehe [u][url=https://supportnet.de/faqsthread/840]FAQ 2.[/url][/u][/i][/sup]

Hallo MACC,

beides ist möglich, auf Dauer sinnvoler ist die CSS-Variante

<img src="bild.jpg" alt="Bild" style="float:left">

sorgt dafür, dass das bild am linken Rand ist und das, was danach im Quelltext steht, rechts davon ist.

Weitere Infos findes du bei SelfHTML

katy

Ja danke das ist schon mal 50% meiner Frage (nicht böse gemeint ;-) ) aber jetzt möchte ich das bild noch links unter den anderen linken bild.

Hallo MACC,

das Zauberwort zur Aufhebung des Floatings heißt clear.

Wenn du irgendeinem Element die Eigenschaft clear:left gibst, wird dieses unter dem Bild dargestellt.
Du könntest also diese Kombination versuchen:

<img src="bild1.jpg" alt="Bild1" style="float:left">
Text neben Bild1
<img src="bild2.jpg" alt="Bild2 unter Bild1" style="clear:left; float:left">
Text neben Bild2

Das sollte eigentlich so klappen, auch wenn ich die direkte Kombination von clear und both so noch nie eingesetzt habe.

katy

Hey Spitze danke du hast alles beantwortet und das in ca 30 min dafür gibt 50 Bonuspunkte.

Em nochmal kurze Frage jetzt hätt ich gerne , das das erste Bild was links ist daneben noch eins kommt nur das muss genau daran , bei mir sind da noch ca. 2cm zwischen :( .

Hallo MACC,

achte darauf, dass im Quelltext kein Leerzeichen und kein Zeilenumbruch zwischen den Bildern ist. Außerdem kannst du die Bildabstände im Stylesheet (das gehört in den head-bereich der Seite) angeben:

<style type="text/css">
img {
margin:0;
padding:0;
}
</style>

katy

Jo danke klappt.

mfg Marcel

So nächstes Problem (wird aber auch so langsam peinlich ^^) .
Aktueller Stand hier klicken. Jetzt ist das Bil schon wieder rechts daneben obwohl ich das wieder links haben möchte neben den ersten und unter den zweiten. Hier in HTML :

<img src="http://snakesg1.sn.funpic.de/Header%20Kopie.jpg" width="995" height="384" border="0" alt="" style="float:center">
    <img src=" http://www.picupload.net/t-c58202c790a91f083fd03c3d7f82229a.jpg" style="clear:left float:left">
   <a href=""><img src="http://snakesg1.sn.funpic.de/index_03.jpg" width="150" height="18" border="0" alt="" style="float:left margin-right:20px; margin-bottom:512px "></a>
<a href=""><img src="http://snakesg1.sn.funpic.de/index_08.jpg" width="150" height="18" border="0" alt="" style ="clear:left float:left margin-right:500px; margin-bottom:496px "</a>




 <style type="text/css">
img {
margin:-3;
padding:0;
}
</style>

hoffe iht könnt mir helfen

Hallo MACC,

ein paar Dinge zu float und clear:

float:center gibt es nicht. Es gibt nur left und right.

float und clear im gleichen Objekt und die gleiche Seite vertragen sich nicht!
float macht das Objekt schmal, damit daneben was anderes sein kann. clear hebt das auf.

Wenn es mal nötig ist, ein vorheriges Floating aufzuheben und sofort ein neues zu beginnen, kenne ich als einzige Lösung, das mit einem leeren <div style="clear:both"></div> zu trennen.

Gruß
Manfred

Ich habs jetzt mal ausprobiert nur es klappt immer nich nicht. Kann den mal einer hier reinschreiben wie ich das ändern soll.
Am besten wär der fertige HTML Code. ^^

Ich gib euch jetzt nochmal den Link vieleicht hilft das weiter.KLICK HIER

Hallo MACC,

du hast einfach ein paar Fehler im CSS. Zwischen die verschiedenen Eigenschaften gehört immer ein Semikolon. Wenn es fehlt wird je nach Browser mehr oder weniger alles ignoriert.

Das mit dem DIV von abschweb ist so nicht richtig. Du kannst floaten und clearen im selben Element, du hast es ja auch weiter oben im Thread schon selbst ausprobiert.

Zum Anschauen deiner Seite fehlt mir jetzt die Zeit.

Gruß
katy

Hallo Katy,

du hast insofern Recht, dass tatsächlich clear und float im gleichen Element zulässig sind. Ob man den daraus folgenden Effekt beabsichtigt, ist dann aber die Frage. Weil mich diese Frage auch brennend interessiert, habe ich eine kleine Testdatei gebastelt: http://www.abschweb.de/test/float.htm. Bitte mit mindestens 1024 x 768 Vollbild ansehen, sonst kommt die beabsichtigte Demonstration nicht rüber.

Gruß
Manfred

@ abschweb:
welchen "Effekt" meinst du denn jetzt? Mit deiner Testdatei hast du doch lediglich bestätigt, was katy beschrieben hat.

fragt sich
derpfleger

@derpfleger
Ich meine, dass bei Verwendung von clear und float im gleichen Element kein Neuanfang erreicht wird, sondern nachfolgende floatende Elemente sich an vor dem clearenden Element liegenden Elementen orientieren und dadurch nach oben rutschen können.

Manfred

Jetzt hab ich zwischen jeder Eigenschaft ein Semikolon gemacht. aber jetzt sieht das schon wieder ganz anders aus. Jetzt ist nämlich die zweite Grafik aufeinmal ganz unten.
Das hier sind die Grafiken die ich nebeneinander und untereinander haben möchte:

<img src=" http://www.picupload.net/t-c58202c790a91f083fd03c3d7f82229a.jpg" style="clear:left float:left">
   <a href=""><img src="http://snakesg1.sn.funpic.de/index_03.jpg" width="150" height="18" border="0" alt="" style=" clear:left; margin-right:0px; margin-bottom:512px "></a>
    <a href=""><img src="http://snakesg1.sn.funpic.de/index_08.jpg" width="150" height="18" border="0" alt="" style=" float:left; margin-left:100px; margin-bottom:496px " ></a>

mfg Marcel

Jetzt hab ich vergessen da noch was zu zu schreiben.
Wenn ich beim ersten img..... zwischen float und clear ein Semikolon mache ist die Grafik ganz wo anders wo ich die eig haben möchte. Also mach ich da lieber kein Semikolon rein.

Tut mir leid, vielleicht bin ich ja schwer von Begriff, aber deine Beispielseite gibt doch diesen Effekt gar nicht her, oder?

fragt sich derpfleger

@MACC: du bist aber ganz schön beratungsresistent. Wenn du das Semikolon weglassen willst, dann solltest du auf CSS besser ganz verzichten, denn ohne wird es sowieso nicht funktionieren. Wenn das Semikolon einen Effekt erzeugt, den du nicht wünschst, dann suche den Fehler lieber an anderer Stelle, aber schreibe nicht einen funktionslosen Code (-->nämlich durch Weglassen eben des Semikolons). Ausserdem ist auf deiner Seite noch immer das

float:center

das wirklich gar keinen Sinn macht, da diese Anweisung nicht existiert. Ausserdem hast du ein abschliessendes

>

vergessen (die Quellcode-Ansicht des Firefox-Browsers macht dir das schnell durch rote Einfärbung deutlich). Ein Editor mit Tag-Highlighting würde es ebenso anzeigen, ein Validator würde dich auch darauf aufmerksam machen.
Das mit dem Validator ist eigentlich sowieso die erste Anlaufstelle für dich. Lasse deinen Code überprüfen, dann kannst du erst mal die ganzen Fehler beheben, die auf reinen Code-Rechtschreib-Fehlern beruhen, was dann übrig bleibt an Problemen, kannst du weiter zur Diskussion stellen.

HTML-Validatoren:
http://validator.w3.org/
http://www.htmlhelp.com/tools/validator/

CSS-Validator:
http://jigsaw.w3.org/css-validator/

Gruß derpfleger

und noch ein Validator: http://www.validome.org/

@derpfleger
Ich hab da was interessantes herausgefunden.
Kann es sein, dass du meine Testdatei mit dem FF angeschaut hast? Tatsächlich, die von mir beschriebene Wirkung tritt beim IE auf, jedoch nicht beim FF! Beim FF wird tatsächlich beim Block mit dem clear neu angefangen.
Fazit: Wer möchte, dass eine Seite mit floatenden Blöcken auf dem IE funktioniert, sollte meinen Einwand ernst nehmen.

Manfred

@ abschweb: OK, jetzt sehe ich, was du meinst. Ist ja interessant.
Mit float hatte ich schon so viel Ärger, dass ich es niemand mit gutem Gewissen empfehlen könnte. Das muss man tatsächlich sehr sauber in den verschiedenen Browsern testen. Interessant sind auch immer die Effekte, die ein Skalieren der Seite auf gefloatete Bereiche hat. Wenn man das nicht einkalkuliert wird dabei idR das Design vollkommen zerrissen.

Ich werde mir deinen Einwand merken. Danke.

Gruß derpfleger

Hallo abschweb,

mein IE6 machte da allerdings nichts anderes als mein Opera, allerdings habe ich gerade weder Zeit noch Muße mir das in allen denkbaren Fällen anzuschauen. Natürlich muss das Floating mit Vorsicht angewendet werden, wie alle Positions- und Elementfluss-ändernden CSS-Eigenschaften.
Ein DIV erscheint mir hier aber übertrieben, auf gleichem Element-Level (also als Inline-Element wie img) würde ich eher ein <br> nutzen wenn sich sonst kein passenderes Element sowieso dort gerade befindet.

Hallo MACC,

eine der Grundvoraussetzungen für verlässlich funktionierendes CSS ist schon, dass alles valide ist. Du bist ja dazu schon mit einer Fülle von Validatoren beraten worden. Die Validatoren würden dich auch darauf hinweisen, dass <style> nur im head-Bereich der Seiten stehen darf, keineswegs im body. Außerdem passt dein Code so wie du ihn postest nicht zu dem, was du als deinen Wunsch beschreibst. Von Links ist darin nämlich keine Rede. Das <a> bringt also sowieso alles durcheinander. Bitte gehe dein Problem doch noch einmal in Ruhe von Anfang an durch und formuliere das dann komplett neu. Dann können wir hier an der Gesamtlösung basteln und müssen nicht an irgendwelchen Teilproblemchen herumdoktern.

Gruß
katy

Hallo Katy,

was du vorschlägst (<br> als Trenner) ist in HTML-strict gar nicht zulässig (<br> darf nicht Kindelement von <body> sein).

Gruß
Manfred

Hallo abschweb,

img darf ebenfalls nicht direkt im body stehen, insofern muss es sowieso ein umgebendes Blockelement geben.

katy

Hallo Katy,

wohl wahr, aber nackte <img> mit Blockattributen wie float zu versehen, funktioniert ohnehin nur im FF und nicht im IE, da muss ich ohnehin ein <div> drumrumbauen.

Gruß
Manfred

Hallo abschweb,

da bist du leider falsch informiert. Natürlich ist float anwendbar auf alle Elemente. Die einzige Ausnahme sind solche, die mittels Position sowieso aus dem Elementfluss gezogen wurden.
Für solche Fragen schau ich gern auf CSS4You nach, dort finde ich die Rubrik "Anwendbar auf" übersichtlicher als bei SelfHTML die gelegentlichen Anmerkungen unter "Beachten Sie".

katy

Hallo Katy,

die Zulässigkeit von float in <img> bestreite ich doch gar nicht.
Es funktioniert nur leider nicht (im IE). Und als Praktiker (oder nenn mich Oberpfuscher) ist das für mich entscheidend. Ich versuche immer so zu schreiben, dass das Ergebnis in IE und FF so aussieht, wie es soll. Ich weiß, das so ein Code für Puristen nicht immer optimal aussieht.

Gruß
Manfred

Hallo Katy,

ich habs grad nochmal mit dem IE getestet,
ich habe mich geirrt, es geht doch mit nacktem <img> und float.
lag ich eindeutig falsch.

Gruß
Manfred

Hallo "Oberpfuscher",

auch da muss ich dir widersprechen (tut mir leid - ich ahbe schon ein schlechtes Gewissen). Ich habe zB. auf mehreren der von mir erstellten Seiten einfach die Bilder an den Seitenrand gefloatet mittels

img {
float : right;
}

im Stylesheet und da macht kein Browser (IE 6/7, Opera, FF, Safari) irgendwelche Probleme. Auch bei meinen "lieben" Kollegen ist das gängige Praxis.

katy

hoppla, da hat sich wohl was überschnitten.

katy

So jetzt noch mal von vorne das es alle Leute hier verstehn wo mein Problem liegt.
Am besten ihr schaut euch das Problemkind mal an: HIER

Und jetzt erklär ich euch die HP:

Ihr sieht oben das Titelbild , das muss euch ja auffalen. Dieses Bild geht bis NEWS, am besten könnt ihr das in der Mitte erkännen oder rechts,links ist schlecht.
Code:

<img src="http://snakesg1.sn.funpic.de/Header%20Kopie.jpg" width="995" height="384" border="0" alt="" >

Das bild was ganz links ist ist der Balken links von News was vom Titelbild weitergeht. Das ist das Bild was ich ganz links haben möchte.
Code:

<img src=" http://www.picupload.net/t-c58202c790a91f083fd03c3d7f82229a.jpg" style="clear:left float:left">

Hier habe ich das Semikolon zwischen clear und float weggelassen, weil es ein Effekt bringt. was ich nicht möchte, denn es geht weiter nach rechts.

News ist das nächste Bild und gleichzeitig ein Link zu NEWS was man bestimmt auch erkennt. Diese Grafik ist genau an diesem Standpunkt wo ich es haben möchte.
Code:

   <a href=""><img src="http://snakesg1.sn.funpic.de/index_03.jpg" width="150" height="18" border="0" alt="" style=" clear:left; margin-right:0px; margin-bottom:512px "></a>  

Jetzt kommt News Archive was , (ich wie ihr bestimmt schon denken könnt) neben den Balken haben und unter News, dies ist auch ein Link.
Code:

 <a href=""><img src="http://snakesg1.sn.funpic.de/index_08.jpg" width="150" height="18" border="0" alt="" style =" clear:left; margin-right:0px; margin-bottom:496px "</a>  

Zudem kommt noch. dass zwischen den Grafiken kein Platz mehr ist dieser CSS Code:

<style type="text/css">
img {
margin:-3;
padding:0;
}
</style>

Ihr könnt ja die HP mal als HTML-Datei speichern wenn ihr wollt und da dann auch mal gucken.
Hoffe ich habe mein Problem jetzt ausführlich beschreiben

mfg Marcel

Hallo MACC,

bitte lies erst einmal Antwort 23 zuende. Bei deinem Code bleibt erst einmal nur der eine Ratschlag: Mach den Quellcode valide! Ansonsten macht jeder Browser was er will.

Sorry

katy

Hallo MACC,

wenn ich auf dein HIER klicke, bekomme ich ausschließlich animierte Werbung und nichts von deiner Seite.
Wenn ich was beurteilen soll, brauche ich deine tatsächliche Webadresse.

Gruß
Manfred

Nun, vor ein paar Stunden war dort durchaus noch eine Seite erreichbar, nämlich just dieselbe wie noch sehr weit oben im Thread.

Nehmen wir also mal zugunsten von MACC an, dass jener gerade intensiv an seiner Seite bastelt und uns seinen nächsten Entwurf in Kürze vorstellen wird (unter Berücksichtigung der Antwort 23 würde ich mir wünschen).

@ MACC:
ich hatte mir mal kurz Gedanken zu deinem Problem gemacht, habe das allerdings zunächst mal verworfen, denn ich mutmasse, dass du mit einem per float doch recht flexibel gestalteten Layout niemals dein Ziel wirst erreichen können. Du wirst nach Lösung des ersten Problems (richtige Anordnung des header-Bildes und des langen Balkens links und der Navigationsbuttons) schnell weitere Fragen haben bzgl. pixelgenauer Positionierung von weiteren Layout-Bildern, Contentfeldern u.ä... und das alles wird schaurig aussehen, solange du versuchst pixelgenaues Platzieren von Layoutelementen mit Hilfe dynamischer Methoden zu erreichen. Sobald jemand auf die Idee kommen sollte, deine Seite zu skalieren, wirst du unglücklich werden.
Da die Browser offensichtlich kaum unter einen Hut zu bringen sind, was die Auslegung des floatens angeht, sehe ich da schwarz für dein Vorhaben.

Naja, vielleicht bin ich ja einfach zu doof, aber mit dem floaten habe ich irgendwie immer Probleme :-(
Und - schlagt mich - für solch ein pixelgenaues Design ist das Tabellenlayout immer noch die einfachste Variante (auch wenns unter CSS-Freaks verpöhnt ist).

Wünsche dir trotzdem erst mal viel Kraft, das Ganze weiter anzugehen.

Gruß
derpfleger

@derpfleger
m. E. ist die Alternative für pixelgenaues Webdesign die absolute Positionierung aller Elemente. Tabellenlayout ist vergeudete Kreativität, besonders wenn man mit colspan und rowspan tricksen muss.

Gruß
Manfred

Hallo derpfleger und abschweb,

ob MACC sein Problem mit reinem CSS oder Layouttabellen löst ist vermutlich egal, nach dem kurzen Blick auf seine Seite stimme ich euch zu, das weitere Problemmeldungen folgen werden. So wird sich google kaum der Seite annehmen, da bislang jegliche Inhalte als Bild dargestellt wurden und daher für Suchmaschinen nicht existieren. Diese Bilder sollen wohl pixelgenau ineinander übergehen. Das kann in der Tat mit floating nicht klappen. Ich kann MACC eigentlich nur empfehlen das Seitenkonzept grundsätzlich zu bedenken. Angesichts der Zielgruppe käme hier sogar eine reine Flashseite in Betracht.

katy

Hi Leute..............
erstmal möchte ich euch allen richtig DANKE sagen weil ihr mir helft.

Dann hab ich hier noch was zu den Validatoren.
Ich habe all Fehler bseitigt so wie es dort stand und dann hatte ich von 7 ERRORS aufeinmal 256 ERRORS, naja. Aber ich befürchte das ich die ERRORS auch falsch gelöst habe, weil die mir bei

<html>

das

<

rot angestrichen hatten, warum auch immer.

Warum ich diese HP erstellen möchte:
Ich bin Clan-Leader in ein CSS-Clan und beauftragt worden eine gute HP zu gestalten und zu errichten.

Jetzt zum Design.
Das Design wurde mir kostenlos von X-TREAM TEAM CLAN.de gesponsort (HIER DIREKTER LINK ZUM DESIGN).
Die einzelnen Bilder hab ich auch noch auf den Server gespeichert :HIER
Dort habe ich auch die aktuelle HP gespeichert unter cszc hp.htm.
Dann habe ich auch noch zufällig ein anderen Clan im Internet gefunden das selbe Design wie ich verwände und ich komm einfach nicht dahinter wie die das gemacht haben.Link Hier.

Hoffe das hilft euch weiter
mfg Marcel

@MACC:

1. zu der anderen Clan-Seite: das ist ein Tabellenlayout, sieh dir den Quelltext der Seite mal an: hier

2. "Dort habe ich auch die aktuelle HP gespeichert unter cszc hp.htm"
Auf dieser Seite liegt doch lediglich deine "alte" Seite, du hast doch gar nichts verändert.

Ich würde mir an deiner Stelle nochmal gründlich überlegen, ob du dieses Design für deine Clan-Seite wählen willst, da es ja schon anderweitig verwandt wird. Nachmachen ist doch nicht wirklich schön :-)

Gruß
derpfleger

Hallo MACC,

deine Konkurrenten haben einfach eine Layoutabelle gemacht.
Warum kopierst du dir nicht einfach deren Quellcode? Das sollte dir das Leben einfacher machen (keine Angst, simpler HTML-Quellcode unterliegt nicht dem Urheberrecht). Oder du fragst die Konkurrenz, wie die das gemacht haben. Im Gegensatz zu uns hier haben die sich schon einmal mit den Design-Vorlagen intensiv beschäftigt. Oder helfen sich Clans nicht gegenseitig?

Wenn du dann mal selbst HTML/CSS gelernt hast, kannst du daraus immer noch eine richtig gute Seite machen. Oder selbst eine bessere entwickeln.

katy

@ derpfleger

Hehe ja nachmachen find ich auch nicht toll man könnte wohl ungefähr denken das ich es nachmache,weil die schon fertig sind aber ich hab die auch erst später entdeckt, da war ich schon mit der hier beschäftigt.

@ katy

Sorry aber unter Quellcode kann ich mir jetzt mal nix vorstellen meinst du das HTML? Wenn ja ,dann hab mir das schon mal angeguckt und da ist rein kein HTML zu sehn nix , garnix, null, quanto ,basta.
Also damit mein ich,dass die nur mit HTML gearbeitet haben bei den Überschriften und ein bischen mit frame aber was von Links und IMG´S seh ich da nix, aber ich glaube das genau da mein Problem liegt !

Könntest du mir den sagen wie ich den Quellcode kopiere?

mfg Marcel

Hallo MACC,

Quellcode ist hier HTML und ein bisschen CSS. Im CSS findest du die Bilder, die haben die als Hintergrundbilder eingebunden.

Quellcode kopieren geht über die Quellcodeansicht im Browser.

katy

@MACC:
Wer ist denn auf die Idee gekommen, gerade dich mit dieser Aufgabe (Erstellen einer Clan-Webseite) zu beauftragen? Oder warum hast du dich dazu freiwillig gemeldet?
Du solltest, falls du dieses Projekt ernsthaft in Angriff nehmen willst, wirklich mal ganz vorne beim Urschleim anfangen: Lese dir bitte aufmerksam die Wie fange ich an - Touren auf Selfhtml durch.
Wenn schon bei solch grundlegenden Begrifflichkeiten wie "Quellcode" erste Fragezeichen auftauchen, wirst du hier gegebene Änderungs-/Verbesserungs-/sonstwie-Ratschläge sowieso nicht umsetzen können, da du sie höchstwahrscheinlich gar nicht verstehen würdest.

Wenn du dich als Übersetzer für fremdsprachige Texte verdingen wolltest, würde ich genauso annehmen, dass du die entsprechende Sprache zumindest einigermassen beherrschst. Dir eine fremde Sprache ganz und gar beizubringen, das überstiege die Möglichkeiten eines Forums.
Genauso verhält es sich mit der Webseitenerstellung. Du kannst doch nicht ernsthaft erwarten, dass sich jemand von diesem Forum hinsetzt und für dich die ganze Arbeit macht. Ein gutes Stück Vorleistung von deiner Seite erwarte ich auf jeden Fall. Du hast aber bislang keinen einzigen Vorschlag umgesetzt, hast nur darauf gewartet, dass jemand das für dich erledigt.
So wird das nichts...

Gruß derpfleger

So jetzt hab ich mal ne ganz neue Page erstellt mit neuen Design ;-)
Hier

Jo soweit so gut ne

Hi MACC,

also was du bei CSS noch immer nicht verstanden hast, das ist der Ort, wo du diese Style-Definitionen unterbringst.

Es gibt drei Möglichkeiten, die durchaus auch kombiniert werden können, wobei eine Kombination selten Sinn macht:

1. Es werden alle Style-Angaben in einer externen Datei untergebracht, in den HTML-Codes (=Quellcode oder Quelltext) der einzelnen Seiten wird dann im head-Bereich (also zwischen <head> und </head> ) ein Verweis auf diese externe Style-Datei eingefügt. Die Einbindung des Verweises funktioniert dann über link oder über @import, also entweder

<link rel="stylesheet" type="text/css" href="format.css">

oder

<style type="text/css">
@import "format.css";
</style>

wobei in diesen Beispielen diese externe-Style-Datei eben den Namen format.css trägt.

2. Es werden die Style-Angaben auf jeder Seite zentral im Bereich zwischen <head> und </head> untergebracht, also ungefähr so:

<head>
<title>Titel-Text</title>
<style type="text/css">
<!--
/* ... Hier werden die Formate definiert ... */
-->
</style>
</head>

3. Es werden Style-Angaben innerhalb eines Tags untergebracht, also zB so:

<h1 style="[element-spezifische Formate]">Überschrift erster Ordnung</h1>

Was man aber grundsätzlich nie macht, ist das, was du machst:

Zum einen packst du verschiedene Style-Angaben im head-Bereich in verschiedenen Blöcken unter, fasst sie aber nicht zusammen. Dadurch machst du dir das Leben unnötig schwer, weil dadurch nichts gewonnen wird, die Übersichtlichkeit aber grandios leidet.
Des weiteren steht der größte Style-Block unterhalb von </head>, und dort gehört er nicht hin.
Dann verwendest du für das Tabellenlayout html-Eigenschaften, anstatt das Layout ebenfalls über css zu definieren, Nein, noch schlimmer, du kombinierst beides und bringst die Browser damit restlos in Verwirrung, weil sie jetzt gar nicht mehr wissen, welche Definition nun gelten soll.
Dann packst du Style-Definitionen neben die Tags und hoffst, dass die schon irgendie wissen, wo sie hingehören.
Und, oh Wunder, die Browser machen sogar noch irgendwas aus diesem Kuddelmuddel. Aber du kannst nicht verlangen, dass du mit solchem Verpanschen von verschiedenen richtigen und falschen Vorgehensweisen irgendwann eine in allen Browsern annähernd gleich ausehende Seite zustandebringst.

Meine Empfehlung:

In der Enstehungsphase der ersten Seite, wenn man also noch sehr am Anfang steht, ist es oftmals am Übersichtlichsten, wenn man die Style-Angaben (und zwar alle) im Kopfbereich des Quellcodes unterbingt, also nach dieser Art:

<head>
<title>Titel-Text</title>
<style type="text/css">
<!--
/* ... Hier werden die Formate definiert ... */
-->
</style>
</head>

Hat man die grundlegende Seitendarstellung mal gefunden, lagert man das Stylesheet aus in eine externe Datei.
Dann kann man sich daran machen, die zweite und alle folgenden Seiten zu schreiben, und bindet jedesmal die externe Style-datei ein, wie oben beschrieben (über link oder @import). Wenn einem dann im Verlauf die Schriftfarbe der Überschrift 1. Ordung nicht mehr gefällt, muss man sie lediglich in der externen Style-Datei ändern, und diese Änderung wird dann automatisch in allen html-Dokumenten, die diese externe Style-Datei einbinden wirksam. Das ist ja genau der große Vorteil von externen Style-Dateien: man muss Änderungen nur noch an einer Stelle vornehmen und sie werden dann in allen html-Dateien wirksam. Das Layout wird auf diese Art ausgelagert und kann sehr schnell und effektiv vollkommen geändert werden. Auch ist es möglich, für verschiedene Ausgabemedien verschiedene Layouts in verschiedenen externen Style-Dateien abzulegen, zB ein spezielles Layout für die Druckausgabe festzulegen, wo zB aufwändige Einfärbungen oder Bilder herausgenommen sind, damit man beim Ausdrucken ein bischen Tinte sparen kann, usw.....

Du hast noch viel Arbeit vor dir.

Gruß derpfleger

OK, dann mal die nächste Manöverkritik:
du hast dir den Code wohl an verschiedenen Stellen zusammengeklaut. Damit das ganze überhaupt validierbar wird, musst du erst mal deinen Anfang des Quelltextes ändern. XHTML-strict wirst du in den nächsten 10 Wochen eher nicht lernen, also ändere das mal auf folgendes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSCZ</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
/* ... Hier werden die Formate definiert ... */
-->
</style>
</head>


dann machst du den Hauptteil deines Quellcodes noch frei von jeglichem CSS und sonstigem html-Eigenschaften-Balast (zB im body-Tag oder im table-tag) und packst deine ganzen Style-Definitionen zentral oben in den Kopf wie in der letzten Antwort von mir beschrieben.
Deine datei hat damit endgültig diese Form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSCZ</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
/* ... Hier werden die Formate definiert ... */
-->
</style>
</head>

<body>
.... hier kommt dein Content rein ....
</body
</html>


Dann postest du das Resultat und wir sehen weiter...

Gruß derpfleger

muss natürlich CSZC heissen.. :-)

verflixte Tippfehler:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSCZ</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
/* ... Hier werden die Formate definiert ... */
-->
</style>
</head>

<body>
.... hier kommt dein Content rein ....
</body>
</html>

Das abschliessende body-Tag hatte ein > zu wenig.

Und noch ein Tipp:
du solltest dir zumindest die drei gängigen Browser zulegen
Internet Explorer
Firefox
Opera

und dann deine gebastelte Seite in jedem Browser betrachten. Dabei fallen einem idR sogleich Fehler auf. Die Beseitigung dieser Fehler ist dann uU gar nicht so einfach. Eine anstandslos validierte Seite sollte aber meist in allen Browsern ein gutes Ergebnis abliefern. Über die seltenen Abweichungen einer validierten Seite kann man sich dann hier vortrefflich unterhalten.

Hast du noch den IE6 oder schon den IE7?
Der IE6 ist ja noch sehr verbreitet, hat aber oftmals einige Interpretationsprobleme was CSS angeht. Wenn du den IE6 hast, behalte ihn zunächst. Sieht deine Seite dort gut aus, gibts idR auch im IE7 keine Probleme.

Gruß derpfleger

• Grafiken in ein neues Arbeitsblatt kopieren - beziehen sollen sich die Grafiken auf das neue Arbeitsblatt
• Wie bleiben Grafiken in Dokumenten (Word 2000 ) fest verankert?