Layout Template

phpman · 22. November 2012 10:39

@All:

erneute Darstellungsproblem. Hab eben beim Testen gesehen, das wenn ich Crome od. Safari einsetzte alles wieder durcheinander ist und die Darstellung nicht mehr passt. Anfangs lief das Layout auch mit Safari was ist hier passiert?

Kennt jemand den Fehler? Siehe Online !!

Cherry · 22. November 2012 15:48

also was mir auffällt wenn ich in den sourcecode schaue:

Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
	<div id="header" style="background: #333333 url(uploads/icms.info/header3.jpg) no-repeat scroll right top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

Da steht alles mit dem -moz- Präfix. Das ist normalerweise dazu da, daß es in Browsern Attribute geben kann, die noch nicht offiziell in der Spezifikation enthalten sind. Das bedeutet aber auch, daß das evtl nur von Mozilla Browsern interpretiert wird. Die anderen können, müssen aber nicht. Das dürfte der Grund sein, warum Chrome hier kein Hintergrundbild anzeigt.

Übrigens .... die ganzen Stilangaben würde ich ins css packen. Da gehören sie hin dann hast du alles an einem Ort und dein Template wird übersichtlicher. Für einen id="header" schreibst du in der css so:

Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
#header {
background: #333333 url(uploads/icms.info/header3.jpg) no-repeat scroll right top; 
-moz-background-clip: -moz-initial; 
-moz-background-origin: -moz-initial; 
-moz-background-inline-policy: -moz-initial;
}

Das ganze style="" Zeugs fällt dann im Template raus.

Dann würde ich das ganze mal dem Validator vorsetzen.
Schnell zu beheben sind nicht geschlossene <br> tags: Wenn du im Doctype XHTML angibst, mußt du alle Tags schließen. Das geht bei <br> dann so: <br />. Schnell zu beheben, aber nicht der Hauptgrund für Darstellungsprobleme.

Etwas gravierender ist die Verschachtelung von Elementen, die nicht in Ordnung ist:
Wenn ich das richtig sehe hast du ein <h1> geöffnet und darin dann die ganzen <div>s .
Das darf so nicht sein. Wenn du das behebst sollte dein Layout auch funktionieren.

phpman · 22. November 2012 17:03

bis auf die "<br>" einträge habe ich nun mal alles rausgeschmissen was als "kommentar" o.ae. drin war und alles durch den CSS3 Validator geschickt.

Bis auf 2 Fehler

Hier klicken, um den Code zum Kopieren zu markieren

257 	div#header 	Ungültige Nummer : height nur 0 kann ein length sein. Nach der Zahl muß eine Einheit stehen. : 270
612 	div.copyright ul li a:hover, div.copyright ul li a:focus, div.copyright ul li a:active 	Einlese-Fehler [,]

sind keine Fehler mehr im CSS. Nachdem ich wie Du geschrieben hast das in´s header css verlagert habe ist die Darstellung in IE/FF/Crome/Safai gleich.

Die Darstellung mit dem Calender hab ich aber noch nicht so hinbekommen wie ich´s wollte sad

phpman · 22. November 2012 17:26

Wo im Calender Template ist denn die Darstellung (css) für die Vorschau versteckt?

Wenn ich auf den Termin Klicke kommt der "<h1>" = 12px muss ich das auch im "haupt"CSS
einbauen oder gibt es für den Calender ein extra CSS File (konnt noch keines finden sad
Würde gern die <h1> einstellung durch flexible "css pxXX" paramter ersetzen.

geht da auch ein

Hier klicken, um den Code zum Kopieren zu markieren

#calender

.calender a {
     color: #333333;
	background: #F2F2F2;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 150%;
	font-size: 12px;
}

???

Cherry · 22. November 2012 17:35

das mit dem Kalender wird auch noch.

Für die Anzeige in der rechten Spalte ist wohl das Listentemplate zuständig.
Also CGCalendar>Templates>Listentemplate>Sample

Die große Überschrift ist hier:

Hier klicken, um den Code zum Kopieren zu markieren

<h1>{if isset($day) && $day > 0}{$day} {/if}{if isset($month) && $month > 0}{$month_names[$month]}{/if} {$year}</h1>

Du kannst aus dem h1 ein h3 machen, dann paßt das mit der Überschrift in der linken Spalte.

Überschriften zu verwenden ist sinnvoll, weil es dein Dokument strukturiert.
Wenn du keine Überschrift willst, kannst du span verwenden um trotzdem ne class zu vergeben.
Sieht dann so aus:

Hier klicken, um den Code zum Kopieren zu markieren

<span class="blablub"> irgendein Text </span>

und in der CSS Datei dann so:

Hier klicken, um den Code zum Kopieren zu markieren

.blablub {
font-size: 12px;
....; 

}

Wenn deine Deklarationen nicht ziehen, mußt du mit Firebug versuchen herauszufinden wer's überschreibt

Beitrag geändert von Cherry (22. November 2012 17:36)

phpman · 23. November 2012 23:31

die Anpassungen im Calender hab vorerst ohne direkte einbindung im css gemacht....hole ich aber noch nach.

Mit der Sache im FormBulider (Template) (siehe Contact) hab ich noch ein problemchen wegen
dem verschieben der Felder (Formatierung) wenn ich mir das Template anschaue welche ich als Sample habe find ich hier die Feld Definiation nicht so recht. Da es sehr Chaotisch aussieht. :-(

Bzgl. rest Formatierung sollte ich nach möglichkeit alles in einem "zentralen" CSS File machen oder eher extern mehrere nutzen ? Was ist Eurer Meinung nach besser?

Andynium · 23. November 2012 05:52

phpman schrieb:

Bzgl. rest Formatierung sollte ich nach möglichkeit alles in einem "zentralen" CSS File machen oder eher extern mehrere nutzen ? Was ist Eurer Meinung nach besser?

Da der cms_stylesheet Tag die medial zusammengehörigen CSS-Dateien zusammenfasst, ist es kein Problem, die CSS übersichtlich zu "portionieren".

Cherry · 23. November 2012 08:59

Versuche mal, das mitgelieferte Stylesheet mit deinem Template zu verbinden.
Damit löst du evtl schon mal die Darstellungsprobleme.

Also unter Layout>Template deines heraussuchen. In jener Zeile auf das CSS Icon klicken.
Du siehst jetzt die Liste der bereits verbundenen Stylesheets.
In der Dropdownliste wähle Formbuilder Default Style aus.
Und füge es hinzu. Damit sieht das Ganze schon mal passabel aus. Damit die Farben zu deinem GalaPurity Thema passen, tauscht man die Orangen Farben gegen die roten aus. So sieht das geänderte Formbuilder Stylesheet dann aus:

Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]

/* Sample FormBuilder CSS base */
form {
	margin-top: 0
}
form, td, th, li {
	font-size: 100%
}
form div {
	margin-bottom: 0
}
fieldset div {
	margin-bottom: 0.5em;
	margin-left: 1em;
}
fieldset div div {
	margin-top: 0.5em;
	margin-left: 1em
}
fieldset {
	margin-bottom: 1em;
	border: 1px solid #cc0000;
	padding: 0.5em
}
fieldset label {
	width: auto;
}
legend {
	color: #FFF;
	background: #cc0000;
	font-style: italic;
	font-size: 1.2em;
	margin-bottom: 0.5em;
	padding: 0.2em;
	width: auto;
	border: 1px solid #CCC
}
textarea {
	margin: 0.5em 0;
	width: 98%;
	height: 6em
}
/* Apply this class to text/select input fields with shorter labelsto help alignment */
.short-label label {
	float: left;
	width: 10em
}
.short-label fieldset div input, .short-label fieldset div select {
	width: 16em
}
/* Pretty up your Captcha image output */
.captcha {
	margin: 0.5em 0;
	width: 200px;
	text-align: center
}
.captcha img {
	border: 1px solid #cc0000;
	margin-bottom: 0.5em
}
.captcha input {
	width: 196px;
	margin-top: 0.5em
}
/* Just a bit more room for the Submit button */
.submit {
	margin-top: 0.5em
}
.contactform input {
	border: 1px solid #cc0000;
}
.contactform input.checkbox {
	border: none;
}
.contactform label {
	display: block;
	float: left;
	width: 150px;
}
.contactform label.label {
	display: inline;
	float: none;
	width: 50px;
	font-size: 10px;
}
.contactform textarea {
	background-color: transparent;
	border: 1px solid #cc0000;
}
.formbuilderform .message {
	line-height: 16px;
	padding: 0 0 8px 0;
}

Beitrag geändert von Cherry (23. November 2012 16:07)

phpman · 30. November 2012 21:22

Hallo,

ich hab nun noch ein "neues" Problemchen ;-)

Es kam nun der Wunsch zutage, das 3spalten layout 1:1 zu dem oben genutzen Top Logo anzupassen
sprich die Breite von "left" und "right" müsste ich ändern nur find ich trotz Firebug grad nicht die Stelle wo
ich das im css ändern muss :-(

Könnt Ihr mir hier weiterhelfen ?!?

Cherry · 01. Dezember 2012 20:26

das findest du in diesem Stylesheet:
icms.info : GalaPurity - 3 columns, sidebar left

phpman · 02. Dezember 2012 23:39

hmm.... wenn ich die werte dort ändere passt danach der rest nicht mehr :-(

Hier klicken, um den Code zum Kopieren zu markieren

div#panel-wrapper {
	background: #ffffff url([[root_url]]/uploads/icms.info/c-bg1.gif) repeat-y 18% 0;
}
div#navigation{float:left;width:17%;margin-left:-100%} 
div#wrapper{float:left;width:100%}
div#content{margin: 0 18%}
div#extra{float:left;width:17%;margin-left:-17%}

die alten werte waren:

div#content alt extra = 20% NEU = 18%
div#navigation alt extra = 20% / -100% NEU = 17% -100%
div#extra alt extra = 20% / - 20% NEU = 17% -17%

danach siehts aber so verschoben aus wie jetzt.

Wie muss ich den rest verschieben?

Cherry · 02. Dezember 2012 10:57

versuch das mal so:

Hier klicken, um den Code zum Kopieren zu markieren

[== css ==]
div#panel-wrapper {
	background: #ffffff url(/uploads/icms.info/c-bg1.gif) repeat-y 22% 0; /*Trennlinie links */
}
div#content{margin: 0 18% 0 22%} /* oben, rechts, unten,links */

ansonsten probiers mit Firebug:

wenn du im unteren Teil im HTML Text auf ein Element klickst wird das in deiner Seite farbig hinterlegt:
blau für den eigentlichen Inhalt, lila fürs padding ( = Innenabstand) gelb für die margins (=Außenabstand). Hast du eventuell schon gesehen.

Im rechten Teil by 'styles' zeigt Firebug dir an, wie die hinterlegten css-Eigenschaften sind. Dort kannst du die Werte ändern und schauen was passiert. Wenn's paßt, kannst du dir das kopieren und ins css einfügen.

phpman · 02. Dezember 2012 17:16

von der Theoretischen seite geht das aber es passt dann trotzdem nix.

Hab es mal so geändert aber es bleiben diverse sachen falsch.

1. die Trennlinie unter "startseite" im sidbar bereich
2. Wenn ich z.Z.b auf einen Untermenuepunkt (wandern) gehe erscheint
das Untermenue Wanderführer welches von der Darstellung dann noch daneben ist und ich finde den Parameter nicht welche ich im CCS verschieben muss damit die Darstellung passt.
3. das Content Fenster wird auch nicht breiter ist nun eben nach "rechts" verschoben und
zwischen "Sidebar" und "content" ist mehr platz.

Die werte welche ich mit FBug auslesen kann hab ich versucht aber es passiert nix.

Klenkes · 02. Dezember 2012 18:48

phpman schrieb:

1. die Trennlinie unter "startseite" im sidbar bereich
2. Wenn ich z.Z.b auf einen Untermenuepunkt (wandern) gehe erscheint
das Untermenue Wanderführer welches von der Darstellung dann noch daneben ist und ich finde den Parameter nicht welche ich im CCS verschieben muss damit die Darstellung passt.

Dass dein Menü nicht mehr nach rechts in den Content rutscht kannst du letztendlich nur das DIV navigation schmäler machen.
div#navigation{float:left;width:17%;margin-left:-100%}
17% statt 20%

Die Linie unter dem Menü gehört zum div.box = hdot.gif
Dies rausnehmen:

Hier klicken, um den Code zum Kopieren zu markieren

background: url("http://edit.schwarzwaldverein-gechingen.de/uploads/icms.info/hdot.gif") 50% 100% repeat-x transparent;

Ansonsten ist das Ganze so ein elendiglich verschachtelter Mist! Dass das überhaupt funktioniert wundert mich.

phpman · 02. Dezember 2012 18:59

wie müsste ich es Deiner Meinung nach ändern? Als Basis hatte ich damals das "gala_purity" templete verwendet.

Bin gern bereit das zu ändern, wäre für Tips von Dir dankbar.

phpman · 19. Dezember 2012 13:51

kann ich einem Layout sagen das "rechter" frame "roten hintergrund" und linker einen "blauen" hintergrund bekommt ?? Geht das ? oder ist das nur "global" zu sehen über alles ?

faglork · 19. Dezember 2012 16:01

phpman schrieb:

kann ich einem Layout sagen das "rechter" frame "roten hintergrund" und linker einen "blauen" hintergrund bekommt ?? Geht das ? oder ist das nur "global" zu sehen über alles ?

Wenn ich dich richtig verstehe, wills du nur auf EINER Seite die Hintergründe ändern, ja?

--> einfach eine entsprechende Anweisung in die "Seitenspezifischen Metadaten".

Servus,
Alex

Janl · 19. Dezember 2012 18:35

Bitte mal sehen bei
http://www.w3schools.com

sehr hilfreich.

mfg
Jan

phpman · 20. Dezember 2012 09:51

@faglork hmm....??

Die bereichen sind einzelne Div Container wie färb ich die ein ?

Janl · 20. Dezember 2012 10:52

http://www.w3schools.com/css/css_background.asp

Forum für CMS/made simple

#76 22. November 2012 10:39

Re: Layout Template

#77 22. November 2012 15:48

Re: Layout Template

#78 22. November 2012 17:03

Re: Layout Template

#79 22. November 2012 17:26

Re: Layout Template

#80 22. November 2012 17:35

Re: Layout Template

#81 23. November 2012 23:31

Re: Layout Template

#82 23. November 2012 05:52

Re: Layout Template

#83 23. November 2012 08:59

Re: Layout Template

#84 30. November 2012 21:22

Re: Layout Template

#85 01. Dezember 2012 20:26

Re: Layout Template

#86 02. Dezember 2012 23:39

Re: Layout Template

#87 02. Dezember 2012 10:57

Re: Layout Template

#88 02. Dezember 2012 17:16

Re: Layout Template

#89 02. Dezember 2012 18:48

Re: Layout Template

#90 02. Dezember 2012 18:59

Re: Layout Template

#91 19. Dezember 2012 13:51

Re: Layout Template

#92 19. Dezember 2012 16:01

Re: Layout Template

#93 19. Dezember 2012 18:35

Re: Layout Template

#94 20. Dezember 2012 09:51

Re: Layout Template

#95 20. Dezember 2012 10:52

Re: Layout Template

Fußzeile des Forums