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

[bonafide]

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. Bitte bedenkt das ich kein CSS Ass bin.

Ich bitte um Hilfe und Tipps!!

Hier das Bild meines Templates

[the0bone]

Hi,
keine Ahnung, wie die Template Engine von Joomla aussieht und welche Befehle von was kommen.
Aber so würde ich die div Order machen:


Klar nen umfassendes DIV.
Dann eines für den Oberen Bereich und den Footer.
Den Oberen Bereich würde ich splitten in links und rechts.
links bekommt ein umschliessendes Div für das wachsende Logo und den Kreativkasten.
Das wachsende Logo bekommt das Mittelteil als Hintergrund und oben und unten ein Div mit den Abschlüssen.

rechts bekommt ein Div für deine Navi. Ein Div für das breadcrumb und Suche. Ein Div für content und eines für Bild.
Fertig!

Ich würde halt nicht anzufangen die Bilder zusammenzuschneiden, sondern erst das Div Gerüst zu bauen und dann die Bilder dazuzuschneiden...

[bonafide]

Vielen Dank! Werd mal loslegen und schauen ob ich das hinbekomme so wie Du mir das erklärt hast. Mein Problem liegt darin das es mir immer das Layout zerschießt, denke ich mache noch so einiges Falsch mit dem float befehl.

bonafide

[the0bone]

Floaten ist einfach, wenn man clears setzt

[bonafide]

hätte nochmal eine Frage zwecks der Divs.
Meine DIV's:
<div id="container">

<div id="oben">
<div id="links">links
<div id="logo">logo</div>
<div id="zitat">zitat</div>
</div>
<div id="rechts">rechts
<div id="navi">navi</div>
<div id="breadcrumb">breadcrumb</div>
<div id="sprache">sprache</div>
<div id="suche">suche</div>
<div id="content">content</div>
<div id="stories">stories</div></div>
</div>
<div id="footer">footer</div>

</div>

das CSS:
*{
margin:0px;
padding:0px;
}

html
{
background-color:#E1DDDC;
text-align:center;
}

#container
{
position:relative;
float:clear;
width:930px;
height:auto;
border:1px solid;
border-color:#99CC66;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
}
#oben
{
position:relative;
float:clear;
width:930px;
height:auto;
margin-left:auto;
margin-right:auto;
}
#links
{
position:relative;
float:clear;
width:200px
height:auto;
background-color:#ffffff;
}
#logo
{
position:relative;
float:clear;
width:200px
height:198px;
background-color:#99CC66;
}
#zitat
{
position:relative;
float:clear;
width:205px
height:150px;
background-color:#668543;
}
#rechts
{
position:relative;
float:clear;
width:725px
height:auto;
background-color:#DD0606;
}
#navi
{
position:relative;
float:clear;
width:705px
height:38px;
background-color:#7466F6;

}
#breadcrumb
{
float:clear;
width:235px
height:23px;
background-color:#F99D5A;
}
#sprache
{
float:clear;
width:235px
height:23px;
background-color:#F99D5A;
}
#suche
{
float:clear;
width:235px
height:23px;
background-color:#F99D5A;
}
#content
{
float:clear;
width:520px
height:auto;
background-color:#B64F04;
}
#stories
{
float:clear;
width:170px
height:165px;
background-color:#5AF0F9;
}
#footer
{
float:clear;
width:895px
height:35px;
background-color:#97F8A0;
}
Was ist falsch daran! Könntest Du mir evtl. nochmal einen Ratschlag geben bitte. Wenn ich ein Bild einfüge mit background-image passiert nichts. Sorry aber irgendwo ist bei mir der Wurm drin. Auch die floats bewirken nichts. Bitte bedenke das ich noch Anfänger bin. Danke im voraus

[max.m]

Du floatest Deine Elemente nicht, Du clearst sie nur.
Hier mal etwas zum Verständins zu float.

[the0bone]

Floaten ist einfach, wenn man clears setzt

Ich korrigiere: floaten ist einfach, wenn man an den richtigen stellen ein clear macht.

[bonafide]

Hi theObone,
hab fast alles hinbekommen, habe nur noch das Problem mit dem orangefarbenen Hintergrund des Logos. Sollte bei zunehmenden Content eigentlich sich ebenfalls vergrössern.
Die aktuellen Div Tags und die CSS (Was ist Falsch?)
<div id="links">
<div id="logo"></div>
<div id="bg_logo"></div>
<div id="shadow_logo"></div>
<div id="zitat"></div>
</div>

#logo
{
float:left;
width:187px;
height:186px;
background-image:url(../images/bonafide_logo.png);
margin-left:17px;
background-color:#;
}
#bg_logo
{
float:left;
width:187px;
height:auto;
margin-left:17px;
background-image:url(../images/logo.png);
background-repeat:repeat-y;
}
#shadow_logo
{
float:left;
width:187px;
height:11px;
margin-left:17px;
background-image:url(../images/shadow_logo.png);
background-repeat:no-repeat;
}

Danke!