ja_purity und faux columns

Moderator: General Support Moderators

Forum rules
Forumregeln
Locked
ttpl
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Wed Jul 07, 2010 10:17 am

ja_purity und faux columns

Post by ttpl » Wed Jul 07, 2010 10:59 am

hallo,

ich arbeite mit joomla 1.5.18 und ja_purity 1.20. ich habe ein wenig an dem template rumgeschraubt und meinen wünschen angepasst, sodass ich nun einen aufbau habe, der aus header, linker navigation (ja_col1) und inhaltsfeld (content) besteht.

mein problem ist ein sehr altes - zwei divs (ja_col1 und ja_content), die gleich lang sein sollten (faux columns), jedoch ist der inhalt in der navigation (ja_col1) meist kürzer als der inhalt im content-feld. am ende des inhalts wird die navigation dann abgeschnitten und ich habe eine "hässliche lücke" - habe ein bild angehängt, man sieht es nur bei genauem hinschauen, da die farbtöne sich sehr ähneln.

nun zu meinem problem: faux columns wäre ja an und für sich kein problem, das prinzip habe ich verstanden und auch schon mehrmals angewandt. allerdings verwirrt mich ja_purity, da ich css-befehle unter anderem in css/template.css, aber auch in styles/background/lighter/style.css finde, dazu habe ich noch FÜNF eltern-divs vor ja-contentwrap und ja-col1. diese fünf divs heißen:

ja-containerwrap-fr
ja-containerwrap2
ja-container
ja-container2
ja-mainbody-fr

meiner beobachtung nach haben diese fünf divs alle die gleiche größe und den gleichen bereich, allerdings werden ihnen unterschiedliche attribute (background, background-image, etc.) in verschiedenen dateien (template.css und style.css) zugewiesen, unter anderem hat EIN div sogar MEHRERE backgrounds zugewiesen, wenn ich das richtig erkenne, z.B. hier ein kleines beispiel:

Code: Select all

#ja-containerwrap-f {

	background: url(../images/cwf-bg.gif) repeat-x top left #F6F6F6;
	
	width: 1000px;

}



#ja-containerwrap-f #ja-containerwrap2 {

	background: none;
	
	width: 1000px;

}



#ja-containerwrap-f #ja-container,

#ja-containerwrap-f #ja-container2 {

	background: none;
	
	width: 1000px;

        }
hier hat ja-containerwrap-f ja drei (bzw. tatsächlich zwei) verschiedene zuweisungen - ist das wirklich so, oder bezieht sich die zuweisung immer nur auf das letztgenannte element (hier: ja-containerwrap2 und ja-container2)?

ihr erkennt meine verwirrung .... ich verstehe diesen code nicht, kann nicht nachvollziehen, wie man so etwas zusammenwuseln kann und vor allem wofür man fünf eltern divs braucht um zwei popelige divs (evtl. auch 3) nebeneinander laufen zu lassen..

habe schon sehr viel zeit in die modifikation des templates investiert und könnte meine website nur schwer mit einem alternativen template genauso herzaubern, die investierte zeit ist mir dafür ehrlich gesagt ein wenig zu schade.. vielleicht kann jemand helfen?!

ich danke im voraus.

ttpl
You do not have the required permissions to view the files attached to this post.

Chapter2
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Sat Feb 06, 2010 10:20 am

Re: ja_purity und faux columns

Post by Chapter2 » Mon Jul 12, 2010 7:25 am

Welche CSS Einstellung greift, hängt von der Gewichtigung und Reihenfolge des Selektors ab.

Vergib im Kopf einfach folgende Punktzahl:
Jede id (#): 100 Punkte
Jede Klasse (.): 10 Punkte
Jedes Tag: 1 Punkt

Beispiele:
html body #wrapper { width: 800px; margin-top: 1em; } // 1 + 1 + 100 = 102 Punkte
#wrapper { width: 600px; } // 100 Punkte => wird vom obigen überschrieben

Bei gleicher Punktzahl wird der letzte passende Selektor verwendet. Die Aufteilung in verschiedene CSS-Dateien soll mehr Übersicht bringen, verwirrt aber meist nur mehr und erhöht bei vielen Besuchern die Anzahl der Zugriffe auf den Server stark.

Am einfachsten kommt man mit Firebug - Firefox addon den Problemen auf die Schliche.

Viele Grüße,
Arnd

ttpl
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Wed Jul 07, 2010 10:17 am

Re: ja_purity und faux columns

Post by ttpl » Fri Jul 16, 2010 9:41 am

Wie meinst du das mit den 100/10/1 Punkten? Versteh ich nicht ganz; mit Firebug / Safari Web Inspector habe ich gearbeitet und den Fehler nicht finden können, bin langsam am verzweifeln, weiß nicht, wie ich diese blöde faux columns hinbekomme.. >:(

edit:

dank sorgfältiger Firebug Überprüfung konnte ich den Fehler eingrenzen auf das div ja-contentwrap, was ich schonmal sehr komisch finde, da ja-contentwrap eigentlich nur die rechte seite codiert und nicht das gesamte feld.

hier mal kurz, wie ich den fehler eingegrenzt habe:

habe die seite komplett laden lassen und anschließend alle divs geöffnet; danach von unten nach oben gelöscht; als ich das div ja-contentwrap gelöscht habe; war das hier dargestellte auch nicht mehr zu sehen (der blau markierte bereich ist "ja-contentwrap"):

Image

stört euch nicht am farbunterschied vom bild und dem hintergrund der linken spalte, der ist in der normalen ansicht nicht mehr zu sehen, es geht mir nur darum, die linke spalte bis zum blau markierten "hinzuziehen".

Und hier mal die ganzen sachen, die FireBug mir angibt:

CSS Style

Image


Computed Style

Image


Layout

Image


Kann wer helfen?

Danke,
ttpl

Chapter2
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Sat Feb 06, 2010 10:20 am

Re: ja_purity und faux columns

Post by Chapter2 » Fri Jul 16, 2010 10:56 am

Ohne den zugehörigen generierten HTML Code fällt die Lösung nicht so einfach. Kannst du einen Link zu der Seite posten, damit ich es mir live anschauen kann?

Viele Grüße,
Arnd

Chapter2
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Sat Feb 06, 2010 10:20 am

Re: ja_purity und faux columns

Post by Chapter2 » Sat Jul 17, 2010 11:18 am

Bei der Struktiererung der CSS-Datei vom purity Template bekomme ich langsam das Gefühl, dass die Entwickler selbst nicht mehr wissen, was wo steht :eek:

Ändere in CSS-Datei /ja_purity/styles/background/lighter/style.css:

Code: Select all

/* Von Zeile 184 */
#ja-container { background:url("images/c-bg1.gif") repeat-y scroll 18% 0 transparent; }

/* in */
#ja-container { background:url("images/c-bg1.gif") repeat-y scroll 15% 0 transparent; }
/* oder */
#ja-container { background:url("images/c-bg1.gif") repeat-y scroll -150px 0 transparent; }
Viele Grüße,
Arnd

ttpl
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Wed Jul 07, 2010 10:17 am

Re: ja_purity und faux columns

Post by ttpl » Sat Jul 17, 2010 11:36 am

Image

You're my hero!

Es hat funktioniert!

Leider habe ich jetzt aber den Hintergrund nicht mehr direkt unter dem Header, wie bekomme ich den hier wieder da rein?

Image

Chapter2
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Sat Feb 06, 2010 10:20 am

Re: ja_purity und faux columns

Post by Chapter2 » Sat Jul 17, 2010 12:27 pm

Jeder Hintergrund braucht Platz zum Leben ;-)

Datei ja_purity/styles/background/lighter/style.css (Zeile 212)

Code: Select all

padding-top: 36px; // die Höhe der Hintergrundgrafik
Andernfalls wird einfach eine Hintergrundgrafik der inneren Blöcke drüber "tapeziert"

VG,
Arnd


Locked

Return to “Template, CSS und Designfragen”