Druckbare Version
Hallo Contao-Community,
ich bin ein noch relativ unerfahrener Programmierer und muss für einen Kunden ein Design in Contao umsetzen, aber ich brauch dazu eure Hilfe.
Im Anhang befindet sich das Design. Der blaue Balken soll über die komplette Seite gehen, wenn man die Ansicht verkleinert, soll der Balken fließend mitlaufen.
Der Hauptbereich (wrapper) soll dabei immer zentral sein und bleiben. Könnt Ihr mir bitte helfen und Tipps geben?
Gruss poxruc02
Wo liegt denn genau dein Problem? Weißt du nicht wie man mit Contao ein Design umsetzt oder fehlen dir CSS-Kenntnisse?
Ich kann schon "einfache" Design umsetzen, das hier bereitet mir leider noch Probleme, v.a. der blaue Balken im Header-Bereich, der sich über die komplette Seite erstrecken soll!
Mit CSS kenn ich mich eigentlich schon gut aus!
Kannst du mir bitte helfen, wie ich anfangen soll?
Gruss
Für den Balken kannst du body nutzen. Ein Blockelement zentrierst du mit dem Wert auto für margin-left und margin-right. Da das aber eigentlich Grundlagen sind, würde ich dir zu einem Fachbuch raten. Da wären z.B. Little Boxes (zum Teil online verfügbar) oder auch Einführung in XHTML, CSS und Webdesign (komplett online verfügbar). Womit hast du denn bisher gelernt? (Es lernt sich übrigens entspannter, wenn einem dabei kein Kunde im Nacken sitzt ;) ).
Das Problem ist nicht der blaue Balken, sondern der dunkle, runde, kleine Schatten links neben dem Logo.
Für den Balken schneidest du ein senkrechtes Stückchen aus, speicherst das ab, lädst es hoch und dann legst du im CSS-Editor für body an:
body
Hintergrund: ffffff eintragen
Hintergrundbild: meinbild.jpg (aussuchen und eintragen)
Hintergrundwiederholung: repeat-x;
Das ist ganz einfach und an sich nichts was vom CMS abhängt, sondern reines CSS.
Das müsstest du in einer händisch codierten-style-sheet auch so angeben.
Etwas schwieriger ist der runde Schatten, sieht schick aus aber ich weiß nicht ob es Sinn macht das zu erklären, es ist - aus meiner Sicht - auf jeden Fall Fuddelei.Code:body {
background: #fff url(.../.../meinbildjpg) repeat-x;
}
Webseiten sind halt keine Broschüren wo man das mal eben ganz schick mit Quark oder InDesign einfügen kann.
Als eine (von mehreren Möglichkeiten) könntest du in die fe_page eingreifen, das ist die zentrale Seitenvorlage.
Seitenspalte links ==> templates ==> neues template anlegen ==> fe_page suchen.
Ich füge aber mal hinzu, dass Änderungen an der fe_page später mal, wenn die Webseite in die Jahre kommt, nicht unproblematisch sein können, denn sie wird, wenn du eine Kopie angelegt hast, von Updates nicht erfasst. Das muss dann händisch nachgearbeitet werden.
Da musst dann im Code um den #wrapper drumherum noch einen Container basteln z.B. #deco und #deco machst du breiter als #wrapper bzw. siehst zu dass #wrapper links einen Abstand hat so dass wieder eine Lücke entsteht. #deco bekommt dann das Bild als Hintergrund, du positionierst es mit background-position da wo du es hin haben willst. Wenn die Hintergrundfarbe von #deco transparent ist, sollte das klappen. Allerdings wird das Ganze dann nicht mehr so ganz mittig sitzen - das musst du dann via margin in % irgendwie ausgleichen.
Du kannst es versuchen.
Wenn's nicht klappt, dann würde ich dir raten einen Gang runterzuschalten und das mit dem Schatten zu lassen.
Lieber einen Spatz in der Hand als eine Taube auf dem Dach ;-) und der Erfolg einer Webseite hängt von so einem Detail nicht ab.
Ich hab das Design schon einigermaßen umsetzen können! http://punkt96.de/contao/index.php
Jetzt ist ein neues Problem aufgetreten: Ich hab für die mobilen Geräte ein CSS (mit ".mobile"-Klassen) angelegt, damit die Seite gut dargestellt wird. Es funktioniert auch überall (Android, Ipad), NUR im Iphone wird die Seite verschoben angezeigt. Gibt es speziell für Iphone CSS-Klassen?
Gruss