Layout Template

phpman · 29. Oktober 2012 17:35

Hallo zusammen,

folgendes möchte ich machen:

Standard Template bestehend aus:

2 Spalten:

etwa so s.o.

Was mir bis dato noch nicht gelungen ist, ist das ich die "header grafik" welche orginal "logoCMS.png" heisst
zentiert in die mitte bekomme (original file wird ja per "left" nach links fixiert.

Ein center oder align-middle verschiebt die Grafik auch nicht nach links. :-(

Habe ich leider noch nicht herausgefunden, wo genau im css die position des "cssmenues" (aus dem Standart menue "Layout: top menu + 2 columns" definiert ist. Wo genau kann ich diese Positionierung anpassen/ändern?

Sorry, in v1.10.3 hat manches irgendwie anders ausgesehen :-) Hoffe aber Ihr könnt mir weiterhelfen.

Gibt´s eigentlich eine Doc für das anpassen der Layout Files (auf basis der mitgelieferten layouts) ?
Wäre nicht schlecht denn dann weiss man "was welche" funktion wo macht.

Hoffe Ihr könnt mir weiterhelfen.....verzweifel grad ein bisschen :-(

Danke im voraus.

Gruß, PHPman

Beitrag geändert von phpman (07. November 2012 17:56)

phpman · 30. Oktober 2012 20:30

kann auf Basis von diesem Template ein "spalten" template erstellt werden "CSSMenu top + 2 columns"

Hoffe Ihr ein paar Tips geben..... ich weiss nämlich nicht wie sad

nockenfell · 30. Oktober 2012 20:57

Hast du einen Link dazu?

phpman · 30. Oktober 2012 21:10

hab Dir ne Mail mit Link geschickt.

nockenfell · 30. Oktober 2012 22:57

Eigentlich war eher gedacht den Link hier zu posten. Direkte Supportanfragen per PM schätze ich nicht. Ich weiss nicht zu allem eine Lösung.

phpman · 31. Oktober 2012 23:15

oh, sorry.

http://edit.schwarzwaldverein-gechingen.de

ich möchte nun dieses "Template" 3 teilig sprich das ich

links das menue vom 2teilgen habe, in der mitte "den content" und rechts noch eine spalte für news / kalender etc.

phpman · 31. Oktober 2012 23:19

wie ich grad sehe hast Du doch die Lösung ansich auf Deiner Website http://www.blattertech.ch/home.htm gibts
ja diese "3 fenster / spalten lösung. Wie hast Du das gemacht?

phpman · 31. Oktober 2012 23:39

habe soeben auf "icms.info" der Website von Sofia Hauschildt welche das "CMSMS 1.6 Beginner Guide geschrieben hat ein Template gefunden "gala purity theme" hier gibts die 3 spaten aber
das Theme funktioniert nicht mehr mit v1.11.2 sondern nur mit v1.9

trotz umbau auf "cms_sylesheet" und änderung der [[root_url]] parameter wir unter Sidebar nicht das entsprechende Menu angezeigt. Würde es wie hier http://themes.icms.info/index.php?page=how-cmsms-works aussehen (das unter SIDEBAR" die Untermenue punkte erscheinen würde das mir schon arg weiterhelfen.

Hat jemand eine Version welche unter der aktuellen cms version läuft und obiges darstellt?

Sofia scheint nicht mehr aktiv zu sein konnte keine Kontakt möglichkeit finden.

Beitrag geändert von phpman (31. Oktober 2012 00:10)

Klenkes · 31. Oktober 2012 09:05

Na, jetzt hast du es doch!

Sonst hätte ich jetzt schreiben müssen, dass du mit einer simplen Googlesuche bestimmt mehrere 100.000 Treffer auf deine Frage gefunden hättest. "3 columns" oder "3-spaltiges Layout CSS" oder ähnliches...

nockenfell · 31. Oktober 2012 09:13

Dieses Template wäre z.B. eine Möglichkeit:
http://www.webdezign.co.uk/html5-examples/3col/
Ist HTML5 verwendet ein wenig CSS3. Als Grundgerüst einer Seite taugt das einiges. Allerdings musst du alle Farben, Einteilungen, Navigation etc. entsprechend anpassen.

nockenfell · 31. Oktober 2012 09:16

phpman schrieb:

trotz umbau auf "cms_sylesheet" und änderung der [[root_url]] parameter wir unter Sidebar nicht das entsprechende Menu angezeigt. Würde es wie hier http://themes.icms.info/index.php?page=how-cmsms-works aussehen (das unter SIDEBAR" die Untermenue punkte erscheinen würde das mir schon arg weiterhelfen.

Hast du überhaupt Unterseiten? Wenn ich es richtig interpretiere, zeigt die Sidebar jeweils die Unterseiten der Hauptseite an.

phpman · 31. Oktober 2012 09:46

richtig im moment hab ich noch keine "unterseiten" welche eingebunden werden.

Was ich in dem z.Zt. mal eingebauten Template als Problem habe ist das ich das Menu (Horizontal) nicht modifiziert bekomme sprich es ist immer "100%" breite und "klebt" links
am Rand. Habe aber keinen Weg gefunden es ????px vom Rand weg zu schieben.

Leider ist hier nicht so gut dokumentiert wie ich auch die "fenster" breiten ändren kann
gibt es ein Tool mit dem ich die z.Zt. angezeigten Paramenter auslesen kann ?

Firebug zeigt ja leider keine Breiten + Paramter an oder ?

NaN · 31. Oktober 2012 11:11

Ok, jetzt mal kurz und knapp zum GalaPurity Template:

Die Seite steckt in einem Div mit der ID "container".
Das Ding ist nicht formatiert.
Wenn Du also die Breite ändern willst, dann fange z.B. so im CSS an:

Hier klicken, um den Code zum Kopieren zu markieren

#container {
    width: deine liebingsbreite;
    margin: auto;
}

Da alle Spalten im Template prozentuale Breiten haben, müssten die sich automatisch mit anpassen.

phpman · 01. November 2012 14:05

Hallo,

Danke das hilft mir schon ein bisschen weiter :-)

Wie verhält sich das wenn ich statt % die werte in px ausführe? Ist es besser bzgl. Kompatibilität
auf % od px werte zu gehn ?

Welche Browser Versionen unterstützt Ihr in der Regel bei CMSMS? Da FF Safari (webkit) ja anders darstellen als IE.

otter24 · 01. November 2012 16:15

Also...
% ist im Grunde genommen das flexibelste . weil z.B. 70 % von entweder vom Elternelement ( Umschließender div) oder von der Gesamtbreite des Viewpoint ( das Browserfenster, muss ja nicht immer Vollbild sein)

Px ist mitnichten eine absolute größe, da die Pixel ja auf jedem Bildschirm eine andere Größe haben, Stichpunkt ppi
Pixel per inch.
Was Du also machen kannst, damit dir dein Container nicht zerhaut, ist so ein Konstrukt wie

Hier klicken, um den Code zum Kopieren zu markieren

#container {     width: deine liebingsbreite im Prozent; 
min-width: deine minimunbreite ind Pixel;      
margin: auto; }

Browser.... joo also ganz so schlimm empfinde ich das nicht mehr. Der IE 7 ist noch ne Krücke, aber mit dem IE 8 gibt das finde ich schon deutlich weniger Probleme und 9 geht auch ... Da musst Du Dir nicht den Kopf machen, ansonsten gibt das CSS Hacks und Javascripte die die Probleme ausgleichen. Was Schrifenglättung/Schriftendarstellung und Farbmanagement angeht... Tja das bekommst Du nicht hin, das eine Seite Identisch auf verschiedenen Browser aussieht. Mit Identisch meine ich wirklich identisch, nicht nur Layout, pixelgenau, sondern auch gleiche Schrift und gleiche Farben.

phpman · 03. November 2012 11:56

Hallo,

hmm.... danke für den hinweis aber ich steh nun wieder im Wald da ;-(

Hab im css nun diverse änderungen gemacht aber es verschiebt immer noch alles irgendwie falsch (siehe link). Wenn ich im css % gegen px verwende ist der "rand auf nem 22" zu 17" monitor total verschoben (sprich der seitenrand ist riesengross.

Wie kann ich das fixieren? Desweiteren wie Du auf der Seite sehen kannst ist das "menue"-> links angelegt mein "header bilder" aber "auf center gesetzt.

Was muss ich machen um das Menue direkt unter mein header bild zu packen das ich hier keinen abstand (verschiebung) habe?

Hoffe Du kannst helfen.

phpman · 03. November 2012 12:01

noch ne Layout Frage anbei wie kann ich z.B. wenn ich im Header Bild zusätzlich rechts "Impressum & Kontakt haben willl
jeweils einen Link über das Bild legen aber auch so das je nach darstellung dieser nicht mal "bei" 100px bzw. 205px angezeigt wird?

Cherry · 03. November 2012 18:47

Das Problem mit den breiter werdenden Rändern beim Header wirst du immer haben, solange du die Breite in % angibst.
Soweit ich das erkennen kann, hast du für #container die Breite 80% angegeben. Das macht er dann eben auch.
Wenn ich auf ner Seite ein Headerbild haben gebe ich fixe Breiten vor. Alles andere sieht meistens nicht so toll aus.

Dein Logobild ist 1024px breit und 270px hoch. So gesehen kannst du für den #container in der css
width: 1024px
height: 270px

setzen. Damit sollte der Rest der Seite, der sich ja innerhalb #container befindet auch schon mal eingegrenzt werden.

Cherry · 03. November 2012 18:50

phpman schrieb:

noch ne Layout Frage anbei wie kann ich z.B. wenn ich im Header Bild zusätzlich rechts "Impressum & Kontakt haben willl
jeweils einen Link über das Bild legen aber auch so das je nach darstellung dieser nicht mal "bei" 100px bzw. 205px angezeigt wird?

Das was du hierfür bräuchtest wäre position:absolute
erklärt wird das Ganze z.B. hier http://www.css4you.de/position.html

phpman · 04. November 2012 16:15

Hallo,

danke, ich werd das gleich mal testen, zumal Du schon recht hast hier "%" da fix ist nicht so toll.

Was sich nun noch eingeschlichen hat ist, als ich been das CGfeedback eingebaut habe das,
dass formular welches als {CGFeedback} SmartyTag unter "Kontakt" einbaut wurde nun total
rechts steht hmm... eine Formatierung gibts aber eigentlich im Standard Freeback Template nicht.

Denk ich hier falsch oder ist da was faul ?

Cherry · 04. November 2012 16:47

ich kenne CGFeedback nicht ... evtl muß man ein mitgeliefertes stylesheet erst noch mit dem Template verbinden.

Das sieht aber unabhängig davon sehr danach aus als wenn mit deinen divs was nicht paßt.
Sind alle, die geöffnet wurden auch wieder geschlosssen?
Ist kein schließendes </div> zuviel ( kann mal übrigbleiben, wenn man im Template Sachen löscht)?
Sind sie richtig verschachtelt?
Da würde ich als erstes mal kontrollieren.

phpman · 04. November 2012 17:13

Was setzt Du als Kontakt Formular ein ? (sollte Captcha unterstützen) ?

Bezgl. der Div´s bin ich bis dato noch nicht fündig geworden sad

phpman · 04. November 2012 17:51

wegen der Div´s finde ich nichts. Auch im Original template scheint was nicht zu stimmen, da ich eben gesehen habe das es werte mit -100% bzw. -20% gibt und das geht ja garnicht.

Im FF 16 geht so manches noch aber im IE 8 / 9 ist alles nur Chaos sad wie macht Ihr das das es vom CSS her auch im IE passt und nicht das Chaos wie bei mir erscheint ?

Cherry · 04. November 2012 17:52

Wenn das Quelltexthighlighting vom Firefox Recht hat ist das </div> vor dem schließenden </body> zuviel.

</div>
</body>
</html>

Zähl die doch einfach im template mal durch ... sollte gleich viele öffnende und schließende sein.

Ich nehme den Formbuilder für Kontaktformulare.

phpman · 04. November 2012 18:12

wie ich eben bei einem Bekannten gesehen habe ist irgendwie was ganz falsch.

Im FF 16 & IE8 geht´s so einigermassen aber im IE9 ist alles verkehrt. Kann es sein das dass Template für IE9 nicht nutzbar ist ? Hab´s unter browershots.org auch mal angeschaut. Nur wieso? Was muss ich machen dass es unter IE8/9 auch passt?

Was für ein 3spalten Layout Template könnte ich nutzen das es unter IE9 etc. auch läuft ?

Beitrag geändert von phpman (04. November 2012 19:22)

Forum für CMS/made simple

#1 29. Oktober 2012 17:35

Layout Template

#2 30. Oktober 2012 20:30

Re: Layout Template

#3 30. Oktober 2012 20:57

Re: Layout Template

#4 30. Oktober 2012 21:10

Re: Layout Template

#5 30. Oktober 2012 22:57

Re: Layout Template

#6 31. Oktober 2012 23:15

Re: Layout Template

#7 31. Oktober 2012 23:19

Re: Layout Template

#8 31. Oktober 2012 23:39

Re: Layout Template

#9 31. Oktober 2012 09:05

Re: Layout Template

#10 31. Oktober 2012 09:13

Re: Layout Template

#11 31. Oktober 2012 09:16

Re: Layout Template

#12 31. Oktober 2012 09:46

Re: Layout Template

#13 31. Oktober 2012 11:11

Re: Layout Template

#14 01. November 2012 14:05

Re: Layout Template

#15 01. November 2012 16:15

Re: Layout Template

#16 03. November 2012 11:56

Re: Layout Template

#17 03. November 2012 12:01

Re: Layout Template

#18 03. November 2012 18:47

Re: Layout Template

#19 03. November 2012 18:50

Re: Layout Template

#20 04. November 2012 16:15

Re: Layout Template

#21 04. November 2012 16:47

Re: Layout Template

#22 04. November 2012 17:13

Re: Layout Template

#23 04. November 2012 17:51

Re: Layout Template

#24 04. November 2012 17:52

Re: Layout Template

#25 04. November 2012 18:12

Re: Layout Template

Fußzeile des Forums