Tabelle springt aus Bereich (Dreamweaver CS6)

Paule1991 · 26.03.2013

Hallo,

Ich baue gerade eine Website aus einer PSD Datei nach. Diese ist 1500x5000px groß.

Ich habe mir in Dreamweaver eine neue Seite erstellt nach einer Volage (1 Spalte fleißend, zentriert).
Die Vorlage ist so aufgebaut, dass man in der mitte einen #contet Bereich hat, der 80% des Bildschirms ausfüllt. Rechts und links sind 10% Rand.
Zuerst habe ich in den #contet Bereich nur mal die Website als komplettes Bild eingefügt --> voller Erfolg. Es wird genau so dargestellt, wie es soll.

Danach habe ich die PSD Datei gesliced, um nachher Links auf bestimmte Bereiche legen zu können. Diese geslicedte Datei habe ich mir wieder in einer html Datei zusammenbauen lassen und jetzt kommt mein eigentliches Problem:
Wenn ich die komplette Tabelle an der Stelle einfüge, an der das Bild ist, dann ist die Tabelle nur links an der richtigen Position. Rechts geht sie weit über den Rand hinaus. Woran kann das liegen? Wie kann man das beheben?

Vielen Dank schon mal im vorraus.

Hier noch ein Bild zur Veranschaulichung

Myhar · 27.03.2013

AW: Tabelle springt aus Bereich (Dreamweaver CS6)

Websites erstellt man nicht so, wie du es machst. Das geslicte Ergebnis von Photoshop ist bestenfalls zum schnellen Ersteindruck zu gebrauchen, du wirst mit deiner jetzigen Vorgangsweise nur auf mehr Probleme stoßen, je mehr du machen willst. Mein Tipp: Lerne, wie man Websites richtig erstellt, dann klappt auch alles mit der Anzeige.
Ich habe gerade keinen Link zur Hand, aber die Frage nach guten Lernmaterialien wird hier im Forum immer wieder mal beantwortet. Vielleicht sollte man dafür mal einen sticky Thread machen? (Und eventuell den IE-Tester Thread löschen, den braucht man ja nicht wirklich ^^ )

Paule1991 · 27.03.2013

AW: Tabelle springt aus Bereich (Dreamweaver CS6)

Hallo,
danke für deine Antwort. Ich bin etwas überrascht, da man dieses vorgehen in so ziemlich jedem Youtube Tutorial sieht. Ich habe Erfahrung mit html und css, aber wenn mir jemand noch einen Link geben könnte, wie man soetwas richtig angeht, wäre ich dankbar. Ich habe bis jetzt immer nur das vorgehen: "Photoshop-->slicen-->Für Web speichern-->html und Bilder erstellen lassen und in DW einfügen" gesehen.
Wie macht man es denn richtig?

Walter75 · 27.03.2013

AW: Tabelle springt aus Bereich (Dreamweaver CS6)

Ganz einfach tu Dir einen Gefallen und "baue" die Seite mit html per Hand auf:
Header,Navigation, Content , Footer ohne Tabelle. Gehe so Schritt für Schritt vor und Du lernst noch was dabei.
Deine Grafiken kannst Du dann z.B. per CSS einsetzen. Das slicen kannst Du natürlich immer noch so machen und abspeichern. Allerdings solltest Du mit Grafik eher sparsam umgehen da sie lange Ladezeiten provozieren und das Netz belasten. Vieles lässt sich heute auch per Code mit CSS3 umsetzen.
Hier ein Einsteiger:
http://www.ich-lerne-css.de/Style/Examples/011/firstcss/

patrick_l · 27.03.2013

AW: Tabelle springt aus Bereich (Dreamweaver CS6)

Paule1991 schrieb:
Ich bin etwas überrascht, da man dieses vorgehen in so ziemlich jedem Youtube Tutorial sieht.

Es gibt zwar vieles auf Youtube, dafür ist auch eine ganze Menge bescheiden ausgedrückt Murks

Paule1991 schrieb:
Wie macht man es denn richtig?

Man speichert alle für das Layout benötigten Inhalte (Bilder, Grafiken) ab, die nicht mit CSS umgesetzt werden können. Anschließend wird mit HTML das Grundgerüst der Seite erstellt und über CSS formatiert. Sprich die einzelnen Grafiken eingefügt.

Hier mal ein paar Links:
- Einführung in XHTML, CSS & Webdesign (Michael Jendryschik)
- HTML5-Handbuch - Webkompetenz
- Mozilla Developer Network | Lerne HTML, CSS & JS

Edit: Wie Walter schon sagte, Grafiken sparsam einsetzten. Hintergründe z.B. kachelbar machen und anschließend mit CSS über "repeat" erweitern. Auch mit CSS-Sprites arbeiten - Also Icons in einer Datei zusammenfassen und später über "background-position" einfügen.

Liebe Grüße, Patrick

Paule1991 · 28.03.2013

AW: Tabelle springt aus Bereich (Dreamweaver CS6)

Hallo zusammen,

also, ich habe den Tabellengedanken aufgebeben, wie ihr es mir geraten habt. Danke für den Tipp, ich wäre sonst warscheinlich böse aufgelaufen.

Ich habe nun alle Bilder mit CSS positioniert und die Seite wird genau so dargestellt, wie sie soll

.

Ich habe aber noch ein Problem: Die Seite ist immer größer als mein #content Bereich (der oben im Bild zu sehen ist).
Wie könnte ich diese kleine Hürde noch beheben?
Das gesamte Layout ist 1500px x 5000px.
Irgendwie muss man das doch in Prozent so anpassen, dass es in den Container passt?

Walter75 · 28.03.2013

AW: Tabelle springt aus Bereich (Dreamweaver CS6)

Tja ohne Code geht da nicht viel. Da bleibt nur der Blick in die Glaskugel. Kannst Du es packen und bei einem upload-Anbieter hochladen? Dann kann Dir heute noch geholfen werden.

Paule1991 · 28.03.2013

AW: Tabelle springt aus Bereich (Dreamweaver CS6)

Sorry,
ohne Code geht ja nix, dass stimmt.

Hier sind die CSS Datei und die html Datei.

Wenn ich die html im Firefox öffne, dann zeigt es mir die Seite wundebar an, allerdings möchte ich links und rechts einen kleinen Rand haben (siehe Bild in Post #1). Der wird normalerweise mit den Befehl width in der Klasse #container bestimmt. Allerdings funktioniert das nicht.
Woran könnte das liegen?

Walter75 · 29.03.2013

AW: Tabelle springt aus Bereich (Dreamweaver CS6)

Ok.!
Als wenn ich allein die Pixel der Bilder in der Breite zusammenzähle komme ich auf 1500px. Dein

Code:

.container {
    width: 100%;
    max-width: 1200px;/

gibt 300 weniger an!

Ja ich habe so etwas befürchtet und damit meine ich nicht die fehlenden 300px, denn das kannst Du mit [width: 1500px !!] ändern.
Grundlegend hat Du aber die Tabelle nur durch DIV`s ersetzt. Das habe ich aber nicht gemeint. Eine Webseite ist sagen wir in Schichten aufgebaut, die wie Layer (Ebenen) übereinander liegen
(-->Hintergrund möglichst mit Kacheln[..eine Grafik von z.B.: 20x20px die in x und y Richtung aneinandergereiht wird]
--> Headergrafik [Logo als Grafik Titel als Schrift]
-->Navigation
-->Content[Inhalte von Text mit Grafiken ansprechend "garniert"]
-->Footer)
1. Entscheide Dich für die Größe der Seite und lege den Hintergrund fest.
2. Header setzen und bei der Größe evtl. eine horizontale Navigation berücksichtigen (mit Headergrafik).
3.Navigation integrieren.
4.Content setzen
4.Footer setzen
Dann hast Du erst einmal das Grundgerüst.
Hast Du das Layout in Photoshop entworfen?
Wenn Du mir es schickst kann ich Dir eine sinnvolle Aufteilung empfehlen. Meine Emailadresse findest Du auf den Webseiten in meiner Signatur ganz am Ende im Impressum unter Design und Programmierung , wenn Du magst.

Paule1991 · 29.03.2013

AW: Tabelle springt aus Bereich (Dreamweaver CS6)

Hallo,

ich schicke dir gleich mal eine E-Mail. Habe es jetzt mal im jpg Format gespeichert, die psd ist 80MB groß und die will ich nicht durch die Holzleitung hier pressen.
Danke für dieses großzügige Angebot

.

Ich wollte das Design beibehalten, deswegen habe ich einfach alle Bilder wieder eingefügt. Ich war der Meinung das meinst du mit übereinanderlegen, aber so kann man sich irren.

Du kannst es dir ja mal ansehen wenn du magst

patrick_l · 30.03.2013

AW: Tabelle springt aus Bereich (Dreamweaver CS6)

Ich habe mir dein HTML und CSS auch mal angeschaut. So wird es nicht gemacht.

Wie Walter ja schon schrieb, hast du nur die Tabelle durch Divs ersetzt. Und was die Angabe 100% angeht, ist sie so oder so überflüssig, da ein Element wenn nicht anders Angegeben immer 100% groß ist.

Alle Grafiken so wie du es jetzt mit deinem Layout gemacht hast, werden sicher nicht benötigt. Zumindest was deren volle Größe angeht. Auch hier hat Walter es schon richtig gesagt. Mit CSS und Repeat wiederholen. Ich kenne jetzt dein Layout nicht, hier aber mal ein kleines Beispiel wie mit einzelnen Divs gearbeitet wird.

HTML:

<-- XHTML -->
<div id="wrapper">
    <div id="header">
      <div id="navigation">
        <ul>
          <li><a href="#">page 1</a></li>
          <li><a href="#">page 2</a></li>
         <li><a href="#">page 3</a></li>
      </ul>
    </div>
  </div>
  <div id="main">
      <div id="content">
      </div>
      <div id="sidebar">
     </div>
  </div>
  <div id="footer">
  </div>
</div>

Du hast die Grafiken direkt im HTML eingebunden. Im CSS werden aber die einzelnen Divs über die ID oder Klasse angesprochen und dann entsprechend formatiert (gestylt). Also auch die Grafiken als "background-image" eingebunden.

Dazu die IDs oder Klassen notieren und entsprechende Angaben festhalten:

Code:

/* --| CSS |------ */
* {padding:0; margin:0; border:none; outline:none; list-style:none;} /* default CSS reset */
html, body {min-height:100%; min-width:100%;}
body {font-size:100%; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

#wrapper {width:960px; margin:0 auto;}
#header {width:960px; height:160px; background:#333 url(assets/images/bg_header.jpg) no-repeat;}
#main {width:960px; height:160px; background:#333 url(assets/images/bg_main.png) repeat-x;}

/* usw. */

Liebe Grüße, Patrick

Walter75 · 30.03.2013

AW: Tabelle springt aus Bereich (Dreamweaver CS6)

@Paul1991

bei mir ist keine Email angekommen. Siehe PN

Paule1991 · 10.04.2013

AW: Tabelle springt aus Bereich (Dreamweaver CS6)

Hallo an alle.

Ich melde mich jetzt erst wieder zurück. Es waren stressige letzte Tage(Studium), aber die hat ja jeder mal.

Jetzt frisch ans Werk.
@Walther75: Ok, dass ist blöd. Unten ist der Link, da siehst du wie es aussehen muss Es wäre schön wenn du mir da mal drüber schaust

.

Ich habe aufgrund von Zeitdruck (die Veranstatlung (ich möchte hier nicht so oft den Namen nennen, da Tante Google sonst wieder zuschlägt) ist am 28.4.2013) erstmal eine Seite erstellt. Mit vielen Photoshop Slices, recht groß, recht unprofessionel und alles andere als elegant.

Aber die Seite musste ans Netz.
Hier ist der aktuelle Link zur Seite: w*w*w*.*c*o*n*v*o*y*-*l*a*u*s*i*t*z*.*d*e.
Einfach die Sterne weglassen.

Zurzeit ist das nur ein Meer aus Slices, die via CSS zusamengebaut wurden. Aber ich würde es gern nochmal richtig machen, damit es nicht so laienhaft aussieht.
Ich bin in der ganzen Sache kein Profi, ich bekomme dafür auch kein Geld, ich mache das um meinem Kumpel unter die Arme zu greifen und weil ich die Idee gut finde.

Ich würde mich freuen, wenn ich hier noch den ein oder anderen Tipp bekommen würde, denn ich bin mir noch nich mal sicher wie ich die Seite aufteilen soll.
Wenn ihr mir dazu etwas sagen könnt, kann ich ja eventuell schon viel Ärger vermeiden, als wenn ich jetzt selbst eine ungünstige Aufteilung vornehme.

Ich bedanke mich auf jeden Fall schon einmal bis hier her bei allen, die mir geholfen haben

Walter75 · 10.04.2013

AW: Tabelle springt aus Bereich (Dreamweaver CS6)

Hi Paule1991!
Ok. Ich mach mich mal dran. Leider hast Du mit dem Pfad schon die Grafikpflicht festgelegt. Wenn Du trotzdem Dir die Mühe machst und die PSD-Datei hochladen würdest? Du kannst mir den Link ja per P.N. senden. So habe ich zwar heute noch frei aber Do.+Fr.Schicht. Für Sa/So sollte es zu schaffen sein.
Allerdings kann man sicher für eine OnePageSite auch so damit leben. Los geht´s

Gruss Walter