Programming auf Basis einer gesliceten Grafik

[parallax]

Hallo an Alle erstma!

Zu meinem Problem:
Ich habe in Photoshop eine Website entworfen und diese geslicet.
Jetzt wollte ich mit Dreamweaver die einzelnen Grafiken (Banner, Button, etc.) wieder zusammensetzen - dies stellte sich schwieriger vor als erwartet.

Leider klappt das mit der Anordnung keinen Meter und die "Live-Ansicht" im Dreamweaver liefert mir eine komplett veränderte Anordnung als die Angestrebte.

Die veraltete Tabellenform würde ich gerne vermeiden.
Normalerweise sollte das alles mit dem Box-Modell machbar sein aber ich habe hierbei keine Erfahrung und rate mich seit Tagen durch CSS-tags.

Ebenfalls bin ich mir nicht zu 100% sicher ob meine Anordnung überhaupt möglich ist oder ob ich die Grafiken eventuell noch weiter aufteilen muss.

Beachtet werden sollte hierbei dass für alle Buttons auch je eine Hover-Grafik vorhanden ist und das im Bereich "Text" (welcher wie alles andere auch eine Grafik als "Hintergrund" haben soll) auch später Text reinkommen soll.

Ich habe schon etliches ausprobiert - von margin-befehlen über float:left und float:none bis hin zu position-befehlen und veränderter Reihenfolge der "<div id>"-tags.

Ich hoffe jemand kann mich auf den richtigen Weg bringen oder mir zumindest sagen dass ich die Grafik auf jedenfall anders slicen muss da es nur so möglich sei (was ich eigentlich vermeiden möchte).

Anbei ein Bild der gewünschten Anordnung der einzelnen Grafiken:

Und jetzt schonmal herzlichen Dank fürs durchlesen ;)

[parallax]

Leider hat das mit dem angehängten Bild nicht so geklappt wie es sollte.
Hier der erneute versuch.

Alternativ hier der Link: http://img695.imageshack.us/f/hpaufbau.jpg/

[Der Martin]

Hallo,

Leider hat das mit dem angehängten Bild nicht so geklappt wie es sollte.

kein Wunder, du hast versucht, ein HTML-Dokument als Bild einzubinden. Das geht natürlich nicht.
Das Bild ist hier: http://img695.imageshack.us/img695/4807/hpaufbau.jpg

Ciao,
 Martin

[parallax]

kein Wunder, du hast versucht, ein HTML-Dokument als Bild einzubinden. Das geht natürlich nicht.

Danke für den Hinweis und für die Berichtigung :)

[LX]

Du hast leider nach dem Namen Deines Bildes noch ein "/" getippt, daher hat die Einbindung nicht funktioniert.

Das, was Du da vorhast, wäre zunächst einmal auch mit Tabellen nicht so einfach zu erreichen: die Navigation soll sich dabei offenbar der Bildschirmgröße anpassen, was nur mit dem Einsatz von JS zu erreichen wäre.

Der Rest ist mit semantischem Markup und CSS-Styles leicht machbar, wenn man erst das Konzept von Größenangaben (width, height), Positionierung (display, position) und Floating (float, clear) richtig verstanden hat.

Hinsichtlich der semantischen Struktur empfehle ich Dir folgende flache Aufteilung (das hat den Vorteil, dass die Einrückung nicht zu tief wird und das Markup besser lesbar bleibt):

• Header (Banner)
• Content
    - Trennung
    - Text
    - Rand rechts
    - Zwischenstück
    - Navigation
• Footer

Hinsichtlich der Reihenfolge der einzelnen Content-Elemente hast Du eine gewisse Freiheit; ich habe hier die Aufteilung gewählt, die mir am naheliegensten schien - was sich jedoch je nach geplanten Daten ändern kann.

Gruß, LX

[parallax]

Vielen Dank LX!

Allein deine Aufteilung des Box-Modells im HTML-code hat mir den doch recht einfachen Hinweis auf den richtigen Aufbau gegeben!

Das mit den Hover-Grafiken sollte mir ein Freund beibringen können, der hat dies bereits bei sich via JS gemacht.

Jetzt kanns endlich weitergehn! Nochmals Danke :)

MfG

[LX]

Sehr gern.

Für Hover-Grafiken kannst Du zumindest bei Link-Tags im CSS die Pseudoklasse :hover zur Selektion (und Austausch bspw. vom background) verwenden.

Was nun die Höhe der Elemente betrifft: in JavaScript gibt es für die Fensterhöhe window.innerHeight (bzw. im IE im standardkonformen Modus document.documentElement.clientHeight) und für andere Elemente node.offsetHeight, um die bisherige Höhe zu bestimmen. Mit ein wenig Mathematik und Bastelei bekommt man auch hier eine Lösung relativ einfach gebaut - allerdings nur bei aktiviertem JS.

Gruß, LX

[ChrisB]

Hi,

Zu meinem Problem:
Ich habe in Photoshop eine Website entworfen und diese geslicet.

Photoshop erstellt keine Webseite, sondern Bilder.

Normalerweise sollte das alles mit dem Box-Modell machbar sein aber ich habe hierbei keine Erfahrung und rate mich seit Tagen durch CSS-tags.

Dann solltest du dich erst mal mit den Grundlagen von HTML und CSS beschäftigen - und Photoshop so lange ganz aus der Hand legen.

Ich habe schon etliches ausprobiert - von margin-befehlen über float:left und float:none bis hin zu position-befehlen und veränderter Reihenfolge der "<div id>"-tags.

Trial-and-error führt nicht allzu weit, wenn die Basics fehlen.

MfG ChrisB

[parallax]

Photoshop erstellt keine Webseite, sondern Bilder.

Von erstellen war nie die Rede, sondern von entwerfen!

Dann solltest du dich erst mal mit den Grundlagen von HTML und CSS beschäftigen - und Photoshop so lange ganz aus der Hand legen.

Was denkst du tue ich denn die ganze Zeit?

Trial-and-error führt nicht allzu weit, wenn die Basics fehlen.

Genau Deshalb frage ich hier ob mir jemand dabei helfen kann.

Wenn du nur nörgelst und deine Zeit nicht besser zu verschwenden weist als dass du Leute meinst kritisieren zu müssen die leider gottes noch nicht so viel Ahnung von HTML und CSS haben als du (wovon ich auch noch nichts gemerkt habe) dann tust du mir echt Leid!
Nimm dir ein beispiel an LX, der hat mir ohne motzen direkt eine fachliche und auch hilfreiche Antwort geben können!

MfG

[suit]

Photoshop erstellt keine Webseite, sondern Bilder.

Von erstellen war nie die Rede, sondern von entwerfen!

Fürs Protokoll: Photoshop ist auch dafür ungeeignet - im professionellen Bereich verwendet man idR. zwar Photoshop aber auch nur, weil kaum jemand Ahnung von dem hat, was er tut. Fireworks ist zum entwerfen von Websites wesentlich besser geeignet.

Wenn du über die Adobe Creative Suite verfügst (mit Ausnahme des "Production Premium"-Pakets) solltest du dir _dringend_ Fireworks ansehen.