PSD Template richtig slicen und mit divs und CSS zusammenfügen

[bonafide69]

Hallo an alle Forenmitglieder und Administratoren,

Ich habe folgendes Problem und hoffe Ihr könnt mir dabei mit Rat und Tat zur Seite stehen. Habe in Photoshop ein Template erstellt und möchte dieses richtig zerschneiden (slicen). Habe dies schon mehrmals versucht, bin aber immer wieder daran gescheitert, wenn es darum ging dieses Template mit Hilfe von CSS wieder zusammenzufügen (immer wieder sprengt es mir das Layout, und ich bin mit meinen CSS Kenntnissen am Ende). Mein Anliegen ist dieses richtig zerschnittene Template als mein eigenes Template im CMS Joomla einzusetzen, da ich endlich mal von Grund auf wissen möchte wie man sein eigenes Joomla Template erstellt ohne dabei auf das Joomla typische Layout zurückgreifen zu müssen und irgendwelche Editoren wie Artisteer oder ähnliches zu benutzen. Alle Tutorials die ich gefunden habe beziehen sich nun mal auf dieses typische Joomla Layout. Ich hoffe einer von Euch kann mir anhand meines Templates genau zeigen, wie ich es richtig slice und mit CSS wieder zusammenfüge. Habe mein Template als jpg Bild zur Veranschaulichung hochgeladen.

Ich bitte um Hilfe und Tipps!!

Hier das verlinkte Bild meines Templates:



Uploaded with

Falls jemand die PSD Datei benötigt, sendet mir ne Mail

 

[cebito]

AW: PSD Template richtig slicen und mit divs und CSS zusammenfügen

Da gibts nicht viel zu slicen, lediglich ein paar wg. der Schatten (In CSS3 kannst dir dann mit der Eigenschaft box-shadow diese Slices auch noch sparen.) und dem Grauverlauf oben im Button , der Rest ist per CSS mit Hintergrundfarben zu machen. Hab mal alles rot gerahmt, was du brauchst...

 

[cebito]

AW: PSD Template richtig slicen und mit divs und CSS zusammenfügen

gab's da nicht letztens erst ein gutes tuto zu?

"Gut" ist relativ, wird da doch auch bloß eine absolut positionierte und zudem völlig unnötige div-Suppe erzeugt und mit "mitwachsen" ist da auch nich wirklich zu rechnen. Da kannst auch gleich bei den Tabellen bleiben.

 

[Samuelll]

AW: PSD Template richtig slicen und mit divs und CSS zusammenfügen

Die wesendlichen Schritte zum Slicen, bzw. zum Nutzen von nötgen Hintergründen hat dir cebit nun ja schon genannt.

Ein dreispaltiges Layout mit HTML und CSS sollte nun der nächste Schritt sein für dich.
Meist "zerschiesset" es ein Layout, wenn du entweder nicht richtig positionierst, vergist floats zu clearen oder wenn du Breiten von Spalten samt margin und padding zusammen breiter werden lässt, als der Container der alle Spalten umschliesst.

Was bezeichnest du eigentlich als typisches Joomla-Layout ?

Die meisten Layouts, inklusive deinem, sind einfache dreispalten Layouts mit Header und Footer.
Technisch nichts besonderes.

Ein üblicher Kommentar von mir: Schau dir im Zusammenhang mit Joomla-Templates die sogenannten Overwrites an. Ein Beispiel hierfür ist das Beez-Template.
Damit vermeidest du die alten Tabellenlayouts, die Joomla teils für Module oder den Content anbietet.

 

[bonafide69]

AW: PSD Template richtig slicen und mit divs und CSS zusammenfügen

Danke an alle!!! Hab es soweit hinbekommen!