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

Problem mit Content

Status
Für weitere Antworten geschlossen.
P

paranoiax

Neues Mitglied
Hallo erstmal ich bin neu hier =)

Sicher ein doofer Einstieg mit einem Problem anzufangen aber ich bin am verzweifeln...

Also folgendes Problem ich habe mein Design mit Photoshop gesliced, ich weiss auch wie ich ein Bild als Hintergrund definiere um dort den Content reinzuschreiben.

Allerdings wird dieser immer Mittig-Links angezeigt. Ich will aber dass er ganz normal oben links angezeigt wird. Wie löse ich nun das Problem.

Wenn ich den Content in ein I-Frame mache ist das kein Problem. Das ich will aber vermeiden.

Hier mal der komplette Code:

Code: 
<html>
<head>
<title>page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body text="#FF8000" bgcolor="#000000" link="#FF8000" alink="#FF8000" vlink="#FF8000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (page.psd) -->
<div align="center"><table id="Tabelle_01" width="951" height="1001" border="0" cellpadding="0" cellspacing="0">
         <tr>
                 <td colspan="6">
                         <img src="Bilder/banner.png" width="950" height="153" alt=""></td>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="1" height="153" alt=""></td>
         </tr>
         <tr>
                 <td colspan="6">
                         <img src="Bilder/index_02.png" width="950" height="9" alt=""></td>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="1" height="9" alt=""></td>
         </tr>
         <tr>
                 <td colspan="4">
                         <img src="Bilder/index_03.png" width="678" height="42" alt=""></td>
                 <td rowspan="3" background="Bilder/login.png" width="243" height="101" alt="">
LOGIN
</td>
                 <td rowspan="6">
                         <img src="Bilder/index_05.png" width="29" height="838" alt=""></td>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="1" height="42" alt=""></td>
         </tr>
         <tr>
                 <td rowspan="5">
                         <img src="Bilder/index_06.png" width="154" height="796" alt=""></td>
                 <td colspan="2" background="Bilder/navi.png" width="492" height="42" alt="">
NAVI
                 </td>
                 <td rowspan="3">
                         <img src="Bilder/index_08.png" width="32" height="75" alt=""></td>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="1" height="42" alt=""></td>
         </tr>
         <tr>
                 <td colspan="2" rowspan="2">
                         <img src="Bilder/index_09.png" width="492" height="33" alt=""></td>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="1" height="17" alt=""></td>
         </tr>
         <tr>
                 <td>
                         <img src="Bilder/index_10.png" width="243" height="16" alt=""></td>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="1" height="16" alt=""></td>
         </tr>
         <tr>
                 <td rowspan="2">
                         <img src="Bilder/index_11.png" width="1" height="721" alt=""></td>
                 <td colspan="3" background="Bilder/content.png" width="766" height="693" alt="">
CONTENT
                 </td>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="1" height="693" alt=""></td>
         </tr>
         <tr>
                 <td colspan="3">
                         <img src="Bilder/index_13.png" width="766" height="28" alt=""></td>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="1" height="28" alt=""></td>
         </tr>
         <tr>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="154" height="1" alt=""></td>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="491" height="1" alt=""></td>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="32" height="1" alt=""></td>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="243" height="1" alt=""></td>
                 <td>
                         <img src="Bilder/Abstandhalter.gif" width="29" height="1" alt=""></td>
                 <td></td>
         </tr>
</table></div>
<!-- End ImageReady Slices -->
</body>
</html>
Ich kanns aber auch hochladen falls es auch so nicht hilft.

Wäre nett wenn mir einer helfen könnte... ;)
 
Hallo!

paranoiax schrieb:
Sicher ein doofer Einstieg mit einem Problem anzufangen aber ich bin am verzweifeln.
Zum Vergrößern anklicken....
Nein, warum? Schließlich ist es doch Sinn eines Forums, Hilfe zu bekommen. Warum soll man also nicht mit einem Problem anfangen? :-)

Also folgendes Problem ich habe mein Design mit Photoshop gesliced
Zum Vergrößern anklicken....
Wenn ich sowas lese, stelle ich mir immer ein pixelgenaues Layout vor, das auseinanderplatzt, wenn man die Fenster- oder Schriftgröße im Browser ändert. Ich kann mir immer nicht vorstellen, dass sowas funktioniert. Das ist Print-Design, aber kein Web-Design.

ich weiss auch wie ich ein Bild als Hintergrund definiere um dort den Content reinzuschreiben.
Zum Vergrößern anklicken....
Per CSS mit der Eigenschaft "background-image".

Allerdings wird dieser immer Mittig-Links angezeigt. Ich will aber dass er ganz normal oben links angezeigt wird. Wie löse ich nun das Problem.
Zum Vergrößern anklicken....
Wenn man einen Hintergrund nur per background-image einbindet, beginnt dieser oben links und wird gekachelt. Was hast Du gemacht, dass dem nicht so ist?

Wenn ich den Content in ein I-Frame mache ist das kein Problem. Das ich will aber vermeiden.
Zum Vergrößern anklicken....
Das ist eine gute Entscheidung. Offensichtlich weißt Du um die Probleme von Frames.

Hier mal der komplette Code:
Zum Vergrößern anklicken....
Da fällt mir folgendes auf:
1. Kein Doctype (Darstellungsunterschiede wahrscheinlich)
2. Keine Trennung von Inhalt und Layout. Du verwendest nicht CSS für Layout&Design, sondern veraltete HTML-Attribute. So hat man in den 1990er Jahren gearbeitet, das ist seit einem Jahrzehnt nicht mehr nötig und führt eher zu Problemen und erhöhtem Wartungsaufwand.
3. div-Suppe. Ein Element in ein <div> zu packen, nur um es zu zentrieren ist überflüssig. Man kann auch das Element selbst zentrieren (oder andere Eigenschaften darauf anwenden).
4. Tabellenmissbrauch zu Layoutzwecken. Ganz schlecht. Tabellen sind dazu da, tabellarische Daten auszuzeichnen, zu sonst nichts. Layout macht man mit CSS.
5. Leere alt-Attribute in Images. Wenn Images zum Content zählen, bindet man sie mit <img> ein. Dann brauchen sie zwingend einen Alternativtext. Ist der leer, wird nichts dargestellt, wenn das Image nicht angezeigt wird. Das ist idR so nicht sinnvoll. Ist das Bild nur Zierde, sollte es als Hintergrundimage eingebaut werden.

Kurzum: Du solltest Dir nochmal HTML zur Brust nehmen. Als Strukturbeschreibugnssprache dient HTML dazu, Deinem Inhalt eine logische Bedeutung zu geben. Mit HTML macht man kein Aussehen und kein Layout! Dafür ist CSS da. Das solltest Du Dir als nächstes ansehen. Ohne CSS kein anständiges Aussehen und kein Layout.

Gerade, wenn Du möglicherweise Anfänger bist, wäre es sinnvoller für Dich, richtig einzusteigen und die Materie richtig zu lernen, bevor Du Dich in völlig überholte Arbeitsweisen eindenkst und dann den Sprung zu modernen Websites nicht schaffst (oder einfach zu viel Zeit investierst).

Hilfe zur Selbsthilfe gibts hier! Versprochen!

Zu Deinem Problem hab ich oben ja schon was geschrieben. Besser lässt sich ein Effekt natürlich immer beobachten, wenn man einen Link zur Seite hat.

Viel Erfolg,
-Efchen
 
Soll ich also demnächst NUR Bilder in PS slicen und alles selbst schreiben?
Na gut, dann hab ich wohl noch so einiges vor mir ^^. Ich hab das ganze mal hochgeladen. Hier zu betrachten:

page

Edit:

Anscheinend bin ich da vor einiger Zeit an völlig alte oder einfach nur schlechte Tutorials geraten in denen ich diese Arbeitsweise "gelernt" habe. Eigentlich mache ich auch nur 3D-Stills und benutze Photoshop ausschliesslich für grafische Zwecke aber ich dachte: "Kai, du bist ja nicht auf den Kopf gefallen so ne kleine Portfolio-Seite kriegst du schon hin." Anscheinend gibts noch viel dazuzulernen. Oder eher gesagt neu lernen wenn meine Methode wirklich so veraltet ist. Aber mich packt der Ehrgeiz, Webdesign scheint schon ein interressantes Thema zu sein.
Womit sollte ich den am besten anfangen?

Sorry für den langen Edit, ich weiß nicht ob Doppel-Posts hier erwünscht sind ^^
 
Zuletzt bearbeitet:
paranoiax schrieb:
Soll ich also demnächst NUR Bilder in PS slicen und alles selbst schreiben?
Zum Vergrößern anklicken....
Sollen sollst Du gar nichts, ich zwing Dich zu nichts :-)
Aber ich empfehle, nichts zu slicen, weil ein pixelgenaues Layout im WWW nicht wirklich klappt. Nimm mal Deine Seite und verstelle die Schriftgröße. Dann wirst Dus sehen. Wenn ich 4x größer einstelle, kommen die ersten schwarzen Zwischenzeilen, wenn ich 6x vergrößere, platzt das Layout auch nach rechts auseinander.

Anscheinend bin ich da vor einiger Zeit an völlig alte oder einfach nur schlechte Tutorials geraten in denen ich diese Arbeitsweise "gelernt" habe.
Zum Vergrößern anklicken....
Ja, das möchte ich nicht ausschließen. Im WWW findet man Informationen zu fast jedem Thema. Nur für die Aktualität kann natürlich niemand garantieren. Selbst das klassische Nachschlagewerk SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) ist langsam nicht mehr up-to-date. Als Nachschlagewerk aber durchaus sehr gut.

ich dachte: "Kai, du bist ja nicht auf den Kopf gefallen so ne kleine Portfolio-Seite kriegst du schon hin." Anscheinend gibts noch viel dazuzulernen.
Zum Vergrößern anklicken....
Das geht wohl jedem so. Irgendwer setzt halt regelmäßig in die Welt, dass es kinderleicht sei, Websites zu erstellen. Das Erstellen ist einfach, klar, aber obs dann auch so funktioniert, wie man das will? Eher nicht. Und meist auch nicht so, dass das jeder Besucher nutzen kann. So gesehen ist das WWW eine sehr komplexe Angelegenheit. Aber HTML und CSS sind eigentlich nicht sehr schwer, man muss nur den richtigen Ansatz finden, lernwillig sein und ein bisschen Zeit haben.
Und ein gutes Forum, wo man immer wieder nachfragen kann, ob man auf dem richtigen Weg ist und wo man jede noch so vermeintlich einfache Frage stellen kann :-)

Webdesign scheint schon ein interressantes Thema zu sein.
Womit sollte ich den am besten anfangen?
Zum Vergrößern anklicken....
Klar ist es interessant. Weil Du ohne Programmierkenntnisse etwas ansehnliches auf die Beine stellen kannst. "kannst" deswegen, weil man richtig gute Websites mit dynamischen Inhalten, Peichern von Daten usw. nur mit Programmierkenntnissen erstellen kann.

Anfangen solltest Du bei HTML. Du solltest verstehen, wozu HTML da ist. Was man im Allgemeinen unter Semantik versteht. Du solltest begreifen, dass es irrelevant ist, wie etwas, das Du mit HTML ausgezeichnet hast, im Browser dargestellt wird, weil HTML nicht für die Darstellung zuständig ist. Bei HTML geht es einzig darum, dass Überschriften als solche ausgezeichnet sind, Menüs als Listen, Textabsätze, wichtige Textpassagen, Adressen, Zitate usw. Die richtigen Tags dafür kann man bei SelfHTML (Link s.o.) nachschlagen.

Wenn Dir z.B. ein horizontales Menü vorschwebt, dann wirst Du das in HTML trotzdem als Liste (<ul>) auszeichnen, weil es für HTML irrelevant ist, ob das Menü horizontal oder vertikal ist. Ohne CSS wird es im Browser natürlich erstmal vertikal dargestellt.

Wie dann etwas aussehen soll, wirst Du erst in CSS festlegen. Ebenso das Layout. Das wird nicht mit HTML gemacht, also keine Layouttabellen. Keine Hintergrundgrafiken, wenn Du den HTML-Code festlegst, keine gesliceten Grafiken. Nur HTML, nur Struktur, nur Semantik. Das Ergebnis wird sein eine barrierefreie Seite, die in absolut allen Clients (nicht nur Browser, auch z.B. Screenreader oder Suchmaschinen) 100% nutzbar ist.

Ach ja, Deinen Code solltest Du validieren: The W3C Markup Validation Service um Fehler auszubessern.

Es gibt viel zu tun :-)

Sorry für den langen Edit, ich weiß nicht ob Doppel-Posts hier erwünscht sind
Zum Vergrößern anklicken....
Normalerweise nicht.

Viel Erfolg,
-Efchen

P.S.: Zu Deiner ursprünglichen Frage: Die Hintergrundgrafik fängt natürlich mittig an, weil Du sie in einzelnen Tabellenzellen gesetzt hast und die Tabelle von Dir mit fester Breite horizontal zentriert wird.
 
Ok vielen Dank ich werde mir das zu Herzen nehmen. Hab mal versucht das Design (noch mit Tables) an Webspell anzupassen. Da ich die Puffer vergessen habe verzieht es leider unschön zB beim Impressum. Aber ich werde mich die nächsten Tage etwas intensiver damit befassen. Hiermal ein Link zu der Webspell-Version: paranoiax
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben