CSS Seitenanpassung (benötige Hilfestellung)

Nightfighter · 25.03.2014

Vorwort - Info:
Hallo Leute,
ich habe da ein kleines Problem. Ein Kumpel von mir hat mit CSS meinen Guide (aus einer PDF) online stellen wollen.
Leider sind dementsprechend die Schrift und die Bilder von einander getrennt worden - leider passen die Texte so nicht mehr korrekt zu den Bildern...
(falls es Tutorials hier geben sollte, dann nützen sie mir nicht, weil mein Punktestand nicht aussreicht zum anschauen)

Jetzt dachte ich mir, ich mache aus der PDF einfach Bilder im .png format - und wir ersetzen die Schrift und die Bilder damit.
[Das Problem hierbei ist - die Bilder kann er nur mit max. 600x800px einfügen, die Bilder haben aber 1820x2574px ... sonst kann man die Details nicht mehr erkennen.]

Meine Fragen:
Wie kann ich also die Bilder automatisch an die Bildschirm-Auflösung anpassen lassen?? bzw. wo müsste ich den Code überhaupt einsetzen?? Es wäre auch schön wenn mir jemand verraten könnte, wie ich das ganze Layout auf Full-Screen bekomme jetzt ist es klein und in der Mitte. (siehe Bild 1)

Ansichten:
im folgenden Link finden ihr eine aktuelle Ansicht wie es im Web aussieht:
Und gegen das soll es getauscht werden:

gruß Sven

rodemund · 25.03.2014

Warum stellst du nicht einfach die vorliegende PDF-Datei auf einen Server und legst ein Link hin – dann können sich Interessierte einfach die Datei runterladen?
Ansonsten musst du wohl das PDF-Layout in HTML und CSS nachbauen.

Nightfighter · 25.03.2014

Naja, als Download version gibt es das schon. Mein Kumpel wollte es auch so veröffentlichen, dass man schnell was nachschauen kann, ohne erst die PDF benutzen zu müssen.

Also eine andere Möglichkeit als nachbauen geht nicht??
Er hat das aktuelle Aussehen soweit selbst erstellt. Damit meine ich auch die Reiter zu den Seiten.

das sieht jetzt so aus:

Code:

<!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" lang="en" xml:lang="en">
<head>
<title>Warface / Einsteiger Guide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="Screen">
/*\*/@import url("css/layout-1-master.css");/**/
</style>
<style type="text/css">
<!--
.Stil1 {color: #00FF33}
.Stil7 {color: #CC0000}
.Stil9 {color: #CC0000; font-weight: bold; }
-->
</style>
</head>
<body>
<div id="maincontainer">
  <div id="headline1">
    <div class="title"><em>Warface / Einsteiger Guide </em></div>
    <span class="subtitle">by HeadBreaker </span> </div>
  <div id="navtoplist">
    <ul>
      <li id="current"><a href="http://pures-onlinegaming.de/Guide/index.html">Home</a></li>
      <li><a href="layout-2.html">Inhaltsverzeichnis</a></li>
    </ul>
  </div>
  <div id="navtoplistline">&nbsp;</div>
  <div id="contentwrapper">
    <div id="maincolumn">
      <div class="text">
        <h2><a name="bookmark0" id="bookmark0">Herzlich Willkommen zu diesem </a><strong>neuen und aktuellen </strong>Guide!!</h2>
        <p><img class="img-left" src="images/Image_001.jpg" width="610" height="343" alt="" /></p>
        <p>&nbsp;</p>
        <p>Dieses   Dokument soll jedem den Einstiegt bei Warface erleichtern, aber auch   Fortgeschrittene Spieler k&ouml;nnen dies als Nachschlagewerk benutzen ;)</p>
        <p>Es werden hier die wichtigsten Dinge zum Spiel erkl&auml;rt.</p>
        <p>In   einigen Bereichen werden die Informationen ausf&uuml;hrlicher erkl&auml;rt, wobei   andere Bereiche f&uuml;r sich selbst sprechen und nicht Detailreich   behandelt werden.</p>
        <p>&nbsp;</p>
        <p>Selbstverst&auml;ndlich m&uuml;sst ihr auf Bildmaterial nicht verzichten&hellip;.</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div>
    </div>
  </div>
  <div id="leftcolumn">
    <ul>
      <li>
        <div align="left"><strong><a href="layout-3.html"><span class="Stil7">1</span></a></strong><a href="layout-3.html"><span class="Stil7">.</span><span class="s4" style="padding-left: 7pt;text-indent: 0pt;text-align: left;">Download/</span></a></div>
      </li>
      <li>
        <div align="left"><a href="layout-3.html"><span class="s4" style="padding-left: 7pt;text-indent: 0pt;text-align: left;">Installieren/Patchen</span></a></div>
      </li>
    </ul>
    <div align="left">
      <ul>
        <li><a href="layout-4.html"><span class="Stil9">2</span>. Das Hauptmenue</a></li>
        <li><span class="Stil9">3</span><span class="Stil1">.</span><a href="layout-7.html"> Chat - Freundesliste</a></li>
        <li><span class="Stil7"><strong>4</strong>.</span><a href="layout-5.html"> Laden (Shop)</a></li>
        <li><span class="Stil9">5</span>. <a href="layout-6.html">Inventar</a></li>
        <li><span class="Stil7"><strong>6</strong>. </span><a href="layout-8.html">Statistik</a></li>
        <li><span class="Stil7"><strong>7</strong>.</span> <a href="layout-9.html">Fortschritt</a></li>
        <li><span class="Stil7"><strong>8</strong>.</span> <a href="layout-10.html">Clan</a></li>
        <li><span class="Stil7"><strong>9</strong>.</span> <a href="layout-11.html">Versteck</a></li>
        <li><span class="Stil7"><strong>10</strong>.</span> <a href="layout-12.html">Optionen</a></li>
        <li><span class="Stil7"><strong>11</strong>.</span> <a href="layout-13.html">Hilfe</a></li>
        <li><span class="Stil7"><strong>12</strong>.</span> <a href="layout-14.html">Co -Op</a></li>
        <li><span class="Stil9">13</span>. <a href="layout-15.html">Versus</a></li>
        <li><span class="Stil7"><strong>14</strong>.</span> <a href="layout-16.html">Kredits kaufen / Aufladen</a></li>
        <li><span class="Stil9">15</span><span class="Stil1">.</span><a href="layout-17.html"> rechtlicher Hinweis / Danksagung </a></li>
      </ul>
    </div>
    <div id="navmainlistline">&nbsp;</div>
    <fieldset>
    <legend>NOTES:</legend>
    <p><img src="http://wf.mail.ru/wiki/images/e/ed/Challenge_badge_70.png" width="128" height="128" /></p>
    </fieldset>
  </div>
  <div id="footer">
    <p>&copy; Copyright 2014 by <a href="http://www.pures-onlinegaming.de/">www.pures-onlinegaming.de</a> | created by <a href="http://www.pures-onlinegaming.de/index.php/User/15-HeadBreaker/">HeadBreaker</a> </p>
    <p> licensed &amp; designed under <a href="http://www.pures-onlinegaming.de/index.php/User/1-Leos45/"> Leos45 - pures-onlinegaming.de </a></p>
  </div>
</div>
<div align=center></div>
</body>
</html>

rodemund · 25.03.2014

So langsam steige ich dahinter:
Du hast den Guide in Word geschrieben und ein PDF daraus gebraten.
Dein Kumpel hat dann das PDF genommen, als HTML exportiert und will jetzt (oder hat schon) eine CSS dazuschreiben, damit’s layoutmäßig passt. Und wenn alles schick aussieht, wollt ihr das in eurem Forum online stellen. Richtig?

Wenn ich damit ungefähr richtig liege, und wenn ich vor der Aufgabe stünde, dann würde ich es neu schreiben. Schlimmer, als aus Word HMTL/CSS machen zu müssen, ist eigentlich nur ... hm, da fällt mir gerade gar nichts ein.

1. Möglichkeit: Neu machen. Einzige realistische Chance, meiner Meinung nach.
2. Möglichkeit: Dem netten Forumsteilnehmer, der dich dazu ermutigt hat, sagen: „Vielen Dank für die Blumen, super Idee. Könntest du das kurz machen?“ Das Wort „kurz“ ist dabei wichtig, das muss unbedingt erwähnt werden. Alternativ geht auch „eben mal schnell mal“.

3. Möglichkeit: Das Ansinnen freundlich, aber bestimmt ablehnen.
4. Möglichkeit: Das so durchziehen. Dann aber einen warmen Pullover nicht vergessen und genügend Proviant einpacken.

Ich bin mir ziemlich sicher, dass das in etwa so gelaufen ist. Ich war einmal bei euch im Forum, habe den Guide als PDF runtergeladen und probeweise als HTML exportiert und dann mit dem Code verglichen, den du oben gezeigt hast – das passte. Das habe ich natürlich freiwillig und aus Interesse gemacht, aber es wäre hilfreich gewesen, wenn du diesen Ablauf kurz skizziert hättest.

Nightfighter · 25.03.2014

Ich bin in CSS eine absolute Niete, daher verstehe ich nicht viel davon.
Aber ja, ich hatte es in word erstellt, exoptiert als pdf - dann in Acrobat ein Lesezeichen dazu erstellt und das Wasserzeichen.

Wie mein Kumpel nun was in html / css / php gemacht hat weis ich leider nicht.
(habe zwar früher auch ein bisschen mit php angefangen, aber dann vernachlässigt :rolleyes:

)
da dies irgendwie ja auch mit dem Layout von seiner Seite passen muss hat er wohl irgendwelche vorgaben seiner Seite genommen, oder den Guide irgendwie eingebunden..

Punkt 1 kann ich noch verstehen, aber von 2 bis 4 leider nicht.
Auf wen sollte sich das beziehen?? Auf meinen Kumpel??
wenn ja, dann möchte ich gerne erwähnen, dass dies seine Idee war...
Ich habe diesen Guide nur erstellt und kostenfrei jedem Angeboten mit der Möglichkeit ihn nach belieben einzubinden.

EDIT:
Wenn Du mir vielleicht irgendwie helfen könntest wäre das prima. Würde ich Dir eine Rar. zukommen lassen, die den gesammten Aufbau der Guideseite beinhaltet. Vielleicht findest Du einen Weg.. ohne das alles neu gemacht werden muss

EDIT 2:
Ich habe gerade einen richtiges durcheinander gesichtet.
Habe alle Bilder ausgetauscht (mit richtiger bezeichnung), die größe stück für Stück reduziert, die kompletten Textpassagen gelöscht und getestet.
Beim Index hat das noch funktioniert. Also habe ich alles so geändert. Doch dann habe ich gesehen, dass z.B. bei Chat / Freundesliste keine weiteren seiten erstellt wurden wie bei meiner PDF und somit war der Plan wieder für den aller Wertesten.....

Eigentlich sollten wie bei der PDF stehen.

Habe da mal einen Test gemacht.. könnte das der richtige Ansatz sein:

HTML:

<!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" />
<title>Einsteiger-Guide</title>
</head>
<body>
<ul id="navi">
<li><a href="#">Start-Seite</a>

<li><a href="#">Download/Installieren/Patchen</a>
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>
</li>
<li><a href="#">Das Hauptmenü</a>

<li><a href="#">Der Chat</a>
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
    </ul>
</li>

<li><a href="#">Der Laden (Shop)</a>
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>
</li>

<li><a href="#">Inventar</a>
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
    </ul>
</li>
 
<li><a href="#">Statistik</a>
</li>
<li><a href="#">Fortschritt</a>
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>

<li><a href="#">Clans</a>

<li><a href="#">Versteck</a>

</li>
<li><a href="#">Optionen</a>
    <ul>
        <li><a href="#">Steuerung</a></li>
        <li><a href="#">Steuerung 2</a></li>
        <li><a href="#">Gameplay</a></li>
        <li><a href="#">Video</a></li>
        <li><a href="#">Audio</a></li>
    </ul>
<li><a href="#">Hilfe</a>

<li><a href="#">CO-OP</a>
<ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
        <li><a href="#">Page 5</a></li>
    </ul>
  
<li><a href="#">Tower Raid (CO-OP)</a>

<li><a href="#">Versus</a>
<ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>

<li><a href="#">Kedits kaufen / Aufladen</a>

<li><a href="#">rechtliche Hinweise / Danksagung</a>
<li><a href="#">Platzhalter für Euch selbst</a>
</body>
</html>

Für diejenigen die gerne einen Vergleich machen wollen, hier der Link zu der PDF:

rodemund · 26.03.2014

rodemund schrieb:
1. Möglichkeit: Neu machen. Einzige realistische Chance, meiner Meinung nach.

Nightfighter schrieb:
Vielleicht findest Du einen Weg.. ohne das alles neu gemacht werden muss

Diese beiden Aussagen bilden in der Tat einen interessanten Kontrast.

Nightfighter schrieb:
Wenn Du mir vielleicht irgendwie helfen könntest wäre das prima. Würde ich Dir eine Rar. zukommen lassen, die den gesammten Aufbau der Guideseite beinhaltet.

Vielen Dank für dein Vertrauen, aber ehrenamtlich mache ich gerade eine Webseite und eine Broschüre. Ich muss leider ablehnen.

Nightfighter schrieb:
Punkt 1 kann ich noch verstehen, aber von 2 bis 4 leider nicht.

Ja, stimmt, da war ich innerlich schon woanders – deine Ausgangsfrage war, wie man das am besten in Bilder umwandelt:

Nightfighter schrieb:
Jetzt dachte ich mir, ich mache aus der PDF einfach Bilder im .png format - und wir ersetzen die Schrift und die Bilder damit.

Das halte ich für überhaupt keine gute Idee. Ich hatte das innerlich bereits verworfen und beziehe mich bei den Punkten 2 –4 auf das Unterfangen „Word in HTML/CSS umformen“.

Nightfighter schrieb:
Auf wen sollte sich das beziehen?? Auf meinen Kumpel??

Das bezieht sich auf

Dieser Forumsteilnehmer hat offensichtlich diese Fragestellung befeuert.

Nightfighter schrieb:
wenn ja, dann möchte ich gerne erwähnen, dass dies seine Idee war...
Ich habe diesen Guide nur erstellt und kostenfrei jedem Angeboten mit der Möglichkeit ihn nach belieben einzubinden.

Nightfighter schrieb:
Ich bin in CSS eine absolute Niete, daher verstehe ich nicht viel davon.

Nightfighter schrieb:
Wie mein Kumpel nun was in html / css / php gemacht hat weis ich leider nicht.

Was ich bis jetzt verstanden habe:
– Der PDF-Guide soll in die Seite deines Kumpels eingebunden werden,
– und zwar so, dass man schnell und mühelos darauf zugreifen kann,
– und zwar müheloser als auf eine heruntergeladene PDF (daher scheidet für mich die Lösung mit den Bildern aus).
– Du kennst die Vorgaben dafür nicht.
– Dein Kumpel hat es schon versucht,
– aber du weißt nicht, was er gemacht hat.
– Du weißt aber, dass das nicht geklappt hat.
– Es gibt also ein Problem, das muss gelöst werden.
– Es ist aber eigentlich gar nicht dein Problem. Du stellst nur die Ausgangsdaten zur Verfügung und bist hier sozusagen als eine Art Briefträger unterwegs.
– Du hast Code gepostet: Den fürchterlichen HTML-Code, der mittelbar aus MS Word stammt, und HTML-Code, der eine grobe Seitenstruktur abbildet, aber keine Formatierungen enthält (und den du als PHP-Code ausgewiesen hast). Dieser Code ist für mich nicht so aussagekräftig.

Was ich nicht verstanden habe:
– Wie du die Antworten verstehen willst, wenn du offenbar nicht viel über HTML/CSS/PHP weißt?
– Was du mit den Antworten vorhast – deinen Kumpel informieren? (Vielleicht möchte dein Kumpel ja mal irgendein Forum besuchen und eine Frage stellen?)

Für mich sieht es so aus, als wenn du hier nach Lösungen für die Seite deinen Kumpels fragst, die wir möglichst komplett und 1:1 übernehmbar anbieten, obwohl wir die Umstände gar nicht kennen und dein Kumpel hier keine Frage gestellt hat.

Ich befürchte, ich kann dir keine Antwort geben, die du sinnvoll verwerten kannst. Vielleicht geht es anderen anders, aber ich sehe nicht, wohin das führen soll.

Möglicherweise ist dir aufgefallen, dass wir in diesem Thread weitgehend unter uns sind, während man sich hier im Forum normalerweise vor HTML-, CSS-, PHP-, PNG- und MS-Word-Experten kaum retten kann. Das könnte daran liegen, das die Fragestellung undeutlich bis widersprüchlich ist.

Du hast einen schönen PDF-Guide erstellt und damit wichtige Arbeit in eurem Warface-Forum geleistet. Wenn jemand das direkt online stellen möchte, dann lass’ ihn das doch machen, stell’ Bilder und Texte zur Verfügung und halte dich im Weiteren ’raus. So wie es bisher läuft, seit ihr auf dem Holzweg. Aber das ist nur meine Meinung.

Nightfighter · 26.03.2014

Der Guide soll hierher:

Mein Kumpel hat mir die hochgeladenen Dateien gegeben, weil wir früher schon zusammen an solchen Sachen gebastelt hatten, wobei ich eigentlich derjenige war der über diese vielen Tuts von psd-tutorials eine Lösung gefunden hatte. Muss aber auch zugeben, dass es damals Webspell war. CSS ist dementsprechend für mich absolutes neuland

Der Code (letzter post) hatte ich auf die schnelle gebastelt, dass man nachvollziehen kann wie ich mir das Grundgerüst vorstelle, um später dieses Gerüst für andere Guides benutzen zu können. Da dies in PHP gemacht wurde, war für mich die einfachste Art (wie schon erwähnt, kenn ich mich damit ein bisschen aus)
Wollte dementsprechend nur wissen ob dies der richtige Ansatz ist um von vorne zu beginnen.

Es ist zwar schade das Du keine Zeit hast, aber ich freue mich zu wissen, dass Du mir geholfen hättest... dementsprechend möchte ich mich bei Dir bedanken!

Gut... ich rede mal mit mit meinem Kumpel, dass er sich hier selber meldet. Er kann das wohl besser erläutern... wo der haken ist...

Nochmals Danke für Deine hilfe

gruß Sven

rodemund · 26.03.2014

Alles klar, viel Erfolg dann euch beiden.

Nightfighter schrieb:
Der Code (letzter post) hatte ich auf die schnelle gebastelt, dass man nachvollziehen kann wie ich mir das Grundgerüst vorstelle, um später dieses Gerüst für andere Guides benutzen zu können. Da dies in PHP gemacht wurde, war für mich die einfachste Art (wie schon erwähnt, kenn ich mich damit ein bisschen aus)

Dein „PHP“-Code enthält übrigens nicht ein Fitzelchen PHP. Da steht auschließlich HTML drin, nichts anderes. Bist du sicher, dass dir der Unterschied zwischen PHP und HTML und deren Verhältnis zueinander klar ist? Nicht, dass es mich etwas anginge, aber bei deiner Baustelle hilft es schon, sowas zu wissen.

Dobi78 · 26.03.2014

rodemund schrieb:
Dein „PHP“-Code enthält übrigens nicht ein Fitzelchen PHP. Da steht auschließlich HTML drin, nichts anderes. Bist du sicher, dass dir der Unterschied zwischen PHP und HTML und deren Verhältnis zueinander klar ist? Nicht, dass es mich etwas anginge, aber bei deiner Baustelle hilft es schon, sowas zu wissen.

Er hat es wohl nur hier falsch eingefügt....hab das mal korrigiert

Nightfighter · 26.03.2014

rodemund schrieb:
Alles klar, viel Erfolg dann euch beiden.

Dein „PHP“-Code enthält übrigens nicht ein Fitzelchen PHP. Da steht auschließlich HTML drin, nichts anderes. Bist du sicher, dass dir der Unterschied zwischen PHP und HTML und deren Verhältnis zueinander klar ist? Nicht, dass es mich etwas anginge, aber bei deiner Baustelle hilft es schon, sowas zu wissen.

ops!! habe in Dreamweaver zwar eine neue php eröffnet, aber den Kopf für html bekommen. gespeichert hat er das ebenfalls als php. Deswegen meine verwechslung, weil ich nur auf die endung geachtet hatte... :rolleyes:

Dementsprechend ist mir das nicht aufgefallen...lol...

bin einfach zu lange raus aus dieser Materie :confused:

sonst wäre es mir wohl direkt aufgefallen. Danke für den Hinweis!!